/* Alternative animated home pages (/home-1, /home-2, /home-3).
   Everything that hides or moves content is gated behind .motion, which motion.js only adds
   when JavaScript runs and the visitor has not asked for reduced motion. */

/* ---------- shared ---------- */
.motion .reveal{opacity:0;transform:translateY(44px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 90ms)}
.motion .reveal.in{opacity:1;transform:none}
.word{transition:opacity .35s ease}
.motion .word{opacity:.16}
.motion .word.lit{opacity:1}
.alt-note{display:inline-block;margin:0 0 18px;padding:6px 14px;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.alt-switch{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.alt-switch a{min-height:36px;padding:0 16px;display:inline-flex;align-items:center;border-radius:999px;border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--muted)}
.alt-switch a:hover,.alt-switch a[aria-current="page"]{border-color:var(--pink);color:var(--text)}

/* =====================================================
   HOME 1 — Word Slam
   ===================================================== */
.a1-hero{position:relative;padding-top:56px;padding-bottom:40px;min-height:min(86vh,820px)}
.a1-title{font-family:'Syne',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-.03em;line-height:.95;margin:0 0 36px;font-size:clamp(24px,calc((100vw - 48px) / 13),104px)}
.a1-line{display:block;overflow:hidden;padding-bottom:.06em}
.a1-line > span{display:inline-block}
.a1-line.l2{padding-left:clamp(0px,7vw,120px);color:var(--pink)}
.a1-line.l3{padding-left:clamp(0px,14vw,240px);color:var(--lime)}
.a1-line.l4{padding-left:clamp(0px,3vw,60px)}
.motion .a1-line > span{transform:translateY(112%);animation:a1-up .95s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i,0) * .13s + .1s)}
@keyframes a1-up{to{transform:none}}
.a1-sub{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:flex-end;justify-content:space-between}
.a1-badge{position:absolute;right:24px;bottom:200px;width:clamp(84px,8.4vw,116px);height:clamp(84px,8.4vw,116px);display:block;color:var(--lime)}
.a1-badge svg{width:100%;height:100%;animation:a1-spin 16s linear infinite}
.a1-badge text{font-family:'DM Sans',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:0;text-transform:uppercase;fill:currentColor}
.a1-badge span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:26px}
@keyframes a1-spin{to{transform:rotate(360deg)}}
@media (max-width:760px){.a1-badge{display:none}}

.a1-statement{padding-top:96px;padding-bottom:96px}
.a1-statement p{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(26px,4.6vw,64px);line-height:1.08;letter-spacing:-.02em;margin:0;max-width:1100px}

.a1-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:0;border-top:1px solid var(--line)}
.a1-step{position:relative;display:flex;flex-direction:column;gap:14px;min-height:320px;padding:32px 28px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);overflow:hidden;color:var(--text);transition:color .35s ease}
.a1-step::before{content:"";position:absolute;inset:0;background:var(--c);transform:translateY(101%);transition:transform .5s cubic-bezier(.2,.8,.2,1);z-index:0}
.a1-step > *{position:relative;z-index:1}
.a1-step:hover::before,.a1-step:focus-visible::before{transform:none}
.a1-step:hover,.a1-step:focus-visible{color:var(--bg)}
.a1-step:focus-visible{outline:3px solid var(--text);outline-offset:-3px}
.a1-step-num{font-size:13px;font-weight:700;letter-spacing:.18em;color:var(--c);transition:color .35s}
.a1-step:hover .a1-step-num,.a1-step:focus-visible .a1-step-num{color:var(--bg)}
.a1-step-title{margin-top:auto;font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(24px,2.7vw,36px);text-transform:uppercase;line-height:1;overflow-wrap:break-word}
.a1-step-text{font-size:16px;color:var(--muted);transition:color .35s}
.a1-step:hover .a1-step-text,.a1-step:focus-visible .a1-step-text{color:var(--bg)}
.a1-step-pink{--c:var(--pink)}
.a1-step-lime{--c:var(--lime)}
.a1-step-violet{--c:var(--violet)}

/* =====================================================
   HOME 2 — Card Fan
   ===================================================== */
