:root {
  color-scheme: dark;
  --mx: 0;
  --my: 0;
}

* {
  box-sizing: border-box;
}

body {
  --ink: #f6f0e8;
  --line: rgba(255, 229, 198, 0.34);
  --ui-accent: #ffc785;
  --ui-accent-soft: #ffeacd;

  --card-bg: #f3e2cb;
  --card-ink: #181718;
  --card-border: #161417;
  --card-radius: 18px;
  --card-shadow: 16px 16px 0 rgba(6, 8, 14, 0.74);
  --card-tilt: -0.62deg;

  --fluff-a: #e7a45a;
  --fluff-b: #ffcf7a;
  --fluff-c: #ff8a5d;
  --fluff-d: #fff08f;

  --core-opacity: 0.98;
  --a-opacity: 0.58;
  --b-opacity: 0.53;
  --c-opacity: 0.48;
  --d-opacity: 0.45;
  --mist-opacity: 0.64;

  --a-blur: 24px;
  --b-blur: 30px;
  --c-blur: 32px;
  --d-blur: 26px;

  --a-dur: 24s;
  --b-dur: 30s;
  --c-dur: 26s;
  --d-dur: 34s;
  --mist-dur: 40s;

  --a-dx: 18%;
  --a-dy: -14%;
  --b-dx: -14%;
  --b-dy: 10%;
  --c-dx: 12%;
  --c-dy: 14%;
  --d-dx: -10%;
  --d-dy: -12%;

  --a-scale: 1.3;
  --b-scale: 1.22;
  --c-scale: 1.18;
  --d-scale: 1.24;

  --mist-rotate: 18deg;
  --mist-shift: -18px;

  margin: 0;
  min-height: 100vh;
  background: #000;
  color: var(--ink);
  font-family: "IBM Plex Sans", sans-serif;
  overflow-x: hidden;
  padding-bottom: 42px;
}

body[data-palette="p19"] {
  --ui-accent: #ffc785;
  --ui-accent-soft: #ffeacd;
  --fluff-a: #e7a45a;
  --fluff-b: #ffcf7a;
  --fluff-c: #ff8a5d;
  --fluff-d: #fff08f;
}

.bg-scene {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: #000;
}

.bg-layer {
  position: absolute;
  inset: -32%;
  pointer-events: none;
  will-change: transform, opacity, filter;
}

.bg-layer--core {
  opacity: var(--core-opacity);
  background:
    radial-gradient(78% 76% at 50% 52%, rgba(26, 21, 18, 0.9) 0%, rgba(10, 8, 9, 0.96) 46%, #000 76%),
    radial-gradient(44% 32% at 54% 44%, rgba(255, 190, 120, 0.15) 0%, transparent 68%),
    radial-gradient(38% 36% at 44% 60%, rgba(255, 133, 93, 0.12) 0%, transparent 70%);
  animation: core-drift 28s ease-in-out infinite alternate;
}

.bg-layer--fluff-a {
  opacity: var(--a-opacity);
  filter: blur(var(--a-blur)) saturate(1.2);
  background: radial-gradient(40% 40% at 20% 74%, color-mix(in srgb, var(--fluff-a) 88%, transparent), transparent 62%);
  animation: fluff-a var(--a-dur) ease-in-out infinite alternate;
}

.bg-layer--fluff-b {
  opacity: var(--b-opacity);
  filter: blur(var(--b-blur)) saturate(1.16);
  background: radial-gradient(34% 34% at 82% 22%, color-mix(in srgb, var(--fluff-b) 85%, transparent), transparent 64%);
  animation: fluff-b var(--b-dur) ease-in-out infinite alternate;
}

.bg-layer--fluff-c {
  opacity: var(--c-opacity);
  filter: blur(var(--c-blur)) saturate(1.18);
  background: radial-gradient(32% 32% at 48% 16%, color-mix(in srgb, var(--fluff-c) 84%, transparent), transparent 66%);
  animation: fluff-c var(--c-dur) ease-in-out infinite alternate;
}

.bg-layer--fluff-d {
  opacity: var(--d-opacity);
  filter: blur(var(--d-blur)) saturate(1.15);
  background: radial-gradient(34% 34% at 64% 82%, color-mix(in srgb, var(--fluff-d) 78%, transparent), transparent 62%);
  animation: fluff-d var(--d-dur) ease-in-out infinite alternate;
}

.bg-layer--mist {
  opacity: var(--mist-opacity);
  filter: blur(16px);
  background:
    conic-gradient(
      from 100deg at 50% 50%,
      transparent 0deg,
      color-mix(in srgb, var(--fluff-a) 22%, transparent) 64deg,
      transparent 146deg,
      color-mix(in srgb, var(--fluff-c) 16%, transparent) 222deg,
      transparent 360deg
    ),
    radial-gradient(72% 55% at 50% 4%, rgba(255, 230, 198, 0.1), transparent 70%),
    radial-gradient(82% 72% at 50% 95%, rgba(0, 0, 0, 0.74), transparent 72%);
  animation: fluff-mist var(--mist-dur) linear infinite alternate;
}

.experience {
  min-height: calc(100vh - 72px);
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 52px);
}

.carousel {
  width: min(1240px, 100%);
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 78px;
  align-items: center;
  gap: clamp(10px, 2.2vw, 24px);
}

.arrow-btn {
  position: relative;
  z-index: 6;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--ui-accent-soft) 70%, white);
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.24), transparent 52%),
    color-mix(in srgb, var(--ui-accent) 24%, rgba(18, 14, 18, 0.72));
  color: #fff;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(8px);
  box-shadow: 0 14px 32px rgba(2, 2, 8, 0.58), inset 0 -2px 0 rgba(255, 255, 255, 0.2);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, filter 220ms ease;
}

