/* ============================================================
   THE NEXT ASCENT — magical annual report viewer
   Palette drawn from the 2025/26 cover:
     midnight indigo, engraved moonlight linework, contour gold
   ============================================================ */
:root {
  --night:      #0d1b3d;   /* cover indigo */
  --night-deep: #070f26;   /* vignette edge */
  --night-soft: #16264f;   /* raised surfaces */
  --gold:       #c9a227;
  --gold-bright:#f0d47e;
  --gold-deep:  #8a6a15;
  --moon:       #dfe8f6;   /* engraved linework white-blue */
  --mist:       #8598bd;   /* muted labels */
  --paper:      #fffdf6;

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-ui: "Outfit", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--night-deep);
  font-family: var(--font-ui);
  color: var(--moon);
}

button { font-family: inherit; }

/* ============================================================
   STAGE — the fullscreen presentation room
   ============================================================ */
#stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0.5vh 0.5vw 10.5vh;
  background:
    radial-gradient(ellipse 90% 70% at 50% 42%, #14244c 0%, var(--night) 46%, var(--night-deep) 100%);
  overflow: hidden;
}

/* warm spotlight pooled behind the book */
#stage::before {
  content: "";
  position: absolute;
  width: min(96vw, 1500px);
  height: min(80vh, 900px);
  left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
    rgba(240,212,126,0.10) 0%,
    rgba(240,212,126,0.045) 34%,
    transparent 68%);
  pointer-events: none;
}

#dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.8;
}

/* ------------------------------------------------------------
   The book
   ------------------------------------------------------------ */
#book {
  position: relative;
  display: grid;
  grid-template-columns: auto 12px auto;
  align-items: center;
  justify-content: center;
  perspective: 2600px;
  transform-style: preserve-3d;
  z-index: 2;
  opacity: 0;
  transform: translateY(26px) scale(0.97);
  transition: opacity 900ms ease, transform 1100ms cubic-bezier(0.16, 0.8, 0.2, 1);
}

#book.revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* cover-alone mode */
#book.single { grid-template-columns: auto; }
#book.single .page.left,
#book.single .spine { display: none; }

/* floor shadow under the book */
#book::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3.4vh;
  width: 86%;
  height: 30px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.5), rgba(0,0,0,0.14) 52%, transparent 74%);
  filter: blur(9px);
  pointer-events: none;
  z-index: -1;
}

.page {
  position: relative;
  background: var(--paper);
  overflow: hidden;
  transform: translateZ(0);
}

.page.left {
  border-radius: 10px 2px 2px 10px;
  box-shadow:
    -16px 18px 44px rgba(0,0,0,0.45),
    inset -20px 0 26px rgba(13,27,61,0.08);
}

.page.right {
  border-radius: 2px 10px 10px 2px;
  box-shadow:
    16px 18px 44px rgba(0,0,0,0.45),
    inset 20px 0 26px rgba(13,27,61,0.08);
}

/* cover alone: symmetric shadow + gold edge glow */
#book.single .page.right {
  border-radius: 6px 12px 12px 6px;
  box-shadow:
    0 26px 60px rgba(0,0,0,0.55),
    0 0 0 1px rgba(201,162,39,0.35),
    0 0 46px rgba(201,162,39,0.12);
}

.spine {
  align-self: stretch;
  background: linear-gradient(90deg, #b9c3d6 0%, #f4f7fc 46%, #a9b5ca 100%);
  box-shadow:
    inset 0 0 10px rgba(13,27,61,0.4),
    0 12px 30px rgba(0,0,0,0.35);
}

.page canvas { display: block; background: #fff; }

/* subtle inner page shading so spreads read as bound paper */
.page::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
}
.page.left::after  { background: linear-gradient(90deg, rgba(0,0,0,0.07), transparent 16%, transparent 80%, rgba(13,27,61,0.10)); }
.page.right::after { background: linear-gradient(90deg, rgba(13,27,61,0.10), transparent 20%, transparent 84%, rgba(0,0,0,0.07)); }

/* ------------------------------------------------------------
   MAGICAL PAGE FLIP
   ------------------------------------------------------------ */
.flip-layer {
  position: absolute;
  z-index: 40;
  pointer-events: none;
  background: var(--paper);
  border: 1px solid rgba(201,162,39,0.25);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  overflow: hidden;
  will-change: transform, opacity;
  box-shadow:
    0 26px 60px rgba(0,0,0,0.5),
    0 8px 22px rgba(0,0,0,0.3);
}

.flip-layer canvas {
  width: 100%;
  height: 100%;
  display: block;
  transform: translateZ(0);
}

/* travelling light-catch sweep across the turning paper */
.flip-layer::before {
  content: "";
  position: absolute;
  inset: -6% -30%;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.42) 36%, rgba(13,27,61,0.10) 70%, rgba(13,27,61,0.18)),
    radial-gradient(circle at 50% 50%, rgba(255,246,214,0.95), rgba(255,246,214,0.25) 20%, transparent 34%);
  background-size: 100% 100%, 38% 100%;
  background-repeat: no-repeat;
  opacity: 0.5;
}

