:root{
  --beige:#D0C7BE; --cream:#F6F1EC; --white:#FFFFFF;
  --ink:#4D4D4D; --soft:#A0A0A0; --line:#D8D1C9;
  --e:cubic-bezier(.22,.61,.36,1);
  --serif:"Cormorant",Georgia,serif; --script:"Tangerine","Cormorant",Georgia,cursive;
  --gutter:28px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#000;color:var(--ink);font-family:var(--serif);font-weight:400;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
.page{position:relative;max-width:480px;margin:0 auto;background:var(--white);overflow-x:clip;box-shadow:0 0 70px rgba(0,0,0,.7)}

/* ---------- szakaszok ---------- */
.sec{position:relative;padding:72px var(--gutter);text-align:center}
.note{background:var(--cream);padding:64px var(--gutter) 118px}
.day{background:var(--white);padding:88px var(--gutter) 36px}
.place{background:var(--white);padding:48px 0 36px}
.dress{background:var(--white);padding:44px var(--gutter) 96px}
.wait{background:var(--cream);padding:118px var(--gutter) 150px}

h2{margin:0;font-weight:500;font-size:21px;line-height:1.2;text-transform:uppercase;letter-spacing:.2em;text-indent:.2em;text-align:center}
.body{margin:26px 0 0;font-size:22px;line-height:1.38;text-wrap:balance}
.sub{margin:14px 0 0;font-style:italic;font-weight:400;font-size:23px}

.ill{mix-blend-mode:multiply}
.doves{width:72%;margin:0 auto 30px}
.note h2{margin-top:0}

/* virágok: a forgatás a végállapot része */
.flower{position:absolute;mix-blend-mode:multiply;pointer-events:none;z-index:3}
.peony-a{width:170px;right:-26px;bottom:-30px}
.anemone{width:180px;right:-44px;top:-16px}
.peony-b{width:200px;left:-50px;bottom:-6px}

/* csipke */
.seam{position:relative;height:0;z-index:2}
.ribbon{position:absolute;left:50%;top:-29px;width:160%;height:58px;transform:translateX(-50%);
  background:url(assets/lace-ribbon.webp) repeat-x center/auto 58px}

/* ---------- hero: a görgetés nyitja a kártyát ---------- */
.hero-track{position:relative;height:calc(100svh + 300svh)}
.hero{position:sticky;top:0;height:100vh;height:100svh;min-height:520px;background:var(--beige);overflow:hidden;container-type:size}
.frame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:max(100cqw,100cqh*9/16);height:max(100cqh,100cqw*16/9);perspective:1500px}
@container (min-aspect-ratio: 9/16){
  .frame{width:min(100cqw,100cqh*9/16);height:min(100cqh,100cqw*16/9)}
}
.base,.vid,.face{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shade{position:absolute;inset:0;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(48,34,20,.42) 0%,rgba(48,34,20,.16) 38%,rgba(48,34,20,0) 72%)}
.door{position:absolute;inset:0;transform-origin:2.4% 50%;transform-style:preserve-3d;will-change:transform}
.face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.back{transform:rotateY(180deg)}
.vid{z-index:3}
.panel{position:absolute;left:20%;width:60%;top:17%;height:69%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.4cqh;text-align:center}
.h-piece{margin:0;opacity:0;will-change:opacity,transform}
.h-std,.h-venue{font-style:italic;font-weight:400;font-size:clamp(14px,3.6cqh,24px);line-height:1.2}
.h-names{font-weight:500;line-height:1.12;text-transform:uppercase;letter-spacing:.2em;text-indent:.2em;font-size:clamp(22px,4.9cqh,38px)}
.nline{display:block;position:relative}
.n{display:inline-block}
.amp{font-family:var(--script);font-weight:400;font-size:2.15em;line-height:0;color:var(--soft);margin-left:.15em;letter-spacing:0;vertical-align:-.12em;text-transform:none}
.h-house{width:74%;mix-blend-mode:multiply}
.h-date{font-size:clamp(11px,2.9cqh,20px);letter-spacing:.22em;text-indent:.22em;text-transform:uppercase}
.hint{position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;transition:opacity .8s var(--e);pointer-events:none}
.hint.show{opacity:1}
.hint b{font-weight:500;font-size:10px;letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;color:var(--ink)}
.hint i{display:block;position:relative;width:1px;height:34px;background:rgba(77,77,77,.25);overflow:hidden}
.hint i::after{content:"";position:absolute;left:0;top:0;width:1px;height:12px;background:var(--ink);animation:slide 2.2s var(--e) infinite}
@keyframes slide{0%{transform:translateY(-12px)}100%{transform:translateY(34px)}}

