.hero-section {
  grid-template-columns: minmax(18rem, 0.72fr) minmax(30rem, 1.48fr);
  gap: clamp(1rem, 3vw, 2.75rem);
  min-height: min(44rem, 82vh);
  isolation: isolate;
}

.hero-section::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0 auto 0 50%;
  width: 100vw;
  background:
    radial-gradient(circle at 71% 73%, oklch(69% 0.16 66 / 15%), transparent 29rem),
    radial-gradient(circle at 89% 20%, oklch(48% 0.08 35 / 10%), transparent 22rem),
    #262930;
  transform: translateX(-50%);
}

.hero-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 4%;
  bottom: -1px;
  left: 37%;
  height: 1px;
  background: linear-gradient(90deg, transparent, oklch(72% 0.16 67 / 72%), transparent);
}

.hero-copy {
  gap: var(--space-lg);
}

.hero-kicker {
  color: oklch(78% 0.14 72);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.hero-copy h1 {
  color: oklch(96% 0.012 72);
  font-size: clamp(3rem, 6vw, 5rem);
  text-wrap: balance;
}

.hero-copy h1 span {
  color: oklch(67% 0.17 43);
}

.hero-note {
  max-width: 29rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: oklch(83% 0.025 69);
  box-shadow: none;
  backdrop-filter: none;
}

.hero-copy .primary-action {
  background: oklch(62% 0.19 42);
  box-shadow: 0 18px 38px oklch(10% 0.02 40 / 32%);
}

.hero-copy .primary-action:hover {
  background: oklch(69% 0.18 48);
}

.ambient-cloche-stage {
  position: relative;
  min-width: 0;
  width: min(100%, 52rem);
  aspect-ratio: 43 / 24;
  margin: 0;
  justify-self: end;
  overflow: visible;
  isolation: isolate;
  contain: layout;
  touch-action: pan-y;
}

.ambient-cloche-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 12% 4% 3%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 51% 70%, oklch(60% 0.17 49 / 9%), transparent 66%);
  filter: blur(18px);
  pointer-events: none;
}

.ambient-scene {
  position: absolute;
  inset: 0;
  animation: ambient-scene-reveal 900ms var(--ease-out) both;
}

.flavour-journey-art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  filter: saturate(1.03);
  transition: opacity 260ms ease;
}

.cloche-sprite-world {
  position: absolute;
  inset: 0;
  overflow: visible;
  opacity: 0;
  transform: translateZ(0);
  transform-origin: 50% 56%;
  filter: saturate(1.035) contrast(1.01);
  transition: opacity 420ms ease;
  pointer-events: none;
}

.ambient-cloche-stage.is-sprite-ready .cloche-sprite-world {
  opacity: 1;
}

.ambient-cloche-stage.is-sprite-ready .flavour-journey-art {
  visibility: hidden;
  opacity: 0;
}

.cloche-source-glow {
  position: absolute;
  z-index: 1;
  left: 28%;
  top: 53%;
  width: 46%;
  height: 31%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at var(--glow-x, 50%) var(--glow-y, 66%),
    oklch(88% 0.18 84 / 62%),
    oklch(69% 0.2 53 / 20%) 38%,
    transparent 72%
  );
  filter: blur(18px);
  animation: cloche-glow-breathe 5.8s ease-in-out infinite;
}

.cloche-aroma-layer {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  opacity: 0.62;
  filter: blur(1.3px) drop-shadow(0 0 10px oklch(72% 0.17 58 / 30%));
}

.cloche-aroma-layer path {
  stroke: oklch(68% 0.15 52 / 62%);
  stroke-width: 16;
  stroke-linecap: round;
  stroke-dasharray: 245 68 134 48;
  animation: cloche-aroma-flow 13s linear infinite;
}

.cloche-aroma-layer path:nth-child(2) {
  stroke: oklch(77% 0.16 73 / 58%);
  stroke-width: 13;
  animation-duration: 16s;
  animation-direction: reverse;
}

.cloche-aroma-layer path:nth-child(3) {
  stroke-width: 14;
  animation-duration: 19s;
}

.cloche-particle-field {
  position: absolute;
  z-index: 46;
  inset: 0;
}

.cloche-particle-field i {
  position: absolute;
  left: var(--particle-x);
  top: var(--particle-y);
  width: var(--particle-size);
  height: var(--particle-size);
  border-radius: 50%;
  background: oklch(84% 0.18 79);
  box-shadow: 0 0 9px oklch(82% 0.18 76 / 82%);
  animation: cloche-particle-drift var(--particle-duration) ease-in-out var(--particle-delay) infinite;
}

.cloche-sprite-layer {
  position: absolute;
  transform: translate3d(var(--pointer-x, 0), var(--pointer-y, 0), 0)
    rotate(var(--pointer-rotate, 0deg));
  transform-origin: center;
  will-change: transform;
}

