/* Szentjánosbogarak · nyári esti meghívó. A fejléc egy júniusi kert éjjel, a tartalom meleg lampionfényben. */

@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-serif.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-italic.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 600;font-display:swap;src:url(fonts/hanken-grotesk.woff2) format('woff2')}

:root{
  --night:#0a1413;
  --night-2:#0d1918;
  --night-3:#08100f;
  --cream:#ece4d0;
  --cream-soft:#bdb7a5;
  --line:rgba(236,228,208,.16);
  --amber:#f0c674;
  --amber-deep:#d99a45;
  --fly:#d9ef8a;
  --leaf:#9fbf8c;
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Hanken Grotesk',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --bk-edit:rgba(240,198,116,.7);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--night)}
body{margin:0;background:var(--night);color:var(--cream);font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.locked{overflow:hidden;height:100svh}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(100% - 40px,1080px);margin-inline:auto}
section,footer{position:relative}
.h2{margin:0 0 .45em;font:400 clamp(2.3rem,7vw,3.8rem)/1.02 var(--serif);letter-spacing:-.005em;color:var(--cream)}
.h2 em{font-style:italic;color:var(--amber)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 26px;border:0;border-radius:999px;background:var(--amber);color:#1b1408;font:600 16px/1.2 var(--sans);text-decoration:none;cursor:pointer;transition:background .2s ease,box-shadow .3s ease,transform .2s ease}
.btn:hover{background:#f6d48d;box-shadow:0 0 28px -6px rgba(240,198,116,.55)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:progress}
.btn.ghost{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 1.5px rgba(236,228,208,.5)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--amber);color:var(--amber)}

/* Görgetésre megjelenés */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* Pislákoló bogarak a szakaszok között: kevés, halvány, szabálytalan */
.pislak{position:absolute;left:0;right:0;top:-40px;height:110px;pointer-events:none;overflow:hidden}
.pislak i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:#f4fbcf;box-shadow:0 0 6px 2px rgba(217,239,138,.55),0 0 18px 6px rgba(217,239,138,.16);opacity:0;animation:pislak var(--p) ease-in-out var(--d) infinite,lebeg calc(var(--p) * 2.3) ease-in-out var(--d) infinite alternate}
@keyframes pislak{0%,62%,100%{opacity:0}70%{opacity:.85}80%{opacity:.25}86%{opacity:.6}}
@keyframes lebeg{from{translate:0 0}to{translate:14px -10px}}

/* ───────────── Fejléc: a kert ───────────── */
.hero{position:relative;height:100svh;min-height:540px;overflow:hidden;background:#0b1a26;color:var(--cream);touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.kert{position:absolute;inset:0;width:100%;height:100%;display:block;background:radial-gradient(ellipse 60% 40% at 62% 74%,rgba(110,160,140,.17),rgba(110,160,140,0) 70%),linear-gradient(#070f1f,#0c1d31 38%,#123040 62%,#1a3d3f 76%,#0d2224)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(rgba(3,8,7,0),#030807);pointer-events:none}
.hero-in{position:absolute;inset:0;background:radial-gradient(ellipse 75% 70% at 50% 46%,rgba(2,6,8,0) 55%,rgba(2,6,8,.5));display:flex;flex-direction:column;align-items:center;justify-content:center;padding:max(64px,9svh) 20px max(150px,31svh);text-align:center;pointer-events:none}
.hero-in>*{pointer-events:auto}
.hero-kicker{margin:0 0 .9em;font:500 15px/1.3 var(--sans);letter-spacing:.02em;color:rgba(236,228,208,.82);text-shadow:0 1px 12px rgba(0,0,0,.6)}
.hero-names{margin:0;display:flex;flex-direction:column;align-items:center;font:italic 400 min(calc(var(--nf) * 1vw),132px,15svh)/.98 var(--serif);letter-spacing:0;color:#fbf0cc;text-shadow:0 0 2px rgba(255,244,210,.45),0 0 24px rgba(236,222,140,.32),0 2px 30px rgba(0,0,0,.5)}
.hero-names span{display:block;padding:0 .06em .04em;overflow-wrap:anywhere}
.hero-names .hero-and{font-size:.42em;line-height:1.1;margin:.04em 0 .02em;color:#e8e6b4}
.hero-date{margin:.5em 0 0;font:400 max(24px,min(calc(var(--nf) * .34vw),48px,5.6svh))/1.1 var(--serif);letter-spacing:.04em;color:#f5ebc8;text-shadow:0 0 18px rgba(236,222,140,.3),0 2px 20px rgba(0,0,0,.5)}
.hero-date span{display:inline-block}
.hero-place{margin:.7em 0 0;font:400 16px/1.4 var(--sans);color:rgba(236,228,208,.86);text-shadow:0 1px 12px rgba(0,0,0,.7)}
.hero-in>*{transition:opacity .9s ease}
.hero.is-opening .hero-in>*{opacity:0;transition:none}
.hero.is-opening.is-named .hero-names,.hero.is-opening.is-named .hero-date{opacity:1;transition:opacity .55s ease}
@media (orientation:landscape){.hero-in{padding-bottom:max(150px,38svh)}.hero-names{font-size:min(calc(var(--nf) * 1vw),124px,12.5svh)}.hero-date{font-size:max(22px,min(calc(var(--nf) * .34vw),44px,5svh))}}
.hero-cue{position:absolute;left:50%;bottom:max(22px,env(safe-area-inset-bottom));z-index:2;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--cream);font:500 15px/1.2 var(--sans);text-decoration:none;text-shadow:0 1px 10px rgba(0,0,0,.8);transition:opacity .8s ease .3s}
.hero-cue::after{content:"";width:1px;height:28px;background:linear-gradient(var(--cream),rgba(236,228,208,0));animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
.hero.is-opening .hero-cue{opacity:0;pointer-events:none;transition:none}

/* Nyitás rétege: csak a felirat és a gomb, a kert maga kapja az érintést */
.op{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;justify-content:space-between;padding:max(22px,env(safe-area-inset-top)) 20px max(22px,env(safe-area-inset-bottom));pointer-events:none;transition:opacity .6s ease}
.op.is-fading{opacity:0}
.op:focus{outline:none}
.op-title{margin:0;text-align:center;font:italic 400 20px/1.3 var(--serif);color:var(--cream);text-shadow:0 1px 14px rgba(0,0,0,.8)}
.op-bottom{text-align:center}
.op-hint{margin:0 auto 6px;max-width:22em;min-height:2.7em;font:italic 400 21px/1.3 var(--serif);color:var(--cream);text-shadow:0 1px 14px rgba(0,0,0,.9)}
.op-skip{pointer-events:auto;background:none;border:0;padding:10px 14px;color:var(--cream);font:500 15px/1.2 var(--sans);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(236,228,208,.55);text-shadow:0 1px 10px rgba(0,0,0,.8);cursor:pointer}

/* ───────────── Meghívás ───────────── */
.invite{padding:clamp(72px,12vw,150px) 0 clamp(60px,9vw,110px);background:linear-gradient(#030807,var(--night) 160px)}
.invite-text{margin:0 0 clamp(34px,5vw,58px);max-width:21em;font:400 clamp(1.7rem,4.8vw,2.7rem)/1.28 var(--serif);color:var(--cream)}
.facts{margin:0 0 38px;display:grid;gap:18px 44px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));max-width:920px}
.facts div{padding-top:14px;border-top:1px solid rgba(240,198,116,.4)}
.facts dt{font:500 14px/1.3 var(--sans);color:var(--amber);margin-bottom:4px}
.facts dd{margin:0;font:400 22px/1.3 var(--serif)}

/* ───────────── Történet ───────────── */
.story{padding:clamp(64px,10vw,130px) 0;background:var(--night-2)}
.story-in{display:grid;gap:clamp(36px,6vw,84px);align-items:center}
@media (min-width:860px){.story-in{grid-template-columns:.9fr 1fr}}
.frame{position:relative;margin:0;max-width:480px;aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:#132220;box-shadow:0 30px 60px -30px rgba(0,0,0,.8),0 0 0 1px rgba(240,198,116,.18)}
.frame img{width:100%;height:100%;object-fit:cover}
.frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(5,10,10,.45));box-shadow:inset 0 0 0 10px rgba(10,20,19,.35)}
.story-text{max-width:34em}
.story-text p{margin:0 0 1em;color:#ddd5c1}
.story-text h3{font:italic 400 24px/1.3 var(--serif);color:var(--amber);margin:1.2em 0 .3em}
.story-text ul{padding-left:1.1em;color:#ddd5c1}

/* ───────────── Az este menete: lampionfüzér ───────────── */
.esti{padding:clamp(72px,10vw,130px) 0 clamp(60px,9vw,110px);background:var(--night-3)}
.esti-head{margin-bottom:clamp(30px,5vw,54px)}
.esti-head p{margin:0;color:var(--cream-soft)}
.fuzer{position:relative;list-style:none;margin:0;padding:0 0 0 46px;max-width:760px}
.fuzer::before{content:"";position:absolute;left:14px;top:4px;bottom:20px;width:1px;background:linear-gradient(rgba(236,228,208,.05),rgba(236,228,208,.32) 8%,rgba(236,228,208,.32) 92%,rgba(236,228,208,.05))}
.fuzer li{position:relative;display:grid;grid-template-columns:76px 1fr;gap:4px 18px;align-items:baseline;padding:16px 0 26px}
.lamp{position:absolute;left:-41px;top:22px;width:18px;height:20px;border-radius:50%;background:radial-gradient(circle at 42% 38%,#3a332b,#1d1915 70%);box-shadow:0 0 0 1px rgba(236,228,208,.12);transition:background 1s ease calc(var(--i) * 90ms + .2s),box-shadow 1.2s ease calc(var(--i) * 90ms + .2s)}
.lamp::before{content:"";position:absolute;left:50%;top:-9px;width:1px;height:9px;background:rgba(236,228,208,.32)}
.fuzer li.in .lamp{background:radial-gradient(circle at 42% 36%,#fff3cc,#ffcf7e 40%,#e48d3c 85%,#a8582a);box-shadow:0 0 14px 3px rgba(255,180,90,.42),0 0 40px 10px rgba(255,170,80,.14)}
.f-ido{font:400 26px/1.1 var(--serif);font-variant-numeric:lining-nums tabular-nums;color:var(--amber)}
.f-mi h3{margin:0;font:500 19px/1.35 var(--sans);color:var(--cream)}
.f-mi p{margin:4px 0 0;color:var(--cream-soft)}
@media (max-width:420px){.fuzer li{grid-template-columns:1fr;gap:2px}.fuzer{padding-left:40px}.lamp{left:-35px}.fuzer::before{left:12px}}

/* ───────────── Helyszín ───────────── */
.venue{padding:clamp(72px,10vw,130px) 0;background:radial-gradient(80% 70% at 85% 30%,rgba(240,198,116,.08),transparent 70%),var(--night)}
.venue-text{max-width:640px}
.venue-pre{margin:0 0 .4em;font:500 15px/1.3 var(--sans);color:var(--leaf)}
.venue-text>p:not(.venue-pre){color:#ddd5c1;max-width:32em}
.venue-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ───────────── Jó, ha tudjátok ───────────── */
.good{padding:clamp(72px,10vw,130px) 0;background:var(--night-2)}
.good-list{display:grid;gap:30px 56px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));max-width:960px}
.good-list>div{padding-top:16px;border-top:1px solid var(--line)}
.good-list h3{margin:0 0 .35em;font:italic 400 26px/1.2 var(--serif);color:var(--amber)}
.good-list .txt{color:#ddd5c1}
.good-list .txt p{margin:0 0 .6em}
.good-list ul{margin:0;padding-left:1.1em}

/* ───────────── Visszajelzés ───────────── */
.rsvp{padding:clamp(72px,10vw,130px) 0;background:radial-gradient(70% 50% at 50% 0%,rgba(217,239,138,.06),transparent 70%),var(--night-3)}
.rsvp-in{max-width:640px}
.rsvp-intro{color:#ddd5c1;margin:0 0 26px}
.field{margin:0 0 20px;padding:0;border:0;min-width:0}
.field label,.field legend{display:block;margin:0 0 7px;font:500 16px/1.35 var(--sans);color:var(--cream);padding:0}
.field small{display:block;margin-top:6px;font-size:14px;color:var(--cream-soft)}
.input{width:100%;min-height:50px;padding:12px 14px;border:1px solid rgba(236,228,208,.28);border-radius:6px;background:rgba(236,228,208,.05);color:var(--cream);font-size:16px;transition:border-color .2s ease,background .2s ease}
.input::placeholder{color:rgba(236,228,208,.45)}
.input:focus{outline:none;border-color:var(--amber);background:rgba(236,228,208,.08)}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ece4d0' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
select.input option{background:#0d1918;color:var(--cream)}
textarea.input{min-height:110px;resize:vertical}
.choice{display:grid;gap:10px}
@media (min-width:560px){.choice{grid-template-columns:1fr 1fr}}
.choice label{display:flex;align-items:center;gap:10px;min-height:50px;margin:0;padding:12px 14px;border:1px solid rgba(236,228,208,.28);border-radius:6px;cursor:pointer;font-weight:400;transition:border-color .2s ease,background .2s ease}
.choice label:has(input:checked){border-color:var(--amber);background:rgba(240,198,116,.08)}
.choice input{accent-color:var(--amber);width:18px;height:18px;margin:0;flex:none}
.cond{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.cond>div{overflow:hidden}
.cond.show{grid-template-rows:1fr}
.form-error{min-height:1.4em;margin:0 0 10px;color:#ffb48a;font-weight:500}
.rsvp-submit{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.demo-note{margin:0;font-size:14px;color:var(--cream-soft)}
.thanks{padding:28px 0}
.thanks:focus{outline:none}
.thanks-big{margin:0 0 .3em;font:italic 400 clamp(2.2rem,6vw,3.2rem)/1.1 var(--serif);color:var(--amber)}

/* ───────────── Zárás ───────────── */
.closing{padding:clamp(80px,12vw,140px) 20px calc(clamp(60px,9vw,100px) + env(safe-area-inset-bottom));text-align:center;background:linear-gradient(var(--night-3),#040908)}
.closing-names{margin:0 0 .3em;font:italic 400 clamp(2.4rem,8vw,4.2rem)/1.05 var(--serif);color:#fbf0cc;text-shadow:0 0 24px rgba(236,222,140,.25)}
.closing p{margin:0 0 .4em;color:var(--cream-soft)}
.replay{margin-top:26px;background:none;border:0;padding:10px 14px;color:var(--cream);font:500 15px/1.2 var(--sans);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(236,228,208,.45);cursor:pointer}
.replay:hover{color:var(--amber)}

/* ───────────── Belépőkód ───────────── */
.gate{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;background:rgba(5,10,12,.84);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.gate form{width:min(100%,420px);text-align:center}
.gate h1{margin:.3em 0 .4em;font:italic 400 clamp(2.2rem,8vw,3rem)/1.05 var(--serif);color:#fbf0cc}
.gate p{color:#ddd5c1}
.gate .input{text-align:center;font-size:22px;letter-spacing:.12em}
.gate-fly{display:inline-block;width:8px;height:8px;border-radius:50%;background:#f4fbcf;box-shadow:0 0 10px 4px rgba(217,239,138,.55),0 0 30px 10px rgba(217,239,138,.18);animation:pislak 3.4s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .pislak i,.gate-fly{animation:none;opacity:.55}
  .pislak i:nth-child(3n){opacity:.2}
  .hero-cue::after{animation:none}
  .lamp,.cond{transition:none}
}