/* ============================================================
   iTRINITY — Anamorphic LED hero
   ------------------------------------------------------------
   The scene is drawn live by js/anamorphic.js.
   Everything here is layout and keeping the headline readable.
   ============================================================ */

.hero.has-anam{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#05070f;
  isolation:isolate;
}

.anam-stage{position:absolute;inset:0;z-index:0}
.anam-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}

/* keeps the copy readable whatever the panel is doing */
.hero.has-anam::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(5,7,15,.93) 0%, rgba(5,7,15,.78) 28%,
    rgba(5,7,15,.30) 52%, rgba(5,7,15,0) 78%);
}

.hero.has-anam .container{position:relative;z-index:2}
.hero.has-anam .hero-inner{max-width:620px;position:relative}

/* soft pool of darkness locked behind the text */
.hero.has-anam .hero-inner::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-64px -150px -56px -80px;
  background:radial-gradient(ellipse 80% 70% at 32% 50%,
    rgba(4,6,13,.95) 0%, rgba(4,6,13,.88) 44%,
    rgba(4,6,13,.55) 70%, transparent 92%);
}
/* no text-shadow on .grad-text — its glyphs are transparent, a
   shadow would show straight through them */
.hero.has-anam .hero-inner h1,
.hero.has-anam .hero-inner p,
.hero.has-anam .hero-kicker{
  text-shadow:0 2px 18px rgba(5,7,15,.9), 0 1px 4px rgba(5,7,15,.95);
}
.hero.has-anam .hero-inner h1 .grad-text{text-shadow:none}

/* prompt sits in flow under the buttons — can never overlap */
.anam-hint{
  display:inline-flex;align-items:center;gap:.6rem;
  margin-top:1.9rem;
  font-size:.73rem;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(232,236,244,.7);pointer-events:none;
  padding:.55em 1.2em;border-radius:999px;
  background:rgba(5,7,15,.5);border:1px solid rgba(255,255,255,.14);
  transition:opacity .6s;
}
.anam-hint i{color:var(--cyan)}
.hero.has-anam.touched .anam-hint{opacity:0}

.anam-badge{
  position:absolute;z-index:2;right:26px;bottom:104px;
  display:flex;align-items:center;gap:.6rem;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(232,236,244,.55);pointer-events:none;
}
.anam-badge b{
  width:8px;height:8px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 10px var(--cyan);animation:anam-blink 1.8s infinite;
}
@keyframes anam-blink{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- tablets and phones ---------- */
@media(max-width:991px){
  .anam-badge{display:none}
  /* panel sits up top, copy sits below it */
  .hero.has-anam{align-items:flex-end;padding-bottom:96px}
  .hero.has-anam .hero-inner{max-width:100%;padding-top:6vh}
  .hero.has-anam::before{
    background:linear-gradient(180deg,
      transparent 0%, rgba(5,7,15,.10) 30%,
      rgba(5,7,15,.72) 46%, rgba(5,7,15,.96) 60%, rgba(5,7,15,1) 100%);
  }
  .hero.has-anam .hero-inner::before{
    inset:-26px -26px -30px -26px;
    background:radial-gradient(ellipse 94% 78% at 50% 58%,
      rgba(4,6,13,.92) 0%, rgba(4,6,13,.80) 56%, transparent 94%);
  }
}
@media(max-width:991px) and (max-height:780px){
  .hero.has-anam{padding-bottom:64px}
  .hero.has-anam .hero-inner{padding-top:0}
  .hero.has-anam .hero-inner p{margin-bottom:1.6rem;font-size:.98rem}
  .anam-hint{margin-top:1rem}
}
@media(max-width:767px){
  .anam-hint{font-size:.66rem;letter-spacing:.12em;padding:.5em 1em;margin-top:1.3rem}
}

@media(prefers-reduced-motion:reduce){
  .anam-badge b{animation:none}
}