@property --cinematic-edge-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

:root {
  --cinematic-pointer-x: 50%;
  --cinematic-pointer-y: 46%;
  --cinematic-edge-angle: 0deg;
  --cinematic-edge-opacity: .26;
}

.vfx-scene {
  isolation: isolate;
}

.cinematic-atmosphere {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(
      circle at var(--cinematic-pointer-x) var(--cinematic-pointer-y),
      hsl(var(--sun-hue) 100% 64% / .1),
      transparent 18rem
    ),
    radial-gradient(circle at 14% 24%, rgb(77 211 255 / .055), transparent 28rem),
    radial-gradient(circle at 86% 72%, rgb(255 103 30 / .075), transparent 30rem);
  opacity: .68;
  pointer-events: none;
  transition:
    opacity .7s cubic-bezier(.2, .75, .2, 1),
    background-position .25s linear;
}

.cinematic-atmosphere::before,
.cinematic-atmosphere::after {
  position: absolute;
  content: "";
  inset: -12%;
  opacity: 0;
  pointer-events: none;
}

.cinematic-atmosphere::before {
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 6.5rem,
      color-mix(in srgb, var(--cyan, #69d8ff) 11%, transparent) 6.5rem calc(6.5rem + 1px)
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0 5.25rem,
      color-mix(in srgb, var(--orange, #ff6f26) 8%, transparent) 5.25rem calc(5.25rem + 1px)
    );
  filter: blur(.15px);
  mask-image: radial-gradient(
    ellipse at var(--cinematic-pointer-x) var(--cinematic-pointer-y),
    #000 0 20%,
    transparent 72%
  );
  -webkit-mask-image: radial-gradient(
    ellipse at var(--cinematic-pointer-x) var(--cinematic-pointer-y),
    #000 0 20%,
    transparent 72%
  );
  transform: perspective(52rem) rotateX(58deg) translate3d(0, 18%, 0) scale(1.08);
  transform-origin: center bottom;
}

.cinematic-atmosphere::after {
  background:
    conic-gradient(
      from 208deg at var(--cinematic-pointer-x) var(--cinematic-pointer-y),
      transparent 0 10%,
      hsl(var(--sun-hue) 100% 62% / .16) 16%,
      transparent 24% 48%,
      rgb(71 205 255 / .13) 57%,
      transparent 66% 82%,
      rgb(255 104 31 / .14) 89%,
      transparent 96%
    );
  filter: blur(2rem) saturate(1.28);
  mix-blend-mode: screen;
  transform: translate3d(-2%, 0, 0) scale(1.06);
}

.vfx-surface {
  --cinematic-accent: var(--orange, #ff6f26);
  position: relative;
}

.cinematic-edge {
  position: absolute;
  z-index: 24;
  inset: 1px;
  border: 1px solid color-mix(in srgb, var(--cinematic-accent) 24%, transparent);
  border-radius: inherit;
  box-shadow:
    inset 0 0 1.5rem color-mix(in srgb, var(--cinematic-accent) 3%, transparent),
    0 0 1rem color-mix(in srgb, var(--cinematic-accent) 5%, transparent);
  clip-path: inherit;
  opacity: var(--cinematic-edge-opacity);
  pointer-events: none;
  transition:
    opacity .72s cubic-bezier(.16, 1, .3, 1),
    box-shadow .72s cubic-bezier(.16, 1, .3, 1),
    filter .72s cubic-bezier(.16, 1, .3, 1);
}

@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .cinematic-edge {
    border: 0;
    padding: 1px;
    background:
      conic-gradient(
          from var(--cinematic-edge-angle),
          transparent 0 11%,
          color-mix(in srgb, var(--cyan, #69d8ff) 78%, white) 17%,
          transparent 24% 48%,
          color-mix(in srgb, var(--cinematic-accent) 86%, white) 56%,
          transparent 64% 87%,
          color-mix(in srgb, var(--gold, #e9bd64) 76%, white) 93%,
          transparent
        )
        border-box;
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    mask-composite: exclude;
  }
}

.vfx-title {
  transition:
    color .4s ease,
    text-shadow .55s cubic-bezier(.2, .75, .2, 1),
    filter .55s cubic-bezier(.2, .75, .2, 1);
}

.vfx-title:is(:hover, :focus-within),
.vfx-surface:is(:hover, :focus-within) .vfx-title {
  text-shadow:
    0 1px 2px rgb(0 0 0 / .76),
    0 0 .7rem hsl(var(--sun-hue) 100% 66% / .42),
    0 0 1.8rem hsl(calc(var(--sun-hue) + 92deg) 100% 68% / .22);
}

.reveal-ready body[data-mode="full"][data-motion="full"] [data-reveal] {
  filter: blur(.32rem) saturate(.82);
  opacity: 0;
  translate: 0 1.35rem;
  transition:
    opacity .82s cubic-bezier(.16, 1, .3, 1),
    translate .9s cubic-bezier(.16, 1, .3, 1),
    filter .9s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--cinematic-reveal-order, 0) * 45ms);
}

.reveal-ready body[data-mode="full"][data-motion="full"] [data-reveal].is-visible {
  filter: none;
  opacity: 1;
  translate: 0;
}

body[data-mode="full"][data-motion="full"] .vfx-surface.is-vfx-active > .cinematic-edge {
  animation: cinematic-edge-sweep 12s cubic-bezier(.45, 0, .55, 1) infinite;
  will-change: opacity;
}

body[data-mode="full"][data-motion="full"] .vfx-surface.is-vfx-active:is(:hover, :focus-within) > .cinematic-edge {
  --cinematic-edge-opacity: .78;
  animation-duration: 5.5s;
  filter: saturate(1.28);
  box-shadow:
    inset 0 0 1.8rem color-mix(in srgb, var(--cinematic-accent) 7%, transparent),
    0 0 1.5rem color-mix(in srgb, var(--cinematic-accent) 13%, transparent);
}

body[data-mode="full"][data-motion="full"] .vfx-scene.is-vfx-active > .cinematic-atmosphere::before {
  animation: cinematic-grid-breathe 16s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

body[data-mode="full"][data-motion="full"] .vfx-scene.is-vfx-active > .cinematic-atmosphere::after {
  animation: cinematic-atmosphere-drift 19s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

body[data-mode="full"][data-motion="full"] .vfx-scene.is-vfx-active .vfx-title {
  animation: cinematic-title-aurora 13s cubic-bezier(.45, 0, .55, 1) infinite;
}

body[data-mode="full"][data-motion="full"] .scene:not(.is-scene-active),
body[data-mode="full"][data-motion="full"] .scene:not(.is-scene-active)::before,
body[data-mode="full"][data-motion="full"] .scene:not(.is-scene-active)::after,
body[data-mode="full"][data-motion="full"] .scene:not(.is-scene-active) *,
body[data-mode="full"][data-motion="full"] .scene:not(.is-scene-active) *::before,
body[data-mode="full"][data-motion="full"] .scene:not(.is-scene-active) *::after {
  animation-play-state: paused !important;
}

body[data-theme="light"] .cinematic-atmosphere {
  background:
    radial-gradient(
      circle at var(--cinematic-pointer-x) var(--cinematic-pointer-y),
      hsl(var(--sun-hue) 92% 48% / .075),
      transparent 18rem
    ),
    radial-gradient(circle at 14% 24%, rgb(24 122 151 / .04), transparent 28rem),
    radial-gradient(circle at 86% 72%, rgb(179 70 19 / .055), transparent 30rem);
  opacity: .52;
}

body[data-theme="light"] .cinematic-atmosphere::before {
  opacity: .12;
}

body[data-theme="light"] .cinematic-atmosphere::after {
  filter: blur(2.4rem) saturate(.92);
  mix-blend-mode: multiply;
}

body[data-theme="light"] .cinematic-edge {
  --cinematic-edge-opacity: .34;
  border-color: color-mix(in srgb, var(--cinematic-accent) 38%, transparent);
}

body[data-mode="low"] .cinematic-atmosphere,
body[data-motion="reduced"] .cinematic-atmosphere {
  opacity: .16;
}

body[data-mode="low"] .cinematic-atmosphere::before,
body[data-mode="low"] .cinematic-atmosphere::after,
body[data-motion="reduced"] .cinematic-atmosphere::before,
body[data-motion="reduced"] .cinematic-atmosphere::after {
  animation: none;
  opacity: 0;
}

body[data-mode="low"] .cinematic-edge,
body[data-motion="reduced"] .cinematic-edge {
  --cinematic-edge-opacity: .18;
  animation: none;
}

body[data-mode="low"] .vfx-title,
body[data-motion="reduced"] .vfx-title {
  filter: none;
  transition: none;
}

:where([data-input-response]) {
  position: relative;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

.input-response-layer {
  position: absolute;
  z-index: 20;
  inset: 0;
  border: 1px solid transparent;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
  content: "";
  opacity: 0;
  pointer-events: none;
  translate: 0;
  scale: 0.92;
  transition:
    opacity 150ms ease,
    scale 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    translate 180ms ease,
    border-color 180ms ease,
    box-shadow 240ms ease;
}

[data-input-response].is-input-pressing > .input-response-layer {
  border-color: color-mix(in srgb, var(--cinematic-accent, var(--orange)) 76%, white 24%);
  box-shadow:
    inset 0 0 0 1px rgb(255 244 224 / 0.22),
    inset 0 0.45rem 1rem rgb(0 0 0 / 0.28),
    0 0 1rem color-mix(in srgb, var(--cinematic-accent, var(--orange)) 24%, transparent);
  opacity: 0.9;
  translate: 0 0.08rem;
  scale: 0.965;
}

body[data-mode="full"][data-motion="full"]
  [data-input-response].is-input-confirmed > .input-response-layer {
  animation: input-response-confirm 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body[data-mode="full"][data-motion="full"]
  [data-input-response="toggle"].is-input-confirmed > .input-response-layer {
  animation-name: input-response-toggle;
}

body[data-mode="full"][data-motion="full"]
  [data-input-response="card"].is-input-confirmed > .input-response-layer {
  animation-name: input-response-card-settle;
}

input[type="range"].is-input-dragging,
input[type="range"].is-input-adjusting {
  filter: brightness(1.12) saturate(1.2);
}

input[type="range"]::-webkit-slider-thumb {
  transition:
    scale 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 220ms ease,
    filter 180ms ease;
}

input[type="range"]:is(.is-input-dragging, .is-input-adjusting)::-webkit-slider-thumb {
  box-shadow:
    0 0 0 0.28rem color-mix(in srgb, var(--orange) 22%, transparent),
    0 0 1rem color-mix(in srgb, var(--orange) 48%, transparent);
  filter: brightness(1.18);
  scale: 1.16;
}

input[type="range"]::-moz-range-thumb {
  transition:
    scale 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 220ms ease,
    filter 180ms ease;
}

input[type="range"]:is(.is-input-dragging, .is-input-adjusting)::-moz-range-thumb {
  box-shadow:
    0 0 0 0.28rem color-mix(in srgb, var(--orange) 22%, transparent),
    0 0 1rem color-mix(in srgb, var(--orange) 48%, transparent);
  filter: brightness(1.18);
  scale: 1.16;
}

body[data-mode="low"] [data-input-response].is-input-pressing > .input-response-layer,
body[data-motion="reduced"] [data-input-response].is-input-pressing > .input-response-layer {
  border-color: currentColor;
  box-shadow: inset 0 0 0 1px currentColor;
  opacity: 0.72;
  translate: 0;
  scale: 1;
}

body[data-mode="low"] [data-input-response].is-input-confirmed > .input-response-layer,
body[data-motion="reduced"] [data-input-response].is-input-confirmed > .input-response-layer {
  animation: none;
  border-color: currentColor;
  opacity: 0.58;
  scale: 1;
}

body[data-mode="low"] input[type="range"]:is(.is-input-dragging, .is-input-adjusting),
body[data-motion="reduced"] input[type="range"]:is(.is-input-dragging, .is-input-adjusting) {
  filter: brightness(1.08);
}

body[data-mode="low"]
  input[type="range"]:is(.is-input-dragging, .is-input-adjusting)::-webkit-slider-thumb,
body[data-motion="reduced"]
  input[type="range"]:is(.is-input-dragging, .is-input-adjusting)::-webkit-slider-thumb,
body[data-mode="low"]
  input[type="range"]:is(.is-input-dragging, .is-input-adjusting)::-moz-range-thumb,
body[data-motion="reduced"]
  input[type="range"]:is(.is-input-dragging, .is-input-adjusting)::-moz-range-thumb {
  box-shadow: 0 0 0 0.18rem currentColor;
  scale: 1.04;
}

@keyframes input-response-confirm {
  0% {
    border-color: color-mix(in srgb, var(--cinematic-accent, var(--orange)) 88%, white 12%);
    box-shadow: inset 0 0 0 2px rgb(255 244 224 / 0.22);
    opacity: 0.94;
    scale: 0.94;
  }

  70% {
    border-color: color-mix(in srgb, var(--cinematic-accent, var(--orange)) 42%, transparent);
    box-shadow: 0 0 1.3rem color-mix(in srgb, var(--cinematic-accent, var(--orange)) 34%, transparent);
    opacity: 0.56;
    scale: 1.035;
  }

  100% {
    border-color: transparent;
    box-shadow: none;
    opacity: 0;
    scale: 1.055;
  }
}

@keyframes input-response-toggle {
  0% {
    border-color: var(--cyan);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cyan) 48%, transparent);
    opacity: 0.96;
    scale: 0.96 0.9;
  }

  58% {
    border-color: color-mix(in srgb, var(--cyan) 54%, transparent);
    box-shadow: 0 0 1.4rem color-mix(in srgb, var(--cyan) 38%, transparent);
    opacity: 0.62;
    scale: 1.025 1;
  }

  100% {
    border-color: transparent;
    box-shadow: none;
    opacity: 0;
    scale: 1.045 1;
  }
}

@keyframes input-response-card-settle {
  0% {
    border-color: color-mix(in srgb, var(--orange) 82%, white 18%);
    box-shadow: inset 0 0 0 2px rgb(255 244 224 / 0.26);
    opacity: 0.94;
    scale: 0.965 0.93;
  }

  64% {
    border-color: color-mix(in srgb, var(--cyan) 48%, transparent);
    box-shadow: 0 0 1.7rem color-mix(in srgb, var(--cyan) 28%, transparent);
    opacity: 0.52;
    scale: 1.018 1;
  }

  100% {
    border-color: transparent;
    box-shadow: none;
    opacity: 0;
    scale: 1.035 1;
  }
}

@keyframes cinematic-grid-breathe {
  0% {
    opacity: .08;
    transform: perspective(52rem) rotateX(58deg) translate3d(-1%, 19%, 0) scale(1.08);
  }

  54% {
    opacity: .2;
  }

  100% {
    opacity: .1;
    transform: perspective(52rem) rotateX(58deg) translate3d(1.5%, 16%, 0) scale(1.11);
  }
}

@keyframes cinematic-atmosphere-drift {
  0% {
    opacity: .09;
    transform: translate3d(-3%, -1%, 0) scale(1.04) rotate(-2deg);
  }

  48% {
    opacity: .18;
  }

  100% {
    opacity: .1;
    transform: translate3d(2%, 1.5%, 0) scale(1.1) rotate(2deg);
  }
}

@keyframes cinematic-title-aurora {
  0%,
  100% {
    text-shadow:
      0 1px 2px rgb(0 0 0 / .74),
      0 0 .45rem hsl(var(--sun-hue) 100% 64% / .16);
  }

  34% {
    text-shadow:
      0 1px 2px rgb(0 0 0 / .74),
      -.14rem 0 .68rem rgb(70 211 255 / .24),
      .16rem 0 1.05rem hsl(var(--sun-hue) 100% 64% / .2);
  }

  68% {
    text-shadow:
      0 1px 2px rgb(0 0 0 / .74),
      .12rem 0 .72rem rgb(255 107 32 / .24),
      -.12rem 0 1rem rgb(231 185 99 / .16);
  }
}

@keyframes cinematic-edge-sweep {
  0% {
    opacity: calc(var(--cinematic-edge-opacity) * .64);
  }

  42% {
    opacity: var(--cinematic-edge-opacity);
  }

  100% {
    opacity: calc(var(--cinematic-edge-opacity) * .64);
  }
}

@media (max-width: 42rem) {
  .cinematic-atmosphere::before {
    transform: perspective(42rem) rotateX(60deg) translate3d(0, 21%, 0) scale(1.04);
  }

  .cinematic-atmosphere::after {
    filter: blur(1.7rem) saturate(1.16);
  }

  body[data-mode="full"][data-motion="full"] .vfx-scene.is-vfx-active .vfx-title {
    animation-duration: 16s;
  }
}

@media (forced-colors: active) {
  .cinematic-atmosphere,
  .cinematic-edge {
    display: none;
  }

  .vfx-title {
    filter: none;
    text-shadow: none;
  }

  .input-response-layer {
    background: Canvas;
    box-shadow: none !important;
    forced-color-adjust: auto;
  }
}