/* ===== MEDSIERRA LOCAL FONTS ===== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-medsierra.woff2") format("woff2");
  unicode-range:
    U+000A,
    U+0020-0022,
    U+0026-0029,
    U+002B-003B,
    U+003F,
    U+0041-005A,
    U+0061-007A,
    U+00B7,
    U+2014,
    U+2019,
    U+201C-201D,
    U+2190;
}

@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/playfair-med.woff2") format("woff2");
  unicode-range:
    U+004D,
    U+0064-0065;
}

:root {
  color-scheme: dark;
  --ink: #f5f4e9;
  --night: #0b1c24;
  --teal: #0b5652;
  --green: #4f8d66;
  --sun: #f6cf83;
  --sun-x: 10%;
  --sun-y: 65%;
  --sun-tx: 10vw;
  --sun-ty: 65vh;
  --sun-scale: 0.62;
  --sun-glow-opacity: 0.34;
  --sun-opacity: 0.72;
  --star-field-opacity: 0.34;
  --sierra-scale: 0.84;
  --scroll-cue-opacity: 0.7;
  --hero-y: 0px;
  --hero-scale: 1;
  --support-opacity: .72;
  --med-opacity: 1;
  --med-x: 0px;
  --med-y: 0px;
  --med-scale: 1;
  --sierra-x: 0px;
  --sierra-y: 10px;
  --mist-x: 0px;
  --mist-y: 0px;
  --mist-front-x: 0px;
  --mist-front-y: 0px;
  --ribbon-x: 0px;
  --login-x: 0px;
  --login-y: 0px;
  --login-press: 1;
  --deep-x: 0px;
  --deep-y: 0px;
  --mid-x: 0px;
  --mid-y: 0px;
  --near-x: 0px;
  --near-y: 0px;
  --front-x: 0px;
  --front-y: 0px;
  --sky-shift: 0%;
  --source-sun-x: 36%;
  --source-sun-y: 46%;
  --source-alpha-1: 0.60;
  --source-alpha-2: 0.35;
  font-family: Inter, "Avenir Next", Avenir, "Segoe UI", sans-serif;
  background: var(--night);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--night);
  scrollbar-color: rgba(211, 236, 216, 0.55) transparent;
  scrollbar-width: thin;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--night);
  color: var(--ink);
  overflow-x: hidden;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.journey {
  position: relative;
  height: 280vh;
  height: 280svh;
}

.scene {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  perspective: 1100px;
  background: #0a4146;
}

.scene::before {
  content: "";
  position: absolute;
  z-index: -11;
  inset: 0;
  background:
    radial-gradient(circle at 15% 22%, rgba(140, 184, 208, 0.3), transparent 38%),
    radial-gradient(circle at 82% 18%, rgba(191, 220, 201, 0.3), transparent 42%),
    radial-gradient(circle at 54% 62%, rgba(205, 211, 151, 0.15), transparent 34%);
  pointer-events: none;
}

.sky {
  position: absolute;
  inset: -8%;
  z-index: -12;
  background:
    radial-gradient(ellipse at 28% 18%, rgba(125, 177, 203, 0.44), transparent 42%),
    radial-gradient(ellipse at 78% 28%, rgba(172, 214, 190, 0.38), transparent 44%),
    radial-gradient(ellipse at 48% 78%, rgba(150, 178, 122, 0.22), transparent 37%),
    linear-gradient(135deg, #0b2c38 0%, #0d4b52 38%, #376f64 68%, #75987c 116%);
  transform: translate3d(0, var(--sky-shift), -280px) scale(1.34);
}

.aurora {
  position: absolute;
  z-index: -10;
  border-radius: 50%;
  opacity: 0.72;
  pointer-events: none;
}

.aurora-one {
  width: 58vw;
  height: 34vw;
  left: 9vw;
  top: 8vh;
  background: radial-gradient(ellipse, rgba(94, 181, 160, 0.29), rgba(94, 181, 160, 0.1) 44%, transparent 72%);
  transform: translate3d(var(--deep-x), var(--deep-y), -180px) rotate(-12deg);
}

.aurora-two {
  width: 48vw;
  height: 28vw;
  right: -7vw;
  top: 19vh;
  background: radial-gradient(ellipse, rgba(126, 176, 205, 0.27), rgba(126, 176, 205, 0.08) 47%, transparent 72%);
  transform: translate3d(var(--mid-x), var(--deep-y), -120px) rotate(16deg);
}

.contours {
  position: absolute;
  inset: 0;
  z-index: -9;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgba(224, 243, 225, 0.13);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  transform: translate3d(var(--deep-x), var(--deep-y), -90px) scale(1.08);
}

.stars {
  position: absolute;
  inset: 0;
  z-index: -8;
  pointer-events: none;
}

.stars i {
  position: absolute;
  width: 3px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(243, 239, 201, 0.55);
  box-shadow: 0 0 12px rgba(246, 213, 143, 0.65);
  animation: shimmer 4s ease-in-out infinite alternate;
}

.stars i:nth-child(1) { left: 8%; top: 16%; animation-delay: -1s; }
.stars i:nth-child(2) { left: 19%; top: 31%; animation-delay: -2.6s; }
.stars i:nth-child(3) { left: 37%; top: 12%; animation-delay: -0.7s; }
.stars i:nth-child(4) { left: 52%; top: 24%; animation-delay: -3.2s; }
.stars i:nth-child(5) { left: 68%; top: 11%; animation-delay: -1.9s; }
.stars i:nth-child(6) { left: 79%; top: 28%; animation-delay: -0.3s; }
.stars i:nth-child(7) { left: 91%; top: 14%; animation-delay: -2.2s; }
.stars i:nth-child(8) { left: 59%; top: 39%; animation-delay: -3.7s; }

@keyframes shimmer {
  to { opacity: 0.25; transform: scale(0.55); }
}

.sun-path {
  position: absolute;
  z-index: -7;
  inset: 7% 18% 20%;
  overflow: hidden;
  opacity: 0.38;
  pointer-events: none;
}

.sun-path::before,
.sun-path::after {
  content: "";
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: -63%;
  height: 121%;
  border: 1px solid rgba(234, 245, 223, 0.24);
  border-radius: 50% 50% 0 0;
}

.sun-path::after {
  inset: auto 17% -50%;
  height: 96%;
  opacity: 0.45;
}

.sun-path span {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(transparent, rgba(238, 245, 222, 0.18), transparent);
  transform: rotate(24deg);
}

.sun {
  position: absolute;
  z-index: -6;
  left: 0;
  top: 0;
  width: clamp(92px, 11vw, 174px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate3d(calc(var(--sun-tx) - 50%), calc(var(--sun-ty) - 50%), -30px) scale(var(--sun-scale));
  transform-style: preserve-3d;
  pointer-events: none;
  will-change: transform, opacity;
  opacity: var(--sun-opacity);
}

.sun-halo {
  position: absolute;
  inset: -96%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(241, 224, 167, 0.38), rgba(177, 214, 176, 0.12) 41%, transparent 70%);
  animation: breathe 7s ease-in-out infinite alternate;
}

.sun-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, #ffffdc 0 6%, transparent 18%),
    linear-gradient(145deg, #f4e6b5, #d9ca82 58%, #a9c997);
  box-shadow:
    0 0 0 1px rgba(255, 246, 205, 0.5),
    0 0 44px rgba(228, 214, 154, 0.42),
    inset -14px -16px 30px rgba(97, 135, 106, 0.22);
}

.sun-core::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(255, 249, 210, 0.36);
  border-radius: 50%;
}

@keyframes breathe {
  to { transform: scale(1.12); opacity: 0.72; }
}

.cloud {
  position: absolute;
  z-index: -5;
  height: 16px;
  border-radius: 50%;
  filter: blur(7px);
  background: rgba(220, 239, 220, 0.18);
  pointer-events: none;
  will-change: transform;
}

.cloud-one {
  width: 34vw;
  left: 9vw;
  top: 48%;
  transform: translate3d(var(--mid-x), var(--mid-y), -10px) rotate(-3deg);
}

.cloud-two {
  width: 26vw;
  right: 5vw;
  top: 39%;
  transform: translate3d(var(--deep-x), var(--deep-y), -30px) rotate(4deg);
}

.cloud-three {
  width: 17vw;
  left: 49vw;
  top: 57%;
  opacity: 0.55;
  transform: translate3d(var(--near-x), var(--deep-y), 10px) rotate(-2deg);
}

.world {
  position: absolute;
  inset: 0;
  z-index: -4;
  transform-style: preserve-3d;
  pointer-events: none;
}

.ridge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 100%;
  will-change: transform;
}

.ridge-distant {
  transform: translate3d(var(--deep-x), var(--deep-y), -170px) scale(1.18);
  opacity: 0.66;
}

.ridge-middle {
  transform: translate3d(var(--mid-x), var(--mid-y), -70px) scale(1.08);
  opacity: 0.82;
}

.ridge-near {
  transform: translate3d(var(--near-x), var(--near-y), 35px) scale(1.02);
  opacity: 0.94;
}

.ridge-foreground {
  transform: translate3d(var(--front-x), var(--front-y), 120px) scale(0.97);
}

.mist-edge {
  fill: rgba(211, 232, 215, 0.11);
}

.snow {
  fill: rgba(221, 238, 218, 0.72);
}

.snow-mid {
  fill: rgba(209, 230, 205, 0.5);
}

.ridge-line {
  fill: none;
  stroke: rgba(192, 221, 193, 0.38);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.ground-line {
  fill: none;
  stroke: rgba(121, 175, 137, 0.25);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.ground-line-two {
  opacity: 0.48;
}

.valley-mist {
  position: absolute;
  left: -10%;
  width: 120%;
  border-radius: 50%;
  pointer-events: none;
  transform: translate3d(var(--mist-x), var(--mist-y), 0);
  will-change: transform;
}

.mist-back {
  z-index: -3;
  top: 43%;
  height: 24%;
  opacity: 0.58;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(201, 225, 207, 0.24), transparent 62%),
    linear-gradient(to bottom, transparent, rgba(170, 207, 193, 0.14) 47%, transparent 78%);
}

.mist-front {
  z-index: -1;
  top: 57%;
  height: 19%;
  opacity: 0.46;
  background: radial-gradient(ellipse at 52% 46%, rgba(202, 226, 205, 0.23), rgba(139, 186, 172, 0.08) 48%, transparent 70%);
  transform: translate3d(var(--mist-front-x), var(--mist-front-y), 0);
}

.sun-light {
  position: absolute;
  z-index: -2;
  left: 0;
  top: 0;
  width: min(60vmax, 820px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 221, 163, 0.2), rgba(170, 211, 178, 0.1) 34%, transparent 68%);
  opacity: var(--sun-glow-opacity);
  transform: translate3d(calc(var(--sun-tx) - 50%), calc(var(--sun-ty) - 50%), 0) scale(1.18);
  pointer-events: none;
  will-change: transform, opacity;
}

.light-ribbons {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translate3d(var(--ribbon-x), 0, 0);
}

.light-ribbons i {
  position: absolute;
  width: 72vw;
  height: 44vh;
  border: 1px solid rgba(222, 239, 218, 0.12);
  border-color: rgba(222, 239, 218, 0.12) transparent transparent;
  border-radius: 50%;
}

.light-ribbons i:nth-child(1) { left: -18vw; top: 17%; transform: rotate(11deg); }
.light-ribbons i:nth-child(2) { right: -25vw; top: 28%; transform: rotate(-14deg); opacity: 0.74; }
.light-ribbons i:nth-child(3) { left: 28vw; top: 63%; width: 46vw; height: 24vh; opacity: 0.52; }

.hero {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 43%;
  width: min(1120px, 90vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translate3d(-50%, calc(-50% + var(--hero-y)), 90px) scale(var(--hero-scale));
  transform-style: preserve-3d;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -12%;
  width: min(1120px, 104vw);
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(3, 42, 43, 0.26), rgba(3, 42, 43, 0.08) 48%, transparent 73%);
  transform: translateX(-50%);
  pointer-events: none;
}

.wordmark {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0;
  color: var(--ink);
  font-weight: 400;
  line-height: 0.78;
  letter-spacing: -0.07em;
}

.med {
  position: relative;
  z-index: 2;
  margin-right: -0.08em;
  padding-bottom: 0.05em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.7rem, 7.4vw, 7.8rem);
  font-style: italic;
  letter-spacing: -0.08em;
  color: rgba(232, 245, 219, 0.92);
}

.sierra {
  position: relative;
  z-index: 1;
  font-family: "Segoe Script", "Lucida Handwriting", "Brush Script MT", cursive;
  font-size: clamp(5.7rem, 15.4vw, 15.8rem);
  font-weight: 600;
  letter-spacing: -0.12em;
  color: #fffdf0;
  transform: translate3d(0, 10px, 0) scale(var(--sierra-scale));
  transform-origin: 30% 66%;
  will-change: transform;
  text-shadow:
    0 0 16px rgba(245, 247, 222, 0.34),
    0 0 42px rgba(218, 238, 207, 0.16),
    0 2px 0 rgba(11, 62, 58, 0.2);
}

.tagline {
  max-width: 820px;
  margin: clamp(34px, 5vh, 58px) auto 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 1.9vw, 1.55rem);
  font-style: italic;
  line-height: 1.45;
  letter-spacing: 0.025em;
  color: rgba(250, 249, 232, 0.94);
  text-wrap: balance;
  text-shadow: 0 3px 18px rgba(3, 34, 36, 0.58);
}

.login {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 22px;
  min-width: 208px;
  min-height: 66px;
  margin-top: clamp(30px, 5vh, 54px);
  padding: 13px 17px 13px 28px;
  border: 1px solid rgba(244, 249, 234, 0.88);
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(105deg, rgba(250, 248, 234, 0.97), rgba(233, 242, 222, 0.97) 58%, rgba(198, 224, 199, 0.96));
  color: #103f3b;
  font: 700 0.82rem/1 Inter, "Avenir Next", "Segoe UI", sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow:
    0 18px 52px rgba(2, 29, 31, 0.34),
    0 0 0 5px rgba(201, 230, 203, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.52);
  cursor: pointer;
  isolation: isolate;
  transform: translate3d(var(--login-x), var(--login-y), 0) scale(var(--login-press));
  transition: color 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
}

.login::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  clip-path: inset(0 round 999px);
  background: linear-gradient(105deg, #073d3b, #0f5f57 58%, #337c66);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  backface-visibility: hidden;
}

.login span {
  position: relative;
  z-index: 1;
}

.login svg {
  position: relative;
  z-index: 1;
  width: 35px;
  height: 35px;
  padding: 6px;
  border: 1px solid rgba(250, 249, 233, 0.28);
  border-radius: 50%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 280ms ease, border-color 280ms ease;
}

.login:hover,
.login:focus-visible {
  color: #fffdf0;
  border-color: rgba(255, 240, 192, 0.95);
  box-shadow: 0 20px 58px rgba(2, 28, 30, 0.42), 0 0 0 5px rgba(239, 212, 150, 0.14);
  outline: none;
}

.login:hover::before,
.login:focus-visible::before {
  transform: scaleX(1);
}

.login:hover svg,
.login:focus-visible svg {
  transform: translateX(3px);
  border-color: rgba(250, 249, 232, 0.38);
}

.login:active {
  --login-press: 0.97;
}

.scroll-mark {
  position: absolute;
  z-index: 12;
  left: 50%;
  bottom: clamp(18px, 3.6vh, 38px);
  width: 1px;
  height: 42px;
  background: linear-gradient(transparent, rgba(236, 244, 218, 0.65));
  opacity: var(--scroll-cue-opacity);
  pointer-events: none;
}

.scroll-mark span {
  position: absolute;
  left: -3px;
  top: 0;
  width: 7px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f2daa1;
  box-shadow: 0 0 14px rgba(246, 213, 141, 0.75);
  animation: descend 2.4s ease-in-out infinite;
}

@keyframes descend {
  0% { opacity: 0; transform: translateY(0) scale(0.65); }
  24% { opacity: 1; }
  80% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(38px) scale(1); }
}

.vignette {
  position: absolute;
  z-index: 16;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(1, 24, 31, 0.18), transparent 28%, transparent 66%, rgba(3, 35, 34, 0.28)),
    radial-gradient(circle at center, transparent 52%, rgba(1, 23, 29, 0.18) 118%);
}

.noise {
  position: absolute;
  z-index: 17;
  inset: -5%;
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

@media (max-width: 720px) {
  .journey {
    height: 240vh;
    height: 240svh;
  }

  .scene {
    min-height: 0;
  }

  .hero {
    top: 43%;
    width: 92vw;
  }

  .wordmark {
    width: 100%;
    letter-spacing: -0.1em;
    transform: scale(0.9);
    transform-origin: center;
  }

  .med {
    font-size: clamp(2.2rem, 12vw, 4.1rem);
    margin-right: -0.02em;
    transform: translateY(-0.08em);
  }

  .sierra {
    font-size: clamp(5rem, 25vw, 8.5rem);
  }

  .hero::before {
    top: -6%;
    width: 116vw;
    height: 62%;
    background: radial-gradient(ellipse, rgba(3, 37, 40, 0.48), rgba(3, 37, 40, 0.2) 48%, transparent 73%);
  }

  .tagline {
    width: min(330px, 88vw);
    margin-top: 30px;
    padding-inline: 4px;
    font-size: clamp(0.95rem, 4.2vw, 1.12rem);
  }

  .login {
    min-width: 184px;
    min-height: 60px;
    margin-top: 32px;
  }

  .ridge-distant {
    transform: translate3d(var(--deep-x), var(--deep-y), -170px) scale(1.45);
  }

  .ridge-middle {
    transform: translate3d(var(--mid-x), var(--mid-y), -70px) scale(1.28);
  }

  .ridge-near {
    transform: translate3d(var(--near-x), var(--near-y), 35px) scale(1.2);
  }

  .ridge-foreground {
    transform: translate3d(var(--front-x), var(--front-y), 120px) scale(1.1);
  }

  .sun {
    width: clamp(82px, 24vw, 116px);
  }

  .sun-path {
    inset: 8% 4% 20%;
  }

  .sun-light {
    width: 78vmax;
  }

  .mist-back { top: 46%; height: 22%; }
  .mist-front { top: 59%; height: 18%; }
  .light-ribbons i:nth-child(3) { display: none; }
  .noise { display: none; }

  .cloud-one { width: 50vw; }
  .cloud-two { width: 42vw; }
  .cloud-three { width: 32vw; }

  .scroll-mark {
    bottom: 17px;
  }
}

@media (max-height: 650px) and (min-width: 721px) {
  .hero {
    top: 41%;
  }

  .wordmark {
    transform: scale(0.8);
    margin-block: -30px;
  }

  .tagline {
    margin-top: 26px;
  }

  .login {
    min-height: 54px;
    margin-top: 24px;
  }
}


/* During the click warp, freeze/hide expensive decorative paint work.
   The flash arrives quickly, so these changes are visually imperceptible but
   keep the zoom on the compositor instead of repainting effects every frame. */