/* curl crease near the hinge */
.flip-layer::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 42px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(13,27,61,0.26), rgba(255,255,255,0.22), rgba(13,27,61,0.08));
  opacity: 0.5;
}

.flip-layer.flip-next {
  transform-origin: left center;
  border-radius: 2px 12px 12px 2px;
  animation: magicFlipNext 1050ms cubic-bezier(0.16, 0.7, 0.15, 1) forwards;
}
.flip-layer.flip-prev {
  transform-origin: right center;
  border-radius: 12px 2px 2px 12px;
  animation: magicFlipPrev 1050ms cubic-bezier(0.16, 0.7, 0.15, 1) forwards;
}
.flip-layer.flip-next::after { left: -5px; }
.flip-layer.flip-prev::after { right: -5px; }

.flip-layer.flip-next::before { animation: sheenNext 1050ms cubic-bezier(0.16, 0.7, 0.15, 1) forwards; }
.flip-layer.flip-prev::before { animation: sheenPrev 1050ms cubic-bezier(0.16, 0.7, 0.15, 1) forwards; }

@keyframes sheenNext {
  0%   { background-position: 0 0, -35% 0; opacity: .34; }
  18%  { background-position: 0 0, -5% 0;  opacity: .52; }
  40%  { background-position: 0 0, 58% 0;  opacity: .92; }
  58%  { background-position: 0 0, 98% 0;  opacity: .74; }
  80%  { background-position: 0 0, 132% 0; opacity: .4;  }
  100% { background-position: 0 0, 165% 0; opacity: .2;  }
}
@keyframes sheenPrev {
  0%   { background-position: 0 0, 135% 0; opacity: .34; }
  18%  { background-position: 0 0, 105% 0; opacity: .52; }
  40%  { background-position: 0 0, 42% 0;  opacity: .92; }
  58%  { background-position: 0 0, 2% 0;   opacity: .74; }
  80%  { background-position: 0 0, -32% 0; opacity: .4;  }
  100% { background-position: 0 0, -65% 0; opacity: .2;  }
}

/* rotation with paper flex + settle "flop" at the end */
@keyframes magicFlipNext {
  0%   { transform: rotateY(0deg)    translate3d(0,0,8px)          scale(1);     opacity: 1;  }
  14%  { transform: rotateY(-16deg)  translate3d(-2px,0,18px)      scale(1.002); opacity: 1;  }
  38%  { transform: rotateY(-74deg)  translate3d(-13px,-1.4px,36px) skewY(-0.7deg)  scale(1.007); opacity: .99; }
  60%  { transform: rotateY(-122deg) translate3d(-15px,-0.4px,30px) skewY(-0.4deg)  scale(1.005); opacity: .95; }
  80%  { transform: rotateY(-160deg) translate3d(-7px,0.6px,14px)   skewY(-0.15deg) scale(1.002); opacity: .82; }
  92%  { transform: rotateY(-185deg) translate3d(-1px,1.2px,2px)    scale(1);       opacity: .32; }
  100% { transform: rotateY(-180deg) translate3d(0,0,0)             scale(1);       opacity: 0;  }
}
@keyframes magicFlipPrev {
  0%   { transform: rotateY(0deg)   translate3d(0,0,8px)          scale(1);     opacity: 1;  }
  14%  { transform: rotateY(16deg)  translate3d(2px,0,18px)       scale(1.002); opacity: 1;  }
  38%  { transform: rotateY(74deg)  translate3d(13px,-1.4px,36px) skewY(0.7deg)  scale(1.007); opacity: .99; }
  60%  { transform: rotateY(122deg) translate3d(15px,-0.4px,30px) skewY(0.4deg)  scale(1.005); opacity: .95; }
  80%  { transform: rotateY(160deg) translate3d(7px,0.6px,14px)   skewY(0.15deg) scale(1.002); opacity: .82; }
  92%  { transform: rotateY(185deg) translate3d(1px,1.2px,2px)    scale(1);      opacity: .32; }
  100% { transform: rotateY(180deg) translate3d(0,0,0)            scale(1);      opacity: 0;  }
}

/* shadow the turning page casts on the pages beneath */
.flip-shadow-cast {
  position: absolute;
  z-index: 39;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(0,0,0,0.5), rgba(0,0,0,0.18) 55%, transparent 76%);
  mix-blend-mode: multiply;
  opacity: 0;
  will-change: opacity, transform;
}
.flip-shadow-cast.next { transform-origin: left center; }
.flip-shadow-cast.prev { transform-origin: right center; }
.flip-shadow-cast.next.run { animation: castNext 1050ms cubic-bezier(0.16, 0.7, 0.15, 1) forwards; }
.flip-shadow-cast.prev.run { animation: castPrev 1050ms cubic-bezier(0.16, 0.7, 0.15, 1) forwards; }

