/* =========================================================
   ZARANIA — Złote Gody (demo, pakiet „Klasyczna")
   Paleta i typografia wg BRAND.md
   ========================================================= */

:root{
  /* paleta „świt / brzask" */
  --ivory:      #F7F2EA;
  --ivory-deep: #ECE3D2;
  --ink:        #1B2233;
  --ink-soft:   #2A3247;
  --gold:       #C9A24B;
  --gold-bright:#DCBB6B;
  --blush:      #E8C9B5;
  --plum:       #4A2E40;
  --plum-deep:  #34202E;

  --maxw: 1120px;
  --gutter: clamp(1.25rem, 5vw, 4rem);

  --serif:  "Playfair Display", Georgia, serif;
  --script: "Cormorant Garamond", Georgia, serif;
  --sans:   "Inter", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem, .55vw + .9rem, 1.075rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }

::selection{ background:var(--gold); color:var(--ink); }

.skip-link{
  position:absolute; left:50%; top:-3rem; transform:translateX(-50%);
  background:var(--ink); color:var(--ivory); padding:.6rem 1rem;
  border-radius:0 0 .4rem .4rem; z-index:50; transition:top .2s;
}
.skip-link:focus{ top:0; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

a{ color:inherit; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }

/* ---------- wspólne elementy typograficzne ---------- */
.eyebrow{
  font-family:var(--sans);
  font-size:.72rem; font-weight:600;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--plum);
  margin:0 0 1.2rem;
}
.eyebrow--center{ text-align:center; }
.eyebrow--light{ color:var(--blush); }

.h2{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(1.9rem, 4.5vw, 3rem);
  line-height:1.1;
  letter-spacing:.01em;
  margin:.4rem 0 0;
}
.h2--light{ color:var(--ivory); }

.lead{
  font-family:var(--script);
  font-size:clamp(1.5rem, 3.4vw, 2.35rem);
  line-height:1.4;
  font-weight:500;
  margin:0;
}
.lead em{ font-style:italic; color:var(--plum); }

.muted{ color:color-mix(in srgb, var(--ink) 62%, transparent); }

/* sygnetka „wschodzące słońce" (znak Zarania), CSS-only */
.sun{
  --s: 34px;
  display:inline-block; position:relative;
  width:var(--s); height:calc(var(--s) / 2 + 9px);
  margin-bottom:1.1rem;
}
.sun::before{ /* półdysk */
  content:""; position:absolute; left:50%; bottom:9px; transform:translateX(-50%);
  width:var(--s); height:calc(var(--s)/2);
  background:var(--gold);
  border-radius:var(--s) var(--s) 0 0;
}
.sun::after{ /* linia horyzontu */
  content:""; position:absolute; left:50%; bottom:6px; transform:translateX(-50%);
  width:calc(var(--s) * 2.1); height:2px;
  background:var(--ink);
}
.sun--gold::after{ background:var(--gold); opacity:.5; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  --split:60%;
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  padding:var(--gutter);
  padding-bottom:clamp(3.5rem, 9vh, 7rem);
  overflow:hidden;
  isolation:isolate;
}
/* grupa porównawcza (parallax-owany, lekko powiększony, by nie odsłonić krawędzi) */
.hero__compare{ position:absolute; left:0; right:0; top:-10%; height:120%; z-index:1; will-change:transform; }
.hero__media,
.hero__then{ position:absolute; inset:0; }
.hero__media img,
.hero__then img{ width:100%; height:100%; object-fit:cover; object-position:50% 38%; }
.hero__media img{ animation:kenburns 22s var(--ease) infinite alternate; }

/* MOBILE (domyślnie): crossfade 2026 ⇄ 1976 przełącznikiem */
.hero__then{ opacity:0; transition:opacity .55s var(--ease); }
.hero.is-then .hero__then{ opacity:1; }

