/*
  Decorative shapes export.
  Sources: artifacts/pracownia/src/components/{Decor,Motifs,Scenes,Waves,Shapes}.tsx,
  artifacts/pracownia/src/pages/{Home,Psychoterapia,Superwizja,ONas,Kontakt}.tsx,
  artifacts/pracownia/src/components/{Header,Footer}.tsx, artifacts/pracownia/src/index.css.
*/

/* Shared scene layer and section positioning */
.decor-section {
  position: relative;
  overflow: hidden;
}

.decor-layer {
  position: absolute;
  inset: 0;
  z-index: var(--shape-z-background);
  pointer-events: none;
  overflow: hidden;
}

.decor-track {
  position: relative;
  height: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.decor-content {
  position: relative;
  z-index: var(--shape-z-decoration);
}

.decor-item {
  position: absolute;
  pointer-events: none;
}

.zone-tl { top: var(--shape-inset, 28px); left: 0; transform: translateX(calc(-100% + var(--shape-peek, 26px))); }
.zone-tr { top: var(--shape-inset, 28px); right: 0; transform: translateX(calc(100% - var(--shape-peek, 26px))); }
.zone-bl { bottom: var(--shape-inset, 28px); left: 0; transform: translateX(calc(-100% + var(--shape-peek, 26px))); }
.zone-br { bottom: var(--shape-inset, 28px); right: 0; transform: translateX(calc(100% - var(--shape-peek, 26px))); }
.zone-left { top: 50%; left: 0; transform: translate(calc(-100% + var(--shape-peek, 26px)), -50%); }
.zone-right { top: 50%; right: 0; transform: translate(calc(100% - var(--shape-peek, 26px)), -50%); }

.motif-svg,
.decorative-motif-svg {
  display: block;
  pointer-events: none;
  fill: none;
}

.motif-stroke {
  stroke: var(--shape-line);
  stroke-opacity: var(--shape-line-opacity);
  stroke-width: var(--shape-stroke-thin);
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vector-effect: non-scaling-stroke;
}

.motif-stroke-secondary {
  stroke: var(--shape-line-secondary);
  stroke-opacity: var(--shape-line-secondary-opacity);
}

.motif-fill-soft { fill: var(--shape-soft); fill-opacity: var(--shape-soft-opacity); }
.motif-fill-rust { fill: var(--shape-rust); fill-opacity: var(--shape-rust-opacity); }
.motif-fill-gold { fill: var(--shape-gold); fill-opacity: var(--shape-gold-opacity); }
.motif-fill-gold-bright { fill: var(--shape-gold-bright); fill-opacity: var(--shape-gold-bright-opacity); }
.motif-fill-navy { fill: var(--shape-navy-fill); fill-opacity: var(--shape-navy-fill-opacity); }
.motif-fill-sand { fill: var(--shape-sand-fill); fill-opacity: var(--shape-sand-fill-opacity); }
.motif-fill-square { fill: var(--shape-square); fill-opacity: var(--shape-square-opacity); }
.motif-fill-square-2 { fill: var(--shape-square-2); fill-opacity: var(--shape-square-2-opacity); }
.motif-fill-dot { fill: var(--shape-dot); fill-opacity: var(--shape-dot-opacity); }

/* Motif library SVG boxes. Scale in React multiplies width and height; here use --shape-scale. */
.motif-soft-thread { width: calc(224px * var(--shape-scale, 1)); height: calc(84px * var(--shape-scale, 1)); }
.motif-corner-blocks { width: calc(160px * var(--shape-scale, 1)); height: calc(140px * var(--shape-scale, 1)); }
.motif-small-accent-cluster { width: calc(60px * var(--shape-scale, 1)); height: calc(44px * var(--shape-scale, 1)); }
.motif-portal-line { width: calc(140px * var(--shape-scale, 1)); height: calc(188px * var(--shape-scale, 1)); }
.motif-arch-block { width: calc(284px * var(--shape-scale, 1)); height: calc(208px * var(--shape-scale, 1)); }
.motif-vertical-bar-semicircle { width: calc(72px * var(--shape-scale, 1)); height: calc(212px * var(--shape-scale, 1)); }
.motif-big-semicircle { width: calc(260px * var(--shape-scale, 1)); height: calc(150px * var(--shape-scale, 1)); }
.motif-outline-rect { width: calc(224px * var(--shape-scale, 1)); height: calc(268px * var(--shape-scale, 1)); }
.motif-wave-line { width: calc(248px * var(--shape-scale, 1)); height: calc(88px * var(--shape-scale, 1)); }
.motif-open-curve { width: calc(210px * var(--shape-scale, 1)); height: calc(244px * var(--shape-scale, 1)); }
.motif-soft-blob { width: calc(320px * var(--shape-scale, 1)); height: calc(300px * var(--shape-scale, 1)); }
.motif-low-arch { width: calc(300px * var(--shape-scale, 1)); height: calc(132px * var(--shape-scale, 1)); }
.motif-solid-column { width: calc(88px * var(--shape-scale, 1)); height: calc(300px * var(--shape-scale, 1)); }
.motif-quarter-circle { width: calc(150px * var(--shape-scale, 1)); height: calc(150px * var(--shape-scale, 1)); }
.motif-wedge { width: calc(96px * var(--shape-scale, 1)); height: calc(300px * var(--shape-scale, 1)); }
.motif-arc-cut-block { width: calc(150px * var(--shape-scale, 1)); height: calc(300px * var(--shape-scale, 1)); }

/* Legacy DecorativeMotif SVG boxes */
.legacy-soft-loop-line { width: calc(150px * var(--shape-scale, 1)); height: calc(70px * var(--shape-scale, 1)); }
.legacy-u-arch-line { width: calc(120px * var(--shape-scale, 1)); height: calc(92px * var(--shape-scale, 1)); }
.legacy-corner-line-square { width: calc(118px * var(--shape-scale, 1)); height: calc(110px * var(--shape-scale, 1)); }
.legacy-vertical-rust-block { width: calc(80px * var(--shape-scale, 1)); height: calc(132px * var(--shape-scale, 1)); }
.legacy-gold-vertical-block { width: calc(80px * var(--shape-scale, 1)); height: calc(132px * var(--shape-scale, 1)); }
.legacy-micro-dot-square { width: calc(70px * var(--shape-scale, 1)); height: calc(50px * var(--shape-scale, 1)); }
.legacy-footer-arch-plant { width: calc(180px * var(--shape-scale, 1)); height: calc(200px * var(--shape-scale, 1)); }

/* Scene presets: default exported placements from Scenes.tsx */
.scene-hero-dominant { --shape-inset: -12px; --shape-peek: 40px; }
.scene-hero-secondary { --shape-inset: 24px; --shape-peek: 14px; }
.scene-hero-accent { --shape-inset: 22px; --shape-peek: 20px; --shape-scale: 0.95; }
.scene-content-dominant { --shape-inset: -8px; --shape-peek: 46px; }
.scene-content-secondary { --shape-inset: 28px; --shape-peek: 14px; }
.scene-content-accent { --shape-inset: 18px; --shape-peek: 20px; --shape-scale: 0.92; }
.scene-dark-face-watermark {
  position: absolute;
  bottom: 0;
  width: 260px;
  height: auto;
  opacity: 0.07;
  filter: brightness(0) invert(1);
  pointer-events: none;
  user-select: none;
}
.scene-dark-face-watermark.is-right { right: -2.5rem; }
.scene-dark-face-watermark.is-left { left: -2.5rem; }
.scene-dark-dominant { --shape-inset: -8px; }
.scene-dark-secondary { --shape-inset: 28px; --shape-peek: 14px; }
.scene-dark-accent { --shape-inset: 18px; --shape-peek: 20px; --shape-scale: 0.9; }
.scene-form-curve { --shape-peek: 14px; --shape-scale: 1; }
.scene-form-quarter { --shape-inset: -6px; --shape-peek: 20px; --shape-scale: 0.78; }
.scene-form-accent { --shape-inset: 16px; --shape-peek: 18px; --shape-scale: 0.88; }
.scene-center-dominant { --shape-inset: -4px; }
.scene-center-secondary { --shape-inset: 24px; --shape-peek: 14px; }
.scene-center-accent { --shape-inset: 16px; --shape-peek: 20px; --shape-scale: 0.85; }

/* Contextual photo/frame decorations */
.motif-image-frame,
.portal-photo-frame,
.framed-photo-frame,
.home-profile-frame-a,
.home-profile-frame-b {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-style: solid;
  border-width: var(--shape-frame-stroke);
  opacity: var(--shape-opacity-photo-frame);
}

.motif-image-frame,
.portal-photo-frame {
  transform: translate(1rem, 1rem);
  border-color: var(--shape-color-blue-gray);
  border-radius: var(--shape-radius-photo-arch);
  opacity: var(--shape-opacity-photo-frame-arch);
}

.framed-photo-frame,
.home-profile-frame-a {
  transform: translate(0.75rem, 0.75rem);
  border-color: var(--shape-color-blue-gray);
  border-radius: var(--shape-radius-md);
}

.home-profile-frame-b {
  transform: translate(-0.75rem, 0.75rem);
  border: 2px solid var(--shape-color-blue-gray);
  border-radius: var(--shape-radius-md);
}

.photo-frame-dark {
  border-color: var(--shape-color-sand);
}

.photo-soft-mask {
  position: relative;
  overflow: hidden;
  border-radius: var(--shape-radius-photo-arch);
  box-shadow: var(--shape-shadow-photo-medium);
}

.photo-round-mask {
  position: relative;
  overflow: hidden;
  border-radius: var(--shape-radius-md);
  box-shadow: var(--shape-shadow-photo-soft);
}

.photo-frame-square,
.home-hero-photo-square,
.home-hero-photo-square-secondary,
.home-profile-square-left,
.home-profile-square-right {
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--shape-color-rust);
  opacity: var(--shape-opacity-rust);
  pointer-events: none;
}