@keyframes castNext {
  0%   { opacity: 0;   transform: translateX(0) scaleX(1); }
  16%  { opacity: .5;  transform: translateX(3%) scaleX(1.03); }
  42%  { opacity: .66; transform: translateX(14%) scaleX(1.16); }
  64%  { opacity: .46; transform: translateX(20%) scaleX(1.08); }
  86%  { opacity: .16; transform: translateX(10%) scaleX(0.98); }
  100% { opacity: 0;   transform: translateX(0) scaleX(1); }
}
@keyframes castPrev {
  0%   { opacity: 0;   transform: translateX(0) scaleX(1); }
  16%  { opacity: .5;  transform: translateX(-3%) scaleX(1.03); }
  42%  { opacity: .66; transform: translateX(-14%) scaleX(1.16); }
  64%  { opacity: .46; transform: translateX(-20%) scaleX(1.08); }
  86%  { opacity: .16; transform: translateX(-10%) scaleX(0.98); }
  100% { opacity: 0;   transform: translateX(0) scaleX(1); }
}

/* gold spark trail released at the page edge during a flip */
.flip-spark {
  position: absolute;
  z-index: 41;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, #fff8e2 0%, var(--gold-bright) 32%, rgba(240,212,126,0) 72%);
  box-shadow:
    0 0 6px 1px rgba(240,212,126,0.9),
    0 0 16px 4px rgba(240,212,126,0.45),
    0 0 28px 8px rgba(201,162,39,0.18);
  animation: sparkFloat var(--sdur, 950ms) cubic-bezier(0.22, 0.7, 0.3, 1) forwards,
             sparkTwinkle var(--tdur, 340ms) ease-in-out infinite;
}

.flip-spark.star {
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.flip-spark.star::before,
.flip-spark.star::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 14%;
  background: linear-gradient(90deg, transparent, #fff8e2 45%, var(--gold-bright) 50%, #fff8e2 55%, transparent);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 4px rgba(240,212,126,0.85));
}
.flip-spark.star::after { transform: translate(-50%, -50%) rotate(90deg); }

@keyframes sparkFloat {
  0%   { opacity: 0;   transform: translate(0,0) scale(0.3)   rotate(0deg); }
  10%  { opacity: 1;   transform: translate(calc(var(--sx) * 0.12), calc(var(--sy) * 0.1)) scale(1) rotate(30deg); }
  100% { opacity: 0;   transform: translate(var(--sx), var(--sy)) scale(0.15) rotate(var(--srot, 140deg)); }
}
@keyframes sparkTwinkle {
  0%, 100% { filter: brightness(1)   saturate(1); }
  50%      { filter: brightness(1.6) saturate(1.3); }
}

/* ------------------------------------------------------------
   Tap zones (invisible presenter backup)
   ------------------------------------------------------------ */
.tap-zone {
  position: absolute;
  top: 0;
  bottom: 11vh;
  width: 22vw;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 30;
  outline-offset: -6px;
}
.tap-zone.left  { left: 0; }
.tap-zone.right { right: 0; }
.tap-zone:focus-visible { outline: 2px solid rgba(240,212,126,0.7); }

/* ------------------------------------------------------------
   Ascent progress line — the signature element.
   The gold contour climbs; the reader's marker travels up it.
   ------------------------------------------------------------ */
#ascent {
  position: absolute;
  left: 6vw;
  right: 6vw;
  bottom: 3.4vh;
  height: 60px;
  z-index: 20;
  pointer-events: none;
}
#ascentSvg { width: 100%; height: 100%; overflow: visible; }

#ascentDot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 12px rgba(240,212,126,0.9), 0 0 30px rgba(240,212,126,0.4);
  transform: translate(-50%, -50%);
  left: 0; top: 52px;
  transition: left 900ms cubic-bezier(0.2, 0.8, 0.2, 1), top 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

#ascentTag {
  position: absolute;
  transform: translate(-50%, -170%);
  left: 0; top: 52px;
  padding: 4px 12px;
  border: 1px solid rgba(201,162,39,0.55);
  border-radius: 999px;
  background: rgba(7,15,38,0.78);
  backdrop-filter: blur(4px);
  color: var(--gold-bright);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  white-space: nowrap;
  transition: left 900ms cubic-bezier(0.2, 0.8, 0.2, 1), top 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ------------------------------------------------------------
   Camera bubble
   ------------------------------------------------------------ */