/* ---------- idővonal ---------- */
.timeline{position:relative;margin-top:40px;text-align:left}
.track,.fill{position:absolute;left:44%;top:0;width:1px;margin-left:-.5px}
.track{height:100%;background:var(--line)}
.fill{height:0;background:var(--soft);will-change:height}
.entry{position:relative;height:128px;display:grid;grid-template-columns:44% 1fr;align-items:center}
.ico{display:flex;justify-content:center;opacity:0;transform:translateX(-14px);transition:opacity .9s var(--e),transform .9s var(--e)}
.ico img{width:124px;height:124px;object-fit:contain;mix-blend-mode:multiply}
.dot{position:absolute;left:44%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);transition:background .6s var(--e),transform .6s var(--e),box-shadow .6s var(--e)}
.txt{padding-left:26px;opacity:0;transform:translateX(14px);transition:opacity .9s var(--e) .15s,transform .9s var(--e) .15s}
.txt h3{margin:0;font-style:italic;font-weight:400;font-size:32px;line-height:1.1}
.txt span{display:block;margin-top:6px;font-size:16px;letter-spacing:.22em;color:var(--soft)}
.entry.on .ico,.entry.on .txt{opacity:1;transform:none}
.entry.on .dot{background:var(--soft);box-shadow:none;transform:scale(1.5)}

/* ---------- helyszín ---------- */
.cardwrap{position:relative;width:124%;margin-left:-12%}
.paper{width:100%;height:auto;filter:drop-shadow(0 14px 30px rgba(0,0,0,.09))}
.inner{position:absolute;left:24%;right:24%;top:17%;bottom:15%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.chapel{width:80%;margin:26px 0 0;mix-blend-mode:multiply}
.addr{margin:30px 0 0;font-size:21px;line-height:1.4}

/* ---------- öltözet / alig várjuk ---------- */
.dressimg{width:70%;margin:22px auto 6px}
.sign{margin:30px 0 0;font-family:var(--script);font-size:31px;line-height:1.1}

/* ---------- lábléc ---------- */
.foot{background:var(--beige);padding:20px var(--gutter);text-align:center}
.foot span{display:block;font-size:10px;letter-spacing:.25em;text-indent:.25em;text-transform:uppercase;opacity:.55}

/* ---------- görgetés-felfedés ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity 1.1s var(--e),transform 1.1s var(--e)}
.rv.in{opacity:1;transform:none}
.flower.rv{transform:rotate(var(--rot,0deg)) scale(.97) translateY(22px)}
.flower.rv.in{transform:rotate(var(--rot,0deg)) scale(1)}
.cardwrap.rv{transform:translateY(34px)}
.cardwrap.rv.in{transform:none}

/* ---------- csökkentett mozgás ---------- */
.rm *,.rm *::before,.rm *::after{transition:none!important;animation:none!important}
.rm .h-piece,.rm .rv,.rm .ico,.rm .txt{opacity:1!important}
.rm .rv:not(.flower),.rm .ico,.rm .txt{transform:none!important}
.rm .flower.rv{transform:rotate(var(--rot,0deg))!important}
.rm .vid,.rm .door,.rm .shade{display:none}
.rm .hero-track{height:auto}.rm .hero{position:relative}
.rm .dot{background:var(--soft);box-shadow:none;transform:scale(1.5)}