body.warping .sun-halo,
body.warping .stars i,
body.warping .scroll-mark span,
body.warping .login::after {
  animation-play-state: paused !important;
}

body.warping .noise,
body.warping .contours,
body.warping .light-ribbons,
body.warping .sun-path {
  opacity: 0 !important;
  transition: opacity 120ms linear !important;
}

body.warping .sierra {
  /* drop-shadow filter is expensive while a huge parent is scaling */
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  /* Keep the long scroll journey and all scroll-driven scene changes. Only
     stop decorative looping motion that can be uncomfortable. */
  .stars i,
  .sun-halo,
  .scroll-mark span,
  .login::after {
    animation: none !important;
  }
  .noise { display: none; }
}


/* ===== Combined best-of-both enhancements ===== */
html { scroll-behavior: smooth; }
body.warping { overflow: hidden; }

.scene {
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}

.hero-kicker {
  margin-bottom: clamp(14px, 2.2vh, 24px);
  text-align: center;
  text-shadow: 0 2px 15px rgba(3, 34, 36, 0.72);
}

.eyebrow {
  margin: 0;
  font: 600 clamp(0.58rem, 0.85vw, 0.76rem)/1.2 Inter, "Segoe UI", sans-serif;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  color: rgba(252, 251, 235, 0.93);
}

.eyebrow span { opacity: 0.62; font-weight: 400; }

.faculty {
  margin: 8px 0 0;
  font: 500 clamp(0.7rem, 1vw, 0.88rem)/1.25 Inter, "Segoe UI", sans-serif;
  letter-spacing: 0.035em;
  color: rgba(240, 246, 230, 0.77);
}

.sierra {
  font-family: "Kaushan Script", "Segoe Script", "Brush Script MT", cursive;
  /* Grow from the visual centre like the reference, while keeping the real mountains. */
  transform-origin: 50% 60%;
  backface-visibility: hidden;
  will-change: transform;
}

/* The small title details gently disappear as Sierra becomes the hero. */
.hero-kicker,
.tagline {
  opacity: var(--support-opacity, 1);
}

.login {
  will-change: transform, opacity, background-color;
  /* Painting containment prevents Chromium from briefly exposing a square hover layer. */
  contain: paint;
  background: rgba(244, 247, 226, 0.97);
  transition:
    color 280ms ease,
    background-color 280ms ease,
    border-color 280ms ease,
    box-shadow 280ms ease;
}

/* Replace the old sliding dark rectangle with a fully rounded compositor layer. */
.login::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  clip-path: inset(0 round 999px);
  background: linear-gradient(105deg, #073d3b, #0f5f57 58%, #337c66);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  backface-visibility: hidden;
}

.login:hover::before,
.login:focus-visible::before {
  transform: scaleX(1);
}

.login > span,
.login > svg {
  z-index: 2;
}

.login::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  left: -65%;
  width: 42%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.72), transparent);
  animation: loginSheen 7s ease-in-out infinite;
}

@keyframes loginSheen {
  0%, 77% { left: -65%; }
  100% { left: 135%; }
}

.login { z-index: 6; }

.login.warp-go {
  pointer-events: none;
  transition:
    transform 620ms cubic-bezier(.22,.72,.25,1),
    opacity 360ms ease 70ms,
    box-shadow 350ms ease;
  transform: translate3d(var(--login-x), var(--login-y), 0) scale(1.42);
  opacity: 0;
  box-shadow: 0 28px 90px rgba(245, 245, 218, 0.42);
}

.warp-ring {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 220px;
  height: 70px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.9);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1);
  will-change: transform, opacity;
}

.warp-ring.go {
  animation: warpRingOut 760ms cubic-bezier(.2,.7,.3,1) forwards;
}

@keyframes warpRingOut {
  0% { opacity: .95; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(8); }
}

.warp-flash {
  position: fixed;
  z-index: 1100;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--flash-x, 50%) var(--flash-y, 54%), #fff 0%, #f4fae8 24%, #cfe8d2 55%, #83bbb4 100%);
}

.warp-flash.go {
  transition: opacity 430ms ease 420ms;
  opacity: 1;
}

.scene.warp-go {
  transition: transform 880ms cubic-bezier(.22,.68,.24,1);
  transform: translateZ(0) scale(3.45);
  will-change: transform;
  backface-visibility: hidden;
}

.hero.warp-go {
  transition: transform 700ms cubic-bezier(.22,.68,.24,1), opacity 300ms ease;
  transform: translate3d(-50%, calc(-50% + var(--hero-y) - 18px), 90px) scale(1.12);
  opacity: 0;
}

.vignette.warp-go,
.noise.warp-go,
.scroll-mark.warp-go {
  transition: opacity 220ms ease;
  opacity: 0 !important;
}

@media (max-width: 720px) {
  .hero-kicker { margin-bottom: 10px; }
  .eyebrow { font-size: .56rem; letter-spacing: .2em; text-indent: .2em; }
  .faculty { font-size: .68rem; }
}

@media (prefers-reduced-motion: reduce) {
  .login::after { animation: none; }
}

    

/* ===== v3: exact Sierra + sky language from supplied academic portal ===== */
html,
body {
  background: #0b1c24;
}

.scene {
  background: #0b1c24;
}

/* Remove the older multi-blob backdrop so the supplied horizon sky reads cleanly. */
.scene::before {
  background: none;
}

/* Sky treatment copied in spirit and values from the supplied portal's
   sun-horizon-aura: warm luminous core -> teal -> deep blue. */
.sky {
  inset: -4%;
  background:
    radial-gradient(
      circle at var(--source-sun-x) var(--source-sun-y),
      rgba(254, 240, 138, var(--source-alpha-1)) 0%,
      rgba(245, 158, 11, var(--source-alpha-2)) 24%,
      rgba(13, 148, 136, 0.22) 52%,
      rgba(11, 28, 36, 0.96) 84%
    );
  transform: translate3d(0, var(--sky-shift), -280px) scale(1.16);
  will-change: transform, background;
}

/* The supplied sky is cleaner; hide the older aurora blobs that tinted it. */
.aurora {
  display: none;
}

/* Keep the existing mountain scene, but make the decorative contours subtler
   against the new sky. */
.contours {
  opacity: 0.45;
}

.med {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 400;
  color: rgba(209, 250, 229, 0.90);
  letter-spacing: -0.055em;
}

/* This is the Sierra visual language from the supplied code: Caveat + chalk glow. */
.sierra {
  font-family: "Caveat", cursive;
  font-size: clamp(4.5rem, 16vw, 13rem);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.01em;
  color: #ffffff;
  transform: translate3d(0, 10px, 0) scale(var(--sierra-scale));
  transform-origin: 50% 62%;
  backface-visibility: hidden;
  will-change: transform;
  text-shadow:
    0 0 2px rgba(255, 255, 255, 0.95),
    0 0 15px rgba(255, 245, 215, 0.70),
    0 0 35px rgba(45, 130, 135, 0.50);
  filter: drop-shadow(0 6px 16px rgba(4, 20, 26, 0.75));
}

@media (max-width: 720px) {
  .sierra {
    font-size: clamp(5rem, 25vw, 8rem);
  }
}


/* ===== v5: CMU account control, independent-site note, longer solar journey ===== */
.journey {
  height: 4600vh;
  height: 4600svh;
}

/* Let the visual solar path span nearly the full viewport now that the sun
   completes a true rise -> overhead arc -> set journey. */
.sun-path {
  inset: 3% 3% 13%;
  opacity: 0.28;
}

/* Main account control based on the supplied CMU Account reference. */
.login {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 0;
  width: clamp(310px, 35vw, 430px);
  min-width: 0;
  height: 72px;
  min-height: 72px;
  padding: 0 28px 0 0;
  overflow: hidden;
  border: 1px solid rgba(224, 201, 231, 0.30);
  border-radius: 28px;
  background: linear-gradient(105deg, #a87ab5 0%, #9c70aa 46%, #8e659d 100%);
  color: #fff;
  font: 700 clamp(1rem, 1.5vw, 1.25rem)/1 Inter, "Segoe UI", sans-serif;
  letter-spacing: 0.015em;
  text-transform: none;
  box-shadow:
    0 16px 42px rgba(10, 25, 34, 0.34),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 1px 0 rgba(255,255,255,.28) inset;
  isolation: isolate;
}

/* No green hover layer on this account-style button. */
.login::before { display: none !important; }

.login:hover,
.login:focus-visible {
  color: #fff;
  border-color: rgba(241, 222, 246, .50);
  background: linear-gradient(105deg, #af82bb 0%, #a477b0 46%, #966ca4 100%);
  box-shadow:
    0 21px 52px rgba(8, 20, 30, 0.40),
    0 0 0 1px rgba(255,255,255,.09) inset,
    0 1px 0 rgba(255,255,255,.35) inset;
  outline: none;
}

.login .cmu-badge {
  position: relative;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff, #f7f3f8);
  color: #865499;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  box-shadow:
    0 4px 14px rgba(48, 31, 56, .24),
    inset 0 0 0 1px rgba(130, 79, 149, .10);
}

.login .cmu-label {
  position: relative;
  z-index: 4;
  display: grid;
  place-items: center;
  height: 44px;
  margin-left: 0;
  padding-left: 22px;
  border-left: 1px solid rgba(84, 49, 99, .22);
  white-space: nowrap;
}

/* Keep the light sweep, but make it softer over purple. */
.login::after {
  z-index: 3;
  opacity: .46;
}

/* Quiet local-account escape hatch. It intentionally stays out of the way
   until the visitor has reached the final part of the long scroll. */
.local-account {
  position: fixed;
  z-index: 70;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(38px, calc(env(safe-area-inset-bottom) + 34px));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 12px 7px 9px;
  border: 1px solid rgba(240,244,244,.22);
  border-radius: 999px;
  background: rgba(13, 33, 41, .34);
  color: rgba(245,247,247,.66);
  font: 600 .66rem/1 Inter, "Segoe UI", sans-serif;
  letter-spacing: .02em;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  box-shadow: 0 8px 26px rgba(4,17,23,.18);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(12px, 10px, 0) scale(.94);
  transition: opacity 260ms ease, transform 320ms cubic-bezier(.2,.75,.25,1), border-color 220ms ease, color 220ms ease;
}

.local-account::before {
  content: "+";
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.26);
  font: 400 1rem/1 Inter, sans-serif;
}

.local-account.revealed {
  opacity: .68;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0,0,0) scale(1);
}

.local-account:hover,
.local-account:focus-visible {
  opacity: 1;
  color: #fff;
  border-color: rgba(255,255,255,.42);
  outline: none;
}

.site-disclaimer {
  position: fixed;
  z-index: 65;
  left: 50%;
  bottom: max(8px, env(safe-area-inset-bottom));
  width: min(92vw, 760px);
  transform: translateX(-50%);
  margin: 0;
  padding: 0 8px;
  color: rgba(239,244,242,.58);
  font: 500 clamp(.54rem, .65vw, .66rem)/1.25 Inter, "Segoe UI", sans-serif;
  letter-spacing: .015em;
  text-align: center;
  text-shadow: 0 1px 8px rgba(2,16,22,.72);
  pointer-events: none;
}

@media (max-width: 720px) {
  .journey {
    height: 3800vh;
    height: 3800svh;
  }

  .login {
    grid-template-columns: 62px 1fr;
    width: min(88vw, 350px);
    height: 62px;
    min-height: 62px;
    padding-right: 20px;
    border-radius: 24px;
    font-size: .96rem;
  }

  .login .cmu-badge {
    width: 62px;
    height: 62px;
    font-size: .88rem;
  }

  .login .cmu-label {
    height: 38px;
    padding-left: 16px;
  }

  .local-account {
    right: 10px;
    bottom: 38px;
    font-size: .60rem;
  }

  .site-disclaimer {
    font-size: .52rem;
  }
}


@media (prefers-reduced-motion: reduce) {
  .journey { height: 100svh; }
  .local-account { display: none; }
}


/* ===== v6: smaller blended CMU control + adaptive performance ===== */

/* Static sky base + compositor-moved glow. This avoids repainting a giant
   radial-gradient background every scroll frame on phones and older GPUs. */
