/* ==========================================================================
   WIZKET — hero.css  (Section 2: orbit hero)
   Uses the global tokens only. Canvas layers: back tiles → title → front tiles → meta.
   ========================================================================== */
.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background:
    radial-gradient(60% 55% at 50% 46%, var(--petrol) 0%, transparent 70%),
    var(--bg);
  transition: background-color 0.6s var(--ease-io);
}
:root[data-theme="light"] .hero {
  background: radial-gradient(60% 55% at 50% 46%, var(--petrol) 0%, transparent 72%), var(--bg);
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.hero__canvas--back { z-index: 0; }
.hero__canvas--front { z-index: 2; }

.hero__title-wrap {
  position: absolute; z-index: 1;
  left: 0; right: 0; top: 50%;
  transform: translate3d(0, -50%, 0);
  display: grid; justify-items: center; gap: clamp(8px, 1.4vh, 16px);
  pointer-events: none; will-change: transform;
}
.hero__eyebrow {
  margin: 0;
  font: 500 clamp(0.68rem, 0.9vw, 0.8rem)/1 var(--font-body);
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted);
}
.hero__eyebrow i { font-style: normal; color: var(--accent); margin: 0 0.5em; }
.hero__title {
  margin: 0;
  font: 400 clamp(5rem, 15.5vw, 17rem)/0.86 var(--font-display);
  letter-spacing: 0.005em; color: var(--text);
  display: flex; text-transform: uppercase;
}
.hero__char { display: block; overflow: hidden; padding-top: 0.04em; }
.hero__char > span { display: block; will-change: transform; }

.hero__meta {
  position: absolute; z-index: 3;
  left: var(--gutter); right: var(--gutter); bottom: max(28px, env(safe-area-inset-bottom, 0px) + 20px);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
}
.hero__line { margin: 0; max-width: 24ch; font: 500 clamp(0.95rem, 1.25vw, 1.15rem)/1.35 var(--font-body); color: var(--text); }

@media (min-width: 1024px) { .hero__meta { left: 48px; right: 48px; bottom: 44px; } }

/* portrait / mobile: stack the meta, ring gets its own composition in JS */
@media (max-width: 720px), (max-aspect-ratio: 4/5) {
  .hero { min-height: 620px; }
  .hero__title-wrap { top: 45%; }
  .hero__title { font-size: clamp(4.5rem, 27vw, 9rem); }
  .hero__meta { flex-direction: column; align-items: center; gap: 20px; text-align: center; }
  .hero__line {                   /* centred, always two lines: "…experiences that" / "move businesses forward." */
    max-width: none;
    font: 500 clamp(0.8rem, 4vw, 1.18rem)/1.4 var(--font-body);   /* sized so line 1 stays clear of the music button */
    letter-spacing: -0.005em;
  }
  .hero__line > span { display: block; white-space: nowrap; }
  .hero__meta > div { width: 100%; }
  .hero__meta .cta { width: 100%; justify-content: center; }
}

html.js.is-loading [data-hero-fade] { opacity: 0; }
@media (prefers-reduced-motion: reduce) { html.js.is-loading [data-hero-fade] { opacity: 1; } }