@font-face {
  font-family: "TT Prosto Sans";
  src: url("assets/fonts/tt-prosto-sans-trial-regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: dark;
  background: #85898b;
  --image-width: max(100vw, 150vh);
  --image-width: max(100vw, 150dvh);
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
.landscape { position: fixed; inset: 0; }
.scene {
  width: var(--image-width);
  aspect-ratio: 3 / 2;
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  isolation: isolate;
  z-index: 0;
}
.original-image, .foreground {
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%;
  pointer-events: none;
}
/* Explicit back-to-front order keeps all fog above both mountain copies. */
.original-image { z-index: 0; }
.sky-field { z-index: 1; }
.foreground { z-index: 2; }
.foreground.summit-detail { z-index: 3; }
.ground-mist { z-index: 5; }

/* Pull the terrain back uniformly around the horizon; preserve its proportions
   and original lighting. The underlying snowfield continues to fill the frame. */
.foreground { clip-path: polygon(0.000000% 71.679688%, 1.953125% 72.070312%, 4.296875% 72.265625%, 5.664062% 71.582031%, 7.031250% 71.289062%, 8.398438% 71.679688%, 10.286458% 72.167969%, 11.783854% 72.363281%, 13.151042% 72.558594%, 14.583333% 72.167969%, 15.950521% 71.777344%, 17.252604% 71.484375%, 18.359375% 70.898438%, 19.466146% 70.800781%, 20.768229% 70.898438%, 22.005208% 70.507812%, 23.307292% 69.628906%, 24.544271% 68.750000%, 25.846354% 67.773438%, 27.018229% 66.699219%, 28.190104% 65.820312%, 29.427083% 64.746094%, 30.598958% 63.769531%, 31.770833% 62.695312%, 32.877604% 61.914062%, 34.114583% 60.742188%, 35.351562% 59.667969%, 36.523438% 58.691406%, 37.760417% 57.714844%, 38.932292% 56.445312%, 40.104167% 55.175781%, 41.145833% 54.199219%, 42.252604% 53.222656%, 43.294271% 52.050781%, 44.335938% 50.781250%, 45.507812% 49.511719%, 46.549479% 48.535156%, 47.526042% 47.753906%, 48.632812% 46.875000%, 49.479167% 46.484375%, 50.000000% 46.386719%, 50.520833% 46.972656%, 51.041667% 47.753906%, 51.888021% 48.535156%, 52.864583% 49.414062%, 53.971354% 50.292969%, 55.013021% 51.367188%, 56.119792% 52.246094%, 57.226562% 53.222656%, 58.333333% 54.101562%, 59.440104% 54.980469%, 60.546875% 55.957031%, 61.653646% 57.031250%, 62.695312% 58.007812%, 63.736979% 59.082031%, 64.713542% 60.253906%, 65.625000% 61.328125%, 66.666667% 62.500000%, 67.578125% 63.574219%, 68.554688% 64.746094%, 69.466146% 65.917969%, 70.377604% 66.992188%, 71.354167% 68.261719%, 72.330729% 69.140625%, 73.502604% 69.824219%, 74.934896% 70.214844%, 76.432292% 70.507812%, 78.190104% 70.898438%, 79.687500% 71.386719%, 81.445312% 71.777344%, 83.268229% 71.777344%, 85.026042% 71.386719%, 86.914062% 71.191406%, 88.867188% 70.800781%, 90.494792% 70.507812%, 91.992188% 71.191406%, 93.815104% 71.777344%, 96.028646% 72.070312%, 98.111979% 72.167969%, 100.000000% 72.363281%, 100.000000% 100.000000%, 0.000000% 100.000000%); }
.sky-field {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  clip-path: inset(0 0 27% 0);
  background: url('assets/cloud-layers/cloud-01.png') center / cover;
}
/* Feather only the outer snowfield where it meets the full-screen source.
   The mountain itself stays opaque and sharp. */
.foreground {
  transform: scale(0.9);
  transform-origin: 50% 73%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent),
                      linear-gradient(to bottom, #000 78%, transparent 98%);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent),
              linear-gradient(to bottom, #000 78%, transparent 98%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* Reinforce only the summit's rock/snow detail using the same aligned source.
   Feather the enhancement out before it reaches the wider slopes. */
.foreground.summit-detail {
  filter: contrast(1.14);
  -webkit-mask-image: radial-gradient(ellipse 9% 10% at 50% 49%, #000 12%, transparent 100%);
  mask-image: radial-gradient(ellipse 9% 10% at 50% 49%, #000 12%, transparent 100%);
}
/* Each generated plate has a distinct drift, duration and blend cycle.
   Overscan prevents edges from entering the clipped sky. */
.cloud {
  position: absolute;
  inset: -12%;
  background-size: cover;
  background-position: center;
  animation: cloud-drift var(--drift-time) linear infinite alternate,
             cloud-blend var(--blend-time) ease-in-out infinite alternate;
  animation-delay: var(--offset), var(--offset);
  will-change: transform, opacity;
}
.cloud-1 {
  background-image: url('assets/cloud-layers/cloud-01.png');
  --drift-time: 28s; --blend-time: 47s; --offset: -20s;
  --from-x: -6%; --to-x: 6%; --from-y: 0%; --to-y: 1.5%;
  --low-alpha: .82; --high-alpha: .94;
}
.cloud-2 {
  background-image: url('assets/cloud-layers/cloud-02.png');
  --drift-time: 38s; --blend-time: 61s; --offset: -70s;
  --from-x: 7%; --to-x: -7%; --from-y: -1%; --to-y: 2%;
  --low-alpha: .09; --high-alpha: .24;
}
.cloud-3 {
  background-image: url('assets/cloud-layers/cloud-03.png');
  --drift-time: 50s; --blend-time: 73s; --offset: -115s;
  --from-x: -4%; --to-x: 3%; --from-y: 1%; --to-y: -2%;
  --low-alpha: .06; --high-alpha: .18;
}
.cloud-4 {
  background-image: url('assets/cloud-layers/cloud-04.png');
  --drift-time: 63s; --blend-time: 97s; --offset: -175s;
  --from-x: 3%; --to-x: -3%; --from-y: 1%; --to-y: -1%;
  --low-alpha: .10; --high-alpha: .26;
}
.cloud-5 {
  background-image: url('assets/cloud-layers/cloud-05.png');
  --drift-time: 79s; --blend-time: 113s; --offset: -97s;
  --from-x: -2%; --to-x: 4%; --from-y: -1%; --to-y: 1%;
  --low-alpha: .07; --high-alpha: .20;
}
@keyframes cloud-drift {
  from { transform: translate(var(--from-x), var(--from-y)) scale(1.025); }
  to { transform: translate(var(--to-x), var(--to-y)) scale(1.06); }
}
@keyframes cloud-blend {
  from { opacity: var(--low-alpha); }
  to { opacity: var(--high-alpha); }
}
/* Low rolling mist stays attached to the terrain, in front of the foothills.
   Independent travel and opacity cycles keep the overlapping banks natural. */
/* This independent scene-sized layer sits above the entire mountain scene.
   True-alpha mist uses normal compositing, retaining visible vapor density. */
.ground-mist {
  position: absolute;
  width: var(--image-width);
  aspect-ratio: 3 / 2;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 50%, #000 57%, #000 81%, transparent 92%);
  mask-image: linear-gradient(to bottom, transparent 50%, #000 57%, #000 81%, transparent 92%);
}
.mist {
  position: absolute;
  display: block;
  max-width: none;
  object-fit: fill;
  animation: mist-drift var(--mist-speed) ease-in-out infinite alternate,
             mist-breathe var(--mist-breath) ease-in-out infinite alternate;
  animation-delay: var(--mist-delay), var(--mist-delay);
  will-change: transform, opacity;
}
.mist-original {
  left: -18%; top: 50%; width: 136%; height: 36%;
  filter: brightness(0.96);
  --mist-speed: 20s; --mist-breath: 29s; --mist-delay: -15s;
  --mist-from: -4%; --mist-to: 4%; --mist-rise: -2%;
  --mist-low: 0.391; --mist-high: 0.552;
}
.mist-wisps {
  left: -20%; top: 53.5%; width: 140%; height: 32%;
  filter: brightness(1.00);
  --mist-speed: 27s; --mist-breath: 37s; --mist-delay: -31s;
  --mist-from: 6%; --mist-to: -6%; --mist-rise: 3%;
  --mist-low: 0.207; --mist-high: 0.345;
}
.mist-curls {
  left: -15%; top: 54.5%; width: 130%; height: 32%;
  background: #a4a7ad;
  -webkit-mask: url('assets/ground-mist/mist-curls.png') center / 100% 100% no-repeat;
  mask: url('assets/ground-mist/mist-curls.png') center / 100% 100% no-repeat;
  mask-mode: luminance;
  --mist-speed: 16s; --mist-breath: 43s; --mist-delay: -9s;
  --mist-from: -5%; --mist-to: 5%; --mist-rise: -4%;
  --mist-low: 0.230; --mist-high: 0.368;
}
@keyframes mist-drift {
  from { transform: translate(var(--mist-from), 0); }
  to { transform: translate(var(--mist-to), var(--mist-rise)); }
}
@keyframes mist-breathe {
  from { opacity: var(--mist-low); }
  to { opacity: var(--mist-high); }
}
.paused .cloud, .paused .mist { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .cloud { animation: none; opacity: var(--low-alpha); will-change: auto; }
  .mist { animation: none; opacity: var(--mist-low); will-change: auto; }
}
/* Keep the text outside the cover-scaled image so it remains inside the viewport.
   Its center follows the midpoint between viewport top and the visible summit. */
.wordmark {
  display: grid;
  position: absolute;
  left: 50%;
  top: clamp(4rem, calc(25% - var(--image-width) * 0.0031731770833), 30%);
  z-index: 10;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0 0.04em;
  font-family: "TT Prosto Sans", sans-serif;
  font-weight: 400;
  font-size: clamp(3rem, 7.2vw, 7.5rem);
  line-height: 1;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: rgba(37, 44, 53, 0.94);
  -webkit-text-fill-color: rgba(37, 44, 53, 0.94);
  -webkit-text-stroke: 0;
  text-shadow: none;

}
/* All glyphs share one grid cell and identical line boxes. This avoids the
   inline/absolute baseline mismatch that previously produced doubled edges. */
.wordmark-base, .wordmark-texture, .wordmark-shine {
  display: block;
  grid-area: 1 / 1;
  position: relative;
  margin: 0;
  padding: 0;
  line-height: inherit;
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.wordmark-base {
  color: rgba(48, 55, 63, 0.64);
  -webkit-text-fill-color: rgba(48, 55, 63, 0.64);
}
.wordmark-texture, .wordmark-shine {
  pointer-events: none;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.wordmark-texture {
  /* Reuse the sky's natural cloud texture, clipped entirely to the glyphs. */
  background-image: url('assets/cloud-layers/cloud-04.png');
  background-size: cover;
  background-position: 50% 58%;
  filter: contrast(1.5) brightness(0.8);
  opacity: 0.18;
  -webkit-text-stroke: 0;
}
.wordmark-shine {
  /* Broad, quiet reflections mirror the reference in dark glass. */
  background-image: linear-gradient(175deg,
    rgba(224, 232, 239, 0.19) 0%,
    rgba(224, 232, 239, 0.07) 38%,
    transparent 55%,
    rgba(12, 19, 27, 0.09) 80%,
    rgba(230, 238, 245, 0.12) 100%);
  -webkit-text-stroke: 0;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .wordmark-texture, .wordmark-shine { display: none; }
}
@media (forced-colors: active) {
  .wordmark, .wordmark-base { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; -webkit-text-stroke: 0; text-shadow: none; }
  .wordmark-texture, .wordmark-shine { display: none; }
}

.copyright {
  position: fixed;
  right: max(1.5rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 10;
  margin: 0;
  max-width: calc(100vw - 3rem);
  font-family: "TT Prosto Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(48, 55, 63, 0.78);
  text-align: right;
}

.phase-label {
  position: fixed;
  left: max(1.5rem, env(safe-area-inset-left));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 10;
  font-family: "TT Prosto Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(48, 55, 63, 0.78);
}
@media (max-width: 480px) {
  .copyright { max-width: calc(100vw - 8rem); }
}