.sky {
  inset: -3%;
  overflow: hidden;
  background:
    linear-gradient(118deg,
      #173747 0%,
      #1c5356 38%,
      #53755c 67%,
      #857b50 100%);
  transform: translate3d(0, var(--sky-shift), -280px) scale(1.14);
  will-change: transform;
}
.sky::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: min(105vmax, 1400px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(255, 246, 178, .64) 0%,
    rgba(245, 171, 70, .30) 23%,
    rgba(36, 156, 139, .13) 48%,
    rgba(11, 28, 36, 0) 72%);
  opacity: var(--sun-glow-opacity);
  transform: translate3d(calc(var(--sun-tx) - 50%), calc(var(--sun-ty) - 50%), 0) scale(1.42);
  transform-origin: center;
  will-change: transform, opacity;
}

/* Smaller and quieter than v5. Purple is translucent/muted so it belongs in
   the teal-gold scene instead of reading like a separate UI screenshot. */
.login {
  grid-template-columns: 54px 1fr;
  width: clamp(242px, 27vw, 326px);
  height: 56px;
  min-height: 56px;
  padding: 0 20px 0 0;
  border-radius: 22px;
  border: 1px solid rgba(244, 229, 248, .20);
  background: linear-gradient(110deg,
    rgba(147, 103, 160, .78) 0%,
    rgba(126, 89, 141, .76) 52%,
    rgba(105, 78, 125, .74) 100%);
  color: rgba(255,255,255,.96);
  font-size: clamp(.84rem, 1.02vw, .98rem);
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow:
    0 10px 28px rgba(3, 20, 28, .22),
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 0 0 1px rgba(49, 78, 78, .06);
  transform: translate3d(var(--login-x), var(--login-y), 0) scale(var(--login-press));
}

.login:hover,
.login:focus-visible {
  background: linear-gradient(110deg,
    rgba(157, 113, 170, .86) 0%,
    rgba(137, 98, 151, .84) 52%,
    rgba(115, 86, 133, .82) 100%);
  border-color: rgba(249, 238, 252, .34);
  box-shadow:
    0 13px 34px rgba(3, 20, 28, .28),
    0 0 22px rgba(187, 151, 196, .08),
    inset 0 1px 0 rgba(255,255,255,.25);
}

.login .cmu-badge {
  width: 54px;
  height: 54px;
  font-size: .76rem;
  color: #795187;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(245,241,246,.94));
  box-shadow:
    0 3px 10px rgba(44, 28, 51, .17),
    inset 0 0 0 1px rgba(120, 79, 137, .08);
}

.login .cmu-label {
  height: 34px;
  padding-left: 15px;
  border-left-color: rgba(62, 41, 73, .18);
}

.login::after {
  opacity: .24;
  animation-duration: 9s;
}

/* Avoid expensive blur on the hidden secondary option. */
.local-account {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(11, 31, 39, .62);
}

/* A lighter warp scale is both smoother and visually more controlled. */
.scene.warp-go {
  transition: transform 720ms cubic-bezier(.22,.68,.24,1);
  transform: translate3d(0,0,0) scale(var(--warp-scale, 2.85));
}
.warp-flash.go {
  transition: opacity 330ms ease 300ms;
}
.login.warp-go {
  transition:
    transform 470ms cubic-bezier(.22,.72,.25,1),
    opacity 280ms ease 45ms;
  transform: translate3d(var(--login-x), var(--login-y), 0) scale(1.28);
  box-shadow: none;
}
.warp-ring.go { animation-duration: 610ms; }

/* Mobile/tablet performance: keep the scene rich but drop layers that cost
   disproportionately more than they add at small sizes. */
@media (max-width: 900px) {
  .contours { opacity: .22; }
  .cloud { filter: blur(4px); }
  .light-ribbons i:nth-child(3) { display: none; }
  .noise { opacity: .018; }
}

@media (max-width: 720px) {
  .journey {
    height: 3800vh;
    height: 3800svh;
  }
  .login {
    grid-template-columns: 48px 1fr;
    width: min(76vw, 286px);
    height: 50px;
    min-height: 50px;
    padding-right: 16px;
    border-radius: 19px;
    font-size: .80rem;
    margin-top: clamp(22px, 3.5vh, 34px);
  }
  .login .cmu-badge {
    width: 38px;
    height: 38px;
    font-size: .68rem;
  }
  .login .cmu-label {
    height: 30px;
    padding-left: 12px;
  }
  .cloud-three,
  .light-ribbons,
  .contours,
  .noise { display: none; }
  .cloud { filter: none; opacity: .65; }
  .stars i:nth-child(n+6) { display: none; }
  .sun-path { opacity: .16; }
  .site-disclaimer { width: min(94vw, 520px); }
}

/* Short landscape phones/tablets. */
@media (max-height: 620px) and (orientation: landscape) {
  .hero { top: 46%; transform: translate3d(-50%, calc(-50% + var(--hero-y)), 90px) scale(.88); }
  .hero-kicker { margin-bottom: 5px; }
  .tagline { margin-top: 14px; font-size: .92rem; }
  .login {
    width: min(42vw, 270px);
    height: 36px;
    min-height: 46px;
    grid-template-columns: 44px 1fr;
    margin-top: 14px;
  }
  .login .cmu-badge { width: 44px; height: 44px; }
  .login .cmu-label { height: 27px; }
  .scroll-mark { display: none; }
}

/* Runtime low-power mode, enabled by JS from hardware + viewport signals. */
html.lite .noise,
html.lite .contours,
html.lite .light-ribbons,
html.lite .sun-path,
html.lite .cloud-three { display: none !important; }
html.lite .cloud { filter: none !important; opacity: .58; }
html.lite .stars i:nth-child(n+5) { display: none !important; }
html.lite .sierra {
  filter: none;
  text-shadow:
    0 0 2px rgba(255,255,255,.88),
    0 0 12px rgba(255,245,215,.42);
}
html.lite .login::after { display: none; }
html.lite .warp-ring { display: none; }
html.lite .scene.warp-go { transition-duration: 560ms; }

@media (prefers-reduced-motion: reduce) {
  .sky::after { will-change: auto; }
  .login { transform: none !important; }
}


/* ===== v7: smaller CMU control + richer efficient star/light sky + corrected scroll cue ===== */

/* Add a soft, static light wash to make the sky feel more blended without
   repainting gradients on every scroll frame. */
.sky::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 12% 70%, rgba(247, 206, 116, .20) 0%, rgba(235, 184, 91, .08) 27%, transparent 49%),
    radial-gradient(ellipse at 48% 22%, rgba(117, 201, 195, .12) 0%, rgba(75, 155, 162, .06) 34%, transparent 58%),
    radial-gradient(ellipse at 84% 34%, rgba(109, 173, 185, .09) 0%, transparent 45%),
    linear-gradient(180deg, rgba(8, 25, 35, .10) 0%, transparent 42%, rgba(214, 183, 111, .05) 78%, transparent 100%);
  opacity: .92;
}

/* Many extra stars, but rendered with only two pseudo-elements. This is much
   cheaper than creating and animating dozens of separate DOM nodes. */
.stars::before,
.stars::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  pointer-events: none;
}
.stars::before {
  width: 2px;
  height: 2px;
  background: rgba(246, 244, 211, .58);
  box-shadow:
    4vw 9vh 0 rgba(246,244,211,.36), 12vw 23vh 0 rgba(232,245,227,.44),
    17vw 7vh 0 rgba(250,238,190,.32), 24vw 17vh 0 rgba(236,247,232,.48),
    31vw 31vh 0 rgba(245,238,199,.35), 35vw 6vh 0 rgba(233,248,238,.44),
    43vw 15vh 0 rgba(247,242,207,.36), 47vw 34vh 0 rgba(228,245,232,.40),
    55vw 8vh 0 rgba(251,239,192,.38), 61vw 21vh 0 rgba(231,247,238,.42),
    66vw 34vh 0 rgba(246,242,209,.31), 73vw 6vh 0 rgba(232,244,232,.45),
    77vw 18vh 0 rgba(248,238,197,.40), 84vw 29vh 0 rgba(230,246,236,.37),
    89vw 10vh 0 rgba(248,243,210,.38), 95vw 24vh 0 rgba(230,244,237,.42),
    8vw 38vh 0 rgba(246,241,207,.28), 22vw 42vh 0 rgba(231,245,234,.35),
    40vw 43vh 0 rgba(248,239,199,.30), 58vw 46vh 0 rgba(230,244,236,.33),
    71vw 41vh 0 rgba(247,242,209,.28), 91vw 45vh 0 rgba(232,245,236,.32);
  opacity: .82;
}
.stars::after {
  width: 1px;
  height: 1px;
  background: rgba(245, 248, 226, .58);
  box-shadow:
    7vw 14vh 0 rgba(245,248,226,.48), 14vw 33vh 0 rgba(245,238,194,.38),
    20vw 11vh 0 rgba(229,246,237,.46), 28vw 25vh 0 rgba(248,242,205,.40),
    38vw 20vh 0 rgba(231,247,237,.45), 49vw 9vh 0 rgba(248,239,199,.37),
    52vw 29vh 0 rgba(230,245,234,.42), 64vw 13vh 0 rgba(247,242,207,.38),
    70vw 27vh 0 rgba(231,246,237,.45), 81vw 8vh 0 rgba(249,239,195,.40),
    87vw 21vh 0 rgba(230,245,236,.44), 97vw 14vh 0 rgba(247,242,207,.36),
    3vw 30vh 0 rgba(231,245,235,.34), 33vw 39vh 0 rgba(249,241,202,.32),
    46vw 39vh 0 rgba(231,246,237,.36), 63vw 40vh 0 rgba(247,241,205,.31),
    79vw 37vh 0 rgba(232,245,236,.34), 94vw 36vh 0 rgba(247,241,205,.30);
  opacity: .72;
}

/* Smaller, calmer CMU Account control. */
.login {
  grid-template-columns: 48px 1fr;
  width: clamp(210px, 23vw, 278px);
  height: 50px;
  min-height: 50px;
  padding-right: 15px;
  border-radius: 19px;
  font-size: clamp(.74rem, .90vw, .86rem);
  box-shadow:
    0 8px 22px rgba(3, 20, 28, .18),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 0 0 1px rgba(49,78,78,.05);
}
.login:hover,
.login:focus-visible {
  box-shadow:
    0 10px 26px rgba(3, 20, 28, .23),
    0 0 16px rgba(187, 151, 196, .06),
    inset 0 1px 0 rgba(255,255,255,.22);
}
.login .cmu-badge {
  width: 48px;
  height: 48px;
  font-size: .68rem;
}
.login .cmu-label {
  height: 29px;
  padding-left: 11px;
}

/* Rebuilt scroll guide: the glowing bead visibly travels downward, matching
   the direction the visitor should scroll. */
.scroll-mark {
  width: 2px;
  height: 46px;
  border-radius: 999px;
  background: linear-gradient(to bottom,
    rgba(236,244,218,.10) 0%,
    rgba(236,244,218,.50) 42%,
    rgba(242,218,161,.72) 100%);
}
.scroll-mark span {
  left: 50%;
  top: 2px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  background: #f5dfa9;
  box-shadow: 0 0 12px rgba(246, 213, 141, .72);
  animation: scrollGuideDown 1.85s cubic-bezier(.33,.02,.35,1) infinite;
}
.scroll-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid rgba(245, 225, 177, .72);
  border-bottom: 1.5px solid rgba(245, 225, 177, .72);
  transform: translateX(-50%) rotate(45deg);
}
@keyframes scrollGuideDown {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(.70); }
  16%  { opacity: 1; }
  72%  { opacity: .95; }
  100% { opacity: 0; transform: translate3d(0, 36px, 0) scale(1); }
}

@media (max-width: 720px) {
  .login {
    grid-template-columns: 44px 1fr;
    width: min(68vw, 248px);
    height: 46px;
    min-height: 46px;
    padding-right: 13px;
    border-radius: 17px;
    font-size: .73rem;
  }
  .login .cmu-badge {
    width: 44px;
    height: 44px;
    font-size: .62rem;
  }
  .login .cmu-label {
    height: 27px;
    padding-left: 10px;
  }
  /* Keep the extra static star field on mobile; it is cheap. */
  .stars::before { opacity: .64; }
  .stars::after { opacity: .55; }
}

@media (max-height: 620px) and (orientation: landscape) {
  .login {
    width: min(38vw, 230px);
    height: 42px;
    min-height: 42px;
    grid-template-columns: 40px 1fr;
  }
  .login .cmu-badge { width: 40px; height: 40px; }
  .login .cmu-label { height: 24px; }
}

html.lite .stars::before { opacity: .45; }
html.lite .stars::after { display: none; }



/* ===== v8: final title spacing + 75% CMU control ===== */
/* Keep the quote clearly separated from the large handwritten Sierra at every size. */
.tagline {
  margin-top: clamp(64px, 8vh, 92px);
}

/* About 75% of the v7 CMU Account control's visual footprint. */
.login {
  grid-template-columns: 36px 1fr;
  width: clamp(158px, 17.25vw, 209px);
  height: 38px;
  min-height: 38px;
  padding-right: 10px;
  border-radius: 15px;
  font-size: clamp(.60rem, .69vw, .68rem);
  margin-top: clamp(22px, 3.6vh, 38px);
  box-shadow:
    0 6px 17px rgba(3, 20, 28, .17),
    inset 0 1px 0 rgba(255,255,255,.17),
    inset 0 0 0 1px rgba(49,78,78,.05);
}
.login:hover,
.login:focus-visible {
  box-shadow:
    0 8px 20px rgba(3, 20, 28, .21),
    0 0 12px rgba(187, 151, 196, .05),
    inset 0 1px 0 rgba(255,255,255,.21);
}
.login .cmu-badge {
  width: 36px;
  height: 36px;
  font-size: .53rem;
}
.login .cmu-label {
  height: 22px;
  padding-left: 8px;
  line-height: 1;
}