/* przełącznik segmentowy (tylko mobile) */
.hero__switch{
  position:absolute; left:50%; top:clamp(5rem,15vh,8rem); transform:translateX(-50%); z-index:10;
  display:inline-flex; gap:2px; padding:4px; border-radius:999px;
  background:color-mix(in srgb, var(--ivory) 86%, transparent);
  border:1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  box-shadow:0 8px 20px -10px rgba(27,34,51,.5);
  backdrop-filter:blur(4px);
}
.hero__switch-btn{
  font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.18em; padding:.55rem 1.15rem; border:0; border-radius:999px;
  background:transparent; color:var(--ink); cursor:pointer;
  transition:background .25s, color .25s;
}
.hero__switch-btn.is-active{ background:var(--gold); color:var(--ink); }

/* desktop: chowamy suwak/linię/lata domyślnie (pokażemy w @media min-width) */
.hero__range,
.hero__divider,
.hero__tag{ display:none; }

/* niewidoczny suwak (mysz + dotyk + klawiatura) na całym hero */
.hero__range{
  position:absolute; inset:0; width:100%; height:100%; margin:0;
  z-index:7; cursor:ew-resize; opacity:0; -webkit-appearance:none; appearance:none; background:transparent;
}
.hero__range::-webkit-slider-thumb{ -webkit-appearance:none; width:48px; height:100vh; cursor:ew-resize; }
.hero__range::-moz-range-thumb{ width:48px; height:100vh; border:0; background:transparent; cursor:ew-resize; }

/* widoczna linia podziału + uchwyt */
.hero__divider{
  position:absolute; top:0; bottom:0; left:var(--split,50%); width:2px;
  transform:translateX(-1px); z-index:8; pointer-events:none;
  background:linear-gradient(var(--gold), var(--gold-bright));
  box-shadow:0 0 14px rgba(201,162,75,.55);
}
.hero__grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%;
  background:var(--ivory); border:1px solid color-mix(in srgb, var(--gold) 60%, transparent);
  display:grid; place-items:center; color:var(--plum);
  box-shadow:0 6px 18px -6px rgba(27,34,51,.6);
}
.hero__hint{
  position:absolute; top:calc(50% + 38px); left:50%; transform:translateX(-50%);
  white-space:nowrap;
  font-size:.58rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:var(--plum); background:color-mix(in srgb, var(--ivory) 80%, transparent);
  padding:.2rem .5rem; border-radius:2px;
  transition:opacity .5s; animation:hintPulse 2.2s var(--ease) infinite;
}
.hero.is-touched .hero__hint{ opacity:0; animation:none; }
@keyframes hintPulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

.hero__tag{
  position:absolute; top:clamp(1.5rem,4.5vh,2.6rem); z-index:8; pointer-events:none;
  font-size:.64rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink); padding:.42rem .85rem; border-radius:999px;
  background:color-mix(in srgb, var(--ivory) 82%, transparent);
  border:1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  box-shadow:0 6px 16px -8px rgba(27,34,51,.45);
  backdrop-filter:blur(3px);
}
.hero__tag--then{ left:clamp(1.4rem,5vw,3rem); }
.hero__tag--now{ right:clamp(1.4rem,5vw,3rem); color:var(--plum); }
@keyframes kenburns{
  from{ transform:scale(1.04); }
  to  { transform:scale(1.12); }
}
.hero__veil{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    linear-gradient(to top, rgba(27,34,51,.55) 0%, rgba(27,34,51,.12) 30%, transparent 55%),
    linear-gradient(105deg, rgba(247,242,234,.92) 0%, rgba(247,242,234,.55) 32%, transparent 60%);
}

/* żywe światło od okna — delikatnie „oddycha" */
.hero__glow{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:radial-gradient(58% 52% at 70% 28%, rgba(255,223,162,.42), rgba(255,223,162,.10) 45%, transparent 66%);
  mix-blend-mode:screen;
  animation:godray 15s ease-in-out infinite alternate;
}
@keyframes godray{
  0%  { opacity:.45; transform:translate(0,0) scale(1); }
  100%{ opacity:.9;  transform:translate(-2.5%,1.5%) scale(1.07); }
}

/* ziarno filmowe — faktura zamiast płaskiego stocka */
.hero__grain{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  opacity:.5; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size:150px 150px;
}