.photo-frame-square { top: -0.75rem; left: 2rem; }
.home-hero-photo-square { top: -0.75rem; left: -0.75rem; z-index: 10; }
.home-hero-photo-square-secondary { top: -1rem; left: 3.25rem; z-index: 10; }
.home-profile-square-left { top: -0.625rem; left: -0.625rem; }
.home-profile-square-right { top: -0.625rem; right: -0.625rem; background: var(--shape-color-accent-yellow); }

.home-hero-photo-bar,
.framed-photo-bar {
  position: absolute;
  width: 0.625rem;
  height: 2.25rem;
  background: var(--shape-color-accent-yellow);
  opacity: 0.9;
  pointer-events: none;
}

.home-hero-photo-bar { bottom: 2.5rem; left: -0.5rem; z-index: 10; }
.framed-photo-bar { top: 2.5rem; right: -0.5rem; height: 2rem; opacity: 0.85; }

/* Primitive div shapes from Shapes.tsx and GeoAccent */
.shape-circle,
.shape-rect,
.shape-outline,
.shape-arc,
.geo-accent {
  position: absolute;
  pointer-events: none;
}

.shape-circle,
.geo-dot {
  border-radius: var(--shape-radius-pill);
}

.shape-outline,
.shape-arc {
  border: 1px solid currentColor;
}

