:root {
  --pupil-size: 34vmin;
  --iris-x: -18vw;
  --iris-y: 8vh;
  --iris-hue: 248deg;
  --blur-amount: 10px;
  --reflection-offset: 0px;
  --cursor-x: 50vw;
  --cursor-y: 50vh;
  --focus-boost: 0;
  --ink: #071018;
  --cornea: #BDEEFF;
  --aqua: #64E6D2;
  --pearl: #F7FBF8;
  --violet: #8C7CFF;
  --green: #B7FF73;
  --graphite: #2D3B43;
  --rose: #FF9FD6;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--pearl);
  font-family: "Newsreader", serif;
  overflow-x: hidden;
}

.miris-page {
  position: relative;
  min-height: 600vh;
  background:
    radial-gradient(ellipse at 12% 8%, rgba(189, 238, 255, 0.92), transparent 28%),
    radial-gradient(ellipse at 78% 36%, rgba(140, 124, 255, 0.34), transparent 30%),
    radial-gradient(ellipse at 50% 82%, rgba(100, 230, 210, 0.22), transparent 38%),
    linear-gradient(180deg, #F7FBF8 0%, #BDEEFF 19%, #64E6D2 39%, #8C7CFF 60%, #2D3B43 78%, #071018 100%);
}

.optical-system {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  filter: blur(calc(var(--blur-amount) * (1 - var(--focus-boost))));
  transition: filter 420ms ease;
}

.grain {
  position: absolute;
  inset: -10%;
  opacity: .16;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(247, 251, 248, .8) 0 1px, transparent 1.7px),
    radial-gradient(circle at 72% 38%, rgba(7, 16, 24, .4) 0 1px, transparent 1.8px);
  background-size: 29px 31px, 43px 47px;
  mix-blend-mode: soft-light;
}

.iris-orbit {
  position: absolute;
  width: 112vmin;
  height: 112vmin;
  left: var(--iris-x);
  top: var(--iris-y);
  transform: rotate(-14deg);
  transition: left 700ms cubic-bezier(.2,.9,.2,1), top 700ms cubic-bezier(.2,.9,.2,1);
}

.iris-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 10deg, rgba(7, 16, 24, .28) 0 3deg, rgba(189, 238, 255, .38) 3deg 6deg, rgba(140, 124, 255, .28) 6deg 8deg, rgba(100, 230, 210, .5) 8deg 11deg),
    radial-gradient(circle, transparent 0 calc(var(--pupil-size) * .55), rgba(7, 16, 24, .58) calc(var(--pupil-size) * .56), rgba(100, 230, 210, .22) 36%, rgba(247, 251, 248, .26) 58%, transparent 70%);
  border: 1px solid rgba(247, 251, 248, .58);
  box-shadow: inset 0 0 9vmin rgba(247, 251, 248, .7), 0 0 12vmin rgba(100, 230, 210, .35), 0 0 0 2vmin rgba(189, 238, 255, .06);
  animation: irisBreath 9s ease-in-out infinite;
}

.pupil-core, .closing-pupil {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--pupil-size);
  height: var(--pupil-size);
  border-radius: 50%;
  background: radial-gradient(circle at 45% 38%, #2D3B43 0 4%, #071018 34%, #071018 100%);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px #64E6D2, inset 0 0 5vmin #000, 0 0 5vmin rgba(183, 255, 115, .25);
}

