/* ═══════════════════════════════════════════════════════════
   THE ENGLISH CLUB · Shared Design Tokens
   Used by both landing and portal
   ═══════════════════════════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  /* Brand palette — strict */
  --navy:#0A1A33;
  --royal:#1A3C8E;
  --gold:#D4AF37;
  --cream:#F7F4EB;
  --white:#FFFFFF;
  --gray:#3E4756;

  /* Portal legacy tokens (do not rename) */
  --c-text:#F7F4EB;
  --c-text-dim:rgba(255,255,255,.6);
  --c-text-muted:rgba(255,255,255,.4);
  --c-text-faint:rgba(255,255,255,.25);
  --c-gold:#D4AF37;
  --c-bg-card:rgba(255,255,255,.05);
  --c-bg-hover:rgba(255,255,255,.03);
  --c-border:rgba(255,255,255,.06);

  /* Typography */
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'DM Sans','Segoe UI',Tahoma,sans-serif;

  /* Landing semantic tokens — DARK */
  --bg:#0A1A33;
  --bg-2:#091529;
  --bg-elev:rgba(255,255,255,.04);
  --bg-elev-2:rgba(255,255,255,.02);
  --bd:rgba(212,175,55,.14);
  --bd-soft:rgba(255,255,255,.06);
  --text:#F7F4EB;
  --text-dim:rgba(247,244,235,.65);
  --text-mute:rgba(247,244,235,.45);
  --text-faint:rgba(247,244,235,.3);

  /* Easing */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-smooth:cubic-bezier(.4,0,.2,1);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
}

/* LIGHT */
[data-theme="light"]{
  --c-text:#0A1A33;
  --c-text-dim:rgba(0,0,0,.65);
  --c-text-muted:rgba(0,0,0,.45);
  --c-text-faint:rgba(0,0,0,.3);
  --c-bg-card:#fff;
  --c-bg-hover:rgba(0,0,0,.02);
  --c-border:rgba(0,0,0,.07);

  --bg:#F7F4EB;
  --bg-2:#EFE9DB;
  --bg-elev:#FFFFFF;
  --bg-elev-2:rgba(10,26,51,.02);
  --bd:rgba(26,60,142,.18);
  --bd-soft:rgba(10,26,51,.08);
  --text:#0A1A33;
  --text-dim:rgba(10,26,51,.72);
  --text-mute:rgba(10,26,51,.55);
  --text-faint:rgba(10,26,51,.4);
}

html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background .5s ease,color .5s ease;
}

/* ═══ MOTION PRIMITIVES ═══ */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes floatSoft{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes floatStrong{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-14px) rotate(1deg)}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.04);opacity:1}}
@keyframes breatheStrong{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.08);opacity:1}}
@keyframes glowPulse{0%,100%{opacity:.5;filter:blur(60px)}50%{opacity:.8;filter:blur(70px)}}
@keyframes rotateSlow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes logoShimmer{0%{transform:translateX(-150%) skewX(-20deg)}100%{transform:translateX(250%) skewX(-20deg)}}
@keyframes stepWalk{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}
@keyframes armSwing{0%,100%{transform:rotate(-15deg)}50%{transform:rotate(15deg)}}
@keyframes legStep{0%,100%{transform:rotate(-25deg)}50%{transform:rotate(25deg)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes wobble{0%,100%{transform:rotate(0deg)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
@keyframes iconBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* ═══ SCROLL REVEAL SYSTEM ═══
   JS adds .in class when element enters viewport */
.rv{opacity:0;transform:translateY(36px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
.rv.in{opacity:1;transform:translateY(0)}
.rv-l{opacity:0;transform:translateX(-50px);transition:all 1s var(--ease-out)}
.rv-l.in{opacity:1;transform:translateX(0)}
.rv-r{opacity:0;transform:translateX(50px);transition:all 1s var(--ease-out)}
.rv-r.in{opacity:1;transform:translateX(0)}
.rv-s{opacity:0;transform:scale(.92);transition:all 1s var(--ease-out)}
.rv-s.in{opacity:1;transform:scale(1)}
.rv-rot{opacity:0;transform:rotate(-6deg) translateY(30px);transition:all 1s var(--ease-out)}
.rv-rot.in{opacity:1;transform:rotate(0deg) translateY(0)}
.rv-blur{opacity:0;filter:blur(12px);transform:translateY(20px);transition:all 1.2s var(--ease-out)}
.rv-blur.in{opacity:1;filter:blur(0);transform:translateY(0)}

/* Stagger delays */
.d1{transition-delay:.08s}
.d2{transition-delay:.16s}
.d3{transition-delay:.24s}
.d4{transition-delay:.32s}
.d5{transition-delay:.4s}
.d6{transition-delay:.48s}

/* Parallax layers — JS sets --p var for each */
.plx{will-change:transform;transition:transform .1s linear}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.15s!important;
  }
  .rv,.rv-l,.rv-r,.rv-s,.rv-rot,.rv-blur{opacity:1;transform:none;filter:none}
  .plx{transform:none!important}
}