/* A short branded entrance, followed by continuous, layered motion. */
.brand-intro {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  overflow: hidden;
  color: #07100d;
}
.intro-running .brand-intro {
  display: grid;
  place-items: center;
}
.intro-curtains {
  position: absolute;
  inset: 0;
  display: flex;
}
.intro-curtains i {
  flex: 1;
  height: 100%;
  background: #f5f5f0;
  transform-origin: top;
  animation: intro-curtain 1.1s cubic-bezier(0.76, 0, 0.24, 1) 1.4s both;
}
.intro-curtains i:first-child {
  background: #ddebdf;
  animation-delay: 1.3s;
}
.intro-curtains i:last-child {
  background: #c4d6c8;
  animation-delay: 1.5s;
}
.intro-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  animation: intro-content-out 0.55s ease 1.15s both;
}
.intro-logo {
  width: clamp(100px, 10vw, 145px);
  height: auto;
  position: relative;
  z-index: 2;
  animation: intro-logo-in 0.9s var(--motion-ease) both;
}
.intro-words {
  margin: 12px 0 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2em;
  font-size: clamp(60px, 9.3vw, 150px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.07em;
  position: relative;
  z-index: 2;
}
.intro-words > span {
  display: block;
  overflow: hidden;
  padding: 0 0.04em 0.12em;
}
.intro-words b {
  font-weight: inherit;
  display: block;
  animation: intro-word-in 1s var(--motion-ease) 0.08s both;
}
.intro-words > span:last-child {
  color: #4f7d58;
}
.intro-words > span:last-child b {
  animation-delay: 0.23s;
}
.intro-signature {
  font-size: 12px;
  letter-spacing: 0.19em;
  animation: intro-logo-in 1s var(--motion-ease) 0.3s both;
}
.intro-corner {
  position: absolute;
  bottom: 35px;
  left: 5.2%;
  font-size: 11px;
  letter-spacing: 0.12em;
  animation: intro-content-out 0.3s ease 1.2s both;
}
.intro-orbit {
  position: absolute;
  top: -40%;
  left: 50%;
  width: min(80vw, 1000px);
  aspect-ratio: 1;
  border: 1px solid #4f7d5830;
  border-radius: 50%;
  animation: intro-orbit-in 1.9s var(--motion-ease) both;
  transform: translate(-50%, -20%) rotate(-30deg) scaleY(0.55);
}
.intro-orbit-two {
  rotate: 65deg;
  border-color: #4f7d581b;
}
.hero-atmosphere {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.hero-atmosphere span {
  position: absolute;
  width: 64%;
  aspect-ratio: 1;
  border-radius: 50%;
  right: -5%;
  top: -10%;
  background: radial-gradient(ellipse, #4f7d5840, transparent 64%);
  animation: atmosphere-drift 15s ease-in-out infinite alternate;
}
.hero-atmosphere span:last-child {
  right: 35%;
  top: 48%;
  width: 36%;
  opacity: 0.35;
  animation-duration: 21s;
  animation-delay: -9s;
}
.hero::before {
  background: radial-gradient(circle, #8fb99628, #07100d00 66%);
}
.hero-art::before,
.hero-art::after {
  content: none;
}
.hero-sculpture {
  position: relative;
  width: 110%;
  flex-shrink: 0;
  z-index: 1;
}
.hero-art .hero-sculpture img {
  width: 100%;
  display: block;
  animation: sculpture-drift 11s ease-in-out infinite;
}
[data-motion="on"] .hero-sculpture {
  animation: sculpture-arrive 1.8s var(--motion-ease) calc(var(--intro-delay, 0s) + 0.05s) both;
}
.orbital-field {
  position: absolute;
  inset: -1% -8%;
  translate: var(--field-x, 0px) var(--field-y, 0px);
  pointer-events: none;
  perspective: 850px;
}
.orbital-ring {
  position: absolute;
  inset: 3%;
  border: 1px solid #8fb99645;
  border-radius: 50%;
  transform: rotate(-28deg) scaleY(0.68);
}
.orbital-ring i {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  animation: orbital-travel 18s linear infinite;
}
.orbital-ring i::before {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  left: calc(50% - 3px);
  top: -3px;
  background: #8fb996;
  border-radius: 50%;
  box-shadow: 0 0 18px #8fb99699;
}
.ring-two {
  inset: 13% -5%;
  transform: rotate(48deg) scaleY(0.83);
  border-color: #8fb99626;
}
.ring-two i {
  animation-duration: 26s;
  animation-direction: reverse;
}
.ring-three {
  inset: -3% 10%;
  transform: rotate(-15deg) scaleX(0.75);
  border-color: #8fb99617;
}
.ring-three i {
  animation-duration: 33s;
  animation-delay: -8s;
}
.art-label {
  z-index: 3;
  backdrop-filter: blur(12px);
}
.hero-art .label-one {
  --label-angle: -10deg;
  animation: label-drift 7s ease-in-out infinite;
}
.hero-art .label-two {
  --label-angle: 8deg;
  animation: label-drift 9s ease-in-out -3s infinite reverse;
}
.hero-art .label-three {
  --label-angle: -6deg;
  animation: label-drift 8s ease-in-out -5s infinite;
}
.hero-copy > p,
.hero-actions,
.hero-copy .micro {
  animation: copy-arrive 1s var(--motion-ease) both;
}
.hero-copy > p {
  animation-delay: calc(var(--intro-delay, 0s) + 0.38s);
}
.hero-actions {
  animation-delay: calc(var(--intro-delay, 0s) + 0.5s);
}
.hero-copy .micro {
  animation-delay: calc(var(--intro-delay, 0s) + 0.6s);
}
.hero-bottom > span:last-child > span {
  display: inline-block;
  animation: scroll-hint 2.2s ease-in-out infinite;
}
.spark {
  display: inline-block;
  animation: avora-spin 16s linear infinite;
}
.intro-dismissed .hero-line > span,
.intro-dismissed .hero-sculpture,
.intro-dismissed .hero-copy > p,
.intro-dismissed .hero-actions,
.intro-dismissed .hero-copy .micro {
  animation: none;
}
/* A softer continuous version for devices that request less movement. */
[data-motion-level="gentle"] .intro-curtains i {
  animation-name: intro-curtain-soft;
}
[data-motion-level="gentle"] .intro-orbit {
  animation: none;
}
[data-motion-level="gentle"] .intro-logo,
[data-motion-level="gentle"] .intro-words b {
  animation-name: intro-fade;
}
[data-motion-level="gentle"] .hero-art .hero-sculpture img {
  animation-name: sculpture-gentle;
  animation-duration: 16s;
}
[data-motion-level="gentle"] .orbital-ring i {
  animation-duration: 55s;
}
[data-motion-level="gentle"] .hero-sculpture {
  animation-name: intro-fade;
}
[data-motion-level="gentle"] .hero-line > span {
  animation-name: intro-fade;
}
[data-motion-level="gentle"] .art-label {
  animation-duration: 16s;
}
[data-motion-level="gentle"] .ticker-track {
  animation-duration: 65s;
}
[data-motion-level="gentle"] .reveal:not(.is-visible) {
  transform: translate3d(0, 8px, 0);
}
@keyframes intro-curtain {
  to {
    transform: scaleY(0);
  }
}
@keyframes intro-curtain-soft {
  to {
    opacity: 0;
  }
}
@keyframes intro-content-out {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-25px);
  }
}
@keyframes intro-logo-in {
  from {
    opacity: 0;
    transform: translateY(15px) scale(0.85);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes intro-word-in {
  from {
    transform: translateY(112%) rotate(5deg);
  }
  to {
    transform: none;
  }
}
@keyframes intro-orbit-in {
  from {
    opacity: 0;
    transform: translate(-50%, -20%) rotate(-75deg) scale(0.3);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -20%) rotate(-30deg) scaleY(0.55);
  }
}
@keyframes atmosphere-drift {
  from {
    transform: translate(-3%, 2%) scale(0.95);
  }
  to {
    transform: translate(10%, -8%) scale(1.18);
  }
}
@keyframes sculpture-arrive {
  from {
    opacity: 0;
    transform: translateY(65px) rotate(-15deg) scale(0.7);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes sculpture-drift {
  0%,
  100% {
    transform: translateY(-5px) rotate(-4deg) scale(0.98);
  }
  50% {
    transform: translateY(13px) rotate(4deg) scale(1.035);
  }
}
@keyframes sculpture-gentle {
  0%,
  100% {
    transform: translateY(-3px);
  }
  50% {
    transform: translateY(3px);
  }
}
@keyframes orbital-travel {
  to {
    transform: rotate(360deg);
  }
}
@keyframes label-drift {
  0%,
  100% {
    transform: translateY(-3px) rotate(var(--label-angle, 0deg));
  }
  50% {
    transform: translateY(5px) rotate(var(--label-angle, 0deg));
  }
}
@keyframes copy-arrive {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes scroll-hint {
  0%,
  100% {
    transform: translateY(-3px);
  }
  50% {
    transform: translateY(4px);
  }
}
@keyframes intro-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (max-width: 760px) {
  .intro-content {
    padding: 0 6%;
  }
  .intro-words {
    flex-direction: column;
    gap: 0;
    text-align: center;
    font-size: clamp(58px, 15vw, 95px);
    margin-top: 24px;
  }
  .intro-signature {
    font-size: 10px;
    letter-spacing: 0.1em;
  }
  .intro-corner {
    font-size: 9px;
    bottom: 24px;
  }
  .intro-orbit {
    width: 140vw;
    top: 15%;
  }
  .hero-sculpture {
    width: 100%;
  }
  .orbital-field {
    inset: 8% -2%;
  }
  .hero-atmosphere span {
    top: 45%;
    width: 115%;
  }
  .hero-art .label-two {
    right: 4px;
  }
  .hero-art .label-one {
    top: 22px;
  }
}