.a2-hero{display:flex;flex-wrap:wrap;gap:48px clamp(48px,7vw,112px);align-items:center;padding-top:48px;padding-bottom:48px}
.a2-hero-text{flex:1 1 480px;min-width:0;position:relative;z-index:2}
.a2-hero-text .eyebrow{margin-bottom:22px}
.a2-hero-text h1{margin-bottom:38px}
.a2-hero-text .hero-lead{margin-bottom:44px}
.a2-hero-text h1{font-size:clamp(20px,calc((100vw - 96px) / 36),44px);overflow-wrap:anywhere}
.a2-hero-text h1 .nowrap{white-space:nowrap}
@media (max-width:900px){.a2-hero-text h1{font-size:clamp(20px,calc((100vw - 48px) / 15),40px)}}
.a2-cloud{position:relative;flex:1 1 420px;min-width:0;height:clamp(380px,44vw,560px)}
.a2-card{position:absolute;display:flex;flex-direction:column;justify-content:space-between;width:min(44%,250px);aspect-ratio:3/4;padding:20px;border-radius:26px;color:var(--bg);box-shadow:0 18px 40px rgba(0,0,0,.35);
  transform:translate3d(calc(var(--mx,0) * var(--d) * 1px),calc(var(--my,0) * var(--d) * 1px + (var(--p,.5) - .5) * var(--s) * -1px),0) rotate(var(--r))}
.a2-card-top{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.a2-card-title{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(20px,2.6vw,30px);line-height:1;text-transform:uppercase}
.a2-card.c1{left:2%;top:6%;--r:-8deg;--d:14;--s:90;background:var(--pink)}
.a2-card.c2{left:34%;top:0;--r:5deg;--d:-22;--s:160;background:var(--lime)}
.a2-card.c3{right:0;top:12%;--r:11deg;--d:18;--s:60;background:var(--violet)}
.a2-card.c4{left:16%;bottom:0;--r:-3deg;--d:-12;--s:200;background:var(--panel);border:1px solid var(--text);color:var(--text)}
.a2-card.c5{right:12%;bottom:2%;--r:7deg;--d:26;--s:120;background:var(--c2-soft)}
.a2-card svg{width:44px;height:44px}
.a2-card{text-decoration:none;cursor:pointer;transition:filter .2s ease,box-shadow .2s ease}
.a2-card:hover,.a2-card:focus-visible{z-index:10;filter:brightness(1.08) saturate(1.1);box-shadow:0 26px 50px rgba(0,0,0,.5),0 0 0 3px var(--text)}
.a2-card:focus-visible{outline:3px solid var(--text);outline-offset:4px}
.a2-card::after{content:"\2192";position:absolute;right:18px;top:16px;font-size:20px;font-weight:700;opacity:0;translate:-6px 0;transition:opacity .2s ease,translate .2s ease}
.a2-card:hover::after,.a2-card:focus-visible::after{opacity:1;translate:0 0}
.motion .a2-card{opacity:0;animation:a2-pop .9s cubic-bezier(.2,.9,.2,1.15) forwards;animation-delay:calc(var(--i,0) * .12s + .2s)}
@keyframes a2-pop{from{opacity:0;translate:0 80px}to{opacity:1;translate:0 0}}

.a2-fan-wrap{padding-top:72px;padding-bottom:48px}
.a2-fan{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;--q:clamp(0, calc(var(--p,1) * 5 - .4), 1)}
.a2-fan li:nth-child(3n+1){--j:0}
.a2-fan li:nth-child(3n+2){--j:1}
.a2-fan li:nth-child(3n+3){--j:2}
.a2-fan li{min-width:0}
@media (min-width:800px){
  .motion .a2-fan li{transform:translateX(calc((1 - var(--j,0)) * 104% * (1 - var(--q)))) rotate(calc((var(--j,0) - 1) * 9deg * (1 - var(--q)))) translateY(calc((1 - var(--q)) * 40px));z-index:calc(3 - var(--j,0))}
}
@media (max-width:799px){.a2-fan{grid-template-columns:repeat(2,minmax(0,1fr))}}

.a2-strip-wrap{padding-top:64px;padding-bottom:24px}
.a2-strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px max(24px,calc((100vw - 1272px) / 2)) 28px;scrollbar-width:thin;scrollbar-color:var(--pink) var(--panel)}
.a2-voice{flex:0 0 min(82vw,340px);scroll-snap-align:start;display:flex;flex-direction:column;min-height:360px;border-radius:28px;overflow:hidden;background:var(--panel);border:1px solid var(--line)}
.a2-voice-head{padding:18px 22px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--bg);background:linear-gradient(110deg,var(--lime),var(--pink))}
.a2-voice:nth-child(3n+2) .a2-voice-head{background:linear-gradient(110deg,var(--violet),var(--pink))}
.a2-voice:nth-child(3n) .a2-voice-head{background:linear-gradient(110deg,var(--c4),var(--violet))}
.a2-voice-body{flex:1;display:flex;align-items:center;padding:28px 22px;font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(22px,2.4vw,28px);line-height:1.1;text-transform:uppercase}

