/* ============================================================
   Rise — live multi-page site. Shared chrome + responsive layer.
   Tokens (fonts, colors) come from ../styles.css. Page bodies are
   the exact comp components; this file adds resets, the responsive
   gutter, scroll-reveal, and the interactive nav / mobile drawer.
   ============================================================ */

:root{
  --gut: clamp(20px, 5.5vw, 100px);   /* responsive page side gutter */
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }
h1,h2,h3,p,blockquote{ text-wrap:pretty; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; }
img{ max-width:100%; }
a{ color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
::selection{ background:#F4B942; color:#0A1F3D; }

/* Full-bleed page frame — sections span the whole browser width. */
.page-frame{ width:100%; }

/* ---------------- SCROLL REVEAL ----------------
   Visible by default; only once JS adds html.anim-ready do un-revealed
   sections hide + animate in. A JS fallback force-reveals everything,
   so content can never get stuck hidden. */
.rv{ opacity:1; transform:none; }
@media (prefers-reduced-motion:no-preference){
  html.anim-ready .rv{ opacity:0; transform:translateY(30px);
    transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }
  html.anim-ready .rv.rv-in{ opacity:1; transform:none; }
}

/* ---------------- HERO DRAMA ----------------
   Ken Burns on the full-bleed hero photo + a slow settle, plus a staggered
   entrance for the hero copy. All gated on anim-ready + motion preference. */
@media (prefers-reduced-motion:no-preference){
  html.anim-ready .hero-media img, html.anim-ready .hero-media .hero-zoom{
    animation: riseKenBurns 9s cubic-bezier(.16,.6,.3,1) both;
    will-change: transform;
  }
  /* gentle perpetual drift after the entrance settle */
  @keyframes riseKenBurns{
    0%   { transform: scale(1.14) translateY(-1.5%); }
    100% { transform: scale(1.04) translateY(0); }
  }
  html.anim-ready .hero-copy > *{
    opacity:0; transform:translateY(30px);
    animation: riseUp .9s cubic-bezier(.22,.61,.36,1) forwards;
  }
  html.anim-ready .hero-copy > *:nth-child(1){ animation-delay:.15s; }
  html.anim-ready .hero-copy > *:nth-child(2){ animation-delay:.3s; }
  html.anim-ready .hero-copy > *:nth-child(3){ animation-delay:.45s; }
  html.anim-ready .hero-copy > *:nth-child(4){ animation-delay:.6s; }
  @keyframes riseUp{ to{ opacity:1; transform:none; } }

  /* hero footer rows (tab row, scroll cue) fade in last */
  html.anim-ready .hero-late{ opacity:0; animation: riseFade 1s .95s cubic-bezier(.22,.61,.36,1) forwards; }
  @keyframes riseFade{ to{ opacity:1; } }

  /* scroll cue bobs gently */
  html.anim-ready .hero-cue{ animation: riseFade 1s .95s cubic-bezier(.22,.61,.36,1) forwards, riseBob 2.6s 2s ease-in-out infinite; opacity:0; }
  @keyframes riseBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(7px); } }
}

/* ---------------- MICRO-MOTION ---------------- */
/* photos gently zoom on hover everywhere */
.rise-photo img{ transition: transform 1.1s cubic-bezier(.22,.61,.36,1); }
.rise-photo:hover img{ transform: scale(1.045); }

/* rising-bars mark grows bar-by-bar when its section reveals (or on hero load) */
@media (prefers-reduced-motion:no-preference){
  html.anim-ready .rise-bars span{ transform-origin: bottom; }
  html.anim-ready .rv .rise-bars span{ transform: scaleY(0); }
  html.anim-ready .rv.rv-in .rise-bars span{
    animation: riseBarGrow .7s cubic-bezier(.22,.61,.36,1) calc(var(--i, 0) * 90ms) forwards; }
  @keyframes riseBarGrow{ from{ transform: scaleY(0); } to{ transform: scaleY(1); } }
}

/* arrow CTA — arrow circle nudges on hover, card lifts */
.rise-cta{ transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s cubic-bezier(.22,.61,.36,1); }
.rise-cta:hover{ transform: translateY(-3px); box-shadow: 0 14px 34px -12px rgba(6,18,40,.5); }
.rise-cta .cta-arr{ transition: transform .25s cubic-bezier(.22,.61,.36,1); }
.rise-cta:hover .cta-arr{ transform: translateX(4px); }