@media (max-width: 720px) {
  .tagline {
    margin-top: clamp(48px, 7vh, 68px);
  }
  .login {
    grid-template-columns: 34px 1fr;
    width: min(51vw, 186px);
    height: 35px;
    min-height: 35px;
    padding-right: 9px;
    border-radius: 13px;
    font-size: .57rem;
    margin-top: 22px;
  }
  .login .cmu-badge {
    width: 34px;
    height: 34px;
    font-size: .50rem;
  }
  .login .cmu-label {
    height: 20px;
    padding-left: 7px;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .tagline {
    margin-top: 30px;
  }
  .login {
    grid-template-columns: 31px 1fr;
    width: min(29vw, 173px);
    height: 32px;
    min-height: 32px;
    padding-right: 8px;
    border-radius: 12px;
    font-size: .53rem;
    margin-top: 12px;
  }
  .login .cmu-badge { width: 31px; height: 31px; font-size: .46rem; }
  .login .cmu-label { height: 18px; padding-left: 6px; }
}


/* ===== v9: dawn-first solar arc + stronger adaptive fallback ===== */
/* Start at dawn rather than night: warmer/lighter horizon with a small sun just peeking up. */
.sky {
  background:
    linear-gradient(118deg,
      #244b5b 0%,
      #2f6668 34%,
      #748269 65%,
      #a48a58 100%);
}
.sky::before {
  background:
    radial-gradient(ellipse at 10% 72%, rgba(255, 218, 134, .32) 0%, rgba(244, 184, 90, .15) 28%, transparent 52%),
    radial-gradient(ellipse at 48% 22%, rgba(126, 207, 199, .14) 0%, rgba(75, 155, 162, .06) 34%, transparent 58%),
    radial-gradient(ellipse at 84% 34%, rgba(109, 173, 185, .08) 0%, transparent 45%),
    linear-gradient(180deg, rgba(12, 32, 42, .04) 0%, transparent 42%, rgba(244, 204, 124, .09) 78%, transparent 100%);
}

/* Stars are only a faint dawn remnant at load, disappear through daytime,
   then can return softly near the far end. JS drives the group opacity. */
.stars {
  opacity: var(--star-field-opacity);
  transition: opacity 260ms linear;
}

/* The sun begins already clearly visible, matching the supplied composition more closely. */
.sun-halo { opacity: .98; }
.sun-core {
  box-shadow:
    0 0 0 1px rgba(255, 246, 205, 0.46),
    0 0 38px rgba(238, 214, 150, 0.42),
    inset -12px -14px 26px rgba(97, 135, 106, 0.20);
}

.scene { contain: layout paint style; }

/* Ultra-lite is a last-resort mode for genuinely slow devices or low measured FPS. */
html.ultra-lite .noise,
html.ultra-lite .contours,
html.ultra-lite .light-ribbons,
html.ultra-lite .sun-path,
html.ultra-lite .cloud,
html.ultra-lite .mist-front,
html.ultra-lite .stars,
html.ultra-lite .warp-ring { display: none !important; }
html.ultra-lite .mist-back { opacity: .28 !important; }
html.ultra-lite .sierra {
  filter: none !important;
  text-shadow: 0 1px 8px rgba(255,255,255,.34) !important;
}
html.ultra-lite .sun-halo { animation: none !important; transform: scale(.96); }
html.ultra-lite .login::after { display: none !important; }
html.ultra-lite .ridge,
html.ultra-lite .sun,
html.ultra-lite .sun-light,
html.ultra-lite .sky,
html.ultra-lite .sky::after { will-change: auto !important; }
html.ultra-lite .scene.warp-go { transition-duration: 430ms !important; }

@media (max-width: 420px) {
  .sun-halo { animation-duration: 10s; }
}



/* ===== v11: richer star field + subtle sky light blend ===== */
/* Two single-node static fields create lots of stars without dozens of animated DOM elements. */
.star-dust,
.star-glints {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.star-dust {
  background: rgba(241,248,234,.42);
  box-shadow:
    67.9vw 8.2vh 0 rgba(232,248,241,0.25),
    33.3vw 52.4vh 0 rgba(232,248,241,0.45),
    41.7vw 47.8vh 0 rgba(232,248,241,0.38),
    32.7vw 32.6vh 0 rgba(232,248,241,0.34),
    39.5vw 25.4vh 0 rgba(251,240,199,0.25),
    31.6vw 40.5vh 0 rgba(232,248,241,0.41),
    71.9vw 47.1vh 0 rgba(232,248,241,0.23),
    61.8vw 6.5vh 0 rgba(232,248,241,0.48),
    37.6vw 5.2vh 0 rgba(251,240,199,0.23),
    25.7vw 16.2vh 0 rgba(232,248,241,0.25),
    79.4vw 40.9vh 0 rgba(232,248,241,0.40),
    51.8vw 4.8vh 0 rgba(251,240,199,0.23),
    40.0vw 38.1vh 0 rgba(251,240,199,0.50),
    48.9vw 37.8vh 0 rgba(251,240,199,0.35),
    19.5vw 46.8vh 0 rgba(251,240,199,0.48),
    28.0vw 29.2vh 0 rgba(232,248,241,0.33),
    7.8vw 22.1vh 0 rgba(232,248,241,0.46),
    6.9vw 45.8vh 0 rgba(251,240,199,0.43),
    68.4vw 29.6vh 0 rgba(232,248,241,0.27),
    81.8vw 54.9vh 0 rgba(232,248,241,0.32),
    61.9vw 27.0vh 0 rgba(251,240,199,0.22),
    50.3vw 6.1vh 0 rgba(232,248,241,0.46),
    20.6vw 35.8vh 0 rgba(232,248,241,0.38),
    13.6vw 53.2vh 0 rgba(232,248,241,0.50),
    88.8vw 6.4vh 0 rgba(232,248,241,0.42),
    69.3vw 43.9vh 0 rgba(232,248,241,0.44),
    48.6vw 34.3vh 0 rgba(232,248,241,0.37),
    13.3vw 23.8vh 0 rgba(232,248,241,0.28),
    24.8vw 47.3vh 0 rgba(251,240,199,0.45),
    29.5vw 40.8vh 0 rgba(232,248,241,0.22),
    28.4vw 9.0vh 0 rgba(251,240,199,0.49),
    94.0vw 34.6vh 0 rgba(232,248,241,0.36),
    56.9vw 3.7vh 0 rgba(251,240,199,0.37),
    54.7vw 54.3vh 0 rgba(232,248,241,0.44),
    65.6vw 31.3vh 0 rgba(251,240,199,0.52),
    71.4vw 11.1vh 0 rgba(232,248,241,0.48),
    58.8vw 56.4vh 0 rgba(232,248,241,0.35),
    31.2vw 24.6vh 0 rgba(232,248,241,0.52),
    20.5vw 22.6vh 0 rgba(232,248,241,0.46),
    30.3vw 10.9vh 0 rgba(232,248,241,0.29),
    91.3vw 39.4vh 0 rgba(232,248,241,0.49),
    37.6vw 38.3vh 0 rgba(251,240,199,0.43),
    74.7vw 16.7vh 0 rgba(251,240,199,0.21),
    20.3vw 51.6vh 0 rgba(232,248,241,0.29),
    15.3vw 38.7vh 0 rgba(232,248,241,0.23),
    36.0vw 55.4vh 0 rgba(251,240,199,0.27),
    30.1vw 12.0vh 0 rgba(232,248,241,0.37),
    44.4vw 11.7vh 0 rgba(232,248,241,0.30),
    77.4vw 8.4vh 0 rgba(232,248,241,0.27),
    12.1vw 10.2vh 0 rgba(232,248,241,0.38),
    62.3vw 46.4vh 0 rgba(251,240,199,0.40),
    79.8vw 53.9vh 0 rgba(232,248,241,0.21),
    5.3vw 8.9vh 0 rgba(251,240,199,0.42),
    29.5vw 53.9vh 0 rgba(232,248,241,0.46),
    82.5vw 8.2vh 0 rgba(232,248,241,0.27),
    92.4vw 3.7vh 0 rgba(232,248,241,0.45),
    27.2vw 27.4vh 0 rgba(251,240,199,0.52),
    12.3vw 42.5vh 0 rgba(232,248,241,0.23),
    37.8vw 6.8vh 0 rgba(251,240,199,0.42),
    8.4vw 7.5vh 0 rgba(232,248,241,0.43),
    60.0vw 3.5vh 0 rgba(232,248,241,0.40),
    20.2vw 21.7vh 0 rgba(232,248,241,0.37),
    12.9vw 40.5vh 0 rgba(251,240,199,0.41),
    96.7vw 32.1vh 0 rgba(232,248,241,0.23),
    23.8vw 39.9vh 0 rgba(251,240,199,0.26),
    12.5vw 27.5vh 0 rgba(251,240,199,0.34),
    24.9vw 15.6vh 0 rgba(232,248,241,0.46),
    89.0vw 24.2vh 0 rgba(251,240,199,0.42),
    37.3vw 46.1vh 0 rgba(232,248,241,0.42),
    3.2vw 25.9vh 0 rgba(232,248,241,0.30),
    47.3vw 4.7vh 0 rgba(232,248,241,0.31),
    7.9vw 43.2vh 0 rgba(232,248,241,0.46),
    36.2vw 6.7vh 0 rgba(232,248,241,0.26),
    64.6vw 38.2vh 0 rgba(251,240,199,0.30),
    95.1vw 3.6vh 0 rgba(232,248,241,0.33),
    24.5vw 54.2vh 0 rgba(251,240,199,0.27),
    15.8vw 53.5vh 0 rgba(232,248,241,0.37),
    56.9vw 46.6vh 0 rgba(251,240,199,0.24),
    61.9vw 54.3vh 0 rgba(232,248,241,0.28),
    57.7vw 33.6vh 0 rgba(232,248,241,0.31),
    97.5vw 51.0vh 0 rgba(232,248,241,0.40),
    59.7vw 26.9vh 0 rgba(251,240,199,0.44),
    69.3vw 31.0vh 0 rgba(251,240,199,0.42),
    33.0vw 33.1vh 0 rgba(251,240,199,0.34),
    20.6vw 24.2vh 0 rgba(232,248,241,0.35),
    42.8vw 52.0vh 0 rgba(232,248,241,0.47),
    60.4vw 40.2vh 0 rgba(251,240,199,0.28),
    82.2vw 23.4vh 0 rgba(251,240,199,0.26),
    11.9vw 34.9vh 0 rgba(232,248,241,0.37),
    54.5vw 27.7vh 0 rgba(232,248,241,0.37),
    30.9vw 20.1vh 0 rgba(232,248,241,0.42),
    54.3vw 37.0vh 0 rgba(232,248,241,0.27);
  opacity: .48;
}
.star-glints {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255,248,216,.72);
  box-shadow:
    58.2vw 31.5vh 3px rgba(248,244,216,0.58),
    4.8vw 6.0vh 4px rgba(248,244,216,0.61),
    79.8vw 40.8vh 4px rgba(248,244,216,0.58),
    89.8vw 16.2vh 4px rgba(248,244,216,0.49),
    76.2vw 46.0vh 3px rgba(248,244,216,0.61),
    39.9vw 8.7vh 4px rgba(248,244,216,0.38),
    39.4vw 33.4vh 4px rgba(248,244,216,0.54),
    86.9vw 18.4vh 4px rgba(248,244,216,0.43),
    66.5vw 12.8vh 2px rgba(248,244,216,0.50),
    59.0vw 28.1vh 3px rgba(248,244,216,0.47),
    11.6vw 4.8vh 4px rgba(248,244,216,0.33),
    10.4vw 26.7vh 3px rgba(248,244,216,0.33),
    74.2vw 13.3vh 3px rgba(248,244,216,0.43),
    23.2vw 21.9vh 4px rgba(248,244,216,0.58),
    77.6vw 41.6vh 3px rgba(248,244,216,0.40),
    87.4vw 35.5vh 2px rgba(248,244,216,0.43),
    69.2vw 37.8vh 3px rgba(248,244,216,0.60),
    20.8vw 42.6vh 2px rgba(248,244,216,0.53);
  opacity: .70;
}

/* A few additional hero stars make the sky feel intentionally composed rather than uniformly dotted. */
.stars i:nth-child(9)  { left: 13%; top: 9%;  width: 2px; animation-delay: -4.1s; animation-duration: 5.4s; }
.stars i:nth-child(10) { left: 27%; top: 27%; width: 2px; animation-delay: -1.7s; animation-duration: 6.2s; }
.stars i:nth-child(11) { left: 45%; top: 7%;  width: 2px; animation-delay: -3.6s; animation-duration: 5.8s; }
.stars i:nth-child(12) { left: 63%; top: 31%; width: 2px; animation-delay: -.9s;  animation-duration: 6.6s; }
.stars i:nth-child(13) { left: 74%; top: 15%; width: 2px; animation-delay: -2.8s; animation-duration: 5.1s; }
.stars i:nth-child(14) { left: 86%; top: 37%; width: 2px; animation-delay: -4.7s; animation-duration: 6.9s; }

/* Gentle color structure in otherwise empty upper-sky areas. No animation/repaint required. */
.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -11;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 16%, rgba(116,190,194,.075) 0%, transparent 38%),
    radial-gradient(ellipse at 72% 18%, rgba(181,205,171,.055) 0%, transparent 34%),
    radial-gradient(ellipse at 51% 43%, rgba(248,213,140,.045) 0%, transparent 42%);
}

@media (max-width: 720px) {
  .star-dust { opacity: .72; }
  .star-glints { opacity: .52; }
  .stars i:nth-child(n+9) { display: none; }
}
html.lite .star-dust { opacity: .48; }
html.lite .star-glints { display: none; }
html.ultra-lite .scene::after { display: none; }


/* ===== v14: denser living star field + phone-safe quality selection ===== */
/* Two full-sky texture layers provide lots of tiny dots while only animating
   TWO compositor surfaces. The dots gently breathe/grow together rather than
   creating dozens of continuously animated DOM nodes. */
