/* ============================================================
   _charizard.css — Charizard Atomic Kit (15-pattern)
   Extracted from public/landing/loom-alternative.html (R47)
   Source patterns: wiki/docs/Awwwards-Pattern-Library-2026-04-27.md
                    wiki/docs/Awwwards-Top-20-Patterns-for-Morph-2026-04-24.md
   Compose any Charizard landing in 3 lines (see how-to below).
   ============================================================ */

/* ---------------------------------------------------------------
   TO ADD CHARIZARD TO ANY LANDING:
   1. <link rel="stylesheet" href="/landing/_charizard.css">
   2. <script src="/landing/_charizard.js" defer></script>
   3. Wrap hero h1 with <h1 data-charizard-hero>...</h1>
   4. Optional per-page chapter atmosphere overrides:
      <style>
        :root{
          --ch1-color:#FF5200;
          --ch2-color:#22C55E;
          --ch3-color:#FF5200;
        }
      </style>
   --------------------------------------------------------------- */

/* ── Chapter atmosphere variables ──────────────────────────── */
:root{
  --ch1-color:#FF5200;
  --ch2-color:#6B5BFF;
  --ch3-color:#00D4FF;
  --char-bg:#0D0D10;
  --char-text:#F0EDE6;
  --char-text-mute:#A8A4A0;
  --char-text-dim:#8C8C97;
  --char-accent:#FF5200;
  --char-accent-soft:#FFA060;
  --char-glass:rgba(14,14,20,0.95);
  --char-border:rgba(255,255,255,0.08);
  --char-spring:cubic-bezier(0.34,1.56,0.64,1);
  --char-ease:cubic-bezier(0.16,1,0.3,1);
}

/* ── Keyframes (1 of 15: char-stagger / loader / marquee /
       hero gradient / cta pulse / section reveal /
       loaderBar / loaderOut / heroChar / heroGradient) ────── */
@keyframes heroChar{to{opacity:1;transform:translateY(0)}}
@keyframes heroGradient{
  0%,100%{background-position:0% 50%, 100% 50%, 50% 100%}
  33%{background-position:100% 0%, 0% 100%, 100% 50%}
  66%{background-position:50% 100%, 50% 0%, 0% 50%}
}
@keyframes loaderBar{0%{width:0}100%{width:100%}}
@keyframes loaderMark{0%{opacity:0;transform:scale(0.92)}100%{opacity:1;transform:scale(1)}}
@keyframes loaderOut{0%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes ctaPulse{
  0%,100%{box-shadow:0 8px 28px rgba(255,82,0,0.28)}
  50%{box-shadow:0 8px 36px rgba(255,82,0,0.55), 0 0 0 6px rgba(255,82,0,0.04)}
}
@keyframes charMarquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes charFadeIn{to{opacity:1}}
@keyframes scrollBob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ── 1. Cinematic loader ───────────────────────────────────── */
.loader{
  position:fixed;inset:0;background:var(--char-bg);
  z-index:1000;display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  animation:loaderOut 0.5s cubic-bezier(0.4,0,0.2,1) 1.1s forwards;
}
.loader-bar{
  position:absolute;top:0;left:0;height:2px;width:0%;
  background:linear-gradient(90deg,var(--char-accent),var(--char-accent-soft));
  box-shadow:0 0 12px rgba(255,82,0,0.6);
  animation:loaderBar 0.7s cubic-bezier(0.4,0,0.2,1) forwards;
}
.loader-mark{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:64px;color:var(--char-text);opacity:0;
  animation:loaderMark 0.6s var(--char-spring) 0.15s forwards;
}
.loader-mark span{color:var(--char-accent)}

/* ── 2. Sticky brand morph (.brand-wrap + .shrunk) ─────────── */
.brand-wrap{
  position:relative;display:inline-flex;align-items:center;
  height:32px;overflow:hidden;
}
.brand-wrap a.brand{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:24px;
  color:var(--char-text);font-weight:400;letter-spacing:0.04em;
  text-decoration:none;display:inline-flex;align-items:center;
  height:32px;line-height:32px;
}
.brand-wrap a.brand .word{
  display:inline-block;
  transition:opacity 0.4s ease, max-width 0.4s ease, margin-left 0.4s ease;
  overflow:hidden;white-space:nowrap;max-width:120px;margin-left:6px;opacity:1;
}
.brand-wrap a.brand .mark{
  display:inline-block;color:var(--char-accent);
  font-weight:600;font-size:26px;
}
.shrunk a.brand .word{opacity:0;max-width:0;margin-left:0}

/* ── 3. Custom cursor follower (cursor-follow) ─────────────── */
.cursor-follow,#cursor{
  position:fixed;top:0;left:0;width:14px;height:14px;
  border-radius:50%;background:var(--char-accent);
  mix-blend-mode:difference;pointer-events:none;
  z-index:9999;transform:translate(-50%,-50%);
  transition:width 0.25s var(--char-spring),
             height 0.25s var(--char-spring),
             opacity 0.25s ease;
  opacity:0;
}
.cursor-follow.visible,#cursor.visible{opacity:0.5}
.cursor-follow.hover,#cursor.hover{width:32px;height:32px;opacity:0.4}
@media(pointer:coarse){
  .cursor-follow,#cursor{display:none!important}
}