/* nav links get an amber underline sweep */
.rise-navlinks a::after{ content:""; position:absolute; left:0; bottom:-8px; height:2px; width:0;
  background:#F4B942; transition:width .28s cubic-bezier(.22,.61,.36,1); }
.rise-navlinks a:hover::after{ width:18px; }

/* footer links */
.foot-link{ transition: color .2s; }
.foot-link:hover{ color:#F4B942 !important; }

/* ---------------- STICKY GLASS NAV ---------------- */
.rise-nav{ position:fixed; top:0; left:0; right:0; z-index:900;
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
  -webkit-backdrop-filter:blur(0px); backdrop-filter:blur(0px); }
body.nav-scrolled .rise-nav{
  background:rgba(10,31,61,0.58) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.15); backdrop-filter:blur(16px) saturate(1.15);
  border-bottom:0.5px solid rgba(247,248,244,0.12) !important;
  box-shadow:0 10px 34px -18px rgba(6,18,40,0.6); }

/* light theme: glass matches the light canvas, chrome flips to ink */
body.theme-light.nav-scrolled .rise-nav{
  background:rgba(247,248,244,0.68) !important;
  border-bottom:0.5px solid rgba(10,31,61,0.12) !important;
  box-shadow:0 10px 34px -22px rgba(10,31,61,0.35); }
body.theme-light.nav-scrolled .rise-nav a{ color:#0A1F3D !important; }
body.theme-light.nav-scrolled .rise-nav button{ color:#0A1F3D !important; border-color:rgba(10,31,61,0.28) !important; }
body.theme-light.nav-scrolled .rise-nav .rise-burger span{ background:#0A1F3D !important; }
body.theme-light.nav-scrolled .rise-nav .rise-logo-white{ display:none !important; }
body.theme-light.nav-scrolled .rise-nav .rise-logo-dark{ display:block !important; }

/* hero secondary nav tabs */
.hero-tab{ transition:color .2s, border-color .2s; }
.hero-tab:hover{ color:#F7F8F4 !important; }

/* ---------------- INSIGHTS INTRO BARS ----------------
   Four ascending amber bars (the logo mark, scaled up) filling the right
   side of the "Our perspective" section. Grow in on reveal, then breathe. */
.insight-bars{ position:absolute; right:var(--gut); top:clamp(44px,6vw,72px); bottom:clamp(44px,6vw,72px);
  display:flex; align-items:flex-end; gap:clamp(18px,2.2vw,34px); pointer-events:none; }
.insight-bars span{ display:block; width:clamp(28px,3.6vw,62px); background:rgba(247,248,244,0.07); transform-origin:bottom; }
body.theme-light .insight-bars span{ background:rgba(10,31,61,0.06); }
@media (max-width:1180px){ .insight-bars{ display:none; } }
@media (prefers-reduced-motion:no-preference){
  html.anim-ready .rv .insight-bars span{ transform:scaleY(0); }
  html.anim-ready .rv.rv-in .insight-bars span{
    animation:
      insightGrow .9s cubic-bezier(.22,.61,.36,1) calc(var(--i) * 140ms) forwards,
      insightBreathe 5.5s calc(1.5s + var(--i) * 0.45s) ease-in-out infinite; }
  @keyframes insightGrow{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
  @keyframes insightBreathe{ 0%,100%{ transform:scaleY(1); } 50%{ transform:scaleY(0.86); } }
}

/* ---------------- MOBILE NAV DRAWER ---------------- */
.rise-burger{ display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; border:0; background:transparent; cursor:pointer; padding:0; }
.rise-burger span{ display:block; width:24px; height:1.8px; margin:0 auto; transition:transform .3s cubic-bezier(.22,.61,.36,1), opacity .2s; }
body.rise-menu-open .rise-burger span:nth-child(1){ transform:translateY(6.8px) rotate(45deg); }
body.rise-menu-open .rise-burger span:nth-child(2){ opacity:0; }
body.rise-menu-open .rise-burger span:nth-child(3){ transform:translateY(-6.8px) rotate(-45deg); }

.rise-scrim{ position:fixed; inset:0; background:rgba(6,18,40,.55); z-index:998; opacity:0; pointer-events:none;
  transition:opacity .4s cubic-bezier(.22,.61,.36,1); }
body.rise-menu-open .rise-scrim{ opacity:1; pointer-events:auto; }

.rise-drawer{ position:fixed; top:0; right:0; bottom:0; width:min(84vw,360px); z-index:999;
  transform:translateX(100%); transition:transform .42s cubic-bezier(.22,.61,.36,1);
  display:flex; flex-direction:column; gap:2px; padding:88px 32px 32px;
  background:#0A1F3D; border-left:0.5px solid rgba(247,248,244,.14); }
body.rise-menu-open .rise-drawer{ transform:translateX(0); }
.rise-drawer a.dl{ font-family:var(--font-serif); font-size:26px; color:#F7F8F4; padding:.55rem 0;
  border-bottom:0.5px solid rgba(247,248,244,.12); }
.rise-drawer a.dl:hover{ color:#F4B942; }
.rise-drawer a.dl.cur{ color:#F4B942; }

/* Hide the desktop link cluster, show burger, on small screens.
   The comp Nav tags its pieces with these classes. */
@media (max-width:1120px){
  .rise-navlinks, .rise-navcta-login{ display:none !important; }
  .rise-burger{ display:flex !important; }
}