/* Frameshift — Cinematic hero */
.hero {
  position: relative;
  display: flex;
  overflow: clip;
  isolation: isolate;
  color: var(--c-text);
  background: var(--c-bg);
  min-block-size: 100vh;
  min-block-size: 100svh;
  padding-block: calc(var(--header-h) + 2rem) clamp(2.5rem, 6vw, 5rem);
}
.hero--large { min-block-size: 82svh; }
.hero--medium { min-block-size: 62svh; }
.hero--pos-bottom { align-items: flex-end; }
.hero--pos-center { align-items: center; }
.hero--pos-top { align-items: flex-start; }

.hero__layers { position: absolute; inset: 0; z-index: 0; }
.hero__bg, .hero__fg, .hero__hud { position: absolute; inset: 0; will-change: transform; }
.hero__bg { inset: -3%; }
.hero__poster, .hero__poster img, .hero__video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.hero__poster img { object-fit: cover; }
.hero__video { z-index: 1; }
.hero__video video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-4) var(--ease-out); }
.hero__video.is-playing video { opacity: 1; }
.hero__poster--under { z-index: 0; }
.hero__shade {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg, rgb(var(--c-bg-rgb) / calc(var(--overlay) * 0.6)) 0%, transparent 35%, rgb(var(--c-bg-rgb) / calc(var(--overlay) + 0.25)) 100%),
    linear-gradient(90deg, rgb(var(--c-bg-rgb) / var(--overlay)) 0%, rgb(var(--c-bg-rgb) / calc(var(--overlay) * 0.55)) 45%, transparent 90%);
}
[dir='rtl'] .hero__shade {
  background:
    linear-gradient(180deg, rgb(var(--c-bg-rgb) / calc(var(--overlay) * 0.6)) 0%, transparent 35%, rgb(var(--c-bg-rgb) / calc(var(--overlay) + 0.25)) 100%),
    linear-gradient(270deg, rgb(var(--c-bg-rgb) / var(--overlay)) 0%, rgb(var(--c-bg-rgb) / calc(var(--overlay) * 0.55)) 45%, transparent 90%);
}
.hero--align-center .hero__shade { background: radial-gradient(ellipse at 50% 70%, rgb(var(--c-bg-rgb) / calc(var(--overlay) + 0.2)), transparent 75%), linear-gradient(180deg, transparent 50%, rgb(var(--c-bg-rgb) / var(--overlay))); }
.hero__glow {
  position: absolute; z-index: 2; pointer-events: none;
  inline-size: 70vmax; block-size: 70vmax;
  inset-block-end: -45vmax; inset-inline-start: 50%;
  translate: -50% 0;
  background: radial-gradient(circle, rgb(var(--c-accent-rgb) / calc(0.4 * var(--glow))), transparent 60%);
  filter: blur(20px);
  opacity: 0.8;
}
html:not([data-cinematic]) .hero__glow { display: none; }

.hero__fg { z-index: 3; display: flex; align-items: center; justify-content: flex-end; padding-inline: 4vw; pointer-events: none; }
.hero__fg-img { inline-size: min(48vw, 760px); block-size: auto; filter: drop-shadow(0 40px 60px rgb(0 0 0 / 0.55)); }
@media (max-width: 749px) {
  .hero__fg { align-items: flex-start; justify-content: center; padding-block-start: calc(var(--header-h) + 0.5rem); }
  /* Smaller and faded toward the headline so copy always stays legible on phones */
  .hero__fg-img { inline-size: 66vw; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); opacity: 0.85; }
}

/* HUD overlay */
.hero__hud { z-index: 3; inset: clamp(12px, 2.5vw, 32px); inset-block-start: calc(var(--header-h) + 12px); pointer-events: none; }
.hero__hud .hud-corners { inset: 0; --hud-l: 22px; }
.hero__hud-line { position: absolute; background: rgb(var(--c-text-rgb) / 0.12); }
.hero__hud-line--x { inset-inline: 0; inset-block-start: 50%; block-size: 1px; }
.hero__hud-line--y { inset-block: 0; inset-inline-start: 62%; inline-size: 1px; }
.hero__hud-tag { position: absolute; color: rgb(var(--c-text-rgb) / 0.6); }
.hero__hud-tag--tl { inset-block-start: 14px; inset-inline-start: 18px; }
.hero__hud-tag--br { inset-block-end: 14px; inset-inline-end: 18px; }
.hero__hud-tag::before { content: ''; display: inline-block; inline-size: 6px; block-size: 6px; margin-inline-end: 0.6em; background: var(--c-accent); animation: blink 1.4s steps(2) infinite; }
@media (max-width: 749px) { .hero__hud-line { display: none; } }

/* Content */
.hero__inner { position: relative; z-index: 4; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem; }
.hero__content { display: grid; gap: clamp(1rem, 2vw, 1.6rem); max-inline-size: 64rem; }
.hero--align-center .hero__inner { grid-template-columns: 1fr; justify-items: center; }
.hero--align-center .hero__content { text-align: center; justify-items: center; }
.hero__heading { text-shadow: 0 2px 40px rgb(var(--c-bg-rgb) / 0.4); }
.hero__heading.h0 { max-inline-size: 12ch; }
.hero__text { color: rgb(var(--c-text-rgb) / 0.82); }
.hero__ctas { margin-block-start: 0.5rem; }
.hero--align-center .hero__ctas { justify-content: center; }

