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

:root {
  /* Daylight progress 0 (dawn) → 1 (night) */
  --day: 0;
  --op-dawn: 1;
  --op-noon: 0;
  --op-dusk: 0;
  --op-night: 0;
  --sun-x: 72%;
  --sun-y: 18%;
  --sun-glow: 0.55;
  --bright: 1;
  --contrast: 1;
  --sat: 1;
  --vignette: 0.28;
  --vig-r: 20;
  --vig-g: 16;
  --vig-b: 10;
  --scrim-a: 0.28;
  --ink: #1c1812;
  --ink-soft: rgba(28, 24, 18, 0.88);
  --name-shadow: rgba(255, 240, 210, 0.55);
  --mote-opacity: 0.45;
  --cursor-gold: 42, 78%, 62%;
  --ease-breath: cubic-bezier(0.4, 0, 0.2, 1);
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  background: #1a1814;
  color: var(--ink);
  font-family: "Poiret One", "Copperplate Gothic Light", "Bodoni MT", Georgia, serif;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Scroll journey — scene stays fixed */
.scroll-track {
  height: 360vh;
  width: 1px;
  pointer-events: none;
}

/* ——— Fixed full-bleed scene ——— */
.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #2a241c;
}

.hero {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero__video,
.hero__fallback {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  /* Daylight grade via CSS filter on the media */
  filter: brightness(var(--bright)) contrast(var(--contrast)) saturate(var(--sat));
  will-change: filter;
}

.hero__video {
  z-index: 1;
}

.hero__fallback {
  z-index: 0;
}

/* Hide fallback when video is playing */
.hero.is-playing .hero__fallback {
  opacity: 0;
  visibility: hidden;
}

.hero__fallback {
  transition: opacity 0.6s ease, visibility 0.6s;
}

@media (max-width: 720px) {
  .hero__video,
  .hero__fallback {
    /* Portrait pine: keep canopy + trunk framed */
    object-position: 50% 40%;
  }
}

@media (min-width: 721px) {
  .hero__video,
  .hero__fallback {
    object-position: 50% 40%;
  }
}

/* ——— Daylight cinematic grades (normal blend — predictable, photoreal) ——— */
.daylight {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.daylight__wash {
  position: absolute;
  inset: 0;
  transition: none;
}

.daylight__wash--dawn {
  opacity: var(--op-dawn);
  background:
    linear-gradient(
      125deg,
      rgba(255, 196, 120, 0.16) 0%,
      transparent 48%,
      rgba(200, 140, 80, 0.08) 100%
    );
}

.daylight__wash--noon {
  opacity: var(--op-noon);
  background:
    linear-gradient(
      180deg,
      rgba(170, 210, 235, 0.22) 0%,
      rgba(255, 250, 235, 0.08) 42%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 70% 50% at 50% 0%,
      rgba(190, 225, 250, 0.18) 0%,
      transparent 60%
    );
}

.daylight__wash--dusk {
  opacity: var(--op-dusk);
  background:
    linear-gradient(
      160deg,
      rgba(255, 130, 80, 0.14) 0%,
      rgba(160, 60, 45, 0.12) 40%,
      rgba(40, 18, 28, 0.28) 100%
    ),
    linear-gradient(
      to top,
      rgba(50, 22, 18, 0.32) 0%,
      transparent 48%
    );
}

.daylight__wash--night {
  opacity: var(--op-night);
  background:
    linear-gradient(
      180deg,
      rgba(16, 26, 55, 0.5) 0%,
      rgba(10, 16, 40, 0.46) 48%,
      rgba(6, 10, 28, 0.58) 100%
    ),
    radial-gradient(
      ellipse 55% 40% at 78% 12%,
      rgba(120, 145, 200, 0.12) 0%,
      transparent 55%
    );
}

.daylight__sun {
  position: absolute;
  width: min(42vw, 380px);
  height: min(42vw, 380px);
  left: var(--sun-x);
  top: var(--sun-y);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 245, 210, calc(var(--sun-glow) * 0.55)) 0%,
    rgba(255, 200, 110, calc(var(--sun-glow) * 0.22)) 38%,
    transparent 70%
  );
  filter: blur(6px);
  opacity: calc(1 - var(--op-night) * 0.85);
  pointer-events: none;
}

