/* ===================================================================
   Dream Handwriting — write-on treatment for the locked sub-slogan
   (text-agnostic — EN "Get back to the dream." / ES "Recupera tu sueño.")
   -------------------------------------------------------------------
   Drop-in include. Pair with /assets/dream-handwriting.js.
   Any element carrying class "dream-hook" (or a [data-dream-hook]
   attribute) and holding the verbatim text is auto-enhanced by the
   JS: the line draws itself on, left -> right, behind a glowing cyan
   pen nib — once, when it scrolls into view. This mirrors the ava-app
   splash handwriting effect (progressive clip reveal, not an SVG
   stroke trace — Caveat is a filled font, so a stroke trace is wrong).
   Honors prefers-reduced-motion (no draw-on; line shown as-is).
   If the JS never runs the line still renders as plain handwritten
   text — the styling below is the graceful, static fallback.
   Built 2026-05-23 (Dream Framework). Copy is LOCKED — verbatim only.
   =================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&display=swap');

/* ── Canonical handwritten line ─────────────────────────────────────
   Matches ligolaunch-home.html's original .hero-hook: Caveat marker
   font, brand cyan, slight counter-clockwise marker tilt, cyan glow. */
.dream-hook{
  --dream-cyan:#00D4FF;
  display:block;
  font-family:'Caveat',cursive;
  font-size:clamp(2rem,5.2vw,3.3rem);
  font-weight:700;
  line-height:1;
  color:var(--dream-cyan);
  text-align:center;
  margin:0.35rem auto 1.15rem;
  transform:rotate(-4deg);
  text-shadow:0 0 16px rgba(0,212,255,0.45);
}

/* inline-block wrapper the JS injects so the clip reveal and the pen
   nib track the exact text width — not the full-width block. */
.dream-hook__line{
  position:relative;
  display:inline-block;
  white-space:nowrap;
}

.dream-hook__ink{
  display:inline-block;
  will-change:clip-path;
}

/* glowing cyan pen nib that rides the writing edge */
.dream-hook__nib{
  position:absolute;
  top:48%;
  left:0;
  width:0.40em;
  height:0.40em;
  margin-left:-0.20em;
  transform:translateY(-50%);
  border-radius:50%;
  background:radial-gradient(circle,
    #ffffff 0%,
    var(--dream-cyan) 42%,
    rgba(0,212,255,0) 72%);
  box-shadow:0 0 10px 3px rgba(0,212,255,0.85),
             0 0 24px 7px rgba(0,212,255,0.45);
  opacity:0;
  pointer-events:none;
}

/* armed = JS has clipped the line off, waiting for scroll-in */
.dream-hook--armed .dream-hook__ink{
  clip-path:inset(-35% 100% -35% -8%);
}

/* writing = the one-shot draw-on (clip reveal + nib both run on the
   identical duration + easing, so the nib stays glued to the edge) */
.dream-hook--writing .dream-hook__ink{
  animation:dreamReveal 2.1s cubic-bezier(.45,.03,.35,1) forwards;
}
.dream-hook--writing .dream-hook__nib{
  animation:dreamNib 2.1s cubic-bezier(.45,.03,.35,1) forwards;
}

@keyframes dreamReveal{
  from{ clip-path:inset(-35% 100% -35% -8%); }
  to  { clip-path:inset(-35% -8%  -35% -8%); }
}
@keyframes dreamNib{
  0%  { left:0%;   opacity:0; }
  6%  { opacity:1; }
  90% { opacity:1; }
  100%{ left:100%; opacity:0; }
}

/* reduced motion / no-JS: skip the draw-on, just show the line */
@media (prefers-reduced-motion:reduce){
  .dream-hook--armed .dream-hook__ink{ clip-path:none !important; }
  .dream-hook__ink{ animation:none !important; }
  .dream-hook__nib{ display:none !important; }
}