.a2-pillars .pillar{transition:transform .25s ease,box-shadow .25s ease}
.motion .a2-pillars .pillar.tilt{transform:perspective(900px) rotateX(calc(var(--rx,0) * 7deg)) rotateY(calc(var(--ry,0) * 9deg)) translateZ(0)}

/* =====================================================
   HOME 3 — Chapters
   ===================================================== */
.a3-hero{padding-top:56px;padding-bottom:56px}
.a3-hero h1{font-size:clamp(28px,calc((100vw - 48px) / 12.5),104px)}
.a3-hero h1 .a1-line{overflow:hidden}

.a3-chapters{position:relative}
.motion .a3-chapters{height:420vh}
.a3-stage{position:relative;display:flex;flex-direction:column;gap:16px;padding:24px}
.motion .a3-stage{position:sticky;top:0;height:100vh;padding-top:128px;padding-bottom:24px;overflow:hidden}
.a3-frame{position:relative;flex:1;min-height:0;display:flex;gap:16px;max-width:1320px;width:100%;margin:0 auto}
.a3-index{display:none}
.motion .a3-index{display:flex;flex-direction:column;justify-content:center;gap:6px;flex:0 0 clamp(140px,22%,260px)}
.a3-index li{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(14px,1.6vw,20px);text-transform:uppercase;color:var(--muted);opacity:.5;transition:opacity .3s,color .3s,transform .3s;display:flex;gap:10px;align-items:center}
.a3-index li::before{content:"";width:0;height:3px;background:var(--pink);transition:width .4s}
.a3-index li.is-active{opacity:1;color:var(--text);transform:translateX(6px)}
.a3-index li.is-active::before{width:28px}
.a3-panels{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;gap:16px}
.motion .a3-panels{display:block}
.a3-chapter{display:flex;flex-direction:column;justify-content:space-between;gap:32px;border-radius:32px;padding:clamp(24px,4vw,48px);color:var(--bg);min-height:360px}
.a3-chapter.c0{background:var(--pink)}
.a3-chapter.c1{background:var(--lime)}
.a3-chapter.c2{background:var(--violet)}
.a3-chapter.c3{background:var(--panel);color:var(--text);border:1px solid var(--text)}
.motion .a3-chapter{position:absolute;inset:0;min-height:0;opacity:0;transform:translateY(60px) scale(.96) rotate(1.5deg);transition:opacity .55s ease,transform .7s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.motion .a3-chapter.is-active{opacity:1;transform:none;pointer-events:auto}
.a3-chapter-num{font-size:13px;font-weight:700;letter-spacing:.18em}
.a3-chapter-title{font-family:'Syne',sans-serif;font-weight:800;text-transform:uppercase;line-height:.95;letter-spacing:-.02em;margin:0 0 16px;font-size:clamp(28px,5.2vw,76px);overflow-wrap:break-word}
.a3-chapter-text{font-size:clamp(16px,1.6vw,20px);max-width:520px;margin:0 0 22px}
.a3-chapter .btn{align-self:flex-start}
.a3-chapter.c3 .btn-dark{background:var(--lime);color:var(--bg)}
.a3-bar{display:none}
.motion .a3-bar{display:block;height:4px;border-radius:4px;background:var(--line);max-width:1320px;width:100%;margin:0 auto;overflow:hidden}
.a3-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--pink),var(--lime),var(--violet));transform-origin:left;transform:scaleX(var(--p,0))}

