/* AdLookout landing — alap: tokenek, fejléc, hero (betűesés), szem-merülés, film.
   Két regiszter: A = rajzolt (papír, 12 fps léptetés) · B = éles (fehér kártya, 60 fps). Egy elemen belül soha nem keverjük. */
:root{
  --paper:#f0ebe0; --bone:#faf6ee; --white:#fff; --ink:#111; --ink70:#4a4a4a; --ink45:#8a8b8f;
  --rule:rgba(17,17,17,.14); --hair:rgba(17,17,17,.1);
  --orange:#f26722; --rust:#bc5122; --night:#173d33; --night2:#1f4d3f; --pine-d:#173d33;
  --sage:#c3d2cb; --sky:#c8d7e6; --butter:#f3e1a0; --lilac:#d8ccee; --blush:#f2c8b4; --pine:#1f4d3f;
  --display:'Fraunces',Georgia,serif; --body:'DM Sans',system-ui,sans-serif;
  --sans:'Plus Jakarta Sans',system-ui,sans-serif; --mono:'Space Mono',ui-monospace,monospace; --hand:'Caveat',cursive;
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --shadow:0 1px 0 rgba(17,17,17,.03),0 14px 34px rgba(17,17,17,.07);
  --gutter:clamp(16px,4vw,48px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding-inline:var(--gutter)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink45)}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.02em;margin:0;text-wrap:balance}
em{font-style:italic;font-weight:300}
p{margin:0}
.defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- gombok ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;
  font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:-.01em;white-space:nowrap;transition:transform .35s var(--spring),background .25s,color .25s,box-shadow .25s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.97)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{box-shadow:0 10px 24px rgba(17,17,17,.18)}
.btn-orange{background:var(--orange);color:#fff}
.btn-orange:hover{box-shadow:0 10px 26px rgba(242,103,34,.35)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--rule)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn .play{width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:2px}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px}

/* ---------- szókép (kicsi, HTML) ---------- */
.wm{display:inline-flex;align-items:baseline;line-height:1;text-decoration:none;color:inherit;font-size:24px}
.wm i{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;font-size:1.09em;letter-spacing:-.01em}
.wm b{font-family:var(--sans);font-weight:700;letter-spacing:-.03em}
.wm s{display:inline-block;width:.19em;height:.19em;border-radius:50%;background:var(--orange);margin-left:.07em;text-decoration:none}