.shape-arc-open-up {
  border-top-width: 0;
  border-bottom-left-radius: var(--shape-radius-pill);
  border-bottom-right-radius: var(--shape-radius-pill);
}

.shape-arc-open-down {
  border-bottom-width: 0;
  border-top-left-radius: var(--shape-radius-pill);
  border-top-right-radius: var(--shape-radius-pill);
}

.shape-arc-open-left {
  border-left-width: 0;
  border-top-right-radius: var(--shape-radius-pill);
  border-bottom-right-radius: var(--shape-radius-pill);
}

.shape-arc-open-right {
  border-right-width: 0;
  border-top-left-radius: var(--shape-radius-pill);
  border-bottom-left-radius: var(--shape-radius-pill);
}

.geo-square,
.geo-dot,
.geo-semicircle {
  display: inline-block;
  width: var(--shape-size, 12px);
  height: var(--shape-size, 12px);
  background: var(--shape-color, var(--shape-color-rust));
  opacity: var(--shape-opacity, 0.85);
  pointer-events: none;
}

.geo-semicircle {
  height: calc(var(--shape-size, 12px) / 2);
  border-top-left-radius: var(--shape-radius-pill);
  border-top-right-radius: var(--shape-radius-pill);
}

/* Waves and logo watermark */
.wave-divider {
  width: 100%;
  overflow: hidden;
  line-height: 0;
  background: var(--shape-wave-from, var(--shape-color-bg));
}

.wave-divider svg {
  display: block;
  width: 100%;
  height: var(--shape-wave-height, 72px);
}

.wave-divider.is-flipped svg {
  transform: scaleX(-1);
}

.small-wave {
  display: block;
  width: 44px;
  height: 8px;
  fill: none;
}

.small-wave path {
  stroke: currentColor;
  stroke-width: 2px;
  stroke-linecap: round;
}

.organic-line {
  fill: none;
  preserve-aspect-ratio: none;
}

.organic-line path {
  stroke: currentColor;
  stroke-width: var(--shape-stroke-thin);
  stroke-linecap: round;
}

.face-mark,
.logo-face-background {
  pointer-events: none;
  user-select: none;
}