.fiber { position: absolute; left: 50%; top: 50%; width: 1px; height: 48%; background: linear-gradient(#B7FF73, transparent); transform-origin: 0 0; opacity: .5; }
.f1 { transform: rotate(12deg); } .f2 { transform: rotate(54deg); } .f3 { transform: rotate(101deg); } .f4 { transform: rotate(142deg); }
.f5 { transform: rotate(203deg); } .f6 { transform: rotate(248deg); } .f7 { transform: rotate(291deg); } .f8 { transform: rotate(329deg); }

.lens-highlight {
  position: fixed;
  left: calc(var(--cursor-x) - 18vmin);
  top: calc(var(--cursor-y) - 12vmin);
  width: 36vmin;
  height: 24vmin;
  border-radius: 50%;
  background: radial-gradient(ellipse at 28% 24%, rgba(247, 251, 248, .72), rgba(189, 238, 255, .26) 32%, rgba(140, 124, 255, .12) 54%, transparent 70%);
  border: 1px solid rgba(247, 251, 248, .38);
  mix-blend-mode: screen;
}

.bubble-field i {
  position: absolute;
  width: 2.2vmin;
  height: 2.2vmin;
  border-radius: 50%;
  border: 1px solid rgba(247, 251, 248, .68);
  background: radial-gradient(circle at 35% 25%, #F7FBF8, rgba(189, 238, 255, .16) 42%, transparent 70%);
  animation: bubbleDrift 11s ease-in-out infinite;
}
.bubble-field i:nth-child(1) { left: 12%; top: 22%; animation-delay: -1s; }
.bubble-field i:nth-child(2) { left: 31%; top: 74%; width: 5vmin; height: 5vmin; animation-delay: -4s; }
.bubble-field i:nth-child(3) { left: 77%; top: 18%; width: 3.6vmin; height: 3.6vmin; animation-delay: -8s; }
.bubble-field i:nth-child(4) { left: 86%; top: 62%; animation-delay: -2s; }
.bubble-field i:nth-child(5) { left: 47%; top: 38%; width: 1.4vmin; height: 1.4vmin; animation-delay: -6s; }
.bubble-field i:nth-child(6) { left: 61%; top: 86%; width: 6vmin; height: 6vmin; animation-delay: -3s; }
.bubble-field i:nth-child(7) { left: 6%; top: 54%; width: 3vmin; height: 3vmin; animation-delay: -7s; }
.bubble-field i:nth-child(8) { left: 69%; top: 44%; width: 2.8vmin; height: 2.8vmin; animation-delay: -5s; }

.calibration {
  position: fixed;
  right: 2.2rem;
  top: 2.2rem;
  display: grid;
  gap: .65rem;
  pointer-events: auto;
}

.calibration button {
  color: #B7FF73;
  background: rgba(7, 16, 24, .3);
  border: 1px solid rgba(183, 255, 115, .65);
  border-left-width: 16px;
  font: 700 .68rem "Space Mono", monospace;
  letter-spacing: .08em;
  padding: .45rem .65rem;
  cursor: crosshair;
}

.coordinates, .final-coordinates {
  position: fixed;
  left: 2rem;
  bottom: 1.5rem;
  color: #B7FF73;
  font: .68rem "Space Mono", monospace;
  letter-spacing: .16em;
  z-index: 8;
}

.episode-rail {
  position: fixed;
  left: 2rem;
  top: 50%;
  z-index: 9;
  display: grid;
  gap: .55rem;
  transform: translateY(-50%);
}
.episode-rail a {
  color: #2D3B43;
  text-decoration: none;
  font: 700 .68rem "Space Mono", monospace;
  border-bottom: 1px solid currentColor;
}

.episode {
  min-height: 100vh;
  position: relative;
  z-index: 4;
  overflow: hidden;
  display: grid;
  place-items: center;
  clip-path: ellipse(84% 58% at 52% 50%);
}

.rim-copy {
  position: absolute;
  max-width: 31rem;
  padding: 1.3rem 1.5rem;
  border: 1px solid rgba(247, 251, 248, .44);
  border-radius: 999px;
  background: rgba(247, 251, 248, .12);
  backdrop-filter: blur(18px);
  box-shadow: inset 0 0 2rem rgba(189, 238, 255, .22), 0 1rem 5rem rgba(7, 16, 24, .16);
}

.rim-copy h1, .rim-copy h2 {
  margin: 0;
  font-family: "Syne", sans-serif;
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: .84;
  color: #F7FBF8;
  text-shadow: .06em 0 rgba(100, 230, 210, .52), -.04em 0 rgba(255, 159, 214, .42);
}
.rim-copy h1 { font-size: clamp(4rem, 14vw, 14rem); }
.rim-copy h2 { font-size: clamp(3rem, 8vw, 8rem); }
.rim-copy p:not(.micro) { margin: .9rem 0 0; font-size: clamp(1.2rem, 2vw, 1.8rem); line-height: 1.12; color: #F7FBF8; }
.micro { margin: 0 0 .75rem; color: #B7FF73; font: 700 .7rem "Nunito Sans", sans-serif; letter-spacing: .22em; text-transform: uppercase; }

.lidline { background: radial-gradient(ellipse at 54% 58%, rgba(100, 230, 210, .52), rgba(45, 59, 67, .15) 45%, transparent 70%); }
.eyelid { position: absolute; left: -10%; width: 120%; height: 45vh; background: radial-gradient(ellipse at 50% 100%, #F7FBF8, #BDEEFF 58%, rgba(247, 251, 248, .82)); z-index: 6; animation: firstBlink 2.2s cubic-bezier(.7,0,.1,1) both; }
.eyelid.upper { top: -3vh; border-radius: 0 0 50% 50%; }
.eyelid.lower { bottom: -3vh; border-radius: 50% 50% 0 0; transform: rotate(180deg); }
.dawn-copy { left: 13vw; top: 32vh; transform: rotate(-8deg); }
.reflection-mark { position: absolute; bottom: 7vh; font: 800 clamp(3rem, 11vw, 12rem) "Syne", sans-serif; color: rgba(7, 16, 24, .25); transform: scaleY(-1) translateY(var(--reflection-offset)); filter: blur(2px); }

.tearfilm { background: linear-gradient(115deg, rgba(189, 238, 255, .76), rgba(100, 230, 210, .28), rgba(247, 251, 248, .1)); }
.ellipse-viewport { position: absolute; border-radius: 50%; border: 1px solid rgba(247, 251, 248, .62); background: radial-gradient(ellipse at 45% 25%, rgba(247, 251, 248, .48), rgba(100, 230, 210, .12) 48%, transparent 70%); box-shadow: inset 0 0 4rem rgba(189, 238, 255, .6); animation: waveringSheet 6s ease-in-out infinite; }
.sheet-one { width: 74vw; height: 58vh; transform: rotate(-11deg); }
.sheet-two { width: 48vw; height: 82vh; transform: rotate(21deg); animation-delay: -3s; }
.left-rim { left: 9vw; top: 13vh; color: #071018; }
.left-rim h2, .left-rim p:not(.micro) { color: #071018; }
.refracted-line { position: absolute; right: 9vw; bottom: 18vh; max-width: 20rem; color: #2D3B43; font: italic 2rem "Newsreader", serif; filter: blur(calc(var(--blur-amount) * .18)); }

.focus { background: radial-gradient(circle at 51% 48%, #F7FBF8 0 12%, #BDEEFF 13% 21%, rgba(140, 124, 255, .44) 22% 36%, transparent 55%); }
.sun-type { font: 800 clamp(7rem, 26vw, 25rem) "Syne", sans-serif; color: #071018; letter-spacing: -.12em; filter: blur(calc(var(--blur-amount) * .75)); transition: filter 500ms ease, letter-spacing 500ms ease; }
.perfect-focus .sun-type { filter: blur(0); letter-spacing: -.08em; }
.crosshair { position: absolute; width: 80vmin; height: 80vmin; border: 1px solid rgba(183, 255, 115, .72); border-radius: 50%; background: linear-gradient(90deg, transparent 49.8%, #B7FF73 50%, transparent 50.2%), linear-gradient(0deg, transparent 49.8%, #B7FF73 50%, transparent 50.2%); }
.upper-rim { right: 8vw; top: 10vh; }
.eye-chart { position: absolute; bottom: 14vh; color: rgba(7, 16, 24, .22); font: 700 clamp(1rem, 2vw, 2rem) "Space Mono", monospace; letter-spacing: .5em; filter: blur(8px); transition: color 700ms ease, filter 700ms ease; }
.perfect-focus .eye-chart { color: #071018; filter: blur(0); }

.weather { background: linear-gradient(180deg, rgba(189, 238, 255, .35) 0 50%, rgba(7, 16, 24, .75) 50% 100%); }
.weather-orbs { position: absolute; top: 14vh; left: 12vw; right: 12vw; display: flex; justify-content: space-around; color: #F7FBF8; font: 5rem "Syne", sans-serif; text-shadow: 0 0 1rem #64E6D2; }
.weather-orbs b { animation: weatherFloat 7s ease-in-out infinite; }
.weather-orbs b:nth-child(2) { animation-delay: -2s; color: #8C7CFF; } .weather-orbs b:nth-child(3) { animation-delay: -4s; color: #FF9FD6; } .weather-orbs b:nth-child(4) { animation-delay: -5s; color: #BDEEFF; }
.liquid-mirror { position: absolute; inset: 50% 0 0; background: radial-gradient(ellipse at 52% 0%, rgba(100, 230, 210, .34), rgba(7, 16, 24, .9) 62%); border-top: 1px solid rgba(247, 251, 248, .5); }
.liquid-mirror span { position: absolute; left: 15vw; top: 8vh; color: rgba(247, 251, 248, .45); font: italic 4rem "Newsreader", serif; transform: scaleY(-1); filter: blur(1px); }
.right-rim { right: 8vw; bottom: 17vh; }

.lagoon { background: radial-gradient(ellipse at 36% 54%, rgba(255, 159, 214, .45), transparent 32%), radial-gradient(ellipse at 62% 48%, rgba(140, 124, 255, .55), rgba(45, 59, 67, .66) 55%, #071018 100%); }
.ghost-orbit span { position: absolute; width: 18vmin; height: 18vmin; border-radius: 50%; background: radial-gradient(circle at 30% 24%, #F7FBF8, #FF9FD6 28%, #8C7CFF 55%, transparent 70%); filter: blur(1px); animation: ghostLag 7s ease-in-out infinite; }
.ghost-orbit span:nth-child(1) { left: 18vw; top: 25vh; } .ghost-orbit span:nth-child(2) { left: 46vw; top: 54vh; animation-delay: -2.4s; opacity: .65; } .ghost-orbit span:nth-child(3) { left: 70vw; top: 28vh; animation-delay: -4.7s; opacity: .42; }
.lower-rim { left: 16vw; bottom: 11vh; }

.midnight { min-height: 100vh; background: #071018; clip-path: none; }
.midnight .closing-pupil { width: clamp(18rem, 62vmin, 45rem); height: clamp(18rem, 62vmin, 45rem); border: 1px solid #64E6D2; box-shadow: 0 0 8rem rgba(100, 230, 210, .28), inset 0 0 8rem #000; }
.midnight-copy { left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; background: transparent; border-color: rgba(183, 255, 115, .35); }
.final-coordinates { position: absolute; left: auto; right: 2rem; bottom: 2rem; }

@keyframes irisBreath { 0%,100% { transform: scale(.985) rotate(0deg); } 50% { transform: scale(1.025) rotate(2deg); } }
@keyframes bubbleDrift { 0%,100% { transform: translate3d(0,0,0) scale(.9); } 50% { transform: translate3d(2rem,-3rem,0) scale(1.15); } }
@keyframes firstBlink { 0%, 38% { height: 49vh; } 62%, 100% { height: 10vh; } }
@keyframes waveringSheet { 0%,100% { border-radius: 48% 52% 45% 55%; filter: blur(1px); } 50% { border-radius: 55% 45% 58% 42%; filter: blur(4px); } }
@keyframes weatherFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3rem) rotate(12deg); } }
@keyframes ghostLag { 0%,100% { transform: translate(0,0); box-shadow: -2rem 1rem 0 rgba(255, 159, 214, .22), -4rem 2rem 0 rgba(140, 124, 255, .12); } 50% { transform: translate(12vw, 8vh); box-shadow: -5rem 1rem 0 rgba(255, 159, 214, .25), -9rem 2rem 0 rgba(140, 124, 255, .16); } }

@media (max-width: 760px) {
  .episode-rail, .calibration { display: none; }
  .rim-copy { left: 6vw !important; right: 6vw !important; max-width: none; border-radius: 2rem; transform: none; }
  .rim-copy h1 { font-size: 5rem; }
  .rim-copy h2 { font-size: 3.4rem; }
  .iris-orbit { width: 90vmin; height: 90vmin; }
}