/* Product reveal card */
.hero__reveal {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 1rem; align-items: center;
  inline-size: min(360px, 100%); padding: 0.9rem;
  background: rgb(var(--c-bg-rgb) / 0.55);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgb(var(--c-text-rgb) / 0.14);
}
[data-corners='chamfer'] .hero__reveal { clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer)); }
.hero__reveal-media { inline-size: 96px; }
.hero__reveal-body { display: grid; gap: 0.35rem; justify-items: start; min-inline-size: 0; }
.hero__reveal-title { font-weight: 600; text-decoration: none; line-height: 1.25; }
.hero__reveal-title:hover { color: var(--c-accent); }
.hero__reveal .button { margin-block-start: 0.3rem; }
@media (max-width: 989px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__reveal { inline-size: 100%; }
}

/* Video controls */
.hero__video-controls { position: absolute; inset-block-start: calc(var(--header-h) + 20px); inset-inline-end: clamp(16px, 3vw, 32px); z-index: 6; display: flex; gap: 0.5rem; }
.hero__ctrl { display: grid; place-items: center; inline-size: 44px; block-size: 44px; color: var(--c-text); background: rgb(var(--c-bg-rgb) / 0.5); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgb(var(--c-text-rgb) / 0.2); transition: background var(--dur-1); }
.hero__ctrl:hover { background: var(--c-accent); color: var(--c-on-accent); }
.hero__ctrl-pause, .hero__ctrl-unmuted { display: none; }
nx-video.is-playing .hero__ctrl-play { display: none; }
nx-video.is-playing .hero__ctrl-pause { display: block; }
nx-video.is-unmuted .hero__ctrl-muted { display: none; }
nx-video.is-unmuted .hero__ctrl-unmuted { display: block; }
.hero__ctrl .icon { inline-size: 18px; block-size: 18px; }
.hero__video-controls { pointer-events: auto; }
.hero__layers .hero__video { pointer-events: none; }
.hero__layers .hero__video-controls { pointer-events: auto; }
.hero:has(.hero__video) .hero__layers { pointer-events: auto; }

/* Scroll hint */
.hero__scroll { position: absolute; z-index: 5; inset-block-end: 1.25rem; inset-inline-start: 50%; translate: calc(-50% * var(--dir, 1)) 0; display: grid; justify-items: center; gap: 0.5rem; text-decoration: none; color: var(--c-muted); }
.hero__scroll-bar { inline-size: 1px; block-size: 40px; background: linear-gradient(var(--c-accent), transparent); transform-origin: top; animation: scroll-hint 2s var(--ease-in-out) infinite; }
@keyframes scroll-hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.hero--align-start .hero__scroll { display: none; }
@media (min-width: 990px) { .hero--align-start .hero__scroll { display: grid; inset-inline-start: auto; inset-inline-end: var(--gutter); translate: none; } }

/* Depth — pointer parallax (full motion + parallax only) */
html[data-fx='full'][data-parallax] .hero [data-depth] {
  transform: translate3d(calc(var(--mx, 0) * var(--depth) * 1px), calc(var(--my, 0) * var(--depth) * 1px), 0);
}

/* Scroll-out: content drifts and fades, background scales as --p grows past mid */
html[data-fx='full'][data-scenes] .hero.scene--live .hero__inner {
  translate: 0 calc(max(var(--p, 0) - 0.5, 0) * -160px);
  opacity: calc(1 - max(var(--p, 0) - 0.5, 0) * 2.2);
}
html[data-fx='full'][data-scenes] .hero.scene--live .hero__layers {
  scale: calc(1 + max(var(--p, 0) - 0.5, 0) * 0.16);
  filter: brightness(calc(1 - max(var(--p, 0) - 0.5, 0) * 0.9));
}

/* Cinematic entrance */
html[data-fx='full'][data-cinematic] .hero__bg { animation: hero-in 1.8s var(--ease-out) both; }
html[data-fx='full'][data-cinematic] .hero__hud { animation: hero-hud 1.2s var(--ease-out) 0.4s both; }
html[data-fx='full'][data-cinematic] .hero__glow { animation: hero-glow 6s var(--ease-in-out) infinite alternate; }
@keyframes hero-in { from { scale: 1.12; filter: brightness(0.3) saturate(0.6); } }
@keyframes hero-hud { from { opacity: 0; clip-path: inset(50% 0 50% 0); } }
@keyframes hero-glow { to { opacity: 0.45; translate: -45% -6%; } }
/* Short viewports (landscape phones): drop decorative HUD labels so they never collide with content */
@media (max-height: 560px) {
  .hero__hud { display: none; }
}

/* Keep the heading, copy and buttons inside the first screen on short viewports (laptops, landscape phones). */
.hero__heading.h0 { font-size: min(calc(var(--display-size) * var(--heading-scale)), 15svh); }
.hero__heading.h1 { font-size: min(var(--h1), 11svh); }
@media (max-height: 760px) {
  .hero { padding-block: calc(var(--header-h) + 1rem) 1.5rem; }
  .hero__content { gap: 0.7rem; }
  .hero__heading.h0 { font-size: min(calc(var(--display-size) * var(--heading-scale)), 11.5svh); }
}