.logo-face-background {
  opacity: var(--shape-opacity-watermark-light);
}

.logo-face-background.is-dark {
  opacity: var(--shape-opacity-watermark-dark);
  filter: brightness(0) invert(1);
}

.footer-watermark {
  position: absolute;
  top: 50%;
  left: -64px;
  transform: translateY(-50%);
  width: 200px;
  height: auto;
  opacity: var(--shape-opacity-footer-watermark);
  pointer-events: none;
  user-select: none;
}

/* Page-specific inline decorations */
.card-corner-line {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border-top: 2px solid var(--shape-color-blue-gray);
  border-right: 2px solid var(--shape-color-blue-gray);
  opacity: 0.5;
  pointer-events: none;
}

.card-background-arch {
  position: absolute;
  right: -2.5rem;
  bottom: -2.5rem;
  width: 10rem;
  height: auto;
  opacity: 0.38;
  pointer-events: none;
}

.psychotherapy-list-square {
  flex-shrink: 0;
  width: 0.625rem;
  height: 0.625rem;
  background: var(--shape-color-rust);
  opacity: 0.85;
}

.psychotherapy-list-square.is-yellow {
  background: var(--shape-color-accent-yellow);
}

.cta-image-background,
.contact-map-background {
  position: absolute;
  inset: 0;
  z-index: var(--shape-z-background);
  overflow: hidden;
  pointer-events: none;
}

.cta-image-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-overlay,
.contact-map-overlay,
.lightbox-overlay {
  position: absolute;
  inset: 0;
  background: var(--shape-color-navy-dark);
}

.cta-overlay { opacity: var(--shape-opacity-overlay-strong); }
.cta-overlay.is-home { background: var(--shape-color-navy); opacity: var(--shape-opacity-overlay-home); }
.contact-map-overlay { opacity: var(--shape-opacity-overlay-strong); }
.lightbox-overlay { opacity: 0.94; }

.cta-border-frame {
  position: absolute;
  top: 2.5rem;
  right: 2.5rem;
  bottom: 2.5rem;
  left: 2.5rem;
  z-index: var(--shape-z-decoration);
  border: var(--shape-cta-frame-stroke) solid var(--shape-color-sand);
  opacity: var(--shape-opacity-cta-frame);
  pointer-events: none;
}

.cta-corner-square {
  position: absolute;
  top: 2rem;
  left: 2rem;
  z-index: var(--shape-z-decoration);
  width: 1rem;
  height: 1rem;
  background: var(--shape-color-rust);
  opacity: 0.8;
  pointer-events: none;
}

.cta-u-arch {
  display: block;
  width: 3rem;
  height: 1.5rem;
  border-left: 2px solid var(--shape-color-sand);
  border-right: 2px solid var(--shape-color-sand);
  border-bottom: 2px solid var(--shape-color-sand);
  border-bottom-left-radius: var(--shape-radius-pill);
  border-bottom-right-radius: var(--shape-radius-pill);
  opacity: var(--shape-opacity-cta-arch);
}

.contact-icon-circle,
.lightbox-round-control {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--shape-radius-pill);
  display: grid;
  place-items: center;
}

.contact-icon-circle {
  flex-shrink: 0;
  border: 1px solid var(--shape-color-blue-gray);
  color: var(--shape-color-ochre);
}

.lightbox-round-control {
  position: absolute;
  z-index: 20;
  color: var(--shape-color-surface);
  transition: background-color 0.2s;
}

.lightbox-round-control:hover {
  background: rgba(255, 255, 255, 0.10);
}

.gallery-hover-overlay {
  position: absolute;
  inset: 0;
  background: var(--shape-color-navy-dark);
  opacity: 0;
  transition: opacity 300ms;
}

.group:hover .gallery-hover-overlay,
.gallery-hover-overlay.is-hovered {
  opacity: 0.15;
}

.map-frame {
  position: relative;
  width: 100%;
  height: 18rem;
  background: var(--shape-color-navy-dark);
  overflow: hidden;
  border-radius: var(--shape-radius-md);
  border: 2px solid #CEC42C;
}

.header-active-dot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.625rem;
  display: flex;
  justify-content: center;
}

.header-active-dot::before {
  content: "";
  display: block;
  width: var(--shape-dot-size-nav);
  height: var(--shape-dot-size-nav);
  background: var(--shape-color-rust);
}

.brand-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.brand-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.6rem;
}

.brand-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: var(--shape-list-bullet-size);
  height: var(--shape-list-bullet-size);
  background: var(--shape-color-ochre);
  border-radius: 1px;
}