/* ==========================================================================
   Genni AI — cinematic hero
   Drop-in section: <section class="genni-hero"> + css/hero.css + js/hero.js
   ========================================================================== */

:root{
  --gh-ink:        #02050f;
  --gh-ink-2:      #060c1e;
  --gh-gold:       #f6cd72;
  --gh-gold-hi:    #ffe9ae;
  --gh-gold-deep:  #a76f1c;
  --gh-blue:       #2f7dff;
  --gh-cyan:       #8fe3ff;
  --gh-violet:     #9a7bff;
  --gh-ui:         'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gh-display:    'Cinzel', 'Trajan Pro', Georgia, serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--gh-ink); }

/* ---------- stage ---------------------------------------------------- */

.genni-hero{
  position:relative;
  width:100%;
  height:100svh;
  min-height:520px;
  max-height:1100px;
  overflow:hidden;
  /* Sampled from the plate itself, so any area the plate does not cover on a
     tall screen reads as more of the same night sky. */
  background:
    radial-gradient(115% 62% at 50% 64%, #01337f 0%, #011e56 34%, #010f2e 64%, #01050f 100%),
    #01050f;
  isolation:isolate;
  font-family:var(--gh-ui);
  -webkit-tap-highlight-color:transparent;
}
@supports not (height:100svh){ .genni-hero{ height:100vh; } }

/* The background plate is sized + translated by JS so that the lamp always
   lands on the same screen point, whatever the viewport aspect ratio is. */
.gh-stage{
  position:absolute; top:0; left:0;
  transform-origin:0 0;
  will-change:transform;
}
.gh-plate{
  position:absolute; inset:0;
  background:url('../assets/lamp-scene.webp') center/100% 100% no-repeat;
  will-change:opacity,filter;
  opacity:0;
  transform:scale(1.045);
  transition:opacity 1.15s ease-out, transform 2.6s cubic-bezier(.22,.61,.36,1),
             filter 1.2s ease-out;
  filter:brightness(.42) saturate(.72);
}
.genni-hero.is-lit .gh-plate{
  opacity:1;
  transform:scale(1);
  filter:brightness(1) saturate(1);
}

/* Warm ember breathing inside the lamp bowl (positioned by JS). */
.gh-emberglow{
  position:absolute;
  width:0; height:0;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(closest-side,
              rgba(255,222,158,.44), rgba(255,172,64,.18) 40%, rgba(255,138,20,0) 70%);
  mix-blend-mode:screen;
  transition:opacity 1.4s ease-out;
}
.genni-hero.is-lit .gh-emberglow{ opacity:1; animation:gh-breathe 4.6s ease-in-out infinite; }
@keyframes gh-breathe{ 0%,100%{ transform:scale(1); opacity:.55 } 50%{ transform:scale(1.14); opacity:.85 } }

/* On phones the plate is narrower than the screen is tall, so feather its top
   edge into the backdrop gradient instead of showing a seam. */
.genni-hero.is-portrait .gh-plate{
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
}

.gh-vignette{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    radial-gradient(120% 78% at 50% 58%, rgba(0,0,0,0) 38%, rgba(1,3,10,.62) 82%, rgba(1,3,10,.94) 100%),
    linear-gradient(to bottom, rgba(1,3,10,.55), rgba(1,3,10,0) 22%, rgba(1,3,10,0) 68%, rgba(1,3,10,.7));
}

.gh-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
}
/* Additive layers: `screen` adds light to the plate without ever clipping
   hard to white, which is exactly the look glowing smoke wants. */
.gh-canvas--add{ mix-blend-mode:screen; }
#ghBack { z-index:3; }
#ghFig  { z-index:4; }
#ghFront{ z-index:5; }
.gh-bubble{ z-index:7 !important; }
.gh-ui{ z-index:8 !important; }

/* ---------- speech bubble --------------------------------------------
   "Hukum Mere Aaka" is spoken, not captioned: the bubble is anchored beside
   his head and its tail is rotated by JS to point at his mouth.
   -------------------------------------------------------------------- */

.gh-bubble{
  position:absolute; left:50%; top:30%;
  z-index:7;
  max-width:min(46vw, 420px);
  padding:clamp(14px,1.5vw,20px) clamp(20px,2.2vw,30px);
  border:1px solid rgba(151,206,255,.5);
  border-radius:22px;
  background:linear-gradient(155deg, rgba(20,42,88,.9), rgba(9,18,40,.88));
  -webkit-backdrop-filter:blur(16px) saturate(1.35);
          backdrop-filter:blur(16px) saturate(1.35);
  box-shadow:
    0 0 0 1px rgba(6,12,28,.7),
    0 20px 60px -22px rgba(0,0,0,.95),
    0 0 70px -14px rgba(74,158,255,.6),
    inset 0 0 34px -10px rgba(255,196,96,.28);
  pointer-events:none;
  transform-origin:20% 120%;
  opacity:0;
  transform:translate(-50%,-50%) scale(.6);
  transition:opacity .42s ease, transform .58s cubic-bezier(.18,1.3,.36,1);
}
.genni-hero.is-speaking .gh-bubble{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

/* The <p> only does layout. It must NOT carry background-clip:text or a
   filter: combining either one with filtered children smears the glyphs in
   Chromium, which is what produced the garbled first word. */
.gh-bubble__text{
  margin:0;
  white-space:nowrap;
  font-family:var(--gh-display);
  font-weight:700;
  font-size:clamp(17px, 2.05vw, 33px);
  line-height:1.3;
  letter-spacing:.075em;
  color:var(--gh-gold);
}

/* Each word owns its own gold gradient, so the reveal transition can never
   break the parent's text clip. The gradient is near-vertical and every word
   shares a baseline, so per-word gradients look identical to one shared one. */
.gh-w{
  display:inline-block;
  background-image:linear-gradient(176deg, var(--gh-gold-hi) 6%, var(--gh-gold) 46%, var(--gh-gold-deep) 98%);
  opacity:0;
  transform:translateY(.26em) scale(.94);
  transition:opacity .38s ease-out, transform .48s cubic-bezier(.2,.9,.3,1);
}
.gh-w.is-on{ opacity:1; transform:none; }

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .gh-w{
    -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent;
  }
}

/* the tail: a triangle rooted on the bubble edge, aimed at his mouth */
.gh-bubble__tail{
  position:absolute; left:0; top:0;
  width:clamp(24px,2.4vw,36px); height:clamp(18px,1.8vw,26px);
  margin-top:calc(clamp(18px,1.8vw,26px) / -2);
  transform-origin:0 50%;
  /* outer triangle = the bubble's border colour ... */
  background:rgba(151,206,255,.5);
  clip-path:polygon(0 0, 100% 50%, 0 100%);
  filter:drop-shadow(0 2px 14px rgba(74,158,255,.55));
}
/* ...inner triangle = the bubble's fill, leaving a 1px rim so the tail is
   visible against the dark plate exactly like the bubble's own edge. */
.gh-bubble__tail::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(155deg, rgba(20,42,88,.97), rgba(9,18,40,.95));
  clip-path:polygon(1.4px 3px, calc(100% - 3.4px) 50%, 1.4px calc(100% - 3px));
}

