/* =========================================================================
   MOZAIK ACADEMY — course page layout (hero, parts, cards, diagrams, nav)
   Shared by every training page. Design tokens live in colors_and_type.css
   ========================================================================= */
  :root{
    --maxw: 1080px;
    --ease: var(--ease-standard);
    /* diagram palette mapped onto Kraken tokens */
    --d-grow: var(--kraken-purple);
    --d-grow-deep: var(--kraken-purple-deep);
    --d-grow-soft: rgba(133,91,251,0.14);
    --d-dull: var(--cool-gray);
    --d-mute: var(--silver-blue);
    --d-axis: var(--border-gray);
    --d-box: #f4f4f7;
    --d-good: var(--success);
    --d-good-text: var(--success-text);
    --d-good-soft: rgba(20,158,97,0.14);
    --d-bad: var(--danger);
    --d-bad-text: var(--danger-text);
    --d-bad-soft: rgba(226,73,91,0.12);
  }
  body{ background: var(--bg-1); }

  /* ---------- scroll progress ---------- */
  .progress{ position: fixed; top:0; left:0; height:3px; width:0%;
    background: var(--kraken-purple); z-index: 60; transition: width .08s linear; }

  /* ---------- top nav ---------- */
  nav.top{ position: sticky; top:0; z-index:50; height:64px;
    background: rgba(255,255,255,0.82); backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--border-gray);
    display:flex; align-items:center; }
  nav.top .inner{ max-width: var(--maxw); width:100%; margin:0 auto; padding:0 24px;
    display:flex; align-items:center; gap:16px; }
  .brand{ display:flex; align-items:center; gap:10px; }
  .brand .chip{ width:32px; height:32px; border-radius:8px; background:var(--kraken-purple);
    color:#fff; font-family:var(--font-brand); font-weight:700; font-size:18px;
    display:flex; align-items:center; justify-content:center; letter-spacing:-0.5px; }
  .brand .wm{ font-family:var(--font-brand); font-weight:700; font-size:18px; letter-spacing:-0.5px; }
  .brand .wm span{ color: var(--cool-gray); font-weight:500; }
  nav.top .spacer{ flex:1; }
  .toc{ display:flex; gap:4px; overflow:auto; scrollbar-width:none; -ms-overflow-style:none; }
  .toc::-webkit-scrollbar{ display:none; }
  .toc a{ font-size:13px; color:var(--cool-gray); text-decoration:none; white-space:nowrap;
    padding:6px 11px; border-radius:9999px; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
  .toc a:hover{ background: var(--kraken-purple-subtle); color: var(--kraken-purple); text-decoration:none; }
  .toc a.active{ background: var(--kraken-purple); color:#fff; }
  .toc-next{ display:none; flex:0 0 auto; width:27px; height:27px; border-radius:50%;
    border:1px solid var(--border-gray); background:#fff; color:var(--kraken-purple);
    font-size:17px; line-height:1; cursor:pointer; align-items:center; justify-content:center;
    padding:0 0 2px; box-shadow:0 2px 7px rgba(40,30,90,.12); transition:background .15s; }
  .toc-next:hover{ background:var(--kraken-purple-subtle); }
  .toc-next.show{ display:flex; }
  @media(max-width: 920px){ .toc{ display:none; } .toc-next{ display:none !important; } }

  /* ---------- mobile menu ---------- */
  .menu-btn{ display:none; background:none; border:1px solid var(--border-gray); border-radius:9px;
    width:40px; height:40px; cursor:pointer; align-items:center; justify-content:center;
    flex-direction:column; gap:4px; padding:0; }
  .menu-btn span{ display:block; width:18px; height:2px; background:#101114; border-radius:2px;
    transition: transform .22s var(--ease), opacity .22s var(--ease); }
  .menu-btn.open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  .menu-btn.open span:nth-child(2){ opacity:0; }
  .menu-btn.open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
  .mobile-menu{ display:none; position:fixed; top:64px; left:0; right:0; z-index:49;
    background: rgba(255,255,255,0.97); backdrop-filter: blur(24px);
    border-bottom:1px solid var(--border-gray); padding:8px;
    max-height: calc(100vh - 64px); overflow:auto; }
  .mobile-menu.open{ display:grid; grid-template-columns:1fr 1fr; gap:4px; }
  .mobile-menu a{ font-size:15px; color:var(--cool-gray); text-decoration:none;
    padding:12px 14px; border-radius:10px; }
  .mobile-menu a:hover{ background: var(--kraken-purple-subtle); color: var(--kraken-purple); text-decoration:none; }
  @media(max-width: 920px){ .menu-btn{ display:flex; } }
  @media(min-width: 921px){ .mobile-menu{ display:none !important; } }

  .wrap{ max-width: var(--maxw); margin:0 auto; padding: 0 24px; }

  /* ---------- hero ---------- */
  header.hero{ max-width: var(--maxw); margin:0 auto; padding: 84px 24px 64px; }
  .eyebrow{ display:inline-flex; align-items:center; gap:8px; }
  .eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--kraken-purple); }
  header.hero h1{ font-family:var(--font-brand); font-weight:700; font-size: clamp(40px, 6.4vw, 72px);
    line-height:1.03; letter-spacing:-1.6px; margin:20px 0 0; max-width: 16ch; }
  header.hero h1 em{ font-style:normal; color: var(--kraken-purple); }
  header.hero p.sub{ font-size:19px; color:var(--cool-gray); max-width: 60ch; margin:22px 0 0; }
  .hero-meta{ display:flex; flex-wrap:wrap; gap: 36px; margin-top:40px; }
  .hero-meta .stat .v{ font-family:var(--font-brand); font-weight:700; font-size:26px; letter-spacing:-0.5px; }
  .hero-meta .stat .l{ font-size:13px; color:var(--cool-gray); margin-top:2px; }
  .hero-arc{ margin-top:44px; border:1px solid var(--border-gray); border-radius:16px; background:#fff;
    box-shadow: var(--shadow-subtle); padding: 8px 8px 0; overflow:hidden; }
  .hero-arc svg{ display:block; width:100%; height:auto; }

  /* ---------- part intro ---------- */
  .part{ padding-top: 72px; }
  .part-head{ position:relative; padding: 0 0 8px; }
  .part-ghost{ position:absolute; right:0; top:-34px; font-family:var(--font-brand); font-weight:700;
    font-size: 150px; line-height:1; letter-spacing:-6px; color: var(--kraken-purple-subtle); z-index:0; user-select:none; pointer-events:none; }
  .part-label{ position:relative; font-family:var(--font-product); font-weight:600; font-size:13px;
    letter-spacing:0.14em; text-transform:uppercase; color: var(--kraken-purple); }
  .part-head h2{ position:relative; font-family:var(--font-brand); font-weight:700; font-size: clamp(28px,4vw,42px);
    line-height:1.12; letter-spacing:-1px; margin:12px 0 0; max-width: 18ch; }
  .part-head p.lead{ position:relative; font-size:18px; color:var(--cool-gray); max-width: 64ch; margin:16px 0 0; }

  /* ---------- concept cards ---------- */
  .card-c{ background:#fff; border:1px solid var(--border-gray); border-radius:16px;
    padding: 36px 36px 32px; margin-top: 28px;
    transition: box-shadow var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease); }
  .card-c:hover{ box-shadow: var(--shadow-subtle); border-color: #d4d4dd; }
  .card-top{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
  .cicon{ flex:0 0 auto; width:38px; height:38px; border-radius:11px; background:var(--kraken-purple-subtle);
    color:var(--kraken-purple); display:inline-flex; align-items:center; justify-content:center; }
  .cicon svg{ width:22px; height:22px; }
  .ctag{ font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:0.06em;
    color: var(--kraken-purple); background: var(--kraken-purple-subtle); padding:4px 9px; border-radius:6px; }
  .ckicker{ font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--silver-blue); font-weight:600; white-space:nowrap; }
  .card-c h3{ font-family:var(--font-brand); font-weight:700; font-size: clamp(22px,2.6vw,30px);
    line-height:1.16; letter-spacing:-0.6px; margin:0; }
  .card-c p.desc{ font-size:16px; color:var(--cool-gray); max-width: 78ch; margin:12px 0 22px; }
  .card-c p.desc b{ color: var(--near-black); font-weight:600; }

  .fig{ background:#fafafb; border:1px solid var(--border-gray); border-radius:12px; padding:20px; overflow-x:auto; overflow-y:hidden; }
  .fig svg{ display:block; margin:0 auto; max-width:100%; height:auto; }
  .fig text{ font-family: var(--font-product); }

  .callouts{ display:grid; gap:12px; margin-top:20px; }
  .takeaway, .mozaik{ border-radius: 12px; padding: 15px 18px; font-size:15px; line-height:1.5; }
  .takeaway{ background: var(--kraken-purple-subtle); color:#3a2a66; }
  .takeaway b{ color: var(--kraken-purple-deep); }
  .takeaway i{ color: var(--near-black); font-style: italic; }
  .mozaik{ background: var(--success-subtle); color:#1c4a36; display:flex; gap:12px; align-items:flex-start; }
  .mozaik .pin{ flex:0 0 auto; width:22px; height:22px; border-radius:6px; background: var(--success);
    color:#fff; display:flex; align-items:center; justify-content:center; margin-top:1px; }
  .mozaik b{ color: var(--success-text); }

  /* ---------- closing CTA ---------- */
  .cta{ margin-top: 88px; background: linear-gradient(135deg, #7132f5 0%, #5b1ecf 100%); }
  .cta .inner{ max-width: var(--maxw); margin:0 auto; padding: 76px 24px; }
  .cta h2{ font-family:var(--font-brand); font-weight:700; color:#fff; font-size: clamp(30px,4.4vw,48px);
    line-height:1.08; letter-spacing:-1px; max-width: 20ch; margin:0; }
  .cta p{ color: rgba(255,255,255,0.86); font-size:18px; max-width: 56ch; margin:18px 0 0; }
  .cta .principles{ display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; margin-top:40px; }
  @media(max-width:760px){ .cta .principles{ grid-template-columns:1fr; } }
  .cta .principles .p{ background: rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.18);
    border-radius:14px; padding:18px 20px; }
  .cta .principles .p .n{ font-family:var(--font-mono); font-size:12px; color:rgba(255,255,255,0.6); }
  .cta .principles .p .t{ color:#fff; font-weight:600; font-size:16px; margin-top:8px; }

  footer.foot{ background:#fff; border-top:1px solid var(--border-gray); }
  footer.foot .inner{ max-width:var(--maxw); margin:0 auto; padding: 40px 24px;
    display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; }
  footer.foot .src{ font-size:13px; color:var(--silver-blue); max-width: 62ch; }
  footer.foot .src b{ color: var(--cool-gray); font-weight:600; }

  /* ---------- scroll animations ----------
     Content is visible by DEFAULT. The hidden-start reveal state is gated behind
     html.anim-on, which JS only adds AFTER confirming animation frames actually
     run. In frame-throttled contexts (some capture tools) nothing ever hides. */
  .reveal{ opacity:1; }
  .fig .draw{ stroke-dasharray: 1; stroke-dashoffset: 0; }
  @media (prefers-reduced-motion: no-preference){
    html.anim-on .reveal{ opacity:0; transform: translateY(26px);
      transition: opacity .7s var(--ease), transform .7s var(--ease); }
    html.anim-on .reveal.in{ opacity:1; transform:none; }
    html.anim-on .fig .draw{ stroke-dashoffset: 1; }
    html.anim-on .in .fig .draw, html.anim-on .fig.in .draw{ stroke-dashoffset: 0;
      transition: stroke-dashoffset 1.25s var(--ease) .18s; }
    html.anim-on .fig .fg{ opacity:0; transition: opacity .55s var(--ease); }
    html.anim-on .in .fig .fg{ opacity:1; transition-delay: calc(var(--i,0) * 75ms + .15s); }
    html.anim-on .hero-arc .draw{ stroke-dashoffset:1; animation: heroDraw 1.6s var(--ease) .35s forwards; }
    @keyframes heroDraw{ to{ stroke-dashoffset:0; } }
  }
  .anchor{ scroll-margin-top: 84px; }

  /* Concept 01 — the walker travels the distance */
  @keyframes c1walk{
    0%   { transform: translate(0,0);      opacity:0; }
    7%   { opacity:1; }
    22%  { transform: translate(120px,-2px); }
    42%  { transform: translate(238px,0); }
    62%  { transform: translate(356px,-2px); }
    82%  { transform: translate(452px,0); }
    88%  { transform: translate(476px,0);   opacity:1; }
    95%  { transform: translate(476px,0);   opacity:0; }
    100% { transform: translate(0,0);       opacity:0; }
  }
  @media (prefers-reduced-motion: no-preference){
    html.anim-on #c1walker{ animation: c1walk 5.5s var(--ease) .4s infinite; }
  }

  /* Concept 06 — the Pure-grind flame flickers like real fire */
  #grindfire{ transform-box: fill-box; transform-origin: 50% 100%; }
  @keyframes fireFlicker{
    0%,100% { transform: scale(1,1); }
    15%     { transform: scale(0.95,1.09) rotate(-2deg); }
    30%     { transform: scale(1.04,0.95) rotate(1.5deg); }
    45%     { transform: scale(0.97,1.06) rotate(-1deg); }
    60%     { transform: scale(1.03,0.97) rotate(2deg); }
    75%     { transform: scale(0.98,1.04) rotate(-1.5deg); }
  }
  @keyframes fireGlow{
    0%,100% { filter: drop-shadow(0 0 1px rgba(249,115,22,0.5)); }
    50%     { filter: drop-shadow(0 1px 3px rgba(249,115,22,0.9)); }
  }
  @media (prefers-reduced-motion: no-preference){
    html.anim-on #grindfire{ animation: fireFlicker 1.05s ease-in-out infinite, fireGlow 1.7s ease-in-out infinite; }
  }

  /* micro-animations on the diagrams */
  #heartbeat{ transform-box: fill-box; transform-origin: 50% 55%; }
  @keyframes beat{ 0%,100%{transform:scale(1)} 12%{transform:scale(1.18)} 24%{transform:scale(1)} 36%{transform:scale(1.11)} 50%{transform:scale(1)} }
  #spongesqueeze{ transform-box: fill-box; transform-origin: 50% 62%; }
  @keyframes squeeze{ 0%,100%{transform:scale(1,1)} 50%{transform:scale(0.84,1.1)} }
  #compassneedle{ transform-box: fill-box; transform-origin: 50% 50%; }
  @keyframes orient{ 0%,100%{transform:rotate(-9deg)} 28%{transform:rotate(7deg)} 55%{transform:rotate(-3deg)} 80%{transform:rotate(6deg)} }
  @keyframes climbA{ 0%{transform:translate(0,0);opacity:0} 8%{opacity:1} 80%{transform:translate(174px,-74px);opacity:1} 90%{transform:translate(174px,-74px);opacity:0} 100%{transform:translate(0,0);opacity:0} }
  @keyframes climbB{ 0%{transform:translate(0,0);opacity:0} 8%{opacity:1} 26%{transform:translate(70px,8px)} 50%{transform:translate(86px,-40px)} 74%{transform:translate(150px,-52px)} 86%{transform:translate(170px,-78px);opacity:1} 93%{transform:translate(170px,-78px);opacity:0} 100%{transform:translate(0,0);opacity:0} }
  @media (prefers-reduced-motion: no-preference){
    html.anim-on #heartbeat{ animation: beat 1.9s ease-in-out infinite; }
    html.anim-on #spongesqueeze{ animation: squeeze 2.6s ease-in-out infinite; }
    html.anim-on #compassneedle{ animation: orient 4s ease-in-out infinite; }
    html.anim-on #climbA{ animation: climbA 5.5s var(--ease) .6s infinite; }
    html.anim-on #climbB{ animation: climbB 6s var(--ease) .3s infinite; }
  }

  /* ---------- figure icons & richer graphics ---------- */
  .fig svg .lbl{ font-family: var(--font-product); font-weight:600; }
  .iconsheet{ position:absolute; width:0; height:0; overflow:hidden; }

  /* story photo banner inside concept cards */
  .story{ margin: 0 0 22px; }
  .story .frame{ position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--border-gray); }
  .story .photo{ display:block; width:100%; height:200px; object-fit:cover; }
  .story .ph{ display:flex; align-items:center; justify-content:center; width:100%; height:200px;
    background:
      radial-gradient(circle at 30% 30%, rgba(133,91,251,0.10), transparent 60%),
      var(--bg-3); color:var(--silver-blue); }
  .story .ph svg{ width:46px; height:46px; opacity:0.5; }
  .story .cap{ position:absolute; left:14px; bottom:12px; z-index:3; display:flex; align-items:center; gap:8px;
    background:rgba(16,17,20,0.58); color:#fff; font-size:12.5px; font-weight:500; padding:6px 12px;
    border-radius:8px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); pointer-events:none; }
  .story .cap svg{ width:14px; height:14px; }
  @media(max-width:640px){ .story .photo, .story .ph{ height:150px; } }

  /* ---------- bonus module: pinned nav tab + accents ---------- */
  nav.top .modtab{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
    font-size:13px; font-weight:600; white-space:nowrap; text-decoration:none;
    padding:6px 13px; border-radius:9999px; color:var(--kraken-purple);
    background:var(--kraken-purple-subtle); border:1px solid rgba(133,91,251,0.38);
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
  nav.top .modtab::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
  nav.top .modtab:hover, nav.top .modtab.active{ background:var(--kraken-purple); color:#fff;
    border-color:var(--kraken-purple); text-decoration:none; }
  @media(max-width:640px){ nav.top .modtab{ display:none; } }
  .mobile-menu a.modtab{ color:var(--kraken-purple); font-weight:600; background:var(--kraken-purple-subtle); }
  .part-label.mod{ display:inline-flex; align-items:center; gap:7px; }
  .part-label.mod::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--kraken-purple); }