.daylight__base {
  position: absolute;
  inset: 0;
  opacity: calc(var(--op-night) * 0.4);
  background: linear-gradient(
    180deg,
    rgba(10, 16, 36, 0.2) 0%,
    rgba(6, 10, 24, 0.35) 100%
  );
  pointer-events: none;
}

.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(
    ellipse 85% 75% at 50% 45%,
    transparent 40%,
    rgba(var(--vig-r), var(--vig-g), var(--vig-b), var(--vignette)) 100%
  );
}

.scrim {
  position: absolute;
  left: 0;
  top: 0;
  width: min(48vw, 460px);
  height: min(30vh, 240px);
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(
    ellipse 90% 80% at 0% 0%,
    rgba(250, 235, 200, var(--scrim-a)) 0%,
    rgba(250, 235, 200, calc(var(--scrim-a) * 0.35)) 42%,
    transparent 74%
  );
}

.motes {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: var(--mote-opacity);
  mix-blend-mode: screen;
}

/* ——— Name — fixed colophon ——— */
.stage {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.name {
  position: absolute;
  top: max(clamp(1.15rem, 3.2vh, 2.4rem), env(safe-area-inset-top, 0px) + 0.85rem);
  left: max(clamp(1.15rem, 3.2vw, 2.5rem), env(safe-area-inset-left, 0px) + 0.85rem);
  margin: 0;
  font-family: "Poiret One", "Copperplate Gothic Light", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.05rem, 2.1vw, 1.55rem);
  letter-spacing: 0.22em;
  line-height: 1.15;
  color: var(--ink-soft);
  text-align: left;
  text-transform: none;
  text-shadow:
    0 0 28px var(--name-shadow),
    0 1px 2px rgba(255, 250, 235, 0.5),
    0 0 1px rgba(255, 255, 255, 0.3);
  opacity: 0;
  transform: translateY(-0.25em);
  animation: name-in 2.2s cubic-bezier(0.22, 1, 0.36, 1) 0.45s forwards;
}

@keyframes name-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ——— Custom cursor (fine pointer only) ——— */
.cursor {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  will-change: transform;
}

.cursor.is-on {
  opacity: 1;
}

.cursor__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.25px solid hsla(var(--cursor-gold), 0.72);
  box-shadow:
    0 0 10px hsla(var(--cursor-gold), 0.22),
    inset 0 0 6px hsla(var(--cursor-gold), 0.12);
}

.cursor__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: hsla(var(--cursor-gold), 0.95);
  box-shadow: 0 0 4px hsla(var(--cursor-gold), 0.5);
}

.cursor__glow {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    hsla(var(--cursor-gold), 0.22) 0%,
    transparent 70%
  );
  filter: blur(2px);
  opacity: 0.7;
  transform: scale(1);
  will-change: transform;
}

@media (pointer: fine) and (hover: hover) {
  body.has-custom-cursor {
    cursor: none;
  }

  body.has-custom-cursor * {
    cursor: none !important;
  }

  .cursor {
    display: block;
  }
}


/* ——— Bitcoin-block pine cones (silent / no on-page copy) ——— */
.cones {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

.pine-cone {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cone-size, 13px);
  height: auto;
  transform-origin: 50% 20%;
  transform: translate3d(var(--cone-x, 50vw), var(--cone-y, -10%), 0)
    rotate(var(--cone-rot, 0deg))
    scale(var(--cone-scale, 1));
  opacity: var(--cone-op, 0);
  filter: drop-shadow(0 1px 1.5px rgba(40, 28, 12, 0.32));
  will-change: transform, opacity;
  pointer-events: none;
}

.pine-cone img {
  display: block;
  width: 100%;
  height: auto;
  /* Photoreal PNG with real alpha; element opacity drives visibility — never translucent fill */
  opacity: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero__video {
    display: none;
  }

  .hero__fallback {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .hero.is-playing .hero__fallback {
    opacity: 1;
    visibility: visible;
  }

  .name {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .cursor__glow {
    display: none;
  }

  .pine-cone {
    /* Instant settle — no fall for reduced motion */
    transition: opacity 0.6s ease;
  }
}

@media (max-width: 640px) {
  .name {
    top: max(1rem, env(safe-area-inset-top, 0px) + 0.7rem);
    left: max(1rem, env(safe-area-inset-left, 0px) + 0.7rem);
    font-size: clamp(0.95rem, 4.2vw, 1.2rem);
    letter-spacing: 0.18em;
  }

  .scrim {
    width: min(78vw, 320px);
    height: min(26vh, 200px);
  }
}