.a3-tilt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;perspective:1100px}
.motion .a3-tilt-grid li.reveal{transform:rotateX(38deg) translateY(60px);transform-origin:50% 100%}
.motion .a3-tilt-grid li.reveal.in{transform:none}

@media (max-width:700px){
  .motion .a3-index{display:none}
  .motion .a3-stage{padding-top:112px}
}
@media (prefers-reduced-motion:reduce){
  .a1-badge svg{animation:none}
}

/* ---------- Home page: author lines on cards ---------- */
.drawer-card-author{font-size:15px;font-weight:700;margin-top:-8px}
.drawer-card-author:empty{display:none}
.a2-voice-body{flex-direction:column;align-items:flex-start;justify-content:center;gap:14px}
.a2-voice-author{font-family:'DM Sans',sans-serif;font-weight:700;font-size:14px;letter-spacing:0;text-transform:none;color:var(--muted)}

/* ---------- Home page: the four pillars wobble gently and shift gradient on hover ---------- */
/* Each colour has a light, a base and a deep shade of itself; hovering slides the gradient across. */
.pillars-wobble .pillar{
  --g1:var(--c1-soft);--g2:var(--c1);--g3:var(--c1-deep);
  background:linear-gradient(135deg,var(--g1) 0%,var(--g2) 45%,var(--g3) 100%);
  background-size:260% 260%;background-position:0% 0%;
  transition:background-position .8s cubic-bezier(.2,.7,.2,1),transform .3s ease,box-shadow .3s ease;
}
.pillars-wobble .pillar-lime{--g1:var(--c3-soft);--g2:var(--c3);--g3:var(--c3-deep)}
.pillars-wobble .pillar-violet{--g1:var(--c5-soft);--g2:var(--c5);--g3:var(--c5-deep)}
.pillars-wobble .pillar-dark{--g1:var(--c5-night);--g2:#1A1726;--g3:#0D0B14;border:1px solid var(--text)}
.pillars-wobble .pillar:hover,.pillars-wobble .pillar:focus-visible{
  background-position:100% 100%;transform:scale(1.035);box-shadow:0 16px 36px rgba(0,0,0,.35);
  animation-play-state:paused;
}
.pillars-wobble .pillar-dark:hover,.pillars-wobble .pillar-dark:focus-visible{color:var(--text)}
.pillars-wobble .pillar-dark:hover .pillar-num,.pillars-wobble .pillar-dark:hover .pillar-text{color:var(--muted)}
.pillars-wobble .pillar-dark:hover .pillar-num{color:var(--lime)}
.motion .pillars-wobble .pillar{animation:pillar-wobble 6s ease-in-out infinite}
.motion .pillars-wobble li:nth-child(2) .pillar{animation-duration:7.2s;animation-delay:-1.4s}
.motion .pillars-wobble li:nth-child(3) .pillar{animation-duration:6.6s;animation-delay:-3.1s}
.motion .pillars-wobble li:nth-child(4) .pillar{animation-duration:7.8s;animation-delay:-2.2s}
@keyframes pillar-wobble{
  0%,100%{rotate:-1.1deg;translate:0 0}
  50%{rotate:1.1deg;translate:0 -7px}
}
@media (prefers-reduced-motion:reduce){.pillars-wobble .pillar{animation:none!important}}

/* ---------- Home page: Daily Motivation Drawer (photo blended into black + looping card belt) ---------- */
.drawer-stage{position:relative;overflow:hidden;background:var(--bg);padding-top:96px;min-height:820px;display:flex;flex-direction:column;justify-content:space-between;isolation:isolate}
.drawer-photo{position:absolute;z-index:0;right:max(0px,calc((100vw - 1200px) / 2 - 40px));top:40px;height:calc(100% - 120px);aspect-ratio:900/1156;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%,#000 80%,transparent 99%),linear-gradient(180deg,transparent 0,#000 20%);
  mask-image:linear-gradient(90deg,transparent 0,#000 26%,#000 80%,transparent 99%),linear-gradient(180deg,transparent 0,#000 20%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.drawer-photo img{display:block;width:100%;height:100%;object-fit:contain;object-position:right bottom;mix-blend-mode:lighten}
.drawer-top{position:relative;z-index:2;width:100%}
.drawer-copy{max-width:600px}
.drawer-copy .big-title{margin-bottom:28px;font-size:clamp(34px,5.2vw,76px)}
.drawer-pulled-head{display:flex;align-items:center;gap:14px;margin:0 0 10px;font-family:'Syne',sans-serif;font-weight:800;font-size:18px;color:var(--lime)}
.drawer-dash{width:34px;height:2px;background:var(--lime);flex:none}
.drawer-pulled{margin:0 0 28px;max-width:460px}
.drawer-pulled-text{margin:0;font-size:clamp(20px,2.2vw,26px);line-height:1.35;font-weight:700;color:var(--text)}
.drawer-pulled-author{margin-top:8px;font-size:15px;color:var(--muted)}
.drawer-pulled-author:empty{display:none}
.drawer-pulled.pop{animation:drawer-pop .45s cubic-bezier(.2,.8,.2,1)}
@keyframes drawer-pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

.drawer-belt{position:relative;z-index:3;margin-top:36px;padding:20px 0 40px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.drawer-track{display:flex;width:max-content;margin:0;padding:0;list-style:none}
.motion .drawer-track{animation:drawer-belt calc(var(--n,10) * 4.5s) linear infinite}
.motion .drawer-belt:hover .drawer-track,.motion .drawer-belt:focus-within .drawer-track{animation-play-state:paused}
@keyframes drawer-belt{to{transform:translateX(-50%)}}
.drawer-slide{flex:none;width:25vw;padding-right:18px}
.drawer-mini{--ac:var(--pink);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;width:100%;height:clamp(280px,26vw,360px);
  padding:34px 24px 24px;border:1px solid rgba(255,255,255,.06);border-radius:8px;background:#17141F;color:var(--text);font-family:inherit;text-align:center;cursor:pointer;
  transition:transform .25s ease,border-color .25s ease,background .25s ease}
.drawer-mini:hover,.drawer-mini:focus-visible{transform:translateY(-6px);border-color:var(--ac);background:#1D1928}
.drawer-mini:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.accent-pink .drawer-mini{--ac:var(--c1)}
.accent-lime .drawer-mini{--ac:var(--c3)}
.accent-violet .drawer-mini{--ac:var(--c5)}
.accent-orange .drawer-mini{--ac:var(--c2)}
.drawer-mini-badge{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;border:3px solid var(--ac);font-family:'Syne',sans-serif;font-weight:800;font-size:16px;color:var(--ac);background:#0D0B14;flex:none}
.drawer-mini-head{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.drawer-mini-text{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(18px,1.7vw,24px);line-height:1.15;color:var(--ac);overflow-wrap:break-word;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.drawer-mini-author{margin-top:auto;font-size:13px;color:var(--muted)}

@media (max-width:1100px){.drawer-slide{width:40vw}}
@media (max-width:900px){
  .drawer-photo{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%);mask-image:linear-gradient(180deg,transparent 0,#000 18%)}
  .drawer-stage{min-height:0;padding-top:64px}
  .drawer-photo{position:relative;order:2;right:auto;top:auto;height:auto;width:min(86%,420px);margin:-8px auto -90px;
    }
  .drawer-top{order:1}
  .drawer-belt{order:3;margin-top:0}
  .drawer-slide{width:78vw;max-width:340px}
  .drawer-stage{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .drawer-belt{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .drawer-slide[aria-hidden="true"]{display:none}
  .drawer-pulled.pop{animation:none}
}

/* Entrance animations (only when motion is allowed; home.js adds .in once the section scrolls into view) */
.motion .drawer-photo{transition:opacity 1.8s ease .2s}
.motion .drawer-stage:not(.in) .drawer-photo{opacity:0}
.drawer-type{white-space:normal}
.drawer-type .w{display:inline-block;white-space:nowrap}
.drawer-type .ch{opacity:0}
.drawer-type .ch.on{opacity:1}
.drawer-type .ch.cur::after{content:"";display:inline-block;width:.08em;height:.85em;margin-left:.06em;background:var(--lime);vertical-align:-.05em;animation:drawer-caret .7s steps(1) infinite}
@keyframes drawer-caret{50%{opacity:0}}
.motion .drawer-stage:not(.in) .drawer-mini{opacity:0;scale:.55}
.motion .drawer-stage.in .drawer-mini{animation:drawer-zoom .9s cubic-bezier(.2,.9,.25,1.1) both}
.motion .drawer-slide:nth-child(1) .drawer-mini{animation-delay:.9s}
.motion .drawer-slide:nth-child(2) .drawer-mini{animation-delay:1.05s}
.motion .drawer-slide:nth-child(3) .drawer-mini{animation-delay:1.2s}
.motion .drawer-slide:nth-child(4) .drawer-mini{animation-delay:1.35s}
.motion .drawer-slide:nth-child(5) .drawer-mini{animation-delay:1.5s}
.motion .drawer-slide:nth-child(n+6) .drawer-mini{animation-delay:1.6s}
@keyframes drawer-zoom{from{opacity:0;scale:.55}to{opacity:1;scale:1}}
@media (prefers-reduced-motion:reduce){
  .drawer-type .ch{opacity:1}
  .drawer-type .ch.cur::after{display:none}
}

/* Nothing in the drawer moves until it has been scrolled to */
.motion .drawer-stage:not(.in) .drawer-track{animation-play-state:paused}

/* ---------- Home page: more breathing room between sections ---------- */
.a2-hero{padding-top:120px;padding-bottom:120px}
.marquee{margin-bottom:0}
.home-section{padding-top:56px;padding-bottom:56px}
.home-section:first-of-type,.marquee + .home-section{padding-top:120px}   /* same gap below the green bar as above it */
.drawer-stage{margin-top:72px;margin-bottom:72px}
.a2-fan-wrap{padding-top:56px;padding-bottom:56px}
.impact{padding-top:96px;padding-bottom:72px}
.shop-section{padding-top:48px;padding-bottom:96px}
@media (max-width:700px){
  .a2-hero{padding-top:80px;padding-bottom:80px}
  .marquee + .home-section{padding-top:80px}
  .home-section,.a2-fan-wrap{padding-top:40px;padding-bottom:40px}
  .drawer-stage{margin-top:48px;margin-bottom:48px}
  .impact{padding-top:64px}
  .shop-section{padding-bottom:64px}
}

/* Daily Motivation Drawer: the pulled card pops up, and its copies in the belt light up.
   Loaded by templates/pages/home.php after motion.css. */

/* the top-menu "Draw Daily Card" button jumps here; keep the section clear of the sticky menu */
.drawer-stage{scroll-margin-top:84px}

/* belt: more room above the cards so a big hover jump is never clipped (total height unchanged) */
.drawer-stage .drawer-belt{margin-top:12px;padding-top:44px}

/* rolling cards: contents centred vertically */
.drawer-mini{justify-content:center}
.drawer-mini .drawer-mini-author{margin-top:0}

/* cards jump up on hover with a little spring */
.drawer-mini{transition:transform .35s cubic-bezier(.3,1.7,.5,1),border-color .25s ease,background .25s ease,box-shadow .3s ease}
.drawer-mini:hover,
.drawer-mini:focus-visible{
  transform:translateY(-26px) scale(1.04);
  border-color:var(--ac);background:var(--ac);color:#0D0B14;
  box-shadow:0 0 0 2px var(--ac),0 30px 44px -14px var(--ac);
}
/* on hover each card fills with its own colour, so the text switches to dark */
.drawer-mini:hover .drawer-mini-text,
.drawer-mini:focus-visible .drawer-mini-text{color:#0D0B14}
.drawer-mini:hover .drawer-mini-head,
.drawer-mini:hover .drawer-mini-author,
.drawer-mini:focus-visible .drawer-mini-head,
.drawer-mini:focus-visible .drawer-mini-author{color:rgba(13,11,20,.72)}
.drawer-mini:hover .drawer-mini-badge,
.drawer-mini:focus-visible .drawer-mini-badge{background:#0D0B14}
.drawer-mini.is-pulled{
  border-color:var(--ac);background:#1D1928;transform:translateY(-12px);
  box-shadow:0 0 0 2px var(--ac),0 18px 40px -14px var(--ac);
}
/* the pulled card must fill on hover too (this rule comes after .is-pulled, so it wins) */
.drawer-mini.is-pulled:hover,
.drawer-mini.is-pulled:focus-visible{
  transform:translateY(-26px) scale(1.04);
  border-color:var(--ac);background:var(--ac);color:#0D0B14;
  box-shadow:0 0 0 2px var(--ac),0 30px 44px -14px var(--ac);
}

/* the pop-up card */
.drawer-pop{
  --ac:var(--c1);
  position:absolute;z-index:5;
  top:270px;right:max(72px,calc((100vw - 1200px) / 2 + 160px));
  width:min(340px,80vw);min-height:300px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:36px 26px 28px;
  background:#17141F;color:var(--text,#F4F1FA);text-align:center;
  border:2px solid var(--ac);border-radius:14px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.85),0 0 44px -8px var(--ac);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s ease,visibility 0s linear .25s;
}
.drawer-pop.show{
  opacity:1;visibility:visible;pointer-events:auto;cursor:pointer;
  transition:none;
  animation:drawer-pop-in .65s cubic-bezier(.2,.9,.25,1.15) both;
  transform:rotate(3deg);
}
.drawer-pop.accent-pink{--ac:var(--c1);--ac2:var(--c1-soft)}
.drawer-pop.accent-lime{--ac:var(--c3);--ac2:var(--c3-soft)}
.drawer-pop.accent-violet{--ac:var(--c5);--ac2:var(--c5-soft)}
.drawer-pop.accent-orange{--ac:var(--c2);--ac2:var(--c2-soft)}

/* close (x) button, top right of the card */
.drawer-pop-close{
  position:absolute;top:10px;right:10px;width:34px;height:34px;padding:0;border:2px solid var(--ac);border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:#0D0B14;color:var(--ac);font:700 22px/1 'DM Sans',sans-serif;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.drawer-pop-close:hover,
.drawer-pop-close:focus-visible{background:var(--ac);color:#0D0B14;transform:scale(1.1)}
.drawer-pop-close:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* Share button: the card's colour as a gradient */
.drawer-pop-share{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  margin-top:6px;padding:11px 22px;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(135deg,var(--ac) 0%,var(--ac2,var(--ac)) 100%);
  color:#0D0B14;font:700 14px 'DM Sans',sans-serif;
  box-shadow:0 10px 24px -10px var(--ac);
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
.drawer-pop-share:hover,
.drawer-pop-share:focus-visible{transform:translateY(-2px) scale(1.04);filter:brightness(1.06);box-shadow:0 14px 28px -10px var(--ac)}
.drawer-pop-share:focus-visible{outline:3px solid #fff;outline-offset:2px}
.drawer-pop-share:disabled{opacity:.7;cursor:progress;transform:none}

.drawer-pop-badge{
  display:grid;place-items:center;flex:none;width:64px;height:64px;border-radius:50%;
  border:3px solid var(--ac);background:#0D0B14;color:var(--ac);
  font-family:'Syne',sans-serif;font-weight:800;font-size:18px;
}
.drawer-pop-head{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted,#B9B3C9)}
.drawer-pop-text{
  font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(20px,2vw,26px);line-height:1.2;
  color:var(--ac);overflow-wrap:break-word;
}
.drawer-pop-author{margin-top:auto;font-size:14px;color:var(--muted,#B9B3C9)}
.drawer-pop-author:empty{display:none}

@keyframes drawer-pop-in{
  from{opacity:0;transform:translate(-160px,260px) rotate(-16deg) scale(.4)}
  60%{opacity:1;transform:translate(0,-10px) rotate(5deg) scale(1.05)}
  to{opacity:1;transform:rotate(3deg) scale(1)}
}

/* phones / tablets: an overlay at the bottom of the screen that closes itself */
@media (max-width:900px){
  .drawer-pop{
    position:fixed;z-index:60;top:auto;bottom:20px;left:0;right:0;margin:0 auto;
    width:min(340px,88vw);min-height:0;max-height:70vh;overflow:auto;
  }
}

@media (prefers-reduced-motion:reduce){
  .drawer-pop,.drawer-pop.show{animation:none;transition:none;transform:none}
  .drawer-mini{transition:none}
}