.cloche-sprite-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  animation: cloche-sprite-float var(--float-duration) ease-in-out var(--float-delay) infinite;
  filter: drop-shadow(0 7px 7px oklch(10% 0.025 38 / 24%));
  transform-origin: center;
  will-change: transform;
}

.cloche-sprite-layer.depth-back:not([data-asset-id^="cloche-"]) .cloche-sprite-image {
  filter: drop-shadow(0 5px 5px oklch(10% 0.025 38 / 18%));
}

.cloche-sprite-layer[data-asset-id="cloche-lid"] .cloche-sprite-image {
  animation-name: cloche-lid-hover;
  filter: drop-shadow(0 15px 13px oklch(9% 0.025 35 / 34%));
}

.cloche-sprite-layer[data-asset-id="cloche-base"] .cloche-sprite-image {
  animation-name: cloche-base-breathe;
  filter: drop-shadow(0 13px 8px oklch(8% 0.025 38 / 42%));
}

.ambient-cloche-stage.is-interacting .cloche-particle-field i {
  animation-duration: calc(var(--particle-duration) * 0.72);
}

@keyframes cloche-sprite-float {
  0%, 100% {
    transform: translate3d(0, 2px, 0) rotate(var(--float-rotate));
  }
  50% {
    transform: translate3d(0, calc(0px - var(--float-distance)), 0)
      rotate(calc(0deg - var(--float-rotate)));
  }
}

@keyframes cloche-lid-hover {
  0%, 100% {
    transform: translate3d(0, 1px, 0) rotate(0.22deg);
  }
  50% {
    transform: translate3d(0, -3px, 0) rotate(-0.22deg);
  }
}

@keyframes cloche-base-breathe {
  0%, 100% {
    transform: translateY(0) scaleX(1);
  }
  50% {
    transform: translateY(-1px) scaleX(1.006);
  }
}

@keyframes cloche-glow-breathe {
  0%, 100% {
    opacity: 0.72;
    transform: scale(0.94);
  }
  50% {
    opacity: 1;
    transform: scale(1.055);
  }
}

@keyframes cloche-aroma-flow {
  to {
    stroke-dashoffset: -495;
  }
}

@keyframes cloche-particle-drift {
  0%, 100% {
    opacity: 0.22;
    transform: translate3d(-2px, 8px, 0) scale(0.66);
  }
  48% {
    opacity: 1;
    transform: translate3d(3px, -12px, 0) scale(1.12);
  }
}

.svg-parallax {
  transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0);
  transform-box: view-box;
  transform-origin: center;
  will-change: transform;
}

.depth-back .svg-float [stroke] {
  stroke-width: 3.5px;
}

.depth-mid .svg-float [stroke] {
  stroke-width: 4.5px;
}

.depth-front .svg-float [stroke] {
  stroke-width: 5.5px;
}

.svg-float {
  transform-box: fill-box;
  transform-origin: center;
  animation: svg-item-float var(--float-duration, 8s) ease-in-out var(--float-delay, 0s) infinite;
  will-change: transform;
}

.svg-lid-float {
  animation-name: svg-lid-float;
}

.aroma-ribbons {
  fill: none;
  opacity: 0.52;
  filter: drop-shadow(0 0 9px oklch(68% 0.18 55 / 26%));
}

.aroma-ribbons path {
  stroke: url(#aroma-gradient);
  stroke-width: 13;
  stroke-linecap: round;
  stroke-dasharray: 330 52;
  animation: svg-aroma-flow 12s linear infinite;
}

.aroma-ribbons path:nth-child(2) {
  stroke-width: 11;
  animation-duration: 15s;
  animation-direction: reverse;
}

.aroma-ribbons path:nth-child(3) {
  stroke-width: 12;
  animation-duration: 17s;
}

.svg-glow-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: svg-glow-breathe 5.8s ease-in-out infinite;
}

.svg-inner-glow {
  transform-box: fill-box;
  transform-origin: center;
  animation: svg-inner-glow 3.8s ease-in-out infinite;
}

.svg-particles {
  fill: #f4c35a;
  filter: drop-shadow(0 0 7px oklch(82% 0.17 78 / 78%));
}

.svg-particles circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: svg-particle-drift 5.6s ease-in-out infinite;
}

.svg-particles circle:nth-child(3n + 1) {
  animation-delay: -1.8s;
  animation-duration: 6.8s;
}

.svg-particles circle:nth-child(3n + 2) {
  animation-delay: -4.1s;
  animation-duration: 7.7s;
}

.svg-particles circle:nth-child(4n) {
  animation-delay: -2.6s;
  animation-duration: 4.9s;
}

.svg-cloche-base {
  transform-box: fill-box;
  transform-origin: 50% 80%;
  animation: svg-base-breathe 7s ease-in-out infinite;
}