/* ── 4. Magnetic CTAs ([data-magnetic] hooked by JS) ───────── */
[data-magnetic]{
  will-change:transform;
  transition:box-shadow 0.3s ease;
}

/* ── 5. Editorial italic primitive ─────────────────────────── */
.editorial{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:1.08em;color:var(--char-text);
  letter-spacing:0;font-weight:400;
}

/* ── 6. Hero char-stagger primitive ────────────────────────── */
.hero-char{
  display:inline-block;opacity:0;transform:translateY(28px);
  animation:heroChar 0.7s var(--char-ease) forwards;
}
.hero-char.space{width:0.28em}

/* ── 7. Section reveals (.reveal + .reveal-stagger) ────────── */
.reveal{
  opacity:0;transform:translateY(20px);
  transition:opacity 0.7s var(--char-ease),transform 0.7s var(--char-ease);
}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-stagger > *{
  opacity:0;transform:translateY(20px);
  transition:opacity 0.6s var(--char-ease),transform 0.6s var(--char-ease);
}
.reveal-stagger.in > *{opacity:1;transform:translateY(0)}
.reveal-stagger.in > *:nth-child(1){transition-delay:0ms}
.reveal-stagger.in > *:nth-child(2){transition-delay:80ms}
.reveal-stagger.in > *:nth-child(3){transition-delay:160ms}
.reveal-stagger.in > *:nth-child(4){transition-delay:240ms}
.reveal-stagger.in > *:nth-child(5){transition-delay:320ms}
.reveal-stagger.in > *:nth-child(6){transition-delay:400ms}

/* ── 8. Marquee (.marquee + .marquee-track) ────────────────── */
.marquee{
  position:relative;padding:48px 0 40px;overflow:hidden;margin:48px 0;
}
.marquee-track{
  display:flex;width:max-content;
  animation:charMarquee 38s linear infinite;will-change:transform;
  font-family:'DM Mono',monospace;font-size:24px;color:var(--char-text);
  letter-spacing:0.04em;text-transform:uppercase;
}
.marquee-track span{
  padding:0 32px;display:inline-flex;align-items:center;gap:32px;
}
.marquee-track .dot{color:var(--char-accent);font-size:18px}
.marquee::before,.marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:140px;
  z-index:2;pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(90deg,var(--char-bg),transparent)}
.marquee::after{right:0;background:linear-gradient(-90deg,var(--char-bg),transparent)}

/* ── 9. Bento grid (.bento + .cell + cascade) ──────────────── */
.bento{
  display:grid;grid-template-columns:repeat(4,1fr);
  grid-template-rows:200px 200px;gap:14px;margin:24px 0 48px;
}
.bento .cell{
  background:var(--char-glass);
  border:1px solid var(--char-border);border-radius:14px;
  padding:24px;backdrop-filter:blur(20px);
  transition:transform 0.35s var(--char-spring),
             border-color 0.3s ease,opacity 0.3s ease,box-shadow 0.3s ease;
  display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden;
  min-width:44px;min-height:44px;
}
.bento .cell .num{
  font-family:'DM Mono',monospace;font-size:11px;color:var(--char-accent);
  letter-spacing:0.18em;display:block;
}
.bento .cell h3{margin:8px 0 8px}
.bento .cell p{font-size:14px;line-height:1.6;margin-bottom:0;color:var(--char-text-mute)}
.bento .cell.hero-cell{grid-column:span 2;grid-row:span 2}
.bento .cell.hero-cell h3{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;
  font-size:32px;line-height:1.1;letter-spacing:-0.01em;
}
.bento .cell.hero-cell p{font-size:15px}
.bento .cell.tall{grid-row:span 2}
.bento .cell .glyph{
  width:36px;height:36px;border-radius:8px;
  background:rgba(255,82,0,0.10);border:1px solid rgba(255,82,0,0.25);
  display:flex;align-items:center;justify-content:center;color:var(--char-accent);
  font-family:'DM Mono',monospace;font-size:14px;font-weight:600;
}
.bento:hover .cell:not(:hover){opacity:0.5;transform:scale(0.97)}
.bento .cell:hover{
  transform:scale(1.02);border-color:rgba(255,82,0,0.5);
  box-shadow:0 12px 40px rgba(255,82,0,0.18), 0 0 0 1px rgba(255,82,0,0.2);
}