.star-pulse {
  position: absolute;
  inset: -1.5%;
  pointer-events: none;
  transform-origin: 50% 42%;
  will-change: transform, opacity;
}
.star-pulse-a {
  background-image:
    radial-gradient(circle at 6.1% 11.1%, rgba(222,244,242,0.31) 0 1.00px, transparent 1.75px),
    radial-gradient(circle at 58.8% 15.8%, rgba(222,244,242,0.44) 0 0.85px, transparent 1.60px),
    radial-gradient(circle at 64.3% 32.1%, rgba(255,235,180,0.53) 0 0.75px, transparent 1.50px),
    radial-gradient(circle at 93.4% 15.1%, rgba(231,248,242,0.49) 0 1.15px, transparent 1.90px),
    radial-gradient(circle at 47.8% 52.3%, rgba(246,231,190,0.53) 0 1.00px, transparent 1.75px),
    radial-gradient(circle at 62.4% 34.5%, rgba(238,249,235,0.44) 0 0.65px, transparent 1.40px),
    radial-gradient(circle at 80.3% 21.5%, rgba(238,249,235,0.42) 0 0.65px, transparent 1.40px),
    radial-gradient(circle at 7.2% 11.3%, rgba(231,248,242,0.51) 0 1.00px, transparent 1.75px),
    radial-gradient(circle at 79.8% 11.0%, rgba(231,248,242,0.32) 0 0.75px, transparent 1.50px),
    radial-gradient(circle at 93.1% 9.7%, rgba(238,249,235,0.58) 0 0.65px, transparent 1.40px),
    radial-gradient(circle at 50.6% 11.8%, rgba(238,249,235,0.28) 0 1.00px, transparent 1.75px),
    radial-gradient(circle at 78.4% 23.4%, rgba(222,244,242,0.37) 0 1.00px, transparent 1.75px),
    radial-gradient(circle at 84.9% 55.0%, rgba(238,249,235,0.50) 0 1.00px, transparent 1.75px),
    radial-gradient(circle at 31.5% 53.1%, rgba(238,249,235,0.33) 0 1.15px, transparent 1.90px),
    radial-gradient(circle at 48.4% 26.7%, rgba(255,235,180,0.30) 0 1.00px, transparent 1.75px),
    radial-gradient(circle at 75.0% 17.5%, rgba(238,249,235,0.46) 0 0.85px, transparent 1.60px),
    radial-gradient(circle at 64.6% 50.6%, rgba(222,244,242,0.34) 0 0.65px, transparent 1.40px),
    radial-gradient(circle at 5.7% 18.3%, rgba(246,231,190,0.50) 0 0.75px, transparent 1.50px),
    radial-gradient(circle at 71.4% 41.9%, rgba(246,231,190,0.53) 0 1.15px, transparent 1.90px),
    radial-gradient(circle at 93.2% 6.7%, rgba(255,235,180,0.59) 0 0.65px, transparent 1.40px),
    radial-gradient(circle at 27.0% 25.0%, rgba(222,244,242,0.38) 0 1.15px, transparent 1.90px),
    radial-gradient(circle at 54.7% 39.2%, rgba(238,249,235,0.54) 0 0.75px, transparent 1.50px),
    radial-gradient(circle at 25.8% 38.5%, rgba(222,244,242,0.52) 0 1.00px, transparent 1.75px),
    radial-gradient(circle at 95.6% 24.4%, rgba(222,244,242,0.55) 0 1.00px, transparent 1.75px),
    radial-gradient(circle at 59.2% 22.5%, rgba(231,248,242,0.58) 0 0.85px, transparent 1.60px),
    radial-gradient(circle at 5.4% 45.8%, rgba(231,248,242,0.39) 0 1.15px, transparent 1.90px),
    radial-gradient(circle at 94.0% 11.8%, rgba(238,249,235,0.40) 0 0.75px, transparent 1.50px),
    radial-gradient(circle at 58.2% 27.7%, rgba(252,241,203,0.36) 0 1.00px, transparent 1.75px),
    radial-gradient(circle at 36.5% 10.6%, rgba(252,241,203,0.30) 0 1.15px, transparent 1.90px),
    radial-gradient(circle at 87.3% 20.1%, rgba(238,249,235,0.31) 0 0.85px, transparent 1.60px),
    radial-gradient(circle at 31.3% 36.0%, rgba(222,244,242,0.35) 0 0.85px, transparent 1.60px),
    radial-gradient(circle at 45.0% 30.9%, rgba(238,249,235,0.37) 0 1.15px, transparent 1.90px),
    radial-gradient(circle at 21.7% 56.6%, rgba(246,231,190,0.37) 0 0.65px, transparent 1.40px),
    radial-gradient(circle at 53.0% 3.6%, rgba(238,249,235,0.31) 0 0.65px, transparent 1.40px),
    radial-gradient(circle at 22.5% 42.9%, rgba(252,241,203,0.44) 0 1.15px, transparent 1.90px),
    radial-gradient(circle at 26.1% 22.0%, rgba(238,249,235,0.41) 0 1.15px, transparent 1.90px),
    radial-gradient(circle at 86.2% 29.5%, rgba(246,231,190,0.32) 0 0.65px, transparent 1.40px),
    radial-gradient(circle at 17.4% 30.2%, rgba(255,235,180,0.40) 0 0.75px, transparent 1.50px),
    radial-gradient(circle at 92.7% 24.4%, rgba(238,249,235,0.47) 0 0.75px, transparent 1.50px),
    radial-gradient(circle at 19.6% 36.6%, rgba(238,249,235,0.50) 0 1.15px, transparent 1.90px),
    radial-gradient(circle at 81.7% 21.1%, rgba(252,241,203,0.50) 0 1.15px, transparent 1.90px),
    radial-gradient(circle at 50.8% 56.5%, rgba(238,249,235,0.43) 0 0.65px, transparent 1.40px),
    radial-gradient(circle at 65.8% 4.2%, rgba(222,244,242,0.51) 0 1.15px, transparent 1.90px),
    radial-gradient(circle at 53.8% 15.8%, rgba(252,241,203,0.40) 0 0.65px, transparent 1.40px),
    radial-gradient(circle at 54.3% 43.0%, rgba(222,244,242,0.37) 0 0.65px, transparent 1.40px),
    radial-gradient(circle at 96.0% 37.1%, rgba(246,231,190,0.34) 0 0.65px, transparent 1.40px),
    radial-gradient(circle at 78.3% 2.6%, rgba(222,244,242,0.58) 0 1.15px, transparent 1.90px),
    radial-gradient(circle at 77.5% 54.1%, rgba(231,248,242,0.33) 0 0.65px, transparent 1.40px),
    radial-gradient(circle at 95.2% 46.0%, rgba(222,244,242,0.51) 0 1.00px, transparent 1.75px),
    radial-gradient(circle at 56.2% 30.2%, rgba(238,249,235,0.59) 0 0.85px, transparent 1.60px),
    radial-gradient(circle at 86.3% 12.7%, rgba(255,235,180,0.40) 0 0.65px, transparent 1.40px),
    radial-gradient(circle at 64.1% 25.0%, rgba(222,244,242,0.46) 0 1.15px, transparent 1.90px),
    radial-gradient(circle at 86.8% 12.8%, rgba(222,244,242,0.58) 0 0.85px, transparent 1.60px),
    radial-gradient(circle at 30.1% 4.8%, rgba(246,231,190,0.33) 0 1.15px, transparent 1.90px),
    radial-gradient(circle at 94.9% 24.3%, rgba(231,248,242,0.41) 0 0.85px, transparent 1.60px),
    radial-gradient(circle at 9.8% 42.2%, rgba(238,249,235,0.59) 0 1.15px, transparent 1.90px),
    radial-gradient(circle at 11.0% 35.1%, rgba(222,244,242,0.60) 0 0.75px, transparent 1.50px),
    radial-gradient(circle at 47.6% 55.8%, rgba(252,241,203,0.30) 0 0.75px, transparent 1.50px);
  opacity: .78;
  animation: starFieldBreatheA 5.2s ease-in-out infinite alternate;
}
.star-pulse-b {
  background-image:
    radial-gradient(circle at 7.7% 51.2%, rgba(231,248,242,0.45) 0 0.85px, transparent 1.60px),
    radial-gradient(circle at 84.6% 4.3%, rgba(246,231,190,0.41) 0 0.65px, transparent 1.40px),
    radial-gradient(circle at 95.3% 53.9%, rgba(238,249,235,0.56) 0 0.65px, transparent 1.40px),
    radial-gradient(circle at 92.4% 24.6%, rgba(252,241,203,0.34) 0 1.15px, transparent 1.90px),
    radial-gradient(circle at 44.4% 7.7%, rgba(231,248,242,0.38) 0 0.85px, transparent 1.60px),
    radial-gradient(circle at 39.8% 59.7%, rgba(252,241,203,0.30) 0 0.65px, transparent 1.40px),
    radial-gradient(circle at 60.4% 3.9%, rgba(231,248,242,0.49) 0 1.15px, transparent 1.90px),
    radial-gradient(circle at 26.7% 35.1%, rgba(252,241,203,0.51) 0 1.00px, transparent 1.75px),
    radial-gradient(circle at 84.8% 47.9%, rgba(246,231,190,0.51) 0 0.85px, transparent 1.60px),
    radial-gradient(circle at 9.8% 58.2%, rgba(238,249,235,0.58) 0 1.15px, transparent 1.90px),
    radial-gradient(circle at 84.2% 57.1%, rgba(252,241,203,0.29) 0 0.85px, transparent 1.60px),
    radial-gradient(circle at 82.7% 11.6%, rgba(231,248,242,0.53) 0 0.85px, transparent 1.60px),
    radial-gradient(circle at 43.8% 43.2%, rgba(231,248,242,0.54) 0 0.65px, transparent 1.40px),
    radial-gradient(circle at 91.4% 39.4%, rgba(222,244,242,0.29) 0 0.75px, transparent 1.50px),
    radial-gradient(circle at 86.7% 27.2%, rgba(238,249,235,0.45) 0 1.00px, transparent 1.75px),
    radial-gradient(circle at 62.4% 54.0%, rgba(255,235,180,0.34) 0 0.85px, transparent 1.60px),
    radial-gradient(circle at 47.5% 3.5%, rgba(222,244,242,0.39) 0 0.65px, transparent 1.40px),
    radial-gradient(circle at 32.6% 20.1%, rgba(252,241,203,0.43) 0 1.00px, transparent 1.75px),
    radial-gradient(circle at 89.5% 60.3%, rgba(238,249,235,0.36) 0 0.65px, transparent 1.40px),
    radial-gradient(circle at 90.0% 48.2%, rgba(255,235,180,0.37) 0 0.75px, transparent 1.50px),
    radial-gradient(circle at 44.3% 29.3%, rgba(238,249,235,0.55) 0 0.85px, transparent 1.60px),
    radial-gradient(circle at 63.7% 12.1%, rgba(222,244,242,0.55) 0 0.85px, transparent 1.60px),
    radial-gradient(circle at 31.5% 50.4%, rgba(246,231,190,0.58) 0 1.15px, transparent 1.90px),
    radial-gradient(circle at 96.3% 13.3%, rgba(231,248,242,0.49) 0 0.65px, transparent 1.40px),
    radial-gradient(circle at 81.7% 36.0%, rgba(252,241,203,0.46) 0 0.75px, transparent 1.50px),
    radial-gradient(circle at 25.3% 4.2%, rgba(238,249,235,0.47) 0 0.75px, transparent 1.50px),
    radial-gradient(circle at 65.8% 50.3%, rgba(246,231,190,0.50) 0 1.15px, transparent 1.90px),
    radial-gradient(circle at 80.3% 26.4%, rgba(246,231,190,0.56) 0 0.85px, transparent 1.60px),
    radial-gradient(circle at 38.7% 7.6%, rgba(252,241,203,0.37) 0 1.00px, transparent 1.75px),
    radial-gradient(circle at 22.7% 8.3%, rgba(238,249,235,0.55) 0 0.65px, transparent 1.40px),
    radial-gradient(circle at 53.0% 10.9%, rgba(255,235,180,0.51) 0 1.00px, transparent 1.75px),
    radial-gradient(circle at 48.3% 52.2%, rgba(231,248,242,0.36) 0 1.15px, transparent 1.90px),
    radial-gradient(circle at 52.0% 21.4%, rgba(255,235,180,0.46) 0 1.15px, transparent 1.90px),
    radial-gradient(circle at 88.9% 23.7%, rgba(252,241,203,0.32) 0 1.15px, transparent 1.90px),
    radial-gradient(circle at 69.4% 25.4%, rgba(246,231,190,0.39) 0 0.65px, transparent 1.40px),
    radial-gradient(circle at 10.5% 59.6%, rgba(246,231,190,0.56) 0 0.85px, transparent 1.60px),
    radial-gradient(circle at 17.7% 57.6%, rgba(222,244,242,0.46) 0 1.15px, transparent 1.90px),
    radial-gradient(circle at 61.9% 36.3%, rgba(255,235,180,0.35) 0 0.65px, transparent 1.40px),
    radial-gradient(circle at 35.8% 9.5%, rgba(255,235,180,0.55) 0 0.65px, transparent 1.40px),
    radial-gradient(circle at 22.8% 32.1%, rgba(246,231,190,0.32) 0 0.75px, transparent 1.50px),
    radial-gradient(circle at 6.1% 47.3%, rgba(238,249,235,0.47) 0 0.65px, transparent 1.40px),
    radial-gradient(circle at 82.7% 30.2%, rgba(231,248,242,0.43) 0 0.85px, transparent 1.60px),
    radial-gradient(circle at 74.2% 27.1%, rgba(238,249,235,0.55) 0 1.00px, transparent 1.75px),
    radial-gradient(circle at 93.1% 50.9%, rgba(238,249,235,0.41) 0 1.15px, transparent 1.90px);
  opacity: .58;
  animation: starFieldBreatheB 7.1s ease-in-out -2.6s infinite alternate;
}
@keyframes starFieldBreatheA {
  from { opacity: .56; transform: scale(0.992); }
  to   { opacity: .92; transform: scale(1.013); }
}
@keyframes starFieldBreatheB {
  from { opacity: .40; transform: scale(1.008); }
  to   { opacity: .76; transform: scale(.994); }
}

/* Make the guide physically change its TOP coordinate. This removes any
   ambiguity from inherited transform animations: top -> bottom, every time. */
.scroll-mark span {
  top: 1px !important;
  transform: translateX(-50%) scale(.72) !important;
  margin-left: 0 !important;
  animation: scrollGuideTopToBottom 1.72s cubic-bezier(.32,.02,.36,1) infinite normal !important;
}
@keyframes scrollGuideTopToBottom {
  0%   { top: 1px;  opacity: 0;   transform: translateX(-50%) scale(.68); }
  14%  { top: 3px;  opacity: 1;   transform: translateX(-50%) scale(.82); }
  76%  { top: 34px; opacity: .96; transform: translateX(-50%) scale(1); }
  100% { top: 39px; opacity: 0;   transform: translateX(-50%) scale(.86); }
}

/* Responsive sizing does NOT imply low quality. Modern phones keep both
   sparkle layers. Only explicit .lite/.ultra-lite classes reduce them. */
@media (max-width: 720px) {
  .star-pulse-a { opacity: .72; }
  .star-pulse-b { opacity: .52; }
}
html.lite .star-pulse-a { opacity: .50; animation-duration: 7.5s; }
html.lite .star-pulse-b { display: none; }
html.ultra-lite .stars { display: block !important; }
html.ultra-lite .star-pulse-a,
html.ultra-lite .star-pulse-b,
html.ultra-lite .star-glints { display: none !important; }
html.ultra-lite .star-dust { display: block !important; opacity: .30 !important; }
html.ultra-lite .stars i { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .star-pulse-a,
  .star-pulse-b { animation: none !important; transform: none !important; opacity: .60; }
  /* The scroll cue is instructional, so retain a slow one-way top-to-bottom
     movement instead of reversing or freezing it. */
  .scroll-mark span { animation-duration: 2.8s !important; }
}


/* ===== v15 definitive scroll-guide direction fix =====
   Hide the legacy span (several older rules target it) and draw one clean
   bead with ::before. It always travels from the TOP to the BOTTOM. */
