/* =========================================================
   FIZOOK WORDMARK — shared hero logo
   =========================================================
   Extracted from css/index.css (where it originated) into a
   shared partial so the same rainbow "fizook" mark can drop
   into any hero without duplicating ~80 lines of styles.

   Consumed by:
     • index.html               (user / diner login)
     • fizook-vendor-login.html (vendor login)
     • fizook_admin_login.html  (admin login)

   Requirements when using this file:
     1. Load Bodoni Moda from Google Fonts BEFORE this stylesheet
        (weight 500 minimum).
     2. Load Inter (already used site-wide) for the ™ superscript.
     3. Place the markup at the top of your .pitch flex column:
        <div class="hero-logo" role="img" aria-label="Fizook">
          <span class="l-f">f</span><span class="l-i">ı</span>
          <span class="l-z">z</span><span class="l-o1">o</span>
          <span class="l-o2">o</span><span class="l-k">k</span>
          <span class="mark-tm" aria-hidden="true">™</span>
        </div>

   Animation stack (same as index.html):
     1. logoPop   — snappy scale+fade entrance on load (0.9s, once)
     2. logoFloat — gentle vertical bob, infinite loop (4.5s)
     3. logoGlow  — cyan drop-shadow breathes in/out (3.2s)
   ========================================================= */

.hero-logo{
  font-family:'Bodoni Moda',serif;font-weight:500;
  font-size:clamp(96px,13vw,150px);line-height:1.3;letter-spacing:-.02em;
  padding-top:.25em;margin-bottom:-25px;overflow:visible;
  align-self:flex-start;transform-origin:50% 100%;
  animation:
    logoPop .9s cubic-bezier(.2,1.2,.3,1) both,
    logoFloat 4.5s ease-in-out 1s infinite,
    logoGlow 3.2s ease-in-out 1s infinite;
}
/* Each letter is an inline-block with a solid color (no background-clip
   trickery — that was truncating tall glyphs like 'f' because the
   background box didn't reach above the ascender). Negative margin-left
   values nest the letters into each other to match the reference mark. */
.hero-logo span{
  display:inline-block;position:relative;line-height:1.3;
  text-shadow:
    0 2px 0 rgba(0,0,0,.35),
    0 6px 14px rgba(0,0,0,.55),
    0 14px 28px rgba(0,0,0,.35);
}
.hero-logo .l-f{color:#c084fc;font-size:1.35em}   /* neon violet */
.hero-logo .l-i{color:#4ade80;margin-left:-.18em} /* neon lime   */
.hero-logo .l-z{color:#fbbf24;margin-left:-.02em} /* neon gold   */
.hero-logo .l-o1{color:#3b82f6;margin-left:-.12em}/* neon blue   */
.hero-logo .l-o2{color:#3b82f6;margin-left:-.08em}
.hero-logo .l-k{color:#f97316;margin-left:-.10em} /* neon orange */

/* ™ superscript — Inter (sans) so it visually contrasts the Bodoni
   glyphs. Vertical-align:super lifts it above the baseline. */
.hero-logo .mark-tm{
  font-family:'Inter',sans-serif;font-weight:600;
  font-size:.22em;vertical-align:super;
  color:rgba(255,255,255,.85);margin-left:.05em;
  text-shadow:0 2px 6px rgba(0,0,0,.5);
}

/* Entrance: fade in while scaling from 60% past 100% and settling. */
@keyframes logoPop{
  0%   {opacity:0;transform:translateY(20px) scale(.6) rotate(-4deg)}
  60%  {opacity:1;transform:translateY(-6px) scale(1.05) rotate(1deg)}
  100% {opacity:1;transform:translateY(0)    scale(1)    rotate(0)}
}
/* Idle float: small vertical bob, keeps the mark feeling alive. */
@keyframes logoFloat{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-8px)}
}
/* Idle glow: cyan drop-shadow breathes brighter/dimmer. Kept separate
   from the transform loop so the two can run at different tempos. */
@keyframes logoGlow{
  0%,100%{filter:drop-shadow(0 10px 24px rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(34,211,238,.20))}
  50%    {filter:drop-shadow(0 14px 30px rgba(0,0,0,.5))  drop-shadow(0 0 42px rgba(34,211,238,.55))}
}

/* Interactive nudge — hover pauses the bob and pops the mark forward. */
.hero-logo:hover{
  animation-play-state:paused,paused,running;
  transform:translateY(-4px) scale(1.04);
  transition:transform .25s ease;
}

/* Respect reduced-motion — skip the flight path and the looping bob;
   fade the mark in place so motion-sensitive users don't get a swoop. */
@media (prefers-reduced-motion:reduce){
  .hero-logo{animation:logoFadeIn .5s ease both}
  @keyframes logoFadeIn{from{opacity:0}to{opacity:1}}
}

/* Mobile — center the mark under the pitch column instead of pinning
   it to the flex start, and shrink so it fits on 360-390px phones. */
@media (max-width:559.98px){
  .hero-logo{align-self:center;font-size:110px;white-space:nowrap}
}

/* Landscape phones (short viewport) — the logo at its default
   clamp(96px,13vw,150px) size takes ~25-30% of a 375px-tall viewport,
   pushing everything below (pill, headline, CTAs) below the fold.
   Shrink hard here so the login card and hero copy stay reachable
   without scrolling. Detects orientation:landscape + short height so
   it doesn't fire on tablets. */
@media (orientation:landscape) and (max-height:500px){
  .hero-logo{
    font-size:64px;
    padding-top:0;margin-bottom:-8px;
    /* Kill the entrance bob so the mark doesn't oscillate in the tight
       landscape viewport; keep the pop + glow. */
    animation:
      logoPop .9s cubic-bezier(.2,1.2,.3,1) both,
      logoGlow 3.2s ease-in-out 1s infinite;
  }
}