/* a couple of magical motes trailing from the mouth to the bubble */
.gh-bubble__spark{
  position:absolute;
  width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle, rgba(190,230,255,.95), rgba(90,170,255,0) 70%);
  opacity:0;
  transition:opacity .5s ease;
}
.genni-hero.is-speaking .gh-bubble__spark{ opacity:.85; animation:gh-mote 2.6s ease-in-out infinite; }
.gh-bubble__spark:nth-of-type(2){ animation-delay:.5s; }
@keyframes gh-mote{ 0%,100%{ transform:translateY(0) scale(1); opacity:.3 } 50%{ transform:translateY(-6px) scale(1.35); opacity:.9 } }

/* ---------- conjured buttons ----------------------------------------- */

.gh-ui{ position:absolute; inset:0; z-index:7; pointer-events:none; }

.gh-btn{
  position:absolute;
  display:inline-flex; align-items:center; justify-content:center;
  transform:translate(-50%,-50%) scale(.82);
  padding:clamp(11px,1.15vw,17px) clamp(24px,2.5vw,40px);
  border-radius:999px;
  font-family:var(--gh-ui);
  font-weight:600;
  font-size:clamp(13px,1.05vw,17px);
  letter-spacing:.11em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  overflow:hidden;
  opacity:0;
  filter:blur(15px);
  pointer-events:none;
  will-change:transform,opacity,filter;
  transition:opacity .82s ease-out,
             filter .82s cubic-bezier(.2,.7,.3,1),
             transform .9s cubic-bezier(.16,.9,.3,1),
             box-shadow .35s ease, background-color .35s ease;
}
.gh-btn.is-formed{
  opacity:1;
  filter:none;
  transform:translate(-50%,-50%) scale(1);
  pointer-events:auto;
}