.scroll-mark span {
  display: none !important;
  animation: none !important;
}
.scroll-mark::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 1px;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: #f5dfa9;
  box-shadow: 0 0 12px rgba(246,213,141,.82), 0 0 22px rgba(246,213,141,.32);
  will-change: transform, opacity;
  animation: scrollBeadDownV15 1.8s cubic-bezier(.28,.05,.34,1) infinite;
}
@keyframes scrollBeadDownV15 {
  0%   { opacity: 0; transform: translate3d(0,0,0) scale(.68); }
  12%  { opacity: 1; transform: translate3d(0,2px,0) scale(.82); }
  78%  { opacity: .98; transform: translate3d(0,34px,0) scale(1); }
  100% { opacity: 0; transform: translate3d(0,39px,0) scale(.9); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-mark::before {
    animation-duration: 2.6s !important;
  }
}


/* ===== v16: scroll-focused wordmark + stable 2D mountain compositor ===== */
/* Med fades/drifts away while Sierra grows and slides into the true center.
   Only transform + opacity are animated, so this stays cheap on phones. */
.med {
  opacity: var(--med-opacity, 1) !important;
  transform: translate3d(var(--med-x, 0px), var(--med-y, 0px), 0) scale(var(--med-scale, 1));
  transform-origin: 100% 70%;
  backface-visibility: hidden;
}

.sierra {
  transform: translate3d(var(--sierra-x, 0px), var(--sierra-y, 10px), 0) scale(var(--sierra-scale)) !important;
  transform-origin: 50% 62%;
  backface-visibility: hidden;
}

/* SVGs at mixed +/- Z depths can flicker on some GPU/browser combinations.
   Preserve depth with scale + motion, but keep every ridge on a stable 2D plane. */
.scene {
  perspective: none !important;
}
.world {
  transform-style: flat !important;
  backface-visibility: hidden;
}
.ridge {
  overflow: hidden;
  will-change: auto !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-box: fill-box;
}
.ridge-distant { transform: translate3d(var(--deep-x), var(--deep-y), 0) scale(1.18) !important; }
.ridge-middle { transform: translate3d(var(--mid-x), var(--mid-y), 0) scale(1.08) !important; }
.ridge-near { transform: translate3d(var(--near-x), var(--near-y), 0) scale(1.06) !important; }
.ridge-foreground { transform: translate3d(var(--front-x), var(--front-y), 0) scale(.97) !important; }

@media (max-width: 720px) {
  /* Mobile: preserve the 16:9 artwork and crop the sides instead of squeezing it into portrait. */
  .ridge {
    transform-origin: 50% 100%;
  }
  .ridge-distant { transform: translate3d(var(--deep-x), var(--deep-y), 0) scale(1.12) !important; }
  .ridge-middle { transform: translate3d(var(--mid-x), var(--mid-y), 0) scale(1.07) !important; }
  .ridge-near { transform: translate3d(var(--near-x), var(--near-y), 0) scale(1.08) !important; }
  .ridge-foreground { transform: translate3d(var(--front-x), var(--front-y), 0) scale(1.00) !important; }
}


/* ===== v18 performance pass =====
   Keeps the Sierra/mountain/sun choreography, but reduces paint-heavy effects
   exactly when they hurt most: scrolling, touch/mobile, and background tabs. */
body.is-scrolling .star-pulse,
body.is-scrolling .sun-halo,
body.is-scrolling .login::after {
  animation-play-state: paused !important;
}

body.is-scrolling .sierra {
  filter: none !important;
}

html.page-hidden .star-pulse,
html.page-hidden .sun-halo,
html.page-hidden .scroll-mark::before,
html.page-hidden .login::after,
html.page-hidden .stars i {
  animation-play-state: paused !important;
}

/* The text-shadow already provides the glow; drop-shadow on a large moving word
   is one of the more expensive effects during the whole journey. */
.sierra {
  filter: none;
}

/* Touch devices do not use mouse parallax, so avoid keeping extra paint layers
   around for an interaction that cannot happen. */
@media (pointer: coarse), (max-width: 900px) {
  .noise,
  .contours,
  .light-ribbons,
  .cloud-three,
  .star-pulse-b {
    display: none !important;
  }

  .cloud {
    filter: none !important;
    opacity: .60;
  }

  .star-pulse-a {
    opacity: .46;
    animation-duration: 8s;
  }

  .sun-halo {
    animation-duration: 9s;
  }

  .ridge,
  .sun,
  .sun-light,
  .sky,
  .sky::after,
  .star-pulse {
    will-change: auto !important;
  }
}

/* A user can still force the full visual stack with ?perf=full. */
html.force-full .noise,
html.force-full .contours,
html.force-full .light-ribbons,
html.force-full .cloud-three,
html.force-full .star-pulse-b {
  display: block !important;
}

/* ===== v20 TRUE SUN / MOUNTAIN OCCLUSION FIX =====
   Mountains must be opaque when they sit in front of the sun.
   The large sunlight aura also belongs behind the mountain compositor. */

.sun {
  z-index: -6 !important;
}

.sun-light {
  z-index: -6 !important;
}

/* World remains physically in front of sun. */
.world {
  z-index: -4 !important;
}

/* Do NOT make the complete mountain SVG translucent.
   Individual highlight/shadow paths inside the SVG can still use opacity. */
.ridge-distant,
.ridge-middle,
.ridge-near,
.ridge-foreground {
  opacity: 1 !important;
}

/* Mobile needs especially solid foreground silhouettes. */
@media (max-width: 720px) {
  .ridge-distant,
  .ridge-middle,
  .ridge-near,
  .ridge-foreground {
    opacity: 1 !important;
  }
}


/* ===== v21 scroll guide: bottom -> top ===== */
.scroll-mark::before {
  top: 1px !important;
  animation: scrollBeadUpV21 1.8s cubic-bezier(.28,.05,.34,1) infinite !important;
}

@keyframes scrollBeadUpV21 {
  0%   { opacity: 0;   transform: translate3d(0,39px,0) scale(.68); }
  12%  { opacity: 1;   transform: translate3d(0,37px,0) scale(.82); }
  78%  { opacity: .98; transform: translate3d(0,5px,0) scale(1); }
  100% { opacity: 0;   transform: translate3d(0,0,0) scale(.9); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-mark::before {
    animation: scrollBeadUpV21 2.6s cubic-bezier(.28,.05,.34,1) infinite !important;
  }
}

/* ===== v30 CINEMATIC LOOPED MASTER JOURNEY ===== */
/*
 * One visual system for the extended day-to-night journey.
 * Scroll-driven changes are compositor-friendly transforms and opacity.
 * JS writes the custom properties below from one shared master timeline.
 */

:root {
  --twilight-opacity: 0;
  --night-opacity: 0;
  --mountain-night-opacity: 0;
  --moon-opacity: 0;
  --contour-opacity: .18;
  --ribbon-opacity: 1;
  --journey-opacity: .18;
  --journey-rise-a: 0px;
  --journey-fall-a: 0px;
  --journey-rise-b: 0px;
  --journey-fall-b: 0px;
  --journey-rotate-a: -8deg;
  --journey-rotate-b: 8deg;
}

/* Static sky layers cross-fade; no gradient/filter animation is required. */
.twilight-wash,
.night-sky,
.night-mountain-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  backface-visibility: hidden;
  will-change: opacity;
}

.twilight-wash {
  z-index: -11;
  opacity: var(--twilight-opacity);
  background:
    radial-gradient(ellipse at 78% 58%, rgba(246, 177, 100, .28), transparent 39%),
    radial-gradient(ellipse at 52% 37%, rgba(196, 116, 91, .13), transparent 48%),
    linear-gradient(180deg, rgba(25, 52, 67, .18) 0%, rgba(104, 77, 68, .32) 58%, rgba(165, 111, 68, .26) 100%);
}

.night-sky {
  z-index: -10;
  opacity: var(--night-opacity);
  background:
    radial-gradient(ellipse at 68% 18%, rgba(111, 156, 164, .13), transparent 34%),
    radial-gradient(ellipse at 28% 30%, rgba(65, 116, 126, .10), transparent 42%),
    linear-gradient(180deg, #102b39 0%, #0b3540 48%, #164f50 100%);
}

.night-mountain-veil {
  z-index: 3;
  opacity: var(--mountain-night-opacity);
  background:
    linear-gradient(180deg, transparent 0 31%, rgba(5, 38, 43, .08) 42%, rgba(4, 39, 42, .32) 71%, rgba(3, 31, 35, .54) 100%);
}

.contours {
  opacity: var(--contour-opacity);
}

.light-ribbons {
  opacity: var(--ribbon-opacity);
}

/* Stagger the existing star surfaces so twilight arrives in layers. */
.stars {
  transition: none;
}

.star-dust {
  opacity: var(--star-dust-opacity, .72);
}

.star-glints {
  opacity: var(--star-glints-opacity, .52);
}

.star-pulse-a {
  opacity: var(--star-pulse-a-opacity, .35);
}

.star-pulse-b {
  opacity: var(--star-pulse-b-opacity, .25);
}

/* Moon lives behind the mountain SVGs, preserving natural occlusion. */
.moon {
  position: absolute;
  z-index: -6;
  left: 0;
  top: 0;
  width: clamp(68px, 8.2vw, 124px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: var(--moon-opacity);
  transform: translate3d(-20vw, 80vh, 0) scale(.78);
  pointer-events: none;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.moon-halo {
  position: absolute;
  inset: -105%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(204, 225, 216, .24), rgba(122, 166, 163, .10) 38%, transparent 70%);
}

.moon-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,237,.62) 0 4%, transparent 5%),
    radial-gradient(circle at 62% 41%, rgba(118,149,147,.18) 0 8%, transparent 9%),
    radial-gradient(circle at 43% 69%, rgba(112,145,144,.15) 0 6%, transparent 7%),
    linear-gradient(145deg, #edf0d8 0%, #c9d8ca 56%, #91b2ad 100%);
  box-shadow:
    0 0 0 1px rgba(238, 244, 222, .42),
    0 0 34px rgba(184, 216, 202, .20),
    inset -13px -14px 24px rgba(68, 104, 108, .18);
}

.moon-core::after {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 1px solid rgba(250, 249, 225, .16);
}

/* Sun followers remain behind the mountains and use the same solar curve. */
.solar-procession {
  position: absolute;
  z-index: -5;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
}

.solar-follower {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  opacity: 0;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.solar-ring {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(248, 218, 153, .36);
  border-radius: 50%;
}

.solar-follower.streak {
  width: 42px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(248, 220, 160, .72));
  transform-origin: 100% 50%;
}

.solar-follower.streak.short {
  width: 25px;
}

.solar-follower.spark {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(251, 226, 171, .92);
  box-shadow: 0 0 9px rgba(247, 209, 136, .48);
}

.solar-follower.spark.small { width: 4px; height: 4px; }
.solar-follower.spark.tiny { width: 3px; height: 3px; }

.solar-follower.diamond {
  width: 7px;
  height: 7px;
  border: 1px solid rgba(246, 223, 176, .70);
  transform-origin: 50% 50%;
}

.solar-peak {
  width: 14px;
  height: 10px;
  border-left: 1px solid rgba(248, 222, 166, .64);
  border-top: 1px solid rgba(248, 222, 166, .64);
  transform-origin: 50% 50%;
}

/* Mountain/elevation instrumentation. */
.journey-ornaments {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  opacity: var(--journey-opacity);
  contain: layout paint;
}

.journey-rail {
  position: absolute;
  top: 18%;
  width: 38px;
  height: 62%;
  opacity: .72;
  backface-visibility: hidden;
  will-change: transform;
}

.journey-rail-left {
  left: clamp(18px, 5vw, 90px);
  transform: translate3d(0, var(--journey-rise-a), 0);
}

.journey-rail-right {
  right: clamp(18px, 5vw, 90px);
  transform: translate3d(0, var(--journey-fall-a), 0);
}

.journey-rail::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(239,229,193,.22) 16%, rgba(239,229,193,.50) 50%, rgba(239,229,193,.18) 84%, transparent);
}

.journey-rail i {
  position: absolute;
  width: 15px;
  height: 1px;
  background: rgba(241,225,181,.52);
}

.journey-rail-left i { left: 18px; }
.journey-rail-right i { right: 19px; }
.journey-rail i:nth-child(1) { top: 8%; width: 9px; }
.journey-rail i:nth-child(2) { top: 26%; width: 17px; }
.journey-rail i:nth-child(3) { top: 44%; width: 11px; }
.journey-rail i:nth-child(4) { top: 63%; width: 21px; }
.journey-rail i:nth-child(5) { top: 81%; width: 13px; }
.journey-rail i:nth-child(6) { top: 94%; width: 7px; }

.journey-summit {
  position: absolute;
  width: 15px;
  height: 15px;
  opacity: .70;
  backface-visibility: hidden;
  will-change: transform;
}

.journey-summit::before,
.journey-summit::after {
  content: "";
  position: absolute;
  bottom: 2px;
  width: 11px;
  height: 1px;
  background: rgba(246,225,173,.78);
}

.journey-summit::before { left: 0; transform: rotate(-42deg); }
.journey-summit::after { right: 0; transform: rotate(42deg); }
.journey-summit-a { left: 15%; top: 34%; transform: translate3d(0, var(--journey-rise-b), 0); }
.journey-summit-b { right: 16%; top: 48%; transform: translate3d(0, var(--journey-fall-b), 0) scale(.82); }
.journey-summit-c { left: 26%; top: 72%; transform: translate3d(0, var(--journey-rise-a), 0) scale(.72); }
.journey-summit-d { right: 27%; top: 27%; transform: translate3d(0, var(--journey-fall-a), 0) scale(.62); }

.journey-arc {
  position: absolute;
  width: clamp(150px, 19vw, 310px);
  height: clamp(150px, 19vw, 310px);
  border-radius: 50%;
  border: 1px solid rgba(237,228,197,.15);
  backface-visibility: hidden;
  will-change: transform;
}

.journey-arc-left {
  left: -10vw;
  top: 35%;
  transform: translate3d(0, var(--journey-fall-b), 0) rotate(var(--journey-rotate-a));
}

.journey-arc-right {
  right: -10vw;
  top: 17%;
  transform: translate3d(0, var(--journey-rise-b), 0) rotate(var(--journey-rotate-b));
}

.journey-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(247,226,173,.76);
  backface-visibility: hidden;
  will-change: transform;
}

.journey-dot-a { left: 11%; top: 23%; transform: translate3d(0, var(--journey-rise-a), 0); }
.journey-dot-b { left: 22%; top: 57%; width: 3px; height: 3px; transform: translate3d(0, var(--journey-fall-b), 0); }
.journey-dot-c { left: 37%; top: 79%; transform: translate3d(0, var(--journey-rise-b), 0); }
.journey-dot-d { right: 34%; top: 19%; width: 3px; height: 3px; transform: translate3d(0, var(--journey-fall-a), 0); }
.journey-dot-e { right: 19%; top: 62%; transform: translate3d(0, var(--journey-rise-a), 0); }
.journey-dot-f { right: 9%; top: 39%; width: 3px; height: 3px; transform: translate3d(0, var(--journey-fall-b), 0); }

.journey-chevron {
  position: absolute;
  width: 10px;
  height: 10px;
  border-left: 1px solid rgba(242,225,183,.48);
  border-top: 1px solid rgba(242,225,183,.48);
  backface-visibility: hidden;
  will-change: transform;
}

.journey-chevron-a { left: 8%; top: 61%; transform: translate3d(0, var(--journey-rise-a), 0) rotate(45deg); }
.journey-chevron-b { left: 31%; top: 40%; transform: translate3d(0, var(--journey-fall-b), 0) rotate(45deg) scale(.75); }
.journey-chevron-c { right: 31%; top: 68%; transform: translate3d(0, var(--journey-rise-b), 0) rotate(45deg) scale(.70); }
.journey-chevron-d { right: 8%; top: 31%; transform: translate3d(0, var(--journey-fall-a), 0) rotate(45deg); }

.journey-path {
  position: absolute;
  width: clamp(190px, 28vw, 460px);
  height: clamp(80px, 10vw, 170px);
  border: 1px solid rgba(239, 226, 190, .12);
  border-color: rgba(239, 226, 190, .12) transparent transparent;
  border-radius: 50%;
  backface-visibility: hidden;
  will-change: transform;
}

.journey-path-a {
  left: 17%;
  top: 18%;
  transform: translate3d(0, var(--journey-rise-b), 0) rotate(var(--journey-rotate-a));
}

.journey-path-b {
  right: 14%;
  top: 56%;
  transform: translate3d(0, var(--journey-fall-b), 0) rotate(var(--journey-rotate-b));
}

/* Refined scroll-linked rocket; enlarged for its dedicated long-form flight beat. */
.rocket {
  position: absolute;
  z-index: 11;
  left: 0;
  top: 0;
  width: 96px;
  height: 50px;
  opacity: 0;
  pointer-events: none;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.rocket-body {
  position: absolute;
  right: 0;
  top: 14px;
  width: 65px;
  height: 21px;
  border: 1px solid rgba(238, 236, 211, .78);
  border-radius: 70% 88% 88% 70%;
  background: linear-gradient(180deg, rgba(238,239,220,.90), rgba(141,177,170,.82));
  box-shadow: 0 0 9px rgba(190, 221, 205, .18);
}

.rocket-body::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(246, 218, 158, .84);
}

.rocket-body::after {
  content: "";
  position: absolute;
  left: 7px;
  bottom: -10px;
  width: 21px;
  height: 12px;
  border-left: 1px solid rgba(210,224,209,.60);
  transform: skewX(-28deg);
}

.rocket-trail {
  position: absolute;
  right: 66px;
  top: 24px;
  width: 190px;
  height: 1px;
  transform-origin: 100% 50%;
  background: linear-gradient(90deg, transparent, rgba(235, 216, 169, .12) 28%, rgba(243, 226, 185, .68));
}

/* v38: arrow-only guide with unclipped chevron animation. */
.scroll-mark {
  display: block !important;
  position: absolute !important;
  z-index: 30 !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: max(18px, calc(env(safe-area-inset-bottom, 0px) + 14px)) !important;
  width: 88px !important;
  height: 82px !important;
  min-height: 0 !important;
  padding: 0 !important;
  transform: translate3d(-50%, 0, 0) !important;
  transform-origin: 50% 100%;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: var(--scroll-cue-opacity, 1) !important;
  visibility: visible !important;
  pointer-events: none !important;
  contain: layout;
  overflow: visible !important;
  backface-visibility: hidden;
}

.scroll-mark::before,
.scroll-mark::after { content: none !important; display: none !important; }

/* Old cue pieces are intentionally disabled in case cached/older markup is mixed in. */
.sierra-scroll-word,
.sierra-scroll-label,
.sierra-scroll-mountains,
.sierra-scroll-track,
.sierra-scroll-bead {
  display: none !important;
}

.sierra-scroll-arrows {
  position: relative;
  width: 88px;
  height: 82px;
  margin: 0;
  overflow: visible !important;
}