/* ---------- fejléc ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:40;height:72px;display:flex;align-items:center;transition:background .35s,color .35s,box-shadow .35s,transform .45s var(--ease)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1320px}
.nav .brand{opacity:0;transform:translateY(-8px);transition:opacity .4s,transform .4s var(--ease);pointer-events:none}
.nav.show-brand .brand{opacity:1;transform:none;pointer-events:auto}
.nav .brand svg{height:26px;width:auto;overflow:visible;display:block}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a:not(.btn){font-family:var(--sans);font-weight:600;font-size:14.5px;text-decoration:none;padding:8px 14px;border-radius:999px;color:var(--ink70);transition:color .2s,background .2s}
.nav-links a:not(.btn):hover{color:var(--ink);background:rgba(17,17,17,.06)}
.nav .login{height:42px;padding:0 18px 0 20px;margin-left:8px;font-size:14.5px}
.nav .login .knob{width:8px;height:8px;border-radius:50%;background:var(--orange);transition:transform .35s var(--spring)}
.nav .login:hover .knob{transform:translateX(4px) scale(1.25)}
.nav.scrolled{background:rgba(240,235,224,.84);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 1px 0 var(--hair)}
.nav.dark{color:var(--bone)}
.nav.dark.scrolled{background:rgba(23,61,51,.78);box-shadow:0 1px 0 rgba(250,246,238,.08)}
.nav.dark .nav-links a:not(.btn){color:rgba(250,246,238,.72)}
.nav.dark .nav-links a:not(.btn):hover{color:var(--bone);background:rgba(250,246,238,.08)}
.nav.dark .login{background:var(--bone);color:var(--ink)}
@media (max-width:760px){.nav-links a:not(.btn){display:none}}

/* ---------- színpad: hero → merülés a szembe → film ---------- */
.stage{position:relative;height:340vh;background:var(--paper)}
.stage-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hero{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:72px var(--gutter) 40px}
.hero-mark{position:relative;width:min(84vw,1040px);transform-origin:0 0;z-index:3}
.hero-mark svg{width:100%;height:auto;overflow:visible;display:block}
.hero-mark .gl text{font-family:var(--sans);font-weight:700;font-size:100px;letter-spacing:-3px;fill:var(--ink)}
.hero-mark .gl.ad text{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;font-size:109px;letter-spacing:0}
.hero-mark .gl{visibility:hidden}
.hero-mark .eye-hit{cursor:pointer;fill:transparent}
.hero-copy{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;margin-top:clamp(18px,4vh,44px);max-width:860px}
.hero-copy h1{font-size:clamp(28px,3.7vw,52px);line-height:1.06;font-variation-settings:'opsz' 144}
.hero-copy .lead{font-size:clamp(16px,1.35vw,19px);color:var(--ink70);max-width:58ch;text-wrap:pretty}
.hero-copy .ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.hero-copy > *{opacity:0;transform:translateY(18px)}
.hero.ready .hero-copy > *{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.hero.ready .hero-copy > :nth-child(2){transition-delay:.12s}
.hero.ready .hero-copy > :nth-child(3){transition-delay:.24s}
.scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink45);opacity:0;transition:opacity .8s .6s}
.hero.ready .scroll-cue{opacity:1}
.scroll-cue i{width:1.5px;height:30px;background:linear-gradient(var(--ink45),transparent);animation:cue 1.6s var(--ease) infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* A regiszter: lebegő, papírból vágott hirdetésdarabok a hero körül (12 fps-ben „forrnak") */
.pieces{position:absolute;inset:0;z-index:1;pointer-events:none}
.piece{position:absolute;left:0;top:0;width:var(--w,120px);visibility:hidden}
.piece .paper{background:#fff;padding:6px 6px 9px;border-radius:6px;box-shadow:3px 4px 0 rgba(17,17,17,.08)}
.piece .img{border-radius:3px;aspect-ratio:1/.8;display:grid;place-items:center}
.piece .img svg{width:74%;height:74%}
.piece .ln{height:5px;border-radius:3px;background:#e7e1d4;margin-top:6px;width:80%}
.piece .ln + .ln{width:52%;margin-top:4px}
.piece .tag{position:absolute;top:-9px;left:8px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;background:var(--ink);color:#fff;padding:3px 6px;border-radius:3px}
.piece.note .paper{font-family:var(--hand);font-weight:600;font-size:21px;line-height:1.05;color:var(--ink70);background:#fffaf0;padding:10px 12px;border-radius:2px;
  clip-path:polygon(1% 4%,38% 0,99% 3%,100% 55%,98% 97%,52% 100%,2% 98%,0 46%)}

/* film réteg: a szem pupillájából nyílik ki */
.film{position:absolute;inset:0;z-index:4;background:var(--night);display:flex;align-items:center;justify-content:center;visibility:hidden}
.film-frame{position:relative;width:min(88vw,calc((100svh - 190px) * 1.7778));aspect-ratio:16/9;border-radius:clamp(14px,2vw,28px);overflow:hidden;background:#000;
  box-shadow:0 30px 80px rgba(0,0,0,.45);clip-path:circle(0 at 50% 50%)}
.film-frame video{width:100%;height:100%;object-fit:cover}
.film-ui{position:absolute;left:0;right:0;bottom:clamp(18px,4vh,40px);display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap;padding-inline:var(--gutter);
  color:var(--bone);opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s var(--ease)}
.film.ui-on .film-ui{opacity:1;transform:none}
.film-ui .eyebrow{color:rgba(250,246,238,.62)}
.film-ui .btn-ghost{color:var(--bone);box-shadow:inset 0 0 0 1.5px rgba(250,246,238,.3)}
.film-top{position:absolute;top:clamp(78px,11vh,110px);left:0;right:0;text-align:center;color:var(--bone);padding-inline:var(--gutter);opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s var(--ease)}
.film.ui-on .film-top{opacity:1;transform:none}
.film-top h2{font-size:clamp(26px,3.2vw,44px);line-height:1.08}
.film-top h2 em{color:var(--orange)}
.film.playing .film-top,.film.playing .film-ui .eyebrow{opacity:0}
.sound-dot{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 0 rgba(242,103,34,.6);animation:ping 1.8s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(242,103,34,.55)}80%,100%{box-shadow:0 0 0 12px rgba(242,103,34,0)}}

@media (max-width:640px){
  .stage{height:300vh}
  .hero-mark{width:92vw}
  .hero-copy .btn{height:44px;padding:0 18px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .hero-copy > *{opacity:1;transform:none}
  .scroll-cue i{animation:none}
}

/* rajzolt réteg (intro sketch.js) */
.sk{display:block;width:100%;max-width:100%;line-height:0}
.sk svg{display:block;width:100%;height:auto}
.sk.bare{overflow:visible}
.film{background:var(--ink)}

/* Papírhatás (mint az introban): az ételillusztrációk vágott papírként, a pasztell alapjuk finom papírszemcsével */
use[href^="#i-"]{filter:url(#paper-cut)}
:is(div,span):has(> svg > use[href^="#i-"]){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='.3' intercept='.79'/%3E%3CfeFuncG type='linear' slope='.3' intercept='.79'/%3E%3CfeFuncB type='linear' slope='.3' intercept='.79'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
  background-blend-mode:multiply;background-size:180px 180px}
/* átlátszó alapú ikon-tartókon ne legyen papírszemcse (sötét kártyákon szürke négyzetnek látszana) */
:is(.a-dark-icon, .a-dark-card span, [class*="-dark"] span):has(> svg > use[href^="#i-"]){background-image:none !important}

/* nyelvválasztó: egyetlen papírzászló (az aktuális nyelv); fölé húzva vagy rákattintva alatta kicsúszik a másik */
.lang-switch{position:relative;display:inline-flex;flex-direction:column;align-items:center;margin:0 4px 0 10px}
.lang-switch button{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 6px;border:0;background:transparent;cursor:pointer;
  font-family:var(--hand);font-weight:600;font-size:19px;line-height:1;color:var(--ink70)}
.lang-switch .flag{width:30px;height:20px;overflow:visible;transform:rotate(-4deg);transition:transform .35s var(--spring)}
.lang-switch .flag-paper{filter:url(#paper-cut)}
.lang-switch button:hover .flag{transform:rotate(3deg) translateY(-1px)}
.lang-switch button[aria-pressed="true"]{order:0}
.lang-switch button[aria-pressed="false"]{order:1;position:absolute;top:100%;left:0;margin-top:2px;opacity:0;transform:translateY(-8px) rotate(-2deg);pointer-events:none;
  background:var(--bone);border-radius:3px;box-shadow:2px 3px 0 rgba(17,17,17,.1);clip-path:polygon(2% 4%,97% 0,100% 94%,4% 100%);
  transition:opacity .2s,transform .35s var(--spring)}
.lang-switch:hover button[aria-pressed="false"],.lang-switch:focus-within button[aria-pressed="false"],.lang-switch.open button[aria-pressed="false"]{opacity:1;transform:rotate(2deg);pointer-events:auto}
.lang-switch button[aria-pressed="false"] .flag{transform:rotate(3deg)}
.nav.dark .lang-switch button{color:rgba(250,246,238,.8)}
.nav.dark .lang-switch button[aria-pressed="false"]{background:var(--night2);color:rgba(250,246,238,.85)}
@media (max-width:760px){.lang-switch button span{display:none}}
html{overflow-x:clip}
.nav-links a{white-space:nowrap}
@media (max-width:980px){.nav-links{gap:2px}.nav-links a:not(.btn){padding:8px 10px;font-size:14px}}