/* ============================================================
   RYDE — Moving Through Life Better
   Cinematic brand narrative. Warm energy. Type & motion led.
   Primary typeface: Plus Jakarta Sans (loaded via Google Fonts).
   ============================================================ */

:root{
  --orange:#FF9425;
  --orange-dark:#E97A00;
  --orange-deep:#C25E00;
  --cream:#FFF4E9;
  --cream-deep:#FFE9D4;
  --beige:#FFEFE0;
  --ink:#171717;
  --ink-soft:#3A3531;
  --char:#14110E;        /* deep warm charcoal for Prime */
  --char-2:#1E1A16;
  --white:#FFFFFF;
  --g300:#D4CFC9;
  --g400:#A3A3A3;
  --g500:#7A746E;
  --g600:#52504C;
  --teal:#10AEBA;
  --font:"Plus Jakarta Sans",system-ui,sans-serif;

  --pad:clamp(20px,5vw,72px);
  --maxw:1320px;

  /* motion (driven by the Energy tweak) */
  --mo-orbit-a:60s; --mo-orbit-b:90s; --mo-ring:80s; --mo-marquee:38s;
  --mo-reveal:1s; --mo-reveal-t:1.1s;
}

/* ── Energy tweak: motion intensity ── */
body.energy-calm{--mo-orbit-a:120s;--mo-orbit-b:170s;--mo-ring:150s;--mo-marquee:64s;--mo-reveal:1.4s;--mo-reveal-t:1.55s}
body.energy-electric{--mo-orbit-a:30s;--mo-orbit-b:44s;--mo-ring:40s;--mo-marquee:18s;--mo-reveal:.62s;--mo-reveal-t:.72s}

/* ── Warmth tweak: palette temperature / mood ── */
body.warm-golden{--cream:#FFE7CB;--cream-deep:#FFDDB8;--beige:#FFE3CB;--orange:#FF860C;--orange-dark:#DD6900}
body.warm-cool{--cream:#FBFAF9;--cream-deep:#F3F1EE;--orange:#FFA64A}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.4;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--orange);color:#fff}

/* ─── TYPE PRIMITIVES ─── */
.display{
  font-weight:800;
  line-height:.92;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.kicker{
  font-size:clamp(11px,1.1vw,13px);
  font-weight:700;
  letter-spacing:.32em;
  text-transform:uppercase;
}
.lede{
  font-weight:500;
  line-height:1.32;
  letter-spacing:-.01em;
  text-wrap:pretty;
}
.o{color:var(--orange)}

/* the cut-R mark — always orange, regardless of nav theme */
.glyph{width:26px;height:auto;aspect-ratio:618/707;color:var(--orange);display:block;flex:none}
.glyph use,.glyph path{fill:currentColor}

/* ─── LAYOUT ─── */
.shell{width:100%;max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.chapter{position:relative;width:100%}

/* ====== NAV ====== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);
  transition:background .4s ease,backdrop-filter .4s ease,color .4s ease,box-shadow .4s ease,padding .4s ease;
  color:var(--ink);
  mix-blend-mode:normal;
}
.nav.solid{
  background:rgba(255,244,233,.82);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 1px 0 rgba(23,23,23,.06);
  padding-top:13px;padding-bottom:13px;
}
.nav.on-dark{color:#fff}
.nav.on-dark.solid{background:rgba(20,17,14,.6)}
.nav .brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.03em;font-size:22px}
.nav .brand .glyph{width:26px;height:auto;display:block}
.nav .links{display:flex;align-items:center;gap:clamp(14px,2.4vw,38px)}
.nav .links a{
  font-size:14px;font-weight:600;letter-spacing:-.01em;
  position:relative;padding:4px 0;opacity:.62;transition:opacity .25s ease;
}
.nav .links a:hover{opacity:1}
.nav .links a::after{
  content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--orange);
  transition:width .3s cubic-bezier(.4,0,.2,1);
}
.nav .links a:hover::after{width:100%}
.nav .cta{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  background:var(--orange);color:#fff;font-weight:700;font-size:14px;
  padding:11px 22px;border-radius:999px;letter-spacing:-.01em;
  transition:transform .25s cubic-bezier(.34,1.4,.5,1),background .25s ease,box-shadow .25s ease;
  box-shadow:0 8px 24px -10px rgba(255,148,37,.9);
  opacity:1!important;
}
.nav .cta::after{display:none}
.nav .cta:hover{transform:translateY(-2px);background:var(--orange-dark);box-shadow:0 12px 28px -10px rgba(255,148,37,1)}
.nav .navend{display:flex;align-items:center;gap:12px}
.nav .menu-btn{
  display:none;
  border:1px solid rgba(23,23,23,.2);
  background:#fff;
  color:var(--ink);
  border-radius:10px;
  width:42px;height:38px;
  font-size:20px;line-height:1;
  margin-inline-start:8px;
}
.nav .mobile-menu{display:none}
.nav .mobile-menu.open{display:flex}
@media(max-width:760px){
  .nav .links{display:none}
  .nav .navend{margin-left:auto;margin-right:8px}
  .nav .navend .cta{display:none}
  .nav .menu-btn{display:inline-flex;align-items:center;justify-content:center}
  .nav .mobile-menu{
    position:absolute;left:var(--pad);right:var(--pad);top:calc(100% + 8px);
    background:#fff;border:1px solid rgba(23,23,23,.1);border-radius:16px;
    box-shadow:0 16px 40px -24px rgba(0,0,0,.35);
    padding:12px;gap:6px;flex-direction:column;
  }
  .nav .mobile-menu a{padding:10px 12px;border-radius:10px;font-weight:600;color:var(--ink-soft)}
  .nav .mobile-menu a:hover{background:var(--cream)}
  .nav .mobile-menu hr{border:0;border-top:1px solid rgba(23,23,23,.1);margin:6px 0}
}
[dir="rtl"] .nav .navend{margin-left:0;margin-right:0}
@media(max-width:760px){
  [dir="rtl"] .nav .navend{margin-right:auto;margin-left:8px}
}

/* progress filament */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--orange);z-index:90;transition:width .12s linear}

/* ─── reveal animation ─── */
[data-reveal]{opacity:0;transform:translateY(40px);transition:opacity var(--mo-reveal) cubic-bezier(.16,1,.3,1),transform var(--mo-reveal-t) cubic-bezier(.32,1.5,.4,1)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:.08s}
[data-reveal][data-delay="2"]{transition-delay:.16s}
[data-reveal][data-delay="3"]{transition-delay:.24s}
[data-reveal][data-delay="4"]{transition-delay:.34s}
[data-reveal][data-delay="5"]{transition-delay:.46s}
[data-reveal][data-delay="6"]{transition-delay:.58s}

/* word-rise: each line clips & rises */
.rise{display:block;overflow:hidden}
.rise > span{display:block;transform:translateY(105%);transition:transform 1s cubic-bezier(.16,1,.3,1)}
.in .rise > span,.rise.in > span{transform:none}
.rise-1>span{transition-delay:.05s}.rise-2>span{transition-delay:.14s}
.rise-3>span{transition-delay:.23s}.rise-4>span{transition-delay:.32s}

@media(prefers-reduced-motion:reduce){
  [data-reveal],.rise>span{opacity:1!important;transform:none!important;transition:none!important}
  html{scroll-behavior:auto}
}