/* primary — poured gold */
.gh-btn--login{
  color:#2a1704;
  background:linear-gradient(160deg, #ffeab4 0%, var(--gh-gold) 34%, #d79a30 68%, #a56d1b 100%);
  border:1px solid rgba(255,232,175,.85);
  box-shadow:
    0 0 0 1px rgba(120,74,10,.55),
    0 10px 34px -8px rgba(255,178,60,.55),
    0 0 46px -6px rgba(255,190,90,.42),
    inset 0 1px 0 rgba(255,255,255,.6);
}
.gh-btn--login:hover,.gh-btn--login:focus-visible{
  box-shadow:
    0 0 0 1px rgba(120,74,10,.55),
    0 14px 40px -8px rgba(255,186,70,.72),
    0 0 66px -4px rgba(255,200,110,.6),
    inset 0 1px 0 rgba(255,255,255,.7);
}

/* secondary — smoked glass */
.gh-btn--signup{
  color:var(--gh-gold-hi);
  background:rgba(10,20,48,.42);
  -webkit-backdrop-filter:blur(11px) saturate(1.25);
  backdrop-filter:blur(11px) saturate(1.25);
  border:1px solid rgba(246,205,114,.62);
  box-shadow:
    0 8px 30px -10px rgba(0,0,0,.85),
    0 0 34px -8px rgba(120,170,255,.4),
    inset 0 1px 0 rgba(255,235,185,.22);
}
.gh-btn--signup:hover,.gh-btn--signup:focus-visible{
  background:rgba(22,40,86,.55);
  border-color:rgba(255,232,175,.95);
  box-shadow:
    0 8px 30px -10px rgba(0,0,0,.85),
    0 0 54px -6px rgba(150,195,255,.6),
    inset 0 1px 0 rgba(255,235,185,.3);
}

.gh-btn.is-formed:active{ transform:translate(-50%,-50%) scale(.975); }
.gh-btn:focus-visible{ outline:2px solid var(--gh-cyan); outline-offset:3px; }
.gh-btn__label{ position:relative; z-index:2; }

/* one-shot shimmer as the button finishes condensing */
.gh-btn__sheen{
  position:absolute; top:-60%; bottom:-60%; left:-140%; width:52%;
  z-index:1; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
  transform:skewX(-18deg);
}
.gh-btn.is-formed .gh-btn__sheen{ animation:gh-sheen 1.05s .34s cubic-bezier(.3,.1,.2,1) 1; }
@keyframes gh-sheen{ to{ left:190%; } }

/* ---------- narrow screens ------------------------------------------- */

@media (max-width:640px){
  .gh-btn{ font-size:12.5px; padding:12px 26px; letter-spacing:.1em; }
  .gh-bubble{ max-width:min(72vw, 320px); padding:12px 18px; }
  .gh-bubble__text{ letter-spacing:.06em; }
}

/* ---------- reduced motion ------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  .gh-plate,.gh-btn,.gh-w,.gh-bubble{ transition-duration:.01ms !important; }
  .gh-btn .gh-btn__sheen{ animation:none !important; }
  .genni-hero.is-lit .gh-emberglow{ animation:none !important; }
}