/* grawerowana rama + krest */
.hero__frame{
  position:absolute; inset:clamp(12px,2.2vw,22px); z-index:9; pointer-events:none;
  border:1px solid color-mix(in srgb, var(--gold) 52%, transparent);
}
.hero__crest{
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  width:clamp(52px,7vw,66px); height:clamp(52px,7vw,66px);
  border-radius:50%; background:var(--ivory);
  border:1px solid color-mix(in srgb, var(--gold) 52%, transparent);
  display:grid; place-items:center;
}
.hero__crest .sun{ --s:24px; margin:0; transform:translateY(3px); }

.hero__inner{ position:relative; z-index:6; max-width:30rem; pointer-events:none; }
.hero__eyebrow{ color:var(--plum); }

.hero__names{
  font-family:var(--script);
  font-weight:600; font-style:italic;
  font-size:clamp(3.4rem, 15vw, 6.6rem);
  line-height:.92;
  margin:0;
  color:var(--ink);
  display:flex; flex-direction:column;
}
.hero__amp{
  font-style:normal; color:var(--gold);
  font-size:.5em; margin:.05em 0 .05em -.02em;
  font-family:var(--serif); font-weight:500;
}
.hero__name{ display:block; overflow:hidden; padding-bottom:.04em; }
.hero__name > span{ display:block; }

.hero__occasion{
  font-family:var(--serif);
  font-size:clamp(1rem, 2.4vw, 1.3rem);
  letter-spacing:.02em;
  margin:1.4rem 0 0;
  color:var(--ink);
}

.hero__span{
  display:flex; align-items:center; gap:1rem;
  font-family:var(--serif); font-size:1.05rem; letter-spacing:.28em;
  color:var(--plum);
  margin:1.5rem 0 0;
}
.hero__span-mark{ flex:1; max-width:5rem; height:1px; background:var(--gold); }

.hero__meta{
  font-size:.78rem; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-soft);
  margin:1.6rem 0 0;
}

.hero__scroll{
  position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%); z-index:10;
  display:none; flex-direction:column; align-items:center; gap:.7rem;
  text-decoration:none;
}
.hero__scroll-label{
  font-size:.6rem; font-weight:600; letter-spacing:.34em; text-transform:uppercase;
  color:var(--ink-soft);
}
.hero__scroll-line{
  position:relative; display:block; width:1px; height:46px; overflow:hidden;
  background:color-mix(in srgb, var(--ink) 22%, transparent);
}
.hero__scroll-line::after{
  content:""; position:absolute; left:0; top:-50%; width:100%; height:50%;
  background:var(--gold); animation:scrolldrop 2.2s var(--ease) infinite;
}
@keyframes scrolldrop{
  0%{ top:-50%; } 60%,100%{ top:100%; }
}

/* =========================================================
   HERO — sekwencja „świtu" (tylko gdy html.anim)
   ========================================================= */
.hero__dawn{ display:none; }