.sierra-scroll-arrows i {
  position: absolute;
  left: 50%;
  width: 30px;
  height: 30px;
  border-left: 4px solid rgba(252, 235, 190, .99);
  border-top: 4px solid rgba(252, 235, 190, .99);
  opacity: 0;
  animation: sierraArrowRise 1.75s cubic-bezier(.22,.75,.28,1) infinite;
}

.sierra-scroll-arrows i:nth-child(1) { top: 44px; animation-delay: 0s; }
.sierra-scroll-arrows i:nth-child(2) { top: 25px; animation-delay: .16s; }
.sierra-scroll-arrows i:nth-child(3) { top: 6px; animation-delay: .32s; }

@keyframes sierraArrowRise {
  0% { opacity: 0; transform: translate3d(-50%,10px,0) rotate(45deg) scale(.78); }
  26% { opacity: 1; }
  62% { opacity: .98; }
  100% { opacity: 0; transform: translate3d(-50%,-14px,0) rotate(45deg) scale(1); }
}

@media (max-width: 720px) {
  .scroll-mark {
    bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) + 10px)) !important;
    width: 92px !important;
    height: 86px !important;
  }

  .sierra-scroll-arrows {
    width: 92px;
    height: 86px;
  }

  .sierra-scroll-arrows i {
    width: 32px;
    height: 32px;
    border-left-width: 4px;
    border-top-width: 4px;
  }

  .sierra-scroll-arrows i:nth-child(1) { top: 46px; }
  .sierra-scroll-arrows i:nth-child(2) { top: 26px; }
  .sierra-scroll-arrows i:nth-child(3) { top: 6px; }

  .journey-rail { opacity: .48; }
  .journey-arc { opacity: .62; }
  .journey-path-b,
  .journey-summit-d,
  .journey-dot-e,
  .journey-dot-f,
  .journey-chevron-d,
  .solar-secondary { display: none; }

  .rocket { transform-origin: 50% 50%; }
}

/* Very short phones: keep the arrows at the lower-right edge instead of ever
   moving them into the center of the login composition. */
@media (max-width: 720px) and (max-height: 640px) {
  .scroll-mark {
    left: auto !important;
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    width: 68px !important;
    height: 68px !important;
    transform: none !important;
  }

  .sierra-scroll-arrows { width: 68px; height: 72px; overflow: visible !important; }
  .sierra-scroll-arrows i { width: 24px; height: 24px; border-left-width: 3px; border-top-width: 3px; }
  .sierra-scroll-arrows i:nth-child(1) { top: 36px; }
  .sierra-scroll-arrows i:nth-child(2) { top: 20px; }
  .sierra-scroll-arrows i:nth-child(3) { top: 4px; }
}

body.is-scrolling .stars i,
body.is-scrolling .star-pulse-a,
body.is-scrolling .star-pulse-b,
body.is-scrolling .sun-halo,
body.is-scrolling .login::after {
  animation-play-state: paused !important;
}

html.lite .journey-path-b,
html.lite .journey-summit-c,
html.lite .journey-summit-d,
html.lite .journey-dot-e,
html.lite .journey-dot-f,
html.lite .journey-chevron-c,
html.lite .journey-chevron-d,
html.lite .solar-secondary { display: none; }

html.ultra-lite .journey-ornaments,
html.ultra-lite .solar-procession,
html.ultra-lite .rocket { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .journey {
    height: 180vh;
    height: 180svh;
  }

  .sierra-scroll-word,
  .sierra-scroll-bead,
  .sierra-scroll-arrows i,
  .sun-halo,
  .star-pulse-a,
  .star-pulse-b {
    animation: none !important;
  }

  .journey-ornaments,
  .solar-procession,
  .rocket {
    opacity: .18;
  }
}

/* ===== /v30 CINEMATIC LOOPED MASTER JOURNEY ===== */

/* Ultra-lite keeps the essential night sky readable; only secondary star surfaces are trimmed. */
html.ultra-lite .stars {
  display: block !important;
}
html.ultra-lite .star-pulse,
html.ultra-lite .star-glints {
  display: none !important;
}
html.ultra-lite .star-dust {
  opacity: .34 !important;
}

/* ===== v31 POOLED ACT ENGINE / FLASH-REDUCTION PASS =====
   Only the current Sun/Moon/Rocket/Meteor object is mounted. Persistent scene
   layers remain stable, so stage changes do not churn the mountain compositor. */

.journey {
  height: 5200vh;
  height: 5200vh;
}

.act-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: layout paint;
}

.act-stage-back { z-index: -6; }
.act-stage-front { z-index: 12; }

.act-object {
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.act-sun-group,
.act-followers {
  position: absolute;
  inset: 0;
}

.act-stage-back .sun,
.act-stage-back .moon {
  z-index: 0 !important;
}

.act-sun-disc,
.act-moon,
.act-rocket,
.act-meteor {
  will-change: transform, opacity;
}

/* Keep the sun's premium look but remove its independent breathing loop. */
html.v31-pooling .sun-halo,
html.v31-pooling .stars i,
html.v31-pooling .star-pulse-a,
html.v31-pooling .star-pulse-b {
  animation: none !important;
}

/* Old scroll-time pause/restart rules caused visible phase jumps on some GPUs. */
html.v31-pooling body.is-scrolling .star-pulse,
html.v31-pooling body.is-scrolling .sun-halo,
html.v31-pooling body.is-scrolling .login::after {
  animation-play-state: running !important;
}

/* Reduce permanent compositor promotion on tiny ornament nodes. */
html.v31-pooling .journey-rail,
html.v31-pooling .journey-summit,
html.v31-pooling .journey-arc,
html.v31-pooling .journey-dot,
html.v31-pooling .journey-chevron,
html.v31-pooling .journey-path {
  will-change: auto !important;
}

/* Preserve soft cloud silhouettes without a moving blur filter. */
html.v31-pooling .cloud {
  filter: none !important;
  background: linear-gradient(90deg, transparent, rgba(220, 239, 220, .13) 26%, rgba(220, 239, 220, .18) 52%, rgba(220, 239, 220, .10) 76%, transparent);
}

/* Sun procession is created only for the active sun act. */
.act-followers {
  overflow: hidden;
  contain: layout paint;
}

.act-follower {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  opacity: 0;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.act-follower.ring {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(248, 218, 153, .34);
  border-radius: 50%;
}

.act-follower.streak {
  width: 42px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(248, 220, 160, .70));
  transform-origin: 100% 50%;
}

.act-follower.streak.short { width: 25px; }

.act-follower.spark {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(251, 226, 171, .92);
  box-shadow: 0 0 8px rgba(247, 209, 136, .42);
}

.act-follower.spark.small { width: 4px; height: 4px; }

.act-follower.diamond {
  width: 7px;
  height: 7px;
  border: 1px solid rgba(246, 223, 176, .68);
}

/* Moon uses the same solarPosition() curve as the sun. */
.act-stage-back .moon {
  width: clamp(72px, 8.7vw, 132px);
}

.moon-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(224, 237, 218, .18);
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0);
}

.moon-orbit-a {
  width: 142%;
  height: 142%;
}

.moon-orbit-b {
  width: 174%;
  height: 174%;
  border-color: rgba(224, 237, 218, .09);
}

/* Premium scroll-linked rocket. No independent animation; every moving part
   is a transform derived from the same act progress. */
.act-rocket {
  position: absolute;
  left: 0;
  top: 0;
  width: 168px;
  height: 84px;
  opacity: 0;
  transform-origin: 50% 50%;
}

.rocket-fuselage {
  position: absolute;
  right: 9px;
  top: 23px;
  width: 108px;
  height: 38px;
  border: 1px solid rgba(240, 239, 218, .84);
  border-radius: 58% 86% 86% 58%;
  background:
    linear-gradient(180deg, rgba(248, 247, 224, .96) 0%, rgba(195, 216, 205, .92) 48%, rgba(96, 144, 140, .90) 100%);
  box-shadow:
    inset 0 1px rgba(255,255,244,.62),
    inset -13px -10px 18px rgba(26, 79, 80, .18),
    0 0 0 1px rgba(18, 70, 70, .10),
    0 0 14px rgba(199, 226, 210, .16);
}

.rocket-fuselage::before {
  content: "";
  position: absolute;
  right: -12px;
  top: 7px;
  width: 29px;
  height: 24px;
  border-radius: 48% 90% 90% 48%;
  background: linear-gradient(145deg, rgba(246, 235, 196, .96), rgba(174, 197, 180, .90));
  clip-path: polygon(0 0, 100% 50%, 0 100%, 26% 50%);
}

.rocket-window {
  position: absolute;
  right: 28px;
  top: 10px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(235, 226, 183, .72);
  background: radial-gradient(circle at 35% 30%, rgba(245, 230, 176, .92), rgba(65, 116, 123, .88) 60%, rgba(19, 72, 80, .94));
  box-shadow: inset 0 0 0 2px rgba(226, 238, 216, .12);
}

.rocket-seam {
  position: absolute;
  left: 35px;
  top: 4px;
  width: 1px;
  height: 28px;
  background: rgba(28, 91, 91, .28);
}

.rocket-fin {
  position: absolute;
  left: 18px;
  width: 34px;
  height: 19px;
  background: linear-gradient(135deg, rgba(213, 220, 193, .90), rgba(67, 123, 116, .88));
  border: 1px solid rgba(224, 230, 205, .50);
  transform-origin: 90% 50%;
}

.rocket-fin-top {
  top: -15px;
  clip-path: polygon(15% 100%, 100% 100%, 76% 0);
}

.rocket-fin-bottom {
  bottom: -15px;
  clip-path: polygon(15% 0, 100% 0, 76% 100%);
}

.rocket-engine-ring {
  position: absolute;
  left: 47px;
  top: 30px;
  width: 14px;
  height: 24px;
  border: 1px solid rgba(228, 232, 209, .62);
  border-radius: 5px 0 0 5px;
  background: rgba(36, 92, 91, .78);
}

.rocket-plume {
  position: absolute;
  left: 12px;
  top: 35px;
  width: 48px;
  height: 14px;
  transform-origin: 100% 50%;
  transform: scaleX(var(--rocket-plume-scale, 1));
}

.rocket-plume::before,
.rocket-plume::after,
.rocket-plume i {
  content: "";
  position: absolute;
  right: 0;
  border-radius: 999px 0 0 999px;
  transform-origin: 100% 50%;
}

.rocket-plume::before {
  top: 2px;
  width: 45px;
  height: 10px;
  background: linear-gradient(90deg, transparent, rgba(242, 180, 92, .18) 20%, rgba(248, 214, 145, .78) 76%, rgba(250, 239, 190, .92));
}

.rocket-plume::after {
  top: 5px;
  width: 29px;
  height: 4px;
  background: linear-gradient(90deg, transparent, rgba(250, 227, 170, .95));
}

.rocket-plume i:nth-child(1) {
  top: -2px;
  width: 27px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(245, 214, 147, .44));
}

.rocket-plume i:nth-child(2) {
  bottom: -1px;
  width: 35px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(201, 224, 199, .34));
}

.rocket-trail-line {
  position: absolute;
  right: 112px;
  top: 41px;
  width: 230px;
  height: 1px;
  transform-origin: 100% 50%;
  background: linear-gradient(90deg, transparent 0%, rgba(231, 220, 179, .10) 35%, rgba(244, 225, 174, .54) 100%);
}

/* Meteor is its own scroll act, behind the mountain compositor. */
.act-meteor {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  transform-origin: 0 0;
}

.meteor-head {
  position: absolute;
  left: -8px;
  top: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #fff8d9 0 18%, #f1d49a 38%, #b99160 72%, #6c6958 100%);
  box-shadow: 0 0 10px rgba(243, 213, 153, .44), 0 0 22px rgba(226, 190, 126, .18);
}

.meteor-tail {
  position: absolute;
  right: 8px;
  top: 0;
  height: 1px;
  transform-origin: 100% 50%;
  transform: scaleX(var(--meteor-tail-scale, 1));
}

.meteor-tail-wide {
  width: 330px;
  height: 5px;
  margin-top: -2px;
  background: linear-gradient(90deg, transparent, rgba(209, 228, 209, .08) 42%, rgba(241, 214, 159, .28) 78%, rgba(249, 231, 184, .72));
  clip-path: polygon(0 45%, 100% 0, 100% 100%);
}

.meteor-tail-core {
  width: 245px;
  background: linear-gradient(90deg, transparent, rgba(255, 238, 191, .74));
}

.meteor-fragment {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(247, 222, 168, .82);
}

.meteor-fragment-a { right: 44px; top: -11px; }
.meteor-fragment-b { right: 78px; top: 12px; width: 3px; height: 3px; opacity: .62; }

/* The static star layers now use opacity only. This avoids CSS animation restart
   flashes while the user alternates between fast and slow scrolling. */
html.v31-pooling .stars i {
  transform: none !important;
}

@media (max-width: 720px) {
  .journey {
    height: 4400vh;
    height: 4400vh;
  }

  /*
   * Mobile rocket alignment:
   * keep the same internal geometry as desktop and scale the
   * completed rocket uniformly in JS. This keeps fuselage,
   * engine, plume, fins and trail on one shared centerline.
   */
  .act-rocket {
    width: 168px;
    height: 84px;
  }

  .rocket-fuselage {
    width: 108px;
    height: 38px;
    top: 23px;
  }

  .rocket-trail-line { width: 150px; }
  .meteor-tail-wide { width: 220px; }
  .meteor-tail-core { width: 165px; }
}

html.lite .act-follower:nth-child(n+4),
html.lite .moon-orbit-b,
html.lite .meteor-fragment-b {
  display: none;
}

html.ultra-lite .act-follower,
html.ultra-lite .moon-orbit,
html.ultra-lite .rocket-trail-line,
html.ultra-lite .meteor-fragment {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .journey {
    height: 180vh;
    height: 180svh;
  }

  .act-follower,
  .rocket-trail-line,
  .meteor-tail-wide,
  .moon-orbit {
    opacity: .24 !important;
  }
}

/* ===== /v31 POOLED ACT ENGINE ===== */

/* v31 uses its own rAF smoothing; native programmatic smooth scrolling would
   stack a second interpolation layer on top and make the scene feel delayed. */
html.v31-pooling {
  scroll-behavior: auto !important;
}

/* ===== v32 SINGLE-CYCLE PERFORMANCE PASS =====
   Goals: one Sun -> Moon -> Rocket -> Meteor cycle, one rAF per native scroll
   frame, one transient act node, and far fewer persistent compositor layers. */

html.v32-performance .journey {
  height: 2600vh;
  height: 2600svh;
}

html.v32-performance .scene {
  perspective: none !important;
  transform-style: flat !important;
  contain: layout paint style;
}

/* Only the current transient act is promoted. */
html.v32-performance .act-object {
  will-change: transform, opacity;
}

html.v32-performance .act-stage {
  contain: layout paint;
}

/* Keep the mountain parallax, but stop promoting dozens of tiny decorations. */
html.v32-performance .journey-ornaments {
  will-change: transform, opacity;
}
html.v32-performance .journey-ornaments *,
html.v32-performance .contours,
html.v32-performance .light-ribbons,
html.v32-performance .stars,
html.v32-performance .star-dust,
html.v32-performance .star-glints,
html.v32-performance .star-pulse,
html.v32-performance .cloud {
  will-change: auto !important;
}

/* Independent loops competing with scroll compositing were a major source of
   stutter. Stars stay visually present, but no longer animate by themselves. */
html.v32-performance .stars i,
html.v32-performance .star-pulse-a,
html.v32-performance .star-pulse-b,
html.v32-performance .sun-halo {
  animation: none !important;
}

