/* ==========================================================================
   CirroCraft help center — motion layer
   Additive only: opacity, transform, transition, box-shadow. No colours,
   sizes, or positions are overridden, so the existing layout is untouched.
   Mirrors the site's motion vocabulary: short, eased, mostly fade + a few px.
   ========================================================================== */

:root{
  /* The site's standard easing and durations (src/index.css). */
  --cc-ease:cubic-bezier(.4,0,.2,1);
  --cc-fast:.2s;
  --cc-smooth:.3s;
  /* The site's actual dark-mode accent. */
  --cc-accent:210 95% 60%;
  /* Brand type stack — matches cirrocraft.com exactly, including its own fallback order. */
  --cc-font:"Zoho Puvi", Inter, system-ui, sans-serif;
  /* The radius cirrocraft.com's own CTA buttons use (10px 32px padding, 16px radius) —
     applied here only to elements that don't already set their own radius. */
  --cc-radius:16px;
}

@keyframes ccFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes ccFadeIn{from{opacity:0}to{opacity:1}}

/* --- Typography -------------------------------------------------------
   The header currently renders in Desk's default Lato. Every other
   surface on cirrocraft.com uses Zoho Puvi with an Inter/system-ui
   fallback — this brings the header in line with that, weight and size
   left exactly as Desk already sets them. */
.Header__logotxt,
.Header__menuList,
.Header__welcomeTitle,
.Header__welcomeDescription,
.Header__searchBox,
.Header__containerUl{
  font-family:var(--cc-font);
}
/* Brand nav links sit at weight 500 — Desk's default is 400. */
.Header__menuList{font-weight:500}

/* --- Header entrance ------------------------------------------------------
   Staggered 60ms apart, exactly like the site's hero. Every keyframe ENDS at
   the natural resting state, so if animation is ever blocked the content is
   visible rather than stuck invisible. */
.Header__logoPart{animation:ccFadeIn .5s var(--cc-ease) both}
.Header__nav{animation:ccFadeIn .5s var(--cc-ease) .08s both}
.Header__welcomeTitle{animation:ccFadeUp .6s var(--cc-ease) .05s both}
.Header__welcomeDescription{animation:ccFadeUp .6s var(--cc-ease) .15s both}
.Header__banneralt{animation:ccFadeUp .6s var(--cc-ease) .25s both}

/* --- Nav links ------------------------------------------------------------
   cirrocraft.com's own nav uses no underline, hover or otherwise — plain
   text with a subtle colour shift. Matching that instead of a decoration
   the brand doesn't use. */
.Header__menuList{
  transition:color var(--cc-smooth) var(--cc-ease), opacity var(--cc-smooth) var(--cc-ease);
}
@media (hover:hover){
  .Header__menuList:hover{color:hsl(var(--cc-accent))}
}
.Header__menuList:active{opacity:.7}

/* Logo */
.Header__logoimg{transition:opacity var(--cc-smooth) var(--cc-ease)}
@media (hover:hover){.Header__logoimg:hover{opacity:.85}}

/* --- Search ---------------------------------------------------------------
   Radius matched to the site's own CTA buttons; focus glow uses the
   real brand accent. */
.Header__searchBox{
  transition:box-shadow var(--cc-smooth) var(--cc-ease), border-radius var(--cc-smooth) var(--cc-ease);
  border-radius:var(--cc-radius);
}
.Header__searchBox:focus-within{box-shadow:0 8px 32px -8px hsl(var(--cc-accent) / .32)}
@media (hover:hover){
  .Header__searchBox:hover{box-shadow:0 4px 16px -4px hsl(0 0% 0% / .3)}
}

/* --- Add (+) button -------------------------------------------------------
   The site's button press: 2px lift on hover, slight compress on tap.
   Radius and weight matched to the real CTA buttons (16px, 600). */
.Header__cdnavtrigger{
  font-family:var(--cc-font);
  font-weight:600;
  border-radius:var(--cc-radius);
  transition:transform var(--cc-smooth) var(--cc-ease),
             box-shadow var(--cc-smooth) var(--cc-ease);
}
@media (hover:hover){
  .Header__cdnavtrigger:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px -6px hsl(0 0% 0% / .4);
  }
}
.Header__cdnavtrigger:active{transform:translateY(0) scale(.97)}

/* The add-menu fades up when Desk opens it. Only animates the already-visible
   state — the show/hide itself stays Desk's own logic. */
.Header__containerUl{
  animation:ccFadeUp .22s var(--cc-ease) both;
  border-radius:var(--cc-radius);
}
.Header__containerUl li{transition:opacity var(--cc-fast) var(--cc-ease)}
.Header__containerUl li:active{opacity:.7}

/* Mobile nav rows drift in behind the sheet Desk already opens. */
@media (max-width:900px){
  .Header__nav .Header__menuList{animation:ccFadeUp .3s var(--cc-ease) both}
  .Header__nav .Header__menuList:nth-child(1){animation-delay:.04s}
  .Header__nav .Header__menuList:nth-child(2){animation-delay:.08s}
  .Header__nav .Header__menuList:nth-child(3){animation-delay:.12s}
  .Header__nav .Header__menuList:nth-child(4){animation-delay:.16s}
  .Header__nav .Header__menuList:nth-child(5){animation-delay:.20s}
  .Header__nav .Header__menuList:nth-child(6){animation-delay:.24s}
}

/* --- Footer --------------------------------------------------------------- */
.Footer__footerLink{
  font-family:var(--cc-font);
  transition:color var(--cc-smooth) var(--cc-ease), opacity var(--cc-smooth) var(--cc-ease);
}
@media (hover:hover){
  .Footer__footerLink:hover{color:hsl(var(--cc-accent))}
}
.Footer__footerLink:active{opacity:.7}

/* --- Reduced motion -------------------------------------------------------
   Motion is an enhancement, never a gate. */
@media (prefers-reduced-motion:reduce){
  .Header__logoPart,.Header__nav,.Header__welcomeTitle,.Header__welcomeDescription,
  .Header__banneralt,.Header__containerUl,.Header__nav .Header__menuList{
    animation:none!important;opacity:1!important;transform:none!important;
  }
  .Header__menuWrapper *,.Header__titleSearchWrapper *,.Footer__footerLink{
    transition-duration:.01ms!important;
  }
}