/*
  HERO ATMOSPHERE V5 — isolated design experiment
  This stylesheet exists only in the experiment package.
*/

.hero {
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 34%;
  left: 50%;
  width: min(760px, 68vw);
  height: min(290px, 30vw);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center,
      oklch(78% .095 55 / .16) 0%,
      oklch(68% .075 52 / .075) 34%,
      transparent 70%);
  filter: blur(30px);
  opacity: .64;
  pointer-events: none;
  transform: translate3d(-50%, 0, 0) scale(1);
}

.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(90deg, oklch(17% .03 250 / .34), transparent 18%, transparent 82%, oklch(17% .03 250 / .34)),
    linear-gradient(180deg, transparent 55%, oklch(17% .03 250 / .2));
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
}

.hero-bg {
  transform: scale(1.015);
  transform-origin: center center;
  will-change: transform;
}

.motion-ready .hero-bg {
  animation: atmosphere-drift 6s cubic-bezier(.22, 1, .36, 1) 1.05s forwards;
}

.hero h1 .copper {
  position: relative;
}

.hero h1 .copper::after {
  content: "";
  position: absolute;
  right: 6%;
  bottom: calc(-7px + .12em);
  left: 8%;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    oklch(76% .09 55 / .58) 10%,
    oklch(84% .085 55 / .82) 50%,
    oklch(76% .09 55 / .48) 90%,
    transparent
  );
  opacity: .66;
  transform: scaleX(1);
  transform-origin: left center;
  pointer-events: none;
}

.motion-ready .hero h1 .copper::after {
  opacity: 0;
  transform: scaleX(0);
  animation:
    atmosphere-underline .68s .34s cubic-bezier(.16, 1, .3, 1) forwards,
    copper-reemphasis 6s 2.4s ease-in-out infinite;
}

.motion-ready .hero .hero-sequence,
.motion-ready .hero h1 {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  animation: atmosphere-enter-primary .62s .06s cubic-bezier(.2, .8, .2, 1) forwards;
}

.hero-preparing .hero .hero-sequence,
.hero-preparing .hero h1 {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
}

.motion-ready .hero .hero-copy,
.motion-ready .hero .hero-actions {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  animation: atmosphere-enter-support .54s .18s cubic-bezier(.2, .8, .2, 1) forwards;
}

.hero-preparing .hero .hero-copy,
.hero-preparing .hero .hero-actions {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
}

.motion-ready .hero .hero-trust-slot,
.motion-ready .hero .credibility {
  opacity: 0;
  animation: atmosphere-enter-trust .5s .4s ease-out forwards;
}

.hero-preparing .hero .hero-trust-slot,
.hero-preparing .hero .credibility {
  opacity: 0;
}

.motion-ready .hero-actions .btn-primary {
  animation: atmosphere-cta-focus .72s .38s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes atmosphere-drift {
  from { transform: scale(1.015) translate3d(0, 0, 0); }
  to { transform: scale(1.026) translate3d(-.12%, .1%, 0); }
}

@keyframes atmosphere-underline {
  0% { opacity: 0; transform: scaleX(0); }
  18% { opacity: .38; }
  100% { opacity: .66; transform: scaleX(1); }
}

@keyframes copper-reemphasis {
  0%, 82% { opacity: .66; transform: scaleX(1); }
  87% { opacity: .3; transform: scaleX(.94); }
  93% { opacity: .84; transform: scaleX(1.015); }
  100% { opacity: .66; transform: scaleX(1); }
}

@keyframes atmosphere-enter-primary {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes atmosphere-enter-support {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes atmosphere-enter-trust {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes atmosphere-cta-focus {
  from { box-shadow: 0 0 0 oklch(76% .09 55 / 0); }
  to { box-shadow: 0 12px 30px oklch(76% .09 55 / .14); }
}

@media (max-width: 767px) {
  .hero::before {
    top: 28%;
    width: 112vw;
    height: 46vw;
    filter: blur(24px);
    opacity: .46;
  }

  .hero-bg {
    animation: none;
    transform: scale(1.018);
  }

  .hero h1 .copper::after {
    height: 1px;
  }

  .hero .hero-sequence {
    animation: none;
  }

  .motion-ready .hero h1 {
    transform: translate3d(0, 4px, 0);
    animation-delay: .04s;
  }

  .motion-ready .hero .hero-copy,
  .motion-ready .hero .hero-actions {
    transform: translate3d(0, 4px, 0);
    animation-delay: .14s;
  }

  .motion-ready .hero .hero-trust-slot {
    animation-delay: .34s;
  }

  body,
  body.header-compact { --header-h: 65px; }

  .site-header,
  .header-compact .site-header {
    height: 65px;
    border-bottom-color: oklch(32% .03 250 / .3);
    background: oklch(19% .03 250 / .84);
    box-shadow: none;
    transition: none;
  }

  .brand,
  .header-compact .brand {
    font-size: 11px;
    letter-spacing: .12em;
  }

  .brand-symbol,
  .header-compact .brand-symbol {
    width: 32px;
    height: 32px;
    transform: scale(1);
    transform-origin: left center;
    transition: none;
  }

  .drawer,
  .header-compact .drawer {
    inset: 65px 0 0;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg,
  .hero h1 .copper::after,
  .hero .hero-sequence,
  .hero h1,
  .hero .hero-copy,
  .hero .hero-actions,
  .hero .hero-trust-slot,
  .hero .credibility {
    animation: none !important;
  }

  .hero-bg { transform: scale(1.02); }
  .hero h1 .copper::after { opacity: .68; transform: scaleX(1); }
  .hero .hero-sequence,
  .hero h1,
  .hero .hero-copy,
  .hero .hero-actions,
  .hero .hero-trust-slot,
  .hero .credibility { opacity: 1; transform: none; }
  .hero-actions .btn-primary { box-shadow: 0 12px 30px oklch(76% .09 55 / .14); }
}