/* The original card rotations remain on transform; motion uses individual properties. */
.hero {
  position: relative;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 3% 0 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 77% 43%, #e5ac8936, transparent 46%),
    radial-gradient(ellipse at 48% 54%, #e7c8b020, transparent 47%);
}

.hero-copy .accent-text {
  position: relative;
  display: inline-block;
  background: linear-gradient(
    105deg,
    #994b46 8%,
    #c67b65 39%,
    #aa514c 61%,
    #994b46 90%
  );
  background-size: 220% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: hero-title-sheen 9s ease-in-out infinite paused;
}

.hero-copy .accent-text::after {
  content: "";
  position: absolute;
  left: 1%;
  right: 3%;
  bottom: -7px;
  height: 8px;
  border-top: 2px solid #c8846599;
  border-radius: 50%;
  rotate: -2deg;
  transform-origin: left center;
}

.hero-art {
  --hero-pointer-x: 0px;
  --hero-pointer-y: 0px;
  isolation: isolate;
}

.hero-art::before,
.hero-art::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
}

.hero-art::before {
  inset: 3% -1% 4%;
  background: radial-gradient(
    ellipse at 54% 44%,
    #f5d19c99,
    #e6b29459 30%,
    #d6978b33 49%,
    transparent 70%
  );
  animation: hero-glow 12s ease-in-out infinite alternate paused;
}

.hero-art::after {
  inset: 25% 5% 6% 20%;
  background: radial-gradient(ellipse, #b7785529, transparent 69%);
  animation: hero-glow 15s ease-in-out -4s infinite alternate-reverse paused;
}

.art-orbit {
  border-color: #c6906c52;
  box-shadow:
    0 0 40px #dfb89518,
    inset 0 0 30px #fffaf240;
  /* Only the decorative orbit clips its rotating children; artwork stays unclipped. */
  overflow: clip;
  contain: paint;
  pointer-events: none;
}

.art-orbit::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(
    from 35deg,
    transparent 0deg 230deg,
    #ca937438 272deg,
    #ac675a 312deg,
    transparent 315deg
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 2px),
    #000 calc(100% - 1.5px)
  );
  animation: hero-orbit 32s linear infinite paused;
}

.art-orbit::after {
  inset: 27px;
  border-color: #cda88966;
  scale: 1.18 0.81;
  rotate: 36deg;
}

.art-spark {
  filter: drop-shadow(0 6px 28px #be77562b);
  animation: hero-spark 10s ease-in-out infinite paused;
}

.hero-paper {
  text-align: left;
  box-shadow:
    0 24px 45px -17px #6f483942,
    0 3px 8px #6f483912;
  animation: hero-paper-float 7s ease-in-out infinite paused;
  --paper-depth: 1;
  --paper-lift: -9px;
}

.blue-paper {
  --paper-depth: -0.65;
  --paper-lift: 10px;
  animation-duration: 8.5s;
  animation-delay: -2.5s;
}

.slides-paper {
  --paper-depth: 1.25;
  --paper-lift: -6px;
  animation-duration: 9s;
  animation-delay: -4s;
}

button.hero-paper {
  cursor: pointer;
}

button.hero-paper:hover,
button.hero-paper:focus-visible {
  box-shadow:
    0 30px 50px -17px #6f483960,
    0 3px 8px #6f483912;
}

.idea-note {
  animation: hero-note-float 8s ease-in-out -3s infinite paused;
  background: #faf9f6f2;
}

.hero-motion-toggle {
  position: absolute;
  right: 0;
  top: -28px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid #c9bca84d;
  border-radius: 100px;
  background: #faf9f6cc;
  color: var(--paper-muted);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.4px;
}

.hero-motion-toggle:hover {
  background: #fffdf8;
  color: var(--paper-text);
}

.hero-motion-toggle:disabled {
  cursor: default;
}

.hero-motion-toggle svg {
  width: 12px;
  height: 12px;
  flex: none;
}

.hero[data-motion="running"] *,
.hero[data-motion="running"] *::before,
.hero[data-motion="running"] *::after {
  animation-play-state: running;
}

.hero[data-motion="paused"] *,
.hero[data-motion="paused"] *::before,
.hero[data-motion="paused"] *::after {
  animation-play-state: paused;
}

@keyframes hero-title-sheen {
  0%,
  100% {
    background-position: 100% 50%;
  }
  50% {
    background-position: 0 50%;
  }
}

@keyframes hero-glow {
  from {
    scale: 0.94;
    opacity: 0.65;
  }
  to {
    scale: 1.06;
    opacity: 1;
  }
}

@keyframes hero-orbit {
  to {
    rotate: 360deg;
  }
}

@keyframes hero-spark {
  0%,
  100% {
    rotate: -5deg;
    scale: 1;
  }
  50% {
    rotate: 14deg;
    scale: 1.08;
  }
}

@keyframes hero-paper-float {
  0%,
  100% {
    translate: calc(var(--hero-pointer-x) * var(--paper-depth))
      calc(var(--hero-pointer-y) * var(--paper-depth));
  }
  50% {
    translate: calc(var(--hero-pointer-x) * var(--paper-depth))
      calc(var(--hero-pointer-y) * var(--paper-depth) + var(--paper-lift));
  }
}

@keyframes hero-note-float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 3px -5px;
  }
}

@media (max-width: 850px) {
  .hero-motion-toggle {
    top: -26px;
  }
  .hero-art::before {
    inset: 4% 0 2%;
  }
}

@media (max-width: 600px) {
  .hero::before {
    background: radial-gradient(ellipse at 65% 70%, #e5ac8929, transparent 55%);
  }
  .hero-motion-toggle {
    top: -37px;
    right: 0;
  }
  .hero-art::before {
    inset: 2% 0 5%;
  }
  .hero-paper {
    --paper-lift: -6px;
  }
  .blue-paper {
    --paper-lift: 6px;
  }
  .slides-paper {
    --paper-lift: -4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero *,
  .hero *::before,
  .hero *::after {
    animation: none !important;
    transition: none !important;
  }
  .hero-copy .accent-text {
    color: var(--paper-accent);
    background: none;
  }
  .hero-paper {
    translate: none;
  }
}