/* Hero 3D: plátno s čiastočkami v obrazovke notebooku, choreografia telefónu a tlačidlo „Prehrať znova“.
   Farby a písmo berie z tokenov stránky (assets/tokens.css), záložné hodnoty sú len pre testovaciu stránku.
   Všetko platí iba pri html.h3d (nastaví skript v <head>: JS, WebGL, bez obmedzenia pohybu).
   Bez tejto triedy je hero presne statická verzia zo site.css: nový web, telefón a posuvník pred/po. */

html.h3d .hero__text { position: relative; z-index: 2; }

/* ---------- plátno: presne obsah obrazovky, zaoblené rohy ako obrazovka ---------- */
.h3d-canvas { position: absolute; inset: 0; z-index: 3; display: block; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; visibility: hidden; }
.h3d-canvas.is-live { visibility: visible; }

/* ---------- obrazovka pred filmom: tmavosivé sklo s jemným odleskom, žiadna čierna doska ---------- */
html.h3d .hero .laptop .screen {
  background:
    radial-gradient(120% 85% at 15% 0%, rgb(255 255 255 / 0.13), transparent 58%),
    linear-gradient(155deg, color-mix(in srgb, var(--device-bezel-2, #2A2E36) 78%, var(--color-paper, #FFFFFF)), var(--device-bezel-2, #2A2E36) 52%, color-mix(in srgb, var(--device-bezel-2, #2A2E36) 70%, var(--device-bezel, #15181D)));
}
html.h3d .hero .laptop .screen::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 0.08) 50%, transparent 62%);
  transform: translateX(-100%); transition: opacity 300ms ease-out;
}
html.h3d .hero:not(.h3d-po):not(.h3d-playing) .laptop .screen::after { opacity: 1; animation: h3d-shimmer 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes h3d-shimmer { to { transform: translateX(100%); } }

/* ---------- obrázky v notebooku: starý web sa sám nikdy neukáže ---------- */
html.h3d .hero .laptop .screen img { clip-path: none; opacity: 0; transition: opacity 600ms var(--ease-out, ease-out); }
html.h3d .hero.h3d-po .laptop .screen__po { opacity: 1; }
html.h3d .hero.h3d-playing .laptop .screen img { transition: none; }
html.h3d .hero.h3d-playing .laptop .screen__pred { opacity: var(--h3d-pred, 0); }
html.h3d .hero.h3d-playing .laptop .screen__po { opacity: var(--h3d-po, 0); }

/* ---------- telefón: počas filmu skrytý, po pristátí vojde sprava s jemnou pružinou, vždy s novým webom ---------- */
html.h3d .hero .phone__screen .screen__pred { display: none; }
html.h3d .hero .phone__screen .screen__po { clip-path: none; opacity: 1; }
html.h3d .hero .phone {
  opacity: 0; translate: 36px 14px; scale: 0.96;
  transition: opacity 280ms var(--ease-in, ease-in), translate 320ms var(--ease-in, ease-in), scale 320ms var(--ease-in, ease-in);
}
html.h3d .hero.h3d-phone-in .phone {
  opacity: 1; translate: 0 0; scale: 1;
  transition: opacity 420ms var(--ease-out, ease-out), translate 760ms cubic-bezier(0.22, 1.18, 0.36, 1), scale 760ms cubic-bezier(0.22, 1.18, 0.36, 1);
}

/* ---------- posuvník pred/po nahrádza tlačidlo „Prehrať znova“, poznámka ostáva ---------- */
.h3d-replay { display: none; }
html.h3d .stage { --split: 0; }
html.h3d .compare__line { display: none; }
html.h3d .stage__control {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs, 8px) var(--space-md, 16px);
  max-width: none; padding: 0; border: 0; background: none; box-shadow: none;
}
html.h3d .stage__control > label,
html.h3d .stage__range { display: none; }
html.h3d .h3d-replay {
  display: inline-flex; align-items: center; gap: var(--space-xs, 8px);
  min-height: 40px; padding: 0 var(--space-md, 16px) 0 var(--space-xs, 8px);
  border-radius: var(--radius-pill, 999px); border: 1px solid var(--color-rule, #E3E6EB);
  background: var(--color-card, #FFFFFF); color: var(--color-ink, #0E1116);
  font: 600 var(--text-sm, 0.9375rem)/1 var(--font-body, "Inter", system-ui, sans-serif);
  cursor: pointer; visibility: hidden;
  transition: border-color var(--dur-micro, 120ms) var(--ease-out, ease-out), color var(--dur-micro, 120ms) var(--ease-out, ease-out), transform var(--dur-micro, 120ms) var(--ease-out, ease-out);
}
html.h3d .hero.h3d-ready .h3d-replay { visibility: visible; }
.h3d-replay__icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--color-accent-soft, #E8ECFE); color: var(--color-accent, #2F4BF5); }
.h3d-replay__icon svg { width: 14px; height: 14px; }
html.h3d .h3d-replay:hover { border-color: var(--color-ink, #0E1116); }
html.h3d .h3d-replay:active { transform: translateY(1px); }
html.h3d .h3d-replay:focus-visible { outline: 2px solid var(--color-focus, #2F4BF5); outline-offset: 3px; }
html.h3d .h3d-replay:disabled { cursor: default; color: var(--color-muted, #5F6673); border-color: var(--color-rule, #E3E6EB); transform: none; }
html.h3d .h3d-replay:disabled .h3d-replay__icon svg { animation: h3d-spin 1.2s linear infinite; }
@keyframes h3d-spin { to { transform: rotate(-360deg); } }

@media (prefers-reduced-motion: reduce) {
  html.h3d .hero .laptop .screen::after { animation: none; opacity: 0; }
}