/* UFA főoldal (home.css): csak a főoldal jelenetei. 1) Hero-szakadás (A változat, v8), 2) A Ház felülről (E változat, v12). Közös stílus: site.css */

/* ===== 1) HERO · a staredown görgetésre szétszakad (pin + scrub) ===== */
.hero{position:relative;height:300vh;isolation:isolate}
.h-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#02040a}
.half{position:absolute;inset:-6% -4%;will-change:transform}
.half .ph{position:absolute;inset:0;background-position:50% 32%}
.half.l{clip-path:polygon(0 0,56% 0,44% 100%,0 100%)}
.half.r{clip-path:polygon(56% 0,100% 0,100% 100%,44% 100%)}
.half.l .ph{filter:saturate(1.15)}
.half.r .ph{filter:grayscale(.75) contrast(1.08) brightness(1.04)}
.tear{position:absolute;inset:-6% -4%;pointer-events:none;will-change:opacity}
.tear i{position:absolute;inset:0;background:var(--blue-hi);clip-path:polygon(55.75% 0,56.25% 0,44.25% 100%,43.75% 100%)}
.fwedge{position:absolute;left:50%;top:-8%;bottom:-8%;width:min(46vw,620px);margin-left:calc(min(46vw,620px) / -2);opacity:0;will-change:opacity,transform}
.fwedge i{position:absolute;inset:0;background:var(--blue);clip-path:polygon(62% 0,100% 0,38% 100%,0 100%)}
.fwedge b{position:absolute;inset:0;background:var(--blue-hi);clip-path:polygon(61.4% 0,62.6% 0,38.6% 100%,37.4% 100%)}
.shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#000000aa 0%,transparent 22%,transparent 55%,#000000d9 100%)} /* taste-skill-ignore: semleges scrim fotó fölött */
.corner-tag{position:absolute;top:calc(var(--nav) + 18px);z-index:4;padding:6px 10px;font-size:13px;font-weight:700;will-change:transform}
.corner-tag.l{left:var(--g);background:var(--blue);color:#fff}
.corner-tag.r{right:var(--g);background:var(--silver);color:#03050B}
.hcopy{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:calc(var(--nav) + 20px) var(--g) 28px;will-change:transform}
/* főcím: a v7 tipográfiája (Archivo dőlt, széles) */
.hero h1{font-size:clamp(40px,min(7.4vw,13svh),124px)}
.hero h1 .ln{display:block;will-change:transform,clip-path}
.hero h1 .b{color:var(--blue-hi)}
.hside{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:26px;max-width:560px;will-change:opacity,transform}
.hero .lead{font-size:clamp(16px,1.3vw,18px);color:#D6DCEC}
.cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.sports{display:flex;flex-wrap:wrap;justify-content:center;list-style:none;gap:6px 0}
.sports li{font-family:var(--display);font-weight:700;font-stretch:115%;font-family:var(--body);font-weight:600;font-size:15px;color:var(--silver2);padding:0 10px}

/* a hero alatti kártyasor (v7 szerkezet) */
.after-hero{padding:clamp(28px,4vw,48px) 0 0;background:var(--bg)}
.after-hero .tiles{margin-top:0}

/* ===== 2) A HÁZ FELÜLRŐL · drón-leereszkedés (pin + scrub) ===== */
.drone{position:relative;height:330vh;background:var(--bg)}
.drone .stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.d-view{position:absolute;top:0;bottom:0;right:0;width:62%;overflow:hidden}
.d-stage{position:absolute;left:50%;top:0;height:128%;aspect-ratio:1086/1448;transform-origin:50% 40%;will-change:transform}
.d-stage .img{position:absolute;inset:0;background:var(--haz) center/100% 100% no-repeat}
.d-view::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--bg) 0%,#03050Bcc 14%,#03050B22 34%,transparent 60%),linear-gradient(0deg,#03050B 0%,transparent 18%),linear-gradient(180deg,#03050Bcc 0%,transparent 16%)} /* taste-skill-ignore: semleges scrim fotó fölött */
.pin{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:0;height:0;z-index:2}
.pin .dot{position:absolute;left:-9px;top:-9px;width:18px;height:18px;background:var(--blue-hi);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);opacity:.35;transform:scale(.7);transition:opacity .35s,transform .35s}
.pin .ring{position:absolute;left:-26px;top:-26px;width:52px;height:52px;border:2px solid var(--blue-hi);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);opacity:0;transform:scale(.5);transition:opacity .35s,transform .45s cubic-bezier(.2,.7,.2,1)}
.pin .tg{position:absolute;left:18px;top:-11px;white-space:nowrap;font-family:var(--display);font-weight:800;font-stretch:112%;font-size:13px;letter-spacing:.03em;text-transform:uppercase;background:#03050Be8;color:#fff;padding:5px 9px;opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s}
.pin.silver .dot{background:var(--silver)}
.pin.silver .tg{left:auto;right:18px}
.pin.silver .ring{border-color:var(--silver)}
.pin.on .dot,.pin.on .ring,.pin.on .tg{opacity:1;transform:none}
.pin.win .ring{width:84px;height:84px;left:-42px;top:-42px;background:#04B3FF33}
.d-copy{position:absolute;z-index:3;left:0;top:0;bottom:0;width:min(560px,46%);display:flex;flex-direction:column;justify-content:center;padding:calc(var(--nav) + 10px) 0 40px var(--g)}
.d-intro h2{font-size:clamp(34px,4.2vw,64px)}
.d-intro h2 .b{color:var(--blue-hi)}
.d-intro p{margin-top:16px;color:#D3D9EA;max-width:440px}
.strips{position:relative;margin-top:28px;min-height:190px}
.strip{position:absolute;left:0;right:0;top:0;clip-path:inset(0 100% 0 0);visibility:hidden;will-change:clip-path}
.strip.on{visibility:visible}
.strip.on{clip-path:inset(0 0 0 0);transition:clip-path .55s cubic-bezier(.2,.7,.2,1)}
.strip .t{display:inline-flex;gap:14px;align-items:center;background:var(--blue);color:#fff;padding:7px 14px 7px 12px;font-family:var(--display);font-weight:800;font-stretch:112%;font-size:14px;letter-spacing:.04em;text-transform:uppercase;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%)}
.strip .t .bar{display:flex;gap:4px}
.strip .t .bar i{width:18px;height:4px;background:#ffffff40;transform:skewX(-30deg)}
.strip .t .bar i.on{background:#fff}
.strip h3{display:block;background:var(--silver);color:#03050B;padding:10px 16px 8px;font-size:clamp(26px,2.8vw,40px)}
.strip p{background:#03050Be6;padding:12px 16px;color:var(--silver2);font-size:15px}
.strip.final h3{background:var(--blue-hi)}
.d-meter{position:absolute;z-index:3;left:var(--g);bottom:28px;width:min(420px,40%);height:3px;background:#ffffff14}
.d-meter i{display:block;height:100%;background:var(--blue-hi);transform-origin:0 50%;transform:scaleX(0)}
.drone.static{height:auto}
.drone.static .strips{position:relative;left:auto;top:auto;transform:none;min-height:0}
.drone.static .strip{position:relative;margin-bottom:12px}
.drone.static .stick{position:relative;height:auto;min-height:100svh}
.drone.static .d-copy{position:relative;min-height:100svh;padding-bottom:60px}

/* fight card: a tetőterasz két fele (v12) */
.corner-box .ph.wing{background-image:var(--haz);background-size:240% auto;opacity:.62}
.corner-box .ph.wing.left{background-position:22% 33%}
.corner-box .ph.wing.right{background-position:80% 33%}

@media (max-width:900px){
  .hero{height:210vh}
  .half{inset:-4% -30%}
  .half .ph{background-position:50% 30%}
  .fwedge{width:78vw;margin-left:-39vw}
  .corner-tag{font-size:13px;top:calc(var(--nav) + 10px)}
  .hero h1{font-size:clamp(30px,9vw,72px)}
  .hcopy{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .cta .btn{flex:1 1 auto;justify-content:center}
  .drone{height:300vh}
  .d-view{width:100%;bottom:auto;height:62%}
  .d-stage{height:150%}
  .d-view::after{background:linear-gradient(0deg,var(--bg) 0%,transparent 30%),linear-gradient(180deg,#03050Bcc 0%,transparent 20%)} /* taste-skill-ignore: semleges scrim fotó fölött */
  .d-copy{width:100%;top:auto;bottom:0;justify-content:flex-end;padding:0 var(--g) 118px}
  .d-intro p{display:none}
  .profile .body{margin-top:0}
  .strips{min-height:200px;margin-top:16px}
  .d-meter{width:calc(100% - 2*var(--g));bottom:22px}
  .pin .tg{font-size:13px;padding:4px 7px}
  .pin[data-step="2"] .tg{top:16px;left:-24px;right:auto}
  .pin.silver[data-step="2"] .tg{left:auto;right:-24px}
  .drone.static .d-view{position:relative;height:60vh}
  .drone.static .d-copy{position:relative;padding-top:20px}
}
@media (max-width:900px) and (max-height:700px){.d-intro h2{font-size:30px}}
@media (prefers-reduced-motion:reduce){
  .hero{height:auto}
  .h-stage{position:relative;height:auto;min-height:100svh}
  .hcopy{position:relative;min-height:100svh}
}