@keyframes ambient-scene-reveal {
  from {
    opacity: 0;
    transform: scale(0.975) translateY(0.65rem);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes svg-item-float {
  0%, 100% {
    transform: translate3d(0, 4px, 0) rotate(1deg);
  }
  50% {
    transform: translate3d(0, calc(0px - var(--float-distance, 8px)), 0) rotate(calc(0deg - var(--float-tilt, 1.5deg)));
  }
}

@keyframes svg-lid-float {
  0%, 100% {
    transform: translate3d(0, 2px, 0) rotate(0.45deg);
  }
  50% {
    transform: translate3d(0, -4px, 0) rotate(-0.45deg);
  }
}

@keyframes svg-aroma-flow {
  to {
    stroke-dashoffset: -248;
  }
}

@keyframes svg-glow-breathe {
  0%, 100% {
    opacity: 0.68;
    transform: scale(0.96);
  }
  50% {
    opacity: 1;
    transform: scale(1.045);
  }
}

@keyframes svg-inner-glow {
  0%, 100% {
    opacity: 0.72;
    transform: scaleX(0.94);
  }
  50% {
    opacity: 1;
    transform: scaleX(1.06);
  }
}

@keyframes svg-particle-drift {
  0%, 100% {
    opacity: 0.38;
    transform: translate3d(0, 7px, 0) scale(0.72);
  }
  46% {
    opacity: 1;
    transform: translate3d(3px, -9px, 0) scale(1.08);
  }
}

@keyframes svg-base-breathe {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1.5px);
  }
}

@media (max-width: 1060px) {
  .hero-section {
    grid-template-columns: minmax(17rem, 0.82fr) minmax(25rem, 1.18fr);
  }
}

@media (max-width: 820px) {
  .hero-section {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    min-height: auto;
    padding-bottom: var(--space-md);
  }

  .hero-section::after {
    left: 6%;
  }

  .hero-copy {
    max-width: 34rem;
  }

  .hero-copy h1 {
    font-size: clamp(2.75rem, 12vw, 4rem);
  }

  .ambient-cloche-stage {
    width: min(100%, 47rem);
    justify-self: center;
    margin-inline: calc(var(--page-margin) * -0.28);
  }
}

@media (max-width: 520px) {
  .hero-section {
    padding-top: var(--space-2xl);
  }

  .hero-copy {
    gap: var(--space-md);
  }

  .hero-kicker {
    font-size: 0.62rem;
    letter-spacing: 0.12em;
  }

  .hero-note {
    font-size: 0.98rem;
  }

  .ambient-cloche-stage {
    width: calc(100% + var(--page-margin));
    aspect-ratio: 1.16 / 1;
    margin-top: -0.75rem;
    margin-inline: calc(var(--page-margin) * -0.5);
    overflow: hidden;
  }

  .cloche-sprite-world {
    transform: scale(1.18);
    transform-origin: 50% 57%;
  }

  .flavour-journey-art {
    transform: scale(1.3);
    transform-origin: 50% 58%;
  }

  .optional-flavour,
  .mobile-hide {
    display: none;
  }
}

@media (pointer: coarse) {
  .svg-float {
    animation-name: svg-item-float-soft;
  }

  .svg-lid-float {
    animation-name: svg-lid-float;
  }

  .aroma-ribbons,
  .svg-particles {
    filter: none;
  }

  .cloche-sprite-image {
    filter: drop-shadow(0 4px 4px oklch(10% 0.025 38 / 18%));
  }

  .cloche-aroma-layer {
    filter: none;
    opacity: 0.48;
  }
}

@keyframes svg-item-float-soft {
  0%, 100% {
    transform: translateY(2px) rotate(0.45deg);
  }
  50% {
    transform: translateY(-4px) rotate(-0.45deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-scene,
  .svg-float,
  .aroma-ribbons path,
  .svg-glow-pulse,
  .svg-inner-glow,
  .svg-particles circle,
  .svg-cloche-base {
    animation: none !important;
  }

  .svg-parallax {
    transform: none !important;
  }

  .cloche-sprite-image,
  .cloche-source-glow,
  .cloche-aroma-layer path,
  .cloche-particle-field i {
    animation: none !important;
  }

  .cloche-sprite-layer {
    transform: none !important;
  }
}

.ambient-cloche-stage.is-animation-paused .svg-float,
.ambient-cloche-stage.is-animation-paused .aroma-ribbons path,
.ambient-cloche-stage.is-animation-paused .svg-glow-pulse,
.ambient-cloche-stage.is-animation-paused .svg-inner-glow,
.ambient-cloche-stage.is-animation-paused .svg-particles circle,
.ambient-cloche-stage.is-animation-paused .svg-cloche-base {
  animation-play-state: paused;
}

.ambient-cloche-stage.is-animation-paused .cloche-sprite-image,
.ambient-cloche-stage.is-animation-paused .cloche-source-glow,
.ambient-cloche-stage.is-animation-paused .cloche-aroma-layer path,
.ambient-cloche-stage.is-animation-paused .cloche-particle-field i {
  animation-play-state: paused;
}