.arrow-btn:hover,
.arrow-btn:focus-visible {
  transform: scale(1.07);
  outline: none;
  border-color: rgba(255, 246, 234, 1);
  box-shadow: 0 18px 36px rgba(3, 2, 8, 0.62), inset 0 -2px 0 rgba(255, 255, 255, 0.26);
  filter: brightness(1.08);
}

.arrow-icon {
  width: 34px;
  height: 34px;
  stroke: currentColor;
  stroke-width: 2.25;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quote-shell {
  perspective: 1400px;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
  padding: clamp(12px, 2vw, 24px);
  overflow: visible;
}

.quote-shell::before,
.quote-shell::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.quote-shell::before {
  inset: 1.8%;
  border: 1px solid rgba(255, 225, 192, 0.42);
  transform: rotate(-1.05deg);
}

.quote-shell::after {
  inset: 7.6% 3.8%;
  border: 1px dashed rgba(255, 225, 192, 0.27);
  transform: rotate(1.25deg);
}

.quote-card {
  width: min(840px, 100%);
  min-height: clamp(250px, 35vh, 360px);
  position: relative;
  overflow: visible;
  background: var(--card-bg);
  color: var(--card-ink);
  border: 3px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transform: rotate(var(--card-tilt));
  padding: clamp(24px, 4vw, 48px);
  display: grid;
  align-content: center;
  gap: 16px;
}

.quote-card::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed color-mix(in srgb, var(--card-ink) 38%, transparent);
}

.quote-card.is-entering {
  animation: quote-in-page 580ms cubic-bezier(0.2, 0.84, 0.24, 1) both;
}

.quote-card.is-leaving {
  animation: quote-out-page 320ms ease-in both;
}

.quote-source {
  margin: 0;
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.74rem;
  opacity: 0.84;
}

.quote-text {
  margin: 0;
  font-family: "Syne", sans-serif;
  font-size: clamp(1.44rem, 3.7vw, 3.08rem);
  line-height: 1.34;
  letter-spacing: 0.01em;
  padding: 0.1em 0 0.34em;
  overflow: visible;
  text-rendering: geometricPrecision;
}

.bottom-scroll {
  position: fixed;
  inset: auto 0 0;
  border-top: 1px solid rgba(255, 219, 179, 0.38);
  background: rgba(14, 10, 10, 0.6);
  backdrop-filter: blur(6px);
  overflow: hidden;
  z-index: 12;
}

.scroll-track {
  display: flex;
  width: max-content;
  min-width: 100%;
  gap: 0;
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.58rem;
  color: rgba(255, 234, 212, 0.92);
  white-space: nowrap;
  padding: 11px 0;
  animation: ticker-run 36s linear infinite;
}

.scroll-segment {
  flex: 0 0 auto;
  min-width: max-content;
  padding-right: 0;
}

@keyframes quote-in-page {
  from {
    opacity: 0;
    transform: rotateY(68deg) rotate(var(--card-tilt)) translateX(48px);
  }

  to {
    opacity: 1;
    transform: rotateY(0deg) rotate(var(--card-tilt)) translateX(0);
  }
}

@keyframes quote-out-page {
  from {
    opacity: 1;
    transform: rotateY(0deg) rotate(var(--card-tilt));
  }

  to {
    opacity: 0;
    transform: rotateY(-56deg) rotate(var(--card-tilt)) translateX(-40px);
  }
}

@keyframes core-drift {
  0% {
    transform: translate3d(calc(var(--mx) * 10px), calc(var(--my) * 10px), 0) scale(1);
  }

  100% {
    transform: translate3d(calc(var(--mx) * -10px), calc(var(--my) * -10px), 0) scale(1.07);
  }
}

@keyframes fluff-a {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  100% {
    transform: translate3d(var(--a-dx), var(--a-dy), 0) scale(var(--a-scale));
  }
}

@keyframes fluff-b {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  100% {
    transform: translate3d(var(--b-dx), var(--b-dy), 0) scale(var(--b-scale));
  }
}

@keyframes fluff-c {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  100% {
    transform: translate3d(var(--c-dx), var(--c-dy), 0) scale(var(--c-scale));
  }
}

@keyframes fluff-d {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  100% {
    transform: translate3d(var(--d-dx), var(--d-dy), 0) scale(var(--d-scale));
  }
}

@keyframes fluff-mist {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  100% {
    transform: translate3d(0, var(--mist-shift), 0) rotate(var(--mist-rotate));
  }
}

@keyframes ticker-run {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-33.3333%);
  }
}

@media (max-width: 980px) {
  .carousel {
    grid-template-columns: 58px minmax(0, 1fr) 58px;
    gap: 10px;
  }

  .quote-card {
    transform: none;
    box-shadow: 10px 12px 0 rgba(6, 8, 14, 0.74);
  }

  .arrow-icon {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 640px) {
  body {
    padding-bottom: 48px;
  }

  .experience {
    min-height: calc(100vh - 92px);
    padding: 12px;
  }

  .carousel {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    gap: 8px;
  }

  .quote-card {
    min-height: 224px;
    padding: 20px;
  }

  .quote-card::after {
    inset: 8px;
  }

  .quote-text {
    font-size: clamp(1.2rem, 6vw, 1.96rem);
    line-height: 1.38;
    padding-bottom: 0.4em;
  }

  .scroll-track {
    font-size: 0.53rem;
    letter-spacing: 0.14em;
    animation-duration: 30s;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}