/* Slide track, stage, header, nav, corner menu, reveal motion */

/* Viewport and track ---------------------------------------------------- */

.viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
  overflow: clip;
}

.track {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 400vh;
  height: 400dvh;
  transform: translateY(calc(var(--slide, 0) * -100vh));
  transform: translateY(calc(var(--slide, 0) * -100dvh));
  transition: transform var(--slide-ms) var(--ease-slide);
  will-change: transform;
}

.slide {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* Desktop stage: a 1440 x 900 canvas scaled to fit. js/layout.js sets
   --s (scale), --ox and --oy (offset) so the canvas sits in the middle. */
.stage {
  position: absolute;
  left: var(--ox, 0px);
  top: var(--oy, 0px);
  width: var(--stage-w);
  height: var(--stage-h);
  transform: scale(var(--s, 1));
  transform-origin: 0 0;
}

.stage > * {
  position: absolute;
}

/* Page background: grid, light streaks ---------------------------------- */

.bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.bg > * {
  position: absolute;
}

.bg-grid {
  inset: 0;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}

.bg-streak {
  background: var(--streak);
  filter: blur(60px);
}

.bg-streak--a {
  left: -260px;
  top: -120px;
  width: 900px;
  height: 140px;
  opacity: var(--streak-a);
}

.bg-streak--b {
  left: -200px;
  top: 130px;
  width: 760px;
  height: 80px;
  opacity: var(--streak-b);
  filter: blur(50px);
}

.bg-shade {
  left: -140px;
  top: 600px;
  width: 620px;
  height: 46px;
  background: var(--shade);
  filter: blur(12px);
  transform: rotate(-32deg);
}

.bg-shade--b {
  left: -110px;
  top: 700px;
}

/* Glow blobs sit in each slide */
.blob {
  border-radius: 50%;
  background: var(--accent);
  opacity: var(--blob-a);
  filter: blur(110px);
  pointer-events: none;
}

/* Fixed frame: header, desktop socials, mobile corner menu --------------- */

.frame {
  position: fixed;
  left: var(--ox, 0px);
  top: var(--oy, 0px);
  width: var(--stage-w);
  height: var(--stage-h);
  transform: scale(var(--s, 1));
  transform-origin: 0 0;
  z-index: 20;
  pointer-events: none;
}

.frame a,
.frame button {
  pointer-events: auto;
}

.site-header {
  position: absolute;
  left: 60px;
  right: 56px;
  top: 40px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.hdr-left {
  display: flex;
  align-items: center;
  gap: 70px;
}

.logo {
  display: flex;
  align-items: center;
  height: 44px;
}

.logo img {
  height: var(--logo-h);
  width: auto;
}

.logo-dark,
:root[data-theme="dark"] .logo-light {
  display: none;
}

:root[data-theme="dark"] .logo-dark {
  display: block;
}

.hdr-nav {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 40px;
  font-size: 12px;
  letter-spacing: 0.16em;
}

.nav a {
  padding: 8px 0 6px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
}

.nav a:hover {
  color: var(--accent);
}

.nav a[aria-current="page"] {
  color: var(--nav-active);
  border-bottom-color: var(--accent);
}

.nav .nav-contact {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 0 18px;
  border: 1.5px solid var(--accent);
  border-radius: 21px;
  color: var(--nav-active);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.nav .nav-contact svg {
  stroke: var(--accent);
}

.nav .nav-contact[aria-current="page"] {
  background: var(--accent);
  color: #ffffff;
  border-bottom-color: var(--accent);
}

.nav .nav-contact[aria-current="page"] svg {
  stroke: #ffffff;
}

.theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 22px;
  color: var(--ink);
}

.theme-btn:hover {
  border-color: var(--accent);
}

/* Moon in light, sun in dark */
.theme-btn .i-sun,
:root[data-theme="dark"] .theme-btn .i-moon {
  display: none;
}

:root[data-theme="dark"] .theme-btn .i-sun {
  display: block;
}

.hdr-note {
  width: 184px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  letter-spacing: 0.2em;
  line-height: 1.6;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.5s ease;
}

body[data-slide="0"] .hdr-note {
  opacity: 1;
}

.hdr-note .faint {
  color: var(--faint);
}

.hdr-note .rule {
  position: relative;
  margin-top: 18px;
  height: 1px;
  background: var(--rule);
}

.hdr-note .rule::after {
  content: "";
  position: absolute;
  right: 0;
  top: -1px;
  width: 40px;
  height: 2px;
  background: var(--accent);
}

.socials {
  position: absolute;
  right: 58px;
  bottom: 54px;
  display: flex;
  gap: 26px;
  font-size: 11px;
  letter-spacing: 0.18em;
}

.socials a {
  color: var(--muted);
}

.socials a:hover {
  color: var(--accent);
}

.corner {
  display: none;
}

/* Reveal motion: content fades and rises in when its slide is active ---- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease var(--d, 0.25s), transform 0.7s var(--ease-out) var(--d, 0.25s);
}

.reveal[data-reveal="right"] {
  transform: translateX(30px);
  --d: 0.35s;
}

.reveal[data-reveal="photo"] {
  transform: translateX(50px);
  transition: opacity 0.8s ease var(--d, 0.2s), transform 1s var(--ease-out) var(--d, 0.2s);
  --d: 0.2s;
}

.reveal[data-reveal="card"] {
  transform: translateX(50px) rotate(2deg);
  transition: opacity 0.8s ease var(--d, 0.3s), transform 1s var(--ease-out) var(--d, 0.3s);
  --d: 0.3s;
}

.reveal[data-reveal="oct"] {
  transform: translateY(40px) scale(0.92);
  transition: opacity 0.6s ease var(--d, 0s), transform 0.7s var(--ease-out) var(--d, 0s);
}

.reveal[data-reveal="fade"] {
  transform: none;
  transition: opacity 0.9s ease var(--d, 0.1s);
  --d: 0.1s;
}

.is-active .reveal {
  opacity: 1;
  transform: none;
}

/* Slides that are off screen pause their animations */
.slide:not(.is-active) *,
.slide:not(.is-active) *::before,
.slide:not(.is-active) *::after {
  animation-play-state: paused !important;
}

/* Phone and tablet ------------------------------------------------------- */

@media (max-width: 1023.98px) {
  .stage {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: none;
  }

  .frame {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: none;
  }

  .site-header {
    left: var(--pad-x);
    right: var(--pad-x);
    top: calc(var(--top-y) + env(safe-area-inset-top, 0px));
    align-items: center;
  }

  .hdr-left,
  .hdr-nav {
    display: contents;
  }

  .nav,
  .hdr-note,
  .socials {
    display: none;
  }

  .theme-btn {
    background: var(--glass-bar);
  }

  .reveal,
  .reveal[data-reveal] {
    transform: translateY(18px);
    transition: opacity 0.55s ease 0.3s, transform 0.65s var(--ease-out) 0.3s;
  }

  .reveal[data-reveal="oct"] {
    transition: opacity 0.55s ease var(--d, 0.3s), transform 0.65s var(--ease-out) var(--d, 0.3s);
  }

  .is-active .reveal,
  .is-active .reveal[data-reveal] {
    opacity: 1;
    transform: none;
  }

  .track {
    transition-duration: 0.9s;
  }

  /* Corner menu: no bar, no background, four round buttons */
  .corner {
    display: block;
    position: absolute;
    left: var(--pad-x);
    bottom: calc(var(--tab-bottom) + env(safe-area-inset-bottom, 0px));
    width: 1px;
    height: 1px;
    overflow: visible;
  }

  .corner a {
    --size: var(--menu-base);
    position: absolute;
    left: var(--x, 0px);
    bottom: var(--y, 0px);
    width: var(--size);
    height: var(--size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid transparent;
    background: transparent;
    color: var(--ink);
    transition: left 0.55s var(--ease-corner), bottom 0.55s var(--ease-corner),
      width 0.45s ease, height 0.45s ease, background-color 0.35s ease, color 0.35s ease,
      box-shadow 0.35s ease;
  }

  /* Bigger invisible hit area so every button reaches 44px */
  .corner a::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
  }

  .corner a svg {
    width: var(--menu-icon);
    height: var(--menu-icon);
    transition: width 0.45s ease, height 0.45s ease;
  }

  .corner a[data-go="3"] {
    border-color: var(--accent);
    color: var(--accent);
  }

  .corner a[aria-current="page"] {
    --size: calc(var(--menu-base) * 1.5);
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
    box-shadow: 0 8px 22px rgba(30, 111, 255, 0.35);
  }

  .corner a[aria-current="page"] svg {
    width: calc(var(--menu-icon) * 1.5);
    height: calc(var(--menu-icon) * 1.5);
  }
}

/* Reduced motion: instant slide change, no reveal motion */
@media (prefers-reduced-motion: reduce) {
  .track,
  .reveal,
  .reveal[data-reveal],
  .corner a,
  .corner a svg,
  .hdr-note {
    transition: none !important;
  }
}