#camBubble {
  position: absolute;
  right: 2.4vw;
  bottom: 2vh;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  overflow: hidden;
  z-index: 25;
  background: #05091a;
  box-shadow: 0 14px 34px rgba(0,0,0,0.55);
  transition: opacity 600ms ease, transform 600ms ease;
}
#camBubble.hidden { opacity: 0; transform: scale(0.85); pointer-events: none; }

#webcam, #motionOverlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#motionOverlay { pointer-events: none; }

#camRing {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(133,152,189,0.55);
  pointer-events: none;
  transition: border-color 220ms ease, box-shadow 220ms ease;
}
#camBubble.motion #camRing {
  border-color: var(--gold-bright);
  box-shadow: 0 0 18px rgba(240,212,126,0.55), inset 0 0 14px rgba(240,212,126,0.22);
}
#camBubble.triggered #camRing {
  animation: ringPulse 700ms ease-out;
}
@keyframes ringPulse {
  0%   { box-shadow: 0 0 0 0 rgba(240,212,126,0.75); }
  100% { box-shadow: 0 0 0 26px rgba(240,212,126,0); }
}

/* ------------------------------------------------------------
   Idle hint + fullscreen return
   ------------------------------------------------------------ */
#gestureHint {
  position: absolute;
  left: 50%;
  bottom: 11vh;
  transform: translateX(-50%);
  z-index: 26;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(201,162,39,0.4);
  background: rgba(7,15,38,0.72);
  backdrop-filter: blur(6px);
  color: var(--moon);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.04em;
  transition: opacity 700ms ease;
}
#gestureHint.hidden { opacity: 0; pointer-events: none; }
#gestureHint .hand { display: inline-block; animation: waveHand 1.6s ease-in-out infinite; transform-origin: 70% 80%; }
@keyframes waveHand {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(16deg); }
  55% { transform: rotate(-8deg); }
}

#fsReturn {
  position: absolute;
  top: 3vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  padding: 12px 26px;
  border-radius: 999px;
  border: 1px solid rgba(240,212,126,0.6);
  background: rgba(7,15,38,0.85);
  color: var(--gold-bright);
  font-size: 15px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: opacity 500ms ease;
}
#fsReturn.hidden { opacity: 0; pointer-events: none; }

/* ============================================================
   SPLASH
   ============================================================ */
#splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 100% 80% at 50% 30%, #142450 0%, var(--night) 52%, var(--night-deep) 100%);
  transition: opacity 1100ms ease, visibility 1100ms;
}
#splash.away { opacity: 0; visibility: hidden; }

#splashDust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#ridge {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 34vh;
  pointer-events: none;
}

#contour {
  stroke-dashoffset: 0;
  animation: contourDrift 26s linear infinite;
}
@keyframes contourDrift {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -280; }
}

.splash-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
  animation: splashRise 1400ms cubic-bezier(0.16, 0.8, 0.2, 1) both;
}
@keyframes splashRise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

.brandmark { margin-bottom: 5vh; }

.brand-name {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--moon);
}
.brand-name span { color: var(--mist); font-weight: 300; }

.ascent-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(56px, 9.5vw, 128px);
  line-height: 0.98;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(175deg, #f7e3a1 8%, var(--gold-bright) 34%, var(--gold) 58%, var(--gold-deep) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 26px rgba(201,162,39,0.28));
}
.ascent-title span { display: block; font-size: 0.52em; letter-spacing: 0.30em; }

.ascent-sub {
  margin: 2.4vh 0 6vh;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--mist);
}

#beginBtn {
  position: relative;
  padding: 20px 64px;
  border-radius: 999px;
  border: 1px solid rgba(240,212,126,0.55);
  background: linear-gradient(180deg, rgba(240,212,126,0.10), rgba(201,162,39,0.05));
  color: var(--gold-bright);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 250ms ease, box-shadow 250ms ease, opacity 250ms ease;
}
#beginBtn:disabled { opacity: 0.55; cursor: wait; }
#beginBtn:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 40px rgba(201,162,39,0.3);
}
#beginBtn .ring {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 999px;
  border: 1px solid rgba(240,212,126,0.35);
  animation: beginBreath 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes beginBreath {
  0%, 100% { transform: scale(1);    opacity: .55; }
  50%      { transform: scale(1.05); opacity: .18; }
}

.splash-foot {
  margin-top: 5vh;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--mist);
}

/* ============================================================
   Reduced motion & small screens
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .flip-layer.flip-next, .flip-layer.flip-prev { animation-duration: 240ms; }
  .flip-layer::before { animation: none !important; }
  .flip-shadow-cast.run { animation-duration: 240ms; }
  #contour, .leaf, #gestureHint .hand, #beginBtn .ring { animation: none; }
  #dust, #splashDust { display: none; }
}

@media (max-width: 760px) {
  #camBubble { width: 92px; height: 92px; }
  .tap-zone { width: 30vw; }
  #ascent { left: 4vw; right: 4vw; }
}