html.anim .hero__dawn{
  position:absolute; inset:0; z-index:11;
  display:grid; place-items:center;
  background:
    linear-gradient(180deg, #141A29 0%, #1B2233 58%, #241B2E 100%);
  overflow:hidden;
}
html.anim .hero__dawn-glow{
  position:absolute; left:50%; top:58%; transform:translate(-50%,-50%) scale(.2);
  width:120vmax; height:120vmax; border-radius:50%;
  background:radial-gradient(circle, rgba(201,162,75,.55) 0%, rgba(201,162,75,.16) 30%, transparent 62%);
  opacity:0;
}
html.anim .hero__dawn-sun{ transform:translateY(54px) scale(.78); opacity:0; }
html.anim .hero__dawn-sun .ray{ opacity:0; }

/* stany początkowe treści hero */
html.anim .hero__eyebrow,
html.anim .hero__occasion,
html.anim .hero__span,
html.anim .hero__meta{ opacity:0; transform:translateY(18px); }
html.anim .hero__name > span{ transform:translateY(115%); }
html.anim .hero__amp{ opacity:0; transform:scale(.5); }
html.anim .hero__scroll{ opacity:0; }
html.anim .hero__frame{ opacity:0; }
html.anim .hero__divider,
html.anim .hero__tag,
html.anim .hero__switch{ opacity:0; }

/* ---- ODPALENIE po załadowaniu: html.anim.loaded ---- */
html.anim.loaded .hero__dawn-sun{ animation:sunRise 1.5s var(--ease) .15s forwards; }
html.anim.loaded .hero__dawn-sun .ray{ animation:rayIn .6s var(--ease) forwards; }
html.anim.loaded .hero__dawn-sun .ray:nth-child(1){ animation-delay:.95s; }
html.anim.loaded .hero__dawn-sun .ray:nth-child(2){ animation-delay:1.05s; }
html.anim.loaded .hero__dawn-sun .ray:nth-child(3){ animation-delay:1.05s; }
html.anim.loaded .hero__dawn-sun .ray:nth-child(4){ animation-delay:1.15s; }
html.anim.loaded .hero__dawn-sun .ray:nth-child(5){ animation-delay:1.15s; }
html.anim.loaded .hero__dawn-glow{ animation:glowBloom 1.7s var(--ease) .65s forwards; }
html.anim.loaded .hero__dawn{ animation:dawnLift 1.15s var(--ease) 1.6s forwards; }

html.anim.loaded .hero__name > span{ animation:nameUp 1s var(--ease) forwards; }
html.anim.loaded .hero__name:nth-of-type(1) > span{ animation-delay:1.75s; }
html.anim.loaded .hero__name:nth-of-type(2) > span{ animation-delay:1.9s; }
html.anim.loaded .hero__amp{ animation:ampIn .7s var(--ease) 2.05s forwards; }
html.anim.loaded .hero__eyebrow{ animation:fadeUp .8s var(--ease) 1.6s forwards; }
html.anim.loaded .hero__occasion{ animation:fadeUp .8s var(--ease) 2.2s forwards; }
html.anim.loaded .hero__span{ animation:fadeUp .8s var(--ease) 2.4s forwards; }
html.anim.loaded .hero__meta{ animation:fadeUp .8s var(--ease) 2.55s forwards; }
html.anim.loaded .hero__scroll{ animation:fadeUp 1s var(--ease) 2.9s forwards; }
html.anim.loaded .hero__frame{ animation:fadeOnly 1.3s var(--ease) 2.1s forwards; }
html.anim.loaded .hero__divider,
html.anim.loaded .hero__tag,
html.anim.loaded .hero__switch{ animation:fadeOnly 1.3s var(--ease) 2.35s forwards; }
@keyframes fadeOnly{ from{ opacity:0; } to{ opacity:1; } }

@keyframes sunRise{
  0%  { transform:translateY(54px) scale(.78); opacity:0; }
  45% { opacity:1; }
  100%{ transform:translateY(0) scale(1); opacity:1; }
}
@keyframes rayIn{ from{ opacity:0; } to{ opacity:.9; } }
@keyframes glowBloom{
  0%  { opacity:0; transform:translate(-50%,-50%) scale(.2); }
  55% { opacity:1; }
  100%{ opacity:.85; transform:translate(-50%,-50%) scale(1); }
}
@keyframes dawnLift{
  0%  { clip-path:inset(0 0 0 0); opacity:1; }
  55% { clip-path:inset(0 0 0 0); opacity:1; }
  100%{ clip-path:inset(49.6% 0 49.6% 0); opacity:0; visibility:hidden; }
}
@keyframes nameUp{ from{ transform:translateY(115%); } to{ transform:translateY(0); } }
@keyframes ampIn{ from{ opacity:0; transform:scale(.5); } to{ opacity:1; transform:scale(1); } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

/* =========================================================
   SECTION shell
   ========================================================= */
.section{
  padding:clamp(4.5rem, 11vh, 8rem) var(--gutter);
}
.section > *{ max-width:var(--maxw); margin-inline:auto; }

/* ---------- DEDYKACJA ---------- */
.dedykacja__grid{
  display:grid; gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.dedykacja__photo{ margin:0; }
.dedykacja__photo img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius:2px;
  box-shadow:0 30px 60px -30px rgba(27,34,51,.45);
}
.dedykacja__sign{
  font-family:var(--script); font-style:italic;
  font-size:1.3rem; color:var(--plum);
  margin:1.4rem 0 0;
}

/* ---------- ODLICZANIE ---------- */
.section--count{ text-align:center; background:var(--ivory-deep); }
.countdown{
  display:flex; justify-content:center; align-items:flex-start;
  gap:clamp(.6rem, 3vw, 2rem);
  margin-top:.6rem;
}
.cd__unit{ display:flex; flex-direction:column; align-items:center; min-width:3.4rem; }
.cd__num{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(2.6rem, 9vw, 4.6rem);
  line-height:1; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.cd__lab{
  font-size:.62rem; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--plum); margin-top:.7rem;
}
.cd__sep{
  width:7px; height:7px; border-radius:50%;
  background:var(--gold); margin-top:clamp(1.2rem,4vw,2rem);
  flex:0 0 auto;
}
.countdown__done{
  font-family:var(--script); font-style:italic;
  font-size:1.6rem; color:var(--plum); margin:.5rem 0 0;
}

/* ---------- HARMONOGRAM / złota nić ---------- */
.plan__head{ text-align:center; margin-bottom:clamp(2.5rem,6vw,4rem); }

.timeline{
  position:relative;
  list-style:none; margin:0 auto; padding:0;
  max-width:38rem;
  padding-left:2.6rem;
}
.timeline__track{
  position:absolute; left:9px; top:8px; bottom:8px; width:2px;
  background:color-mix(in srgb, var(--gold) 28%, transparent);
}
.timeline__progress{
  position:absolute; inset:0 0 auto 0; width:100%; height:0;
  background:linear-gradient(var(--gold), var(--gold-bright));
  transition:height .15s linear;
}
.t-item{
  position:relative;
  padding:0 0 clamp(2rem,5vw,2.8rem);
}
.t-item:last-child{ padding-bottom:0; }
.t-node{
  position:absolute; left:-2.6rem; top:.35rem;
  width:20px; height:11px; overflow:hidden;
}
.t-node::before{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:20px; height:10px;
  background:var(--ivory); border:2px solid var(--gold);
  border-bottom:none; border-radius:20px 20px 0 0;
  transition:background .4s var(--ease);
}
.t-item.is-active .t-node::before{ background:var(--gold); }

.t-time{
  font-family:var(--serif); font-weight:600;
  font-size:1.35rem; color:var(--gold);
  display:block;
}
.t-title{
  font-family:var(--serif); font-weight:600;
  font-size:1.18rem; margin:.25rem 0 .35rem; color:var(--ink);
}
.t-place{ margin:0; font-weight:500; color:var(--ink-soft); }
.t-note{ margin:.35rem 0 0; color:color-mix(in srgb, var(--ink) 60%, transparent); font-size:.95rem; }

/* ---------- SAVE THE DATE ---------- */
.section--save{ text-align:center; }
.save__card{
  background:var(--ink);
  color:var(--ivory);
  border-radius:3px;
  padding:clamp(2.5rem,7vw,4.5rem) clamp(1.5rem,5vw,3rem);
  position:relative; overflow:hidden;
}
.save__card::before{ /* delikatna złota poświata świtu */
  content:""; position:absolute; left:50%; top:-40%; transform:translateX(-50%);
  width:120%; height:80%;
  background:radial-gradient(ellipse at center, rgba(201,162,75,.22), transparent 70%);
  pointer-events:none;
}
.save__card .h2{ color:var(--ivory); }
.save__lead{ color:color-mix(in srgb, var(--ivory) 72%, transparent)!important; margin:.6rem auto 2rem; max-width:28rem; }
.save__actions{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; position:relative; }

.btn{
  font-family:var(--sans); font-weight:600;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.95rem 1.9rem; border-radius:2px;
  text-decoration:none; display:inline-block;
  transition:transform .25s var(--ease), background .25s, color .25s;
}
.btn:hover{ transform:translateY(-2px); }
.btn--solid{ background:var(--gold); color:var(--ink); }
.btn--solid:hover{ background:var(--gold-bright); }
.btn--ghost{ border:1px solid color-mix(in srgb, var(--ivory) 45%, transparent); color:var(--ivory); }
.btn--ghost:hover{ background:rgba(247,242,234,.08); }

/* ---------- MIEJSCE ---------- */
.place__band{ margin:0 0 clamp(2.5rem,6vw,4rem); max-width:none; }
.place__band img{
  width:100%; height:clamp(180px, 32vw, 360px); object-fit:cover;
  object-position:50% 60%;
}
.place__head{ text-align:center; margin-bottom:clamp(2rem,5vw,3rem); }

.place__grid{
  display:grid; gap:1.2rem;
  grid-template-columns:1fr;
}
.place__card{
  background:var(--ivory-deep);
  border:1px solid color-mix(in srgb, var(--gold) 22%, transparent);
  border-radius:3px;
  padding:clamp(1.6rem,4vw,2.2rem);
}
.place__name{
  font-family:var(--serif); font-weight:600;
  font-size:1.35rem; margin:.2rem 0 .7rem;
}
.place__addr{ margin:0 0 1rem; color:var(--ink-soft); }
.place__hint{ font-size:.9rem; margin:.8rem 0 0; }
.link-gold{
  font-weight:600; font-size:.82rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--plum); text-decoration:none;
  border-bottom:1px solid var(--gold); padding-bottom:2px;
  transition:color .2s;
}
.link-gold:hover{ color:var(--gold); }

.place__map{
  margin:1.2rem 0; border-radius:3px; overflow:hidden;
  border:1px solid color-mix(in srgb, var(--gold) 22%, transparent);
}
.place__map iframe{
  display:block; width:100%; height:180px; border:0;
  filter:grayscale(.25) contrast(.96) brightness(1.02);
}

/* ---------- GALERIA „CHWILE" (narracyjny album) ---------- */
.gallery__head{ text-align:center; margin-bottom:clamp(2.5rem,7vw,5rem); }
.moments{ display:flex; flex-direction:column; gap:clamp(3.5rem,9vw,6.5rem); }
.moment{ display:grid; gap:clamp(1.6rem,5vw,3.5rem); align-items:center; }

.moment__figure{ position:relative; margin:0; }
.moment__figure img{
  width:100%; display:block; object-fit:cover; aspect-ratio:4/5;
  box-shadow:0 34px 66px -38px rgba(27,34,51,.5);
}
.moment__figure--wide img{ aspect-ratio:3/2; }
/* złote passe-partout wyłaniające się zza kadru */
.moment__figure::before{
  content:""; position:absolute; inset:15px -15px -15px 15px; z-index:-1;
  border:1px solid color-mix(in srgb, var(--gold) 50%, transparent);
}

.moment__text{ max-width:30rem; }
.moment__label{
  display:flex; align-items:baseline; gap:.85rem; margin:0 0 1.1rem;
  font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.3em; text-transform:uppercase; color:var(--plum);
}
.moment__label span{
  font-family:var(--serif); font-weight:600; font-size:1.7rem;
  letter-spacing:0; line-height:1; color:var(--gold);
}
.moment__quote{
  font-family:var(--script); font-style:italic;
  font-size:clamp(1.5rem,3.2vw,2.2rem); line-height:1.4;
  color:var(--ink); margin:0;
}

/* ---------- DOBRZE WIEDZIEĆ ---------- */
.info__head{ text-align:center; margin-bottom:clamp(2rem,5vw,3rem); }
.info__grid{ display:grid; gap:1rem; grid-template-columns:1fr; }
.info__card{
  background:var(--ivory-deep);
  border:1px solid color-mix(in srgb, var(--gold) 18%, transparent);
  border-radius:3px; padding:clamp(1.4rem,3.6vw,1.9rem);
}
.info__card p{ margin:.3rem 0 0; color:var(--ink-soft); }
.info__card strong{ color:var(--plum); font-weight:600; }
.info__card .link-gold{ display:inline-block; margin-top:.9rem; }

/* ---------- NIESPODZIANKA / list ---------- */
.section--secret{
  background:var(--plum-deep);
  color:var(--blush);
  text-align:center;
  position:relative;
}
.secret__inner{ max-width:40rem; }
.secret__hint{
  font-size:.85rem; letter-spacing:.06em;
  color:color-mix(in srgb, var(--blush) 70%, transparent);
  margin:.8rem 0 2.5rem;
  transition:opacity .4s;
}
.letter{ position:relative; }

.seal{
  appearance:none; border:0; background:transparent; cursor:pointer;
  padding:0; display:inline-grid; place-items:center;
  transition:transform .3s var(--ease);
}
.seal:hover{ transform:scale(1.05); }
.seal__wax{
  width:96px; height:96px; border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(circle at 38% 32%, var(--gold-bright), var(--gold) 55%, #9c7a30 100%);
  box-shadow:0 12px 30px -8px rgba(0,0,0,.55), inset 0 2px 6px rgba(255,255,255,.35);
  position:relative;
}
.seal__wax::before{
  content:""; position:absolute; inset:7px; border-radius:50%;
  border:1.5px dashed rgba(52,32,46,.45);
}
.seal__mono{
  font-family:var(--serif); font-weight:700; font-size:1.9rem;
  color:var(--plum-deep); letter-spacing:.04em;
}

.letter.is-open .seal{ display:none; }

.letter__body{
  text-align:left;
  background:linear-gradient(180deg, #FBF7EF, #F3EADb);
  color:var(--ink);
  border-radius:3px;
  padding:clamp(1.8rem,5vw,2.8rem);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.6);
  font-family:var(--script);
  font-size:1.2rem; line-height:1.55;
}
.letter__body p{ margin:0 0 1rem; }
.letter__body p:last-child{ margin-bottom:0; }
.letter__body strong{ color:var(--plum); font-weight:600; }
.letter__sign{
  font-style:italic; color:var(--plum);
  text-align:right; font-size:1.25rem; margin-top:1.6rem!important;
}

/* animacja rozłożenia listu */
.letter.is-open .letter__body{
  animation:unfold .7s var(--ease) both;
  transform-origin:top center;
}
@keyframes unfold{
  from{ opacity:0; transform:translateY(-10px) scaleY(.96); }
  to  { opacity:1; transform:none; }
}

/* =========================================================
   STOPKA
   ========================================================= */
.foot{
  background:var(--ink);
  color:var(--ivory);
  text-align:center;
  padding:clamp(3.5rem,8vw,5rem) var(--gutter) clamp(2.5rem,6vw,3.5rem);
}
.foot__couple{
  font-family:var(--serif); font-size:1.15rem;
  margin:0 0 2.2rem; color:color-mix(in srgb, var(--ivory) 85%, transparent);
}
.foot__brand{
  display:inline-block; text-decoration:none; margin-bottom:.4rem;
  transition:transform .3s var(--ease);
}
.foot__brand:hover{ transform:translateY(-2px); }
.foot__seal{ display:block; }
.foot__credit{
  font-family:var(--script); font-style:italic;
  font-size:1.05rem; color:var(--gold);
  margin:1.2rem 0 0;
}

/* =========================================================
   REVEAL on scroll
   ========================================================= */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE — od mobile w górę
   ========================================================= */
@media (min-width:760px){
  .hero{ align-items:center; }
  .hero__inner{ max-width:34rem; }
  .dedykacja__grid{ grid-template-columns:0.85fr 1.15fr; }
  .place__grid{ grid-template-columns:repeat(3,1fr); }

  /* desktop: suwak zamiast przełącznika */
  .hero__switch{ display:none; }
  .hero__scroll{ display:flex; }
  .hero__range{ display:block; }
  .hero__divider{ display:block; }
  .hero__tag{ display:block; }
  .hero__then{
    opacity:1; transition:none;
    clip-path:inset(0 calc(100% - var(--split,60%)) 0 0);
  }

  .moment{ grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,5rem); }
  .moment--reverse .moment__figure{ order:2; }
  .moment--reverse .moment__figure::before{ inset:15px 15px -15px -15px; }
  .moment--reverse .moment__text{ text-align:right; margin-left:auto; }
  .moment--reverse .moment__label{ justify-content:flex-end; }

  .info__grid{ grid-template-columns:repeat(2,1fr); }
}

@media (min-width:1040px){
  .info__grid{ grid-template-columns:repeat(4,1fr); }
}

@media (min-width:1040px){
  .hero__names{ font-size:7rem; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  .reveal{ opacity:1; transform:none; }
  .hero__media img{ animation:none; transform:none; }
}