/* Run the branded scroll cue only while the user is actually near the start.
   Once faded, its animation is paused and consumes no ongoing frame work. */
html.v32-performance .sierra-scroll-word,
html.v32-performance .sierra-scroll-bead,
html.v32-performance .sierra-scroll-arrows i {
  animation-play-state: paused !important;
}
html.v32-performance .journey-start .sierra-scroll-word,
html.v32-performance .journey-start .sierra-scroll-bead,
html.v32-performance .journey-start .sierra-scroll-arrows i {
  animation-play-state: running !important;
}

/* No animated blur/filter on scroll surfaces. */
html.v32-performance .cloud {
  filter: none !important;
}

/* Replace SVG turbulence grain with a tiny static pattern. This preserves the
   premium texture without repeatedly rasterizing a full-screen filter. */
html.v32-performance .noise {
  opacity: .014;
  background-image: radial-gradient(circle, rgba(245, 244, 220, .28) 0 .45px, transparent .6px);
  background-size: 4px 4px;
}

/* The local-account glass blur is unnecessary during a long scroll and can
   trigger large-area repaints on integrated/mobile GPUs. */
html.v32-performance .local-account {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* The pooled rocket remains large, but the expensive glow stack is restrained. */
html.v32-performance .rocket-fuselage {
  box-shadow:
    inset 0 1px rgba(255,255,244,.55),
    inset -10px -8px 14px rgba(26,79,80,.14),
    0 0 8px rgba(199,226,210,.10);
}
html.v32-performance .meteor-head {
  box-shadow: 0 0 8px rgba(243,213,153,.34), 0 0 15px rgba(226,190,126,.12);
}

/* Mobile gets the same four acts, not a cut-down journey. Only secondary
   compositor work is trimmed. 2200svh / 4 = the same ~550svh per act as v31. */
@media (max-width: 720px) {
  html.v32-performance .journey {
    height: 2200vh;
    height: 2200svh;
  }

  html.v32-performance .noise,
  html.v32-performance .light-ribbons,
  html.v32-performance .journey-arc,
  html.v32-performance .journey-path,
  html.v32-performance .journey-dot:nth-of-type(n+4) {
    display: none !important;
  }

  html.v32-performance .ridge-near,
  html.v32-performance .ridge-foreground {
    will-change: auto !important;
  }
}

html.v32-performance.lite .noise,
html.v32-performance.lite .light-ribbons,
html.v32-performance.lite .moon-orbit,
html.v32-performance.lite .rocket-trail-line,
html.v32-performance.lite .meteor-fragment,
html.v32-performance.lite .journey-arc,
html.v32-performance.lite .journey-path {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html.v32-performance .journey {
    height: 180vh;
    height: 180svh;
  }

  html.v32-performance .sierra-scroll-word,
  html.v32-performance .sierra-scroll-bead,
  html.v32-performance .sierra-scroll-arrows i,
  html.v32-performance .login::after {
    animation: none !important;
  }
}

/* ===== /v32 SINGLE-CYCLE PERFORMANCE PASS ===== */

/* Extra mobile/low-power trim: retain the main star field and all four major
   acts, but remove secondary full-screen layers that are costly on tile GPUs. */
html.v32-performance.lite .star-glints,
html.v32-performance.lite .star-pulse,
html.v32-performance.lite .aurora-two,
html.v32-performance.lite .cloud-three,
html.v32-performance.lite .mist-front {
  display: none !important;
}


/* ===== v34 DOCUMENT SCROLL RESTORE + iOS EDGE GUARD =====
   v33's nested fixed scroller could fail to receive scroll input on some iOS
   builds. v34 restores the browser's native document scrolling while keeping
   the visual scene fixed. The two-cycle pooled renderer is unchanged. */

html.v34-scroll-shell {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
  scroll-behavior: auto !important;
  -webkit-text-size-adjust: 100%;
}

html.v34-scroll-shell body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  overscroll-behavior-y: none;
  touch-action: pan-y pinch-zoom;
}

/* Eight acts, two complete cycles. 5200vh preserves the slow v32 pacing
   without introducing an independent nested scroller. */
html.v34-scroll-shell .journey {
  position: relative !important;
  inset: auto !important;
  z-index: 0;
  width: 100%;
  height: 5200vh !important;
  height: 5200vh !important;
  overflow: visible !important;
  overscroll-behavior: none;
  touch-action: pan-y pinch-zoom;
}

/* Fixed scene never reaches a sticky-container release point, so reaching the
   final frame cannot pull the mountain composition upward with the document. */
html.v34-scroll-shell .scene {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 100svh;
  contain: layout paint style;
}

/* v33's internal scroll spacer is no longer needed. */
html.v34-scroll-shell .scroll-track {
  display: none !important;
}

/* Reapply the optimized v33 visual-cost rules under the v34 class. */
html.v34-performance .scene {
  perspective: none !important;
  transform-style: flat !important;
}
html.v34-performance .act-object { will-change: transform, opacity; }
html.v34-performance .act-stage { contain: layout paint; }
html.v34-performance .journey-ornaments { will-change: transform, opacity; }
html.v34-performance .journey-ornaments *,
html.v34-performance .contours,
html.v34-performance .light-ribbons,
html.v34-performance .stars,
html.v34-performance .star-dust,
html.v34-performance .star-glints,
html.v34-performance .star-pulse,
html.v34-performance .cloud { will-change: auto !important; }
html.v34-performance .stars i,
html.v34-performance .star-pulse-a,
html.v34-performance .star-pulse-b,
html.v34-performance .sun-halo { animation: none !important; }
html.v34-performance .sierra-scroll-word,
html.v34-performance .sierra-scroll-bead,
html.v34-performance .sierra-scroll-arrows i { animation-play-state: paused !important; }
html.v34-performance .journey-start .sierra-scroll-word,
html.v34-performance .journey-start .sierra-scroll-bead,
html.v34-performance .journey-start .sierra-scroll-arrows i { animation-play-state: running !important; }
html.v34-performance .cloud { filter: none !important; }
html.v34-performance .noise {
  opacity: .014;
  background-image: radial-gradient(circle, rgba(245, 244, 220, .28) 0 .45px, transparent .6px);
  background-size: 4px 4px;
}
html.v34-performance .local-account {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html.v34-performance.lite .noise,
html.v34-performance.lite .light-ribbons,
html.v34-performance.lite .moon-orbit,
html.v34-performance.lite .rocket-trail-line,
html.v34-performance.lite .meteor-fragment,
html.v34-performance.lite .journey-arc,
html.v34-performance.lite .journey-path,
html.v34-performance.lite .star-glints,
html.v34-performance.lite .star-pulse,
html.v34-performance.lite .aurora-two,
html.v34-performance.lite .cloud-three,
html.v34-performance.lite .mist-front { display: none !important; }

@media (max-width: 720px) {
  html.v34-scroll-shell .journey {
    height: 4400vh !important;
    height: 4400vh !important;
  }

  html.v34-performance .noise,
  html.v34-performance .light-ribbons,
  html.v34-performance .journey-arc,
  html.v34-performance .journey-path,
  html.v34-performance .journey-dot:nth-of-type(n+4) { display: none !important; }

  html.v34-performance .ridge-near,
  html.v34-performance .ridge-foreground { will-change: auto !important; }
}

@media (prefers-reduced-motion: reduce) {
  html.v34-scroll-shell .journey {
    height: 180vh !important;
  }

  html.v34-performance .sierra-scroll-word,
  html.v34-performance .sierra-scroll-bead,
  html.v34-performance .sierra-scroll-arrows i,
  html.v34-performance .login::after { animation: none !important; }
}

/* ===== /v34 DOCUMENT SCROLL RESTORE + iOS EDGE GUARD ===== */

/* ===== v40 SAFARI STABLE VIEWPORT ===== */

/*
 * Safari collapses/expands its browser chrome while scrolling.
 *
 * 100dvh follows that animation and therefore continuously changes
 * the scene's physical height.
 *
 * For this fixed cinematic canvas we want a STABLE viewport instead.
 * 100lvh represents the largest viewport and does not chase the
 * address-bar animation.
 */
@media (max-width: 900px), (pointer: coarse) {

  html.v34-scroll-shell .scene {
    top: 0 !important;
    bottom: auto !important;

    height: 100vh !important;
    height: 100lvh !important;

    min-height: 100vh !important;
    min-height: 100lvh !important;

    max-height: 100lvh !important;

    overflow: hidden !important;
  }

}

/* Older Safari fallback. */
@supports not (height: 100lvh) {

  @media (max-width: 900px), (pointer: coarse) {

    html.v34-scroll-shell .scene {
      height: 100vh !important;
      min-height: 100vh !important;
      max-height: 100vh !important;
    }

  }

}

/* ===== /v40 SAFARI STABLE VIEWPORT ===== */


/* ===== v41 UNIVERSAL MOBILE VIEWPORT ===== */

/*
 * Stable cinematic canvas for:
 * - Safari
 * - LINE browser
 * - Facebook/Instagram-style WebViews
 * - Chrome mobile
 * - other embedded mobile browsers
 *
 * Do not allow browser chrome animations to resize the scene.
 */
@media (max-width: 900px), (pointer: coarse), (any-pointer: coarse) {

  html.v34-scroll-shell .scene {
    top: 0 !important;
    bottom: auto !important;

    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;

    overflow: hidden !important;
  }

}

/* ===== /v41 UNIVERSAL MOBILE VIEWPORT ===== */

/* ===== v42 FINAL UNIVERSAL VIEWPORT STABILIZATION =====
   Active scene + journey use stable vh geometry.
   Mobile height-only resize events are ignored.
   Scroll progress uses cached scene viewportHeight.
   ===== /v42 FINAL UNIVERSAL VIEWPORT STABILIZATION ===== */

/* ===== v43 EMBEDDED WEBVIEW PERFORMANCE ===== */

/*
 * LINE / social-app WebViews:
 *
 * Keep:
 * - mountains
 * - MedSierra typography
 * - sun
 * - moon
 * - rocket
 * - meteor
 * - stars
 * - atmosphere
 * - login controls
 *
 * Remove only secondary full-screen/decorative compositor work.
 */

html.embedded-webview.lite .journey-ornaments,
html.embedded-webview.lite .contours,
html.embedded-webview.lite .light-ribbons,
html.embedded-webview.lite .noise,
html.embedded-webview.lite .mist-back,
html.embedded-webview.lite .mist-front,
html.embedded-webview.lite .star-glints,
html.embedded-webview.lite .star-pulse,
html.embedded-webview.lite .aurora-two,
html.embedded-webview.lite .cloud-two,
html.embedded-webview.lite .cloud-three {
  display: none !important;
}


/*
 * Avoid unnecessary permanent compositor promotion of decorations.
 * Keep the actual currently-moving celestial object promoted.
 */
html.embedded-webview .journey-ornaments {
  will-change: auto !important;
}

html.embedded-webview .scene {
  perspective: none !important;
  transform-style: flat !important;
  contain: layout paint style !important;
}


/*
 * Keep main foreground composition intact but avoid expensive backdrop
 * effects in WebViews.
 */
html.embedded-webview .local-account {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ===== /v43 EMBEDDED WEBVIEW PERFORMANCE ===== */

/* ===== PERMANENT SVG SIERRA WORDMARK ===== */

/*
 * v46
 *
 * Sierra remains a crisp SVG.
 * A duplicate SVG underneath acts as a growing white aura.
 */

.sierra-vector-shell {
  position: relative;

  z-index: 1;

  flex: 0 0 auto;
  align-self: flex-end;

  width: min(43vw, 650px);

  aspect-ratio: 790 / 357;

  display: block;

  transform:
    translate3d(-44px, 52px, 0)
    scale(.74);

  transform-origin: 50% 68%;

  pointer-events: none;
  user-select: none;

  backface-visibility: hidden;

  will-change: transform;
}


/*
 * Sharp visible Sierra.
 */
.sierra-vector-logo {
  filter: drop-shadow(0 0 1px rgba(255,255,255,.12));
  position: absolute;

  z-index: 2;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: contain;

  display: block;

  opacity: 1;

  pointer-events: none;
  user-select: none;

  backface-visibility: hidden;
}


/*
 * White growing light.
 *
 * Blur itself NEVER changes while scrolling.
 * JS changes only opacity + scale.
 */
.sierra-vector-glow {
  mix-blend-mode: screen;
  position: absolute;

  z-index: 1;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: contain;

  display: block;

  opacity: .08;

  transform: scale(1);

  transform-origin: 50% 50%;

  /*
   * Cleaner, tighter aura.
   * Less cloudy, more crisp white bloom.
   */
  filter:
    blur(4px)
    drop-shadow(0 0 6px rgba(255,255,255,.34))
    drop-shadow(0 0 14px rgba(238,255,246,.13));

  pointer-events: none;
  user-select: none;

  will-change: transform, opacity;
}


/*
 * Slight static highlight on the sharp logo itself.
 */
.sierra-vector-logo {
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.72))
    drop-shadow(0 0 8px rgba(245,255,245,.18));
}


@media (max-width: 720px) {

  .sierra-vector-shell {
    width: 68vw;

    transform:
      translate3d(-30px, 44px, 0)
      scale(.76);
  }

  .sierra-vector-glow {
    filter:
      blur(3px)
      drop-shadow(0 0 5px rgba(255,255,255,.30))
      drop-shadow(0 0 10px rgba(238,255,246,.11));
  }

}


/*
 * LINE and other embedded WebViews:
 * retain the glow, but reduce the expensive blur radius.
 */
html.embedded-webview .sierra-vector-glow {
  filter:
    blur(2.5px)
    drop-shadow(0 0 5px rgba(255,255,255,.26))
    drop-shadow(0 0 8px rgba(238,255,246,.09));
}


@media (prefers-reduced-motion: reduce) {

  .sierra-vector-shell,
  .sierra-vector-glow {
    will-change: auto;
  }

}

/* ===== /PERMANENT SVG SIERRA WORDMARK ===== */


/* === v59 BACK TO TOP BUTTON === */

.medsierra-back-to-top {
  position: fixed;

  left: max(18px, env(safe-area-inset-left));
  bottom: max(18px, env(safe-area-inset-bottom));

  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  padding: 0;
  margin: 0;

  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 999px;

  background: rgba(10, 24, 22, .28);
  color: rgba(255, 255, 255, .95);

  font: inherit;
  font-size: 21px;
  line-height: 1;

  cursor: pointer;

  opacity: 0;
  visibility: hidden;

  transform: translate3d(0, 10px, 0) scale(.94);

  transition:
    opacity .28s ease,
    transform .28s ease,
    visibility .28s ease,
    background-color .2s ease,
    border-color .2s ease;

  z-index: 120;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.medsierra-back-to-top.is-visible {
  opacity: .88;
  visibility: visible;
  transform: translate3d(0, 0, 0) scale(1);
}

@media (hover: hover) and (pointer: fine) {
  .medsierra-back-to-top:hover {
    opacity: 1;
    background: rgba(18, 42, 38, .44);
    border-color: rgba(255, 255, 255, .34);
    transform: translate3d(0, -2px, 0) scale(1.04);
  }
}

.medsierra-back-to-top:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .88);
  outline-offset: 3px;
}

.medsierra-back-to-top:active {
  transform: translate3d(0, 1px, 0) scale(.96);
}


/* Mobile */
@media (max-width: 720px) {
  .medsierra-back-to-top {
    left: max(14px, env(safe-area-inset-left));
    bottom: max(16px, env(safe-area-inset-bottom));

    width: 36px;
    height: 46px;

    font-size: 20px;
  }
}


/* Keep embedded WebViews lighter */
html.embedded-webview .medsierra-back-to-top {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(10, 24, 22, .42);
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .medsierra-back-to-top {
    transition: opacity .15s linear;
  }
}