/* Filmes belépő (/) – teljes képernyős színházi film. A film krém Art Deco függönnyel és összeálló logóval zárul;
   a függöny két félre nyílik (a logó felúszik a lap tetejére), mögötte háttérfilmként fut tovább a válogatás, és a két fél
   lesz a választó. Bal: felnőtt (03 Vibrant Modern – éjkék, krém, antik arany), jobb: gyerek (06 Riviera Pop). */
@font-face { font-family:"PMSZ Kids"; src:url("/assets/fonts/kids-display.woff2") format("woff2"); font-weight:400 800; font-display:swap; }
@view-transition { navigation:auto; }
html.intro-doc,.intro-page { margin:0; min-height:100%; background:#0B0A12; color:#FFF7EA; }
.intro { --cream:#F7F0E3; --gold:#B5853A; --navy:#0F1D38; --ease:cubic-bezier(.76,0,.18,1);
  position:relative; min-height:100vh; min-height:100svh; overflow:hidden; isolation:isolate; }
.intro__film { position:fixed; inset:0; z-index:-1; background:#0B0A12 url("/assets/intro/intro-poster.jpg") center / cover no-repeat; view-transition-name:pmsz-film; }
.intro__video,.intro__loop { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:transparent; }
.intro__loop { opacity:0; }
.intro__shade { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(11,10,18,.35) 0, transparent 18%, transparent 55%, rgba(11,10,18,.55) 100%); }

/* vezérlők: a kihagyás az első pillanattól látható */
.intro__controls { position:fixed; z-index:6; top:max(16px, env(safe-area-inset-top)); right:max(16px, env(safe-area-inset-right)); display:flex; gap:10px; }
.intro__skip,.intro__sound,.intro__play { display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:.55rem 1.1rem; border-radius:999px; border:1px solid rgba(255,247,234,.55); background:rgba(11,10,18,.45); color:#FFF7EA; font:700 .8rem/1 var(--f-sans); letter-spacing:.12em; text-transform:uppercase; text-decoration:none; white-space:nowrap; cursor:pointer; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.intro__skip:hover,.intro__sound:hover,.intro__play:hover { background:#FFF7EA; color:#0B0A12; }
.intro__skip:focus-visible,.intro__sound:focus-visible,.intro__play:focus-visible,.intro__door:focus-visible { outline:3px solid #DDBD7E; outline-offset:-6px; }
.intro__play { position:fixed; z-index:6; left:50%; top:50%; translate:-50% -50%; padding:.9rem 1.6rem; font-size:.9rem; }
.intro__play[hidden] { display:none; }

/* a záró függöny: a film utolsó képével azonos krém felület, középen záródó arany szegéllyel */
.intro__curtain { position:fixed; inset:0; z-index:3; pointer-events:none; opacity:0; visibility:hidden; }
.intro__leaf { position:absolute; top:0; bottom:0; width:50.5%; background:var(--cream);
  background-image:repeating-linear-gradient(90deg, rgba(181,133,58,.07) 0 2px, transparent 2px 64px); }
.intro__leaf--l { left:0; }
.intro__leaf--r { right:0; }
/* az arany szegély csak nyitáskor jelenik meg a szárnyak belső élén – zárt állapotban egyetlen tiszta krém felület */
.is-open .intro__leaf--l { box-shadow:inset -10px 0 0 -8px var(--gold); }
.is-open .intro__leaf--r { box-shadow:inset 10px 0 0 -8px var(--gold); }
.intro__curtain::after { content:""; position:absolute; top:0; bottom:0; left:50%; width:2px; translate:-50% 0; opacity:0;
  background:linear-gradient(180deg, transparent, #FFF3D6 20%, #E8C478 50%, #FFF3D6 80%, transparent); box-shadow:0 0 40px 18px rgba(232,196,120,.55); }
.is-choosing .intro__curtain { opacity:1; visibility:visible; transition:opacity .45s ease; }

/* a logó: előbb a zárókép közepén (ahogy a film véget ér), nyitáskor felúszik a lap tetejére */
.intro__brand { position:fixed; z-index:4; left:50%; top:15.7%; translate:-50% 0; display:grid; justify-items:center; pointer-events:none; color:var(--navy); text-align:center;
  opacity:0; visibility:hidden; }
.intro__emblem { width:clamp(170px, 20.8vw, 560px); height:auto; }
.intro__word { margin-top:1.35vw; font:600 clamp(2rem, 5.4vw, 9rem)/1 var(--f-display); text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; }
.intro__sub { margin-top:.75vw; font:600 clamp(.8rem, 1.67vw, 2.6rem)/1 var(--f-display); color:#A63E2D; letter-spacing:.62em; padding-left:.62em; text-transform:uppercase; }
.intro__rule { margin-top:1.35vw; width:31vw; height:7px; border-block:1.5px solid var(--gold); }
.intro__slogan { margin-top:1.35vw; font:700 clamp(.7rem, 1.56vw, 2.4rem)/1.2 var(--f-sans); letter-spacing:.34em; padding-left:.34em; text-transform:uppercase; }
.is-choosing .intro__brand { opacity:1; visibility:visible; transition:opacity .45s ease; }

/* nyitás: a két szárny kiúszik, a középső arany fény felvillan, a háttérfilm átveszi a helyet */
.is-open .intro__leaf--l { transform:translateX(-101%); }
.is-open .intro__leaf--r { transform:translateX(101%); }
.is-open .intro__curtain::after { animation:seam 1.3s ease-out both; }
@keyframes seam { 0% { opacity:0; } 15% { opacity:1; } 100% { opacity:0; width:60vw; } }
.is-open .intro__curtain { visibility:hidden; transition:visibility 0s 1.7s; }
.is-open .intro__video { opacity:0; }
.is-open .intro__loop { opacity:1; }
.is-open .intro__shade { background:linear-gradient(180deg, rgba(11,10,18,.7) 0, rgba(11,10,18,.15) 30%, rgba(11,10,18,.1) 55%, rgba(11,10,18,.6) 100%); }
.is-open .intro__brand { top:max(14px, env(safe-area-inset-top)); color:#FFF7EA; }
.is-open .intro__emblem { width:clamp(64px, 6vw, 104px); }
.is-open .intro__word { margin-top:.35rem; font-size:clamp(1.05rem, .7rem + .9vw, 1.6rem); text-shadow:0 1px 14px rgba(0,0,0,.5); }
.is-open .intro__sub { margin-top:.3rem; font-size:.7rem; color:#DDBD7E; }
.is-open .intro__rule,.is-open .intro__slogan { opacity:0; margin-top:0; height:0; border-width:0; font-size:0; }

/* választó: a lap két fele – mindkettőn át látszik a háttérfilm */
.intro__choose { position:fixed; z-index:2; inset:0; display:grid; grid-template-columns:1fr 1fr; opacity:0; visibility:hidden; pointer-events:none; }
.is-open .intro__choose { opacity:1; visibility:visible; pointer-events:auto; }
.intro__choose::before { content:""; position:absolute; z-index:1; left:50%; top:22%; bottom:6%; width:1px; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(221,189,126,.85) 25%, rgba(221,189,126,.85) 75%, transparent); }
.intro__door { position:relative; display:grid; align-content:end; justify-items:center; padding:clamp(18px, 3vw, 56px); padding-bottom:max(clamp(22px, 6vh, 80px), env(safe-area-inset-bottom));
  text-decoration:none; overflow:hidden; transition:background-color .5s ease; }
.intro__door::before { content:""; position:absolute; inset:0; pointer-events:none; transition:opacity .5s ease; opacity:.85; }
.intro__door--adult::before { background:linear-gradient(0deg, rgba(11,22,48,.55) 0, rgba(11,22,48,.12) 35%, rgba(11,22,48,0) 60%); }
.intro__door--kids::before { background:linear-gradient(0deg, rgba(122,31,46,.4) 0, rgba(250,100,117,.1) 35%, rgba(255,200,69,0) 60%); }
.intro__door:hover::before,.intro__door:focus-visible::before { opacity:1; }
.intro__door-card { position:relative; display:grid; gap:.35rem; width:min(100%, 520px); padding:clamp(18px, 2.2vw, 34px); border-radius:6px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7); transition:transform .45s cubic-bezier(.2,.7,.2,1); overflow:hidden; }
.intro__door:hover .intro__door-card,.intro__door:focus-visible .intro__door-card { transform:translateY(-8px); }
.intro__door-card::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.18) 48%, transparent 66%); transform:translateX(-120%); }
.intro__door:hover .intro__door-card::after,.intro__door:focus-visible .intro__door-card::after { transform:translateX(120%); transition:transform 1.1s ease; }
.intro__door-kicker { font:700 .74rem/1.3 var(--f-sans); letter-spacing:.24em; text-transform:uppercase; }
.intro__door-title { font:600 clamp(2rem, 1.2rem + 2.6vw, 3.6rem)/1 var(--f-display); letter-spacing:-.01em; }
.intro__door-text { font:500 1rem/1.4 var(--f-sans); opacity:.92; }
.intro__door-cta { margin-top:.5rem; justify-self:start; display:inline-flex; gap:.5rem; padding:.6rem 1.1rem; border-radius:999px; font:800 .78rem/1 var(--f-sans); letter-spacing:.14em; text-transform:uppercase; }
/* felnőtt – 03 */
/* áttetsző kártyák: a háttérfilm alja is látszik mögöttük */
.intro__door--adult .intro__door-card { color:#FFF7EA; background:linear-gradient(160deg, rgba(23,43,80,.58), rgba(11,22,48,.7)); border:1px solid rgba(221,189,126,.7); outline:1px solid rgba(221,189,126,.3); outline-offset:-8px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); text-shadow:0 1px 8px rgba(0,0,0,.45); }
.intro__door--adult .intro__door-kicker { color:#DDBD7E; }
.intro__door--adult .intro__door-title { font-style:italic; }
.intro__door--adult .intro__door-cta { background:#DDBD7E; color:#0F1D38; }
/* gyerek – 06 */
.intro__door--kids .intro__door-card { color:#0D3B42; background:linear-gradient(150deg, rgba(255,231,163,.8) 0%, rgba(255,200,69,.78) 38%, rgba(250,100,117,.8) 100%); border:3px solid rgba(255,255,255,.85); border-radius:28px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.intro__door--kids .intro__door-kicker { color:#7A1F2E; }
.intro__door--kids .intro__door-title { font-family:"PMSZ Kids", var(--f-display); font-weight:800; }
.intro__door--kids .intro__door-cta { background:#0B5A60; color:#fff; }

@media (prefers-reduced-motion:no-preference) {
  .intro__leaf { transition:transform 1.6s var(--ease); }
  .intro__brand { transition:opacity .45s ease, top 1.4s var(--ease), color 1s ease; }
  .intro__emblem,.intro__word,.intro__sub,.intro__rule,.intro__slogan { transition:all 1.4s var(--ease); }
  .intro__video,.intro__loop { transition:opacity .8s ease .2s; }
  .intro__shade { transition:background .9s ease; }
  .is-open .intro__choose { transition:opacity .6s ease .5s; }
  .is-open .intro__door--adult .intro__door-card { animation:door-rise 1s .75s cubic-bezier(.2,.7,.2,1) both; }
  .is-open .intro__door--kids .intro__door-card { animation:door-rise 1s .9s cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes door-rise { from { opacity:0; transform:translateY(56px); } }
@media (prefers-reduced-motion:reduce) {
  .intro__door-card,.intro__door-card::after { transition:none; }
  .is-open .intro__curtain::after { animation:none; }
  .is-open .intro__curtain { transition:none; }
}

/* álló mobil: a 16:9-es film teljes szélességben, vágás nélkül; mögötte a film állóképe elmosva.
   Nyitás után a háttérfilm már teljes képernyőt tölt ki. */
@media (max-aspect-ratio: 1/1) {
  .intro__film { background-size:auto 100%; }
  .intro__film::before { content:""; position:absolute; inset:-30px; background:inherit; background-size:cover; filter:blur(22px) brightness(.55); }
  .intro__video { top:18%; bottom:auto; height:auto; aspect-ratio:16/9; object-fit:contain; }
  .intro__brand { top:22%; }
  .intro__emblem { width:52vw; }
  .intro__word { margin-top:4vw; font-size:9.6vw; }
  .intro__sub { margin-top:2.4vw; font-size:3vw; }
  .intro__rule { margin-top:4vw; width:62vw; }
  .intro__slogan { margin-top:4vw; font-size:2.6vw; letter-spacing:.24em; }
}
/* álló telefon (iPhone ≈ 9:19,5): saját álló film (720×1560) teljes képernyőn – éles jelenetkivágás középen, felül-alul
   a jelenet elmosott fényei; a záró logó elrendezése egyezik a film álló zárásával (scripts/intro/endcard.html, .portrait).
   Rövidebb kijelzőn (pl. SE) a film szélességre illeszkedik, ezért a logó helye a középvonalhoz igazodik. */
@media (max-aspect-ratio: 5/8) {
  .intro__film { background:#0B0A12 url("/assets/intro/intro-poster-mobile.jpg") center / cover no-repeat; }
  .intro__film::before { content:none; }
  .intro__video { inset:0; top:0; height:100%; aspect-ratio:auto; object-fit:cover; }
  .intro__shade { background:linear-gradient(180deg, rgba(11,10,18,.35) 0, transparent 14%, transparent 80%, rgba(11,10,18,.3) 100%); }
  .intro__brand { top:min(29%, calc(50% - 45.5vw)); }
  .intro__emblem { width:60vw; }
  .intro__word { margin-top:5vw; font-size:10.4vw; }
  .intro__sub { margin-top:2.6vw; font-size:3.3vw; }
  .intro__rule { margin-top:5vw; width:62vw; }
  .intro__slogan { margin-top:5vw; font-size:2.8vw; letter-spacing:.24em; padding-left:.24em; }
  .intro__leaf { background-image:repeating-linear-gradient(90deg, rgba(181,133,58,.07) 0 1px, transparent 1px 35px); }
}
/* mobil: a lap függőlegesen kettévágva (bal felnőtt, jobb gyerek), a két választó alul egymás mellett,
   áttetszően – a fejek és a film nagy része szabadon marad */
@media (max-width:700px) {
  .intro__choose::before { top:auto; height:34%; bottom:3%; }
  .intro__door { padding:0 5px max(14px, env(safe-area-inset-bottom)); justify-items:stretch; }
  .intro__door--adult { padding-left:max(10px, env(safe-area-inset-left)); }
  .intro__door--kids { padding-right:max(10px, env(safe-area-inset-right)); }
  .intro__door-card { gap:.3rem; padding:12px; min-height:124px; align-content:end; }
  .intro__door--kids .intro__door-card { border-radius:20px; border-width:2px; }
  .intro__door--adult .intro__door-card { outline-offset:-5px; }
  .intro__door-kicker { font-size:.56rem; letter-spacing:.12em; }
  .intro__door-title { font-size:1.28rem; line-height:1.05; }
  .intro__door-text { display:none; }
  .intro__door-cta { margin-top:.3rem; padding:.5rem .7rem; font-size:.62rem; letter-spacing:.1em; }
  .intro__controls { left:max(12px, env(safe-area-inset-left)); right:max(12px, env(safe-area-inset-right)); justify-content:space-between; }
  .intro__skip,.intro__sound { padding:.5rem .8rem; font-size:.68rem; letter-spacing:.08em; }
  .is-open .intro__brand { top:max(64px, calc(env(safe-area-inset-top) + 52px)); }
  .is-open .intro__emblem { width:58px; }
}
/* keskeny telefon (≤360 px): a hanggomb csak ikon – a felirat a képernyőolvasónak megmarad, a kihagyás teljes szöveggel látszik */
@media (max-width:360px) {
  .intro__sound { min-width:44px; justify-content:center; padding:.5rem; }
  .intro__sound [data-sound-label] { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   2026-10-21 — Választó a mostani arculatban: a két kártya azonos szerkezetű, a saját képfele
   közepén; középre zárt szöveg, teljes szélességű, kitöltött gomb (felnőtt: arany, gyerek:
   türkiz). Áttetsző elmosás nélkül (iPhone-memória), telítettebb, olvasható háttérrel.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.intro__door { justify-items:center; align-content:end; }
.intro__door-card { width:min(100%, 440px); justify-items:center; text-align:center; gap:.55rem; padding:clamp(22px, 2.4vw, 36px) clamp(20px, 2.4vw, 38px) clamp(20px, 2.2vw, 32px);
  -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 30px 60px -28px rgba(0,0,0,.65); }
.intro__door-title { font-size:clamp(1.9rem, 1rem + 2vw, 2.9rem); line-height:1.02; hyphens:manual; overflow-wrap:break-word; max-width:100%; }
.intro__door-cta { justify-self:stretch; justify-content:center; align-items:center; min-height:52px; margin-top:.75rem; padding:.8rem 1.2rem;
  font:700 .86rem/1.1 var(--f-sans); letter-spacing:.16em; box-shadow:0 10px 22px -12px rgba(0,0,0,.6); transition:filter .2s ease, transform .2s ease; }
.intro__door:hover .intro__door-cta,.intro__door:focus-visible .intro__door-cta { filter:brightness(1.06); }
/* felnőtt: éjkék kártya kettős aranykerettel, Bodoni dőlt cím, arany gomb */
.intro__door--adult .intro__door-card { background:linear-gradient(165deg, rgba(23,43,80,.9), rgba(11,22,48,.94)); border:1px solid rgba(221,189,126,.85); outline:1px solid rgba(221,189,126,.35); outline-offset:-9px; border-radius:6px; }
.intro__door--adult .intro__door-title { color:#FFF7EA; }
.intro__door--adult .intro__door-cta { border-radius:4px; color:#0F1D38; background:linear-gradient(180deg, #E2C27E 0%, #C9A158 55%, #B68B3F 100%); border:1px solid #A27A33; }
/* gyerek: krém mesekártya színes felső szegéllyel, Baloo cím, türkiz gomb */
.intro__door--kids .intro__door-card { color:#0D3B42; background:linear-gradient(180deg, #FFF8E8, #FFF1D6); border:3px solid #fff; border-radius:28px; overflow:hidden; }
.intro__door--kids .intro__door-card::before { content:""; position:absolute; left:0; right:0; top:0; height:7px; background:linear-gradient(90deg, #2FB3AE, #FFC845, #FA6475); }
.intro__door--kids .intro__door-kicker { color:#C8344E; }
.intro__door--kids .intro__door-title { color:#0D3B42; font-size:clamp(1.7rem, .75rem + 1.75vw, 2.4rem); }
@media (min-width:701px) { .intro__door-card { min-height:250px; align-content:center; } }
.intro__door--kids .intro__door-cta { border-radius:999px; color:#fff; background:#0B5A60; border:0; box-shadow:0 5px 0 rgba(6,40,44,.35), 0 12px 22px -12px rgba(0,0,0,.5); }
@media (max-width:700px) {
  .intro__door { justify-items:stretch; }
  .intro__door-card { width:100%; min-height:0; gap:.3rem; padding:16px 10px 12px; }
  .intro__door--adult .intro__door-card { outline-offset:-5px; }
  .intro__door--kids .intro__door-card { border-radius:20px; border-width:2px; }
  .intro__door--kids .intro__door-card::before { height:5px; }
  .intro__door-kicker { font-size:.55rem; letter-spacing:.1em; }
  .intro__door-title { font-size:clamp(1.15rem, 5.4vw, 1.45rem); line-height:1.05; }
  .intro__door-cta { min-height:44px; margin-top:.45rem; padding:.55rem .5rem; font-size:.66rem; letter-spacing:.1em; }
}

/* 2026-10-22 — A két választókártya mindig egyforma: azonos magasság, a tartalom középen; a gyerekcím
   és a gomb árnyéka telefonon visszafogottabb, hogy a két gomb vizuálisan is egy súlyú legyen. */
@media (max-width:700px) {
  .intro__door-card { min-height:168px; align-content:center; }
  .intro__door--kids .intro__door-title { font-size:clamp(1.05rem, 4.9vw, 1.32rem); }
  .intro__door--kids .intro__door-cta { box-shadow:0 3px 0 rgba(6,40,44,.35), 0 10px 20px -12px rgba(0,0,0,.5); }
}