:root {
  /* Desktop seconds wheel (frame_004) */
  --wheel-curve-spread-deg: 75;
  --wheel-tilt-scale: 0.1;
  --wheel-arc-bow: 0.65;
  --wheel-curve-visible-slots: 3;
  --wheel-line-gap-ratio: 0.5;
  --wheel-radius-min: 240;
  --wheel-radius-max: 400;
  --wheel-fade-range: 3.2;
  --wheel-fade-power: 3;
  --wheel-fade-min: 0.02;

  --cream: #fff3e1;
  --beige: #fff0d3;
  --peach: #fdcc99;
  --terracotta: #ef3b24;
  --rust: #cc2027;
  --rust-rgb: 204, 32, 39;
  --dark-brown: #640f0e;
  --white: #ffffff;

  --font-gotham: "Gotham", "Helvetica Neue", Arial, sans-serif;
  --font: var(--font-gotham);

  --headline-size: clamp(1.1rem, 1.6vw, 1.7rem);
  --digit-size: clamp(2.75rem, 5.2vw, 6rem);
  --label-size: clamp(0.7rem, 1.1vw, 1.25rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ═══════════════════════════════════════════
   BACKGROUND
   ═══════════════════════════════════════════ */

.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background-color: #fff3e1;
}

.bg picture {
  display: block;
  width: 100%;
  height: 100%;
}

.bg__image,
.bg__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ═══════════════════════════════════════════
   PAGE LAYOUT
   ═══════════════════════════════════════════ */

.page {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.content {
  position: absolute;
  top: clamp(5rem, 35vh, 12rem);
  left: clamp(4rem, 18.8vw, 22rem);
  z-index: 2;
  max-width: min(62vw, 920px);
}

/* ═══════════════════════════════════════════
   LOGO + HEADLINE
   ═══════════════════════════════════════════ */

.logo-headline {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 1.2vw, 1.5rem);
  margin-bottom: clamp(1.5rem, 2.5vw, 2.5rem);
  opacity: 0;
  animation: fadeSlideIn 0.6s ease forwards 0.3s;
}

.logo {
  width: auto;
  height: clamp(48px, 5vw, 72px);
  flex-shrink: 0;
  object-fit: contain;
  display: block;
  background: transparent;
}

.logo--mobile { display: none; }

@media (max-width: 768px) {
  .logo--desktop { display: none; }
  .logo--mobile {
    display: block;
    mix-blend-mode: multiply;
  }
}

.logo__layer {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.logo__layer.built {
  opacity: 1;
  transform: translateY(0);
}

.headline {
  font-family: var(--font-gotham);
  font-weight: 700;
  font-size: var(--headline-size);
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rust);
}

.headline__line {
  display: block;
  position: relative;
  will-change: transform, opacity, clip-path;
}

.headline__word {
  display: inline-block;
  will-change: transform, opacity;
}

.headline__line--falling {
  overflow: hidden;
}

.headline__word--fall {
  opacity: 0;
  transform: translateY(-1.65em);
}

@keyframes headlineWordFall {
  from {
    opacity: 0.7;
    transform: translateY(-1.65em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.headline__line--sub {
  margin-top: 0.15em;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
}

.headline__line--sub.visible,
.headline--animating .headline__line--sub {
  max-height: 3em;
  opacity: 1;
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ═══════════════════════════════════════════
   COUNTDOWN (Days / Hours / Min)
   ═══════════════════════════════════════════ */

.countdown {
  font-family: var(--font-gotham);
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  flex-wrap: nowrap;
  margin-left: calc(clamp(42px, 4.5vw, 60px) + clamp(0.8rem, 1.2vw, 1.5rem));
  opacity: 0;
  animation: fadeIn 0.5s ease forwards 0.6s;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.countdown__unit {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}

.countdown__slot {
  display: inline-block;
  position: relative;
  overflow: hidden;
  line-height: 1.08;
}

.countdown__digit {
  font-weight: 800;
  font-size: var(--digit-size);
  line-height: 1.08;
  font-variant-numeric: tabular-nums;
  color: var(--white);
  display: inline-block;
  white-space: nowrap;
}

.countdown__label {
  display: inline-block;
  margin-left: clamp(0.25rem, 0.4vw, 0.45rem);
  font-weight: 500;
  font-size: var(--label-size);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  line-height: 1;
}

/* SEC unit — label stays inline; digit shown by the wheel */
.countdown__unit--sec .countdown__digit {
  visibility: hidden;
}

.countdown__unit--sec .countdown__label {
  position: relative;
  z-index: 4;
  color: var(--rust);
}

/* Glitch / slice overlay fragments (created by JS) */
.glitch-slice {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  will-change: transform, opacity;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease;
}

/* ═══════════════════════════════════════════
   ANALOG SECONDS WHEEL (Right Side)
   ═══════════════════════════════════════════ */

.wheel {
  font-family: var(--font-gotham);
  position: fixed;
  top: 50%;
  left: 0;
  right: auto;
  width: 280px;
  height: 100vh;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  pointer-events: none;
  z-index: 3;
  overflow: visible;
  opacity: 0;
  animation: fadeIn 0.6s ease forwards 0.9s;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 14%,
    black 86%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 14%,
    black 86%,
    transparent 100%
  );
}

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

.wheel__num {
  position: absolute;
  left: 0;
  top: 50%;
  font-size: var(--digit-size);
  font-weight: 800;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  line-height: 1.08;
  margin: 0;
  padding: 0.04em 0;
  text-align: left;
  color: rgba(var(--rust-rgb), 1);
  white-space: nowrap;
  overflow: visible;
  will-change: transform, color, top, left;
  transform-origin: right center;
}

.wheel__indicator {
  display: none;
}

.wheel__indicator-line {
  display: block;
  width: clamp(18px, 2.2vw, 32px);
  height: 2px;
  background: var(--rust);
  opacity: 0.7;
}

.wheel__indicator-label {
  font-size: clamp(0.55rem, 0.75vw, 0.85rem);
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rust);
  opacity: 0.85;
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
  :root {
    /* Ref crop 356×768 — countdown row ~52%, left edge ~5.6% */
    --mobile-content-left: 5.6%;
    --mobile-content-width: 58%;
    --mobile-countdown-y: 52%;
    --mobile-stack-above-countdown: 54%;
    --mobile-logo-gap: clamp(0.5rem, 2vh, 0.8rem);
    --mobile-countdown-gap: clamp(0.45rem, 2.8vw, 0.75rem);
    --digit-size: clamp(1.55rem, 7.8vw, 2rem);
    --headline-size: clamp(0.58rem, 2.75vw, 0.72rem);
    --label-size: clamp(0.48rem, 2.3vw, 0.6rem);

    /* Seconds wheel — arc pinned to top/bottom-left (ref crop 356×768) */
    --wheel-ref-width: 356;
    --wheel-ref-height: 768;
    --wheel-center-rel-x: 415;
    --wheel-center-rel-y: 163;
    --wheel-active-angle-deg: -21.5;
    --wheel-corner-pad: 4;
    --wheel-radius-scale: 1;
    --wheel-tilt-scale: 1;
    --wheel-fade-range: 10;
    --wheel-fade-power: 1.65;
    --wheel-fade-min: 0.04;
  }

  .bg__image {
    object-fit: cover;
    object-position: center center;
  }

  /* Anchor countdown row to ref vertical center; stack logo + text above */
  .content {
    position: absolute;
    top: 0;
    left: var(--mobile-content-left);
    width: var(--mobile-content-width);
    max-width: var(--mobile-content-width);
    height: 100%;
    transform: none;
  }

  .countdown {
    position: absolute;
    top: var(--mobile-countdown-y);
    left: 0;
    transform: translateY(-50%);
    margin: 0;
    gap: var(--mobile-countdown-gap);
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    z-index: 2;
  }

  .logo-headline {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: var(--mobile-stack-above-countdown);
    flex-direction: row;
    align-items: flex-start;
    margin: 0;
    gap: var(--mobile-logo-gap);
    z-index: 2;
  }

  .logo {
    height: clamp(34px, 9vw, 42px);
    align-self: center;
  }

  .headline {
    align-self: flex-start;
    width: 100%;
    max-width: 100%;
    color: var(--white);
    font-size: var(--headline-size);
    line-height: 1.32;
    letter-spacing: 0.05em;
  }

  .wheel {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
    overflow: visible;
    z-index: 3;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .wheel__num {
    font-size: clamp(1.35rem, 6.8vw, 1.75rem);
    transform-origin: center center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wheel__track,
  .glitch-slice,
  .headline__line,
  .headline__word--fall,
  .logo,
  .logo__layer,
  .headline__line--sub {
    transition: none !important;
    animation: none !important;
  }

  .bg__glow,
  .bg__cloud {
    animation: none !important;
  }
}