/* ── 10. Stat counters (.stat-counter) ─────────────────────── */
.stat-counter,
.stat .v{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;
  font-size:clamp(56px,9vw,88px);color:var(--char-accent);
  line-height:1;letter-spacing:-0.02em;display:block;margin-bottom:8px;
  font-variant-numeric:tabular-nums;
}
.stat .l{
  font-family:'DM Mono',monospace;font-size:11px;color:var(--char-text-dim);
  letter-spacing:0.22em;text-transform:uppercase;
}

/* ── 11. SVG noise overlay (.grain) ────────────────────────── */
.grain{
  position:absolute;inset:0;mix-blend-mode:overlay;opacity:0.05;
  pointer-events:none;z-index:0;
}

/* ── 12. CTA + footer pulsing glow (.cta + .cta-pulse) ─────── */
.cta{
  display:inline-block;padding:16px 32px;
  background:linear-gradient(135deg,var(--char-accent),#E04600);
  color:var(--char-bg);border-radius:12px;
  font-family:'Outfit',sans-serif;font-size:14px;font-weight:800;
  text-decoration:none;letter-spacing:0.04em;text-transform:uppercase;
  box-shadow:0 8px 28px rgba(255,82,0,0.28);
  min-width:44px;min-height:44px;line-height:1.4;
  will-change:transform;transition:box-shadow 0.3s ease;position:relative;
}
.cta:hover{box-shadow:0 12px 40px rgba(255,82,0,0.45)}
.cta.ghost{
  background:transparent;color:var(--char-accent);
  border:1px solid rgba(255,82,0,0.30);box-shadow:none;margin-left:8px;
}
.cta.ghost:hover{background:rgba(255,82,0,0.08)}
.cta.pulse,
.cta-pulse{animation:ctaPulse 4s ease-in-out infinite}

/* ── 13. Hero atmosphere (gradient + grain bed) ────────────── */
.hero-section{
  position:relative;min-height:100vh;display:flex;flex-direction:column;
  justify-content:center;padding:80px 24px 60px;
  max-width:880px;margin:0 auto;will-change:transform,opacity;
  background:linear-gradient(180deg,rgba(255,82,0,0.04) 0%,rgba(13,13,16,0) 60%);
}
.hero-section::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 30% 20%,rgba(255,82,0,0.10),transparent 60%),
    radial-gradient(ellipse at 80% 60%,rgba(255,160,96,0.06),transparent 55%),
    radial-gradient(ellipse at 50% 90%,rgba(255,82,0,0.04),transparent 60%);
  background-size:200% 200%;
  animation:heroGradient 12s ease-in-out infinite;
  pointer-events:none;z-index:-1;
}
.hero-section > *{position:relative;z-index:1}

.eyebrow{
  font-family:'DM Mono',monospace;font-size:13px;color:var(--char-accent);
  text-transform:uppercase;letter-spacing:0.32em;margin-bottom:24px;
  display:block;opacity:0;animation:charFadeIn 0.6s ease 0.2s forwards;
}
.scroll-cue{
  font-family:'DM Mono',monospace;font-size:11px;color:var(--char-text-dim);
  letter-spacing:0.2em;text-align:center;margin-top:8px;opacity:0;
  animation:charFadeIn 0.6s ease 1.7s forwards, scrollBob 2.2s ease-in-out 2s infinite;
}

/* ── 14. Hero CTA row (delay-staggered) ────────────────────── */
.hero-cta-row{
  margin-top:8px;margin-bottom:48px;opacity:0;
  animation:charFadeIn 0.6s ease 1.4s forwards;
}

/* ── 15. Mobile (375 × 812) ────────────────────────────────── */
@media(max-width:768px){
  .hero-section{min-height:auto;padding:60px 18px 40px}
  .cta.ghost{margin-left:0;margin-top:8px;display:block;text-align:center}
  .bento{grid-template-columns:repeat(2,1fr);grid-template-rows:auto;gap:12px}
  .bento .cell.hero-cell{grid-column:span 2;grid-row:span 1;min-height:180px}
  .bento .cell.tall{grid-row:span 1;min-height:160px}
  .bento .cell{min-height:160px}
  .bento .cell.hero-cell h3{font-size:24px}
  .marquee-track{font-size:18px}
  .cursor-follow,#cursor{display:none}
}

/* ── prefers-reduced-motion (CRITICAL — no-op every motion) ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.001ms!important;
    scroll-behavior:auto!important;
  }
  .loader{display:none}
  .hero-char,.eyebrow,.hero-cta-row,.scroll-cue{
    opacity:1!important;transform:none!important;animation:none!important;
  }
  .reveal,.reveal-stagger > *{opacity:1!important;transform:none!important}
  .marquee-track{animation:none!important}
  .hero-section::before{animation:none!important}
  .cta.pulse,.cta-pulse{animation:none!important}
  .bento:hover .cell:not(:hover){opacity:1;transform:none}
  .bento .cell:hover{transform:none}
  .cta:hover,.bento .cell:hover{transform:none!important}
  html{scroll-behavior:auto}
}