/* One header, one geometry. Only the surface and wordmark are scroll-linked. */
html body .product-header[data-scroll-chrome] {
  --header-progress: 0;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  translate: none !important;
  transform: none !important;
  pointer-events: auto !important;
  isolation: isolate;
}
.product-header[data-scroll-chrome]::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--edition-bg, var(--paper, var(--bg)));
  border-bottom: 1px solid var(--v-line, var(--line));
  opacity: var(--header-progress);
}
.product-header[data-scroll-chrome] [data-identity-words] {
  opacity: var(--header-progress);
}
/* Keep the approved mascot visible while its inline blinking SVG loads. */
.product-header[data-scroll-chrome] [data-identity]:not(:has(>svg))::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 24.5%;
  background: url('/favicon.svg') center / contain no-repeat;
}
.product-header[data-scroll-chrome] [data-identity]>img {
  opacity: var(--header-progress);
}

/* The kit artwork already contains its grain and pattern. Animate the whole
   cached field instead of regenerating noise or filtering every frame. */
html:root body .world-cta[data-world-cta] {
  --cta-ink: #242424;
  --cta-body: #38333c;
  --cta-field: url('/assets/brand07/coral-contour.svg');
  --cta-base: #fff9f3;
  --cta-button: #242424;
  --cta-button-ink: #f7f5ef;
  color: var(--cta-ink) !important;
  background: var(--cta-base) !important;
  background-blend-mode: normal !important;
}
html:root[data-theme=dark] body .world-cta[data-world-cta] {
  --cta-ink: #f7f5ef;
  --cta-body: #e0e6e6;
  --cta-field: url('/assets/brand07/lagoon-weave.svg');
  --cta-base: #0c161d;
  --cta-button: #f7f5ef;
  --cta-button-ink: #242424;
  color: var(--cta-ink) !important;
  background: var(--cta-base) !important;
}
html:root body .world-cta[data-world-cta]::before {
  display: block !important;
  content: '';
  position: absolute;
  inset: -7%;
  z-index: -1;
  background: var(--cta-field) center / cover !important;
  opacity: 1 !important;
  pointer-events: none;
  animation: brand-cta-drift 28s ease-in-out infinite alternate !important;
  animation-play-state: paused !important;
}
html:root body .world-cta[data-world-cta][data-v-visible=true]::before {
  animation-play-state: running !important;
}
html:root body .world-cta[data-world-cta]::after { display: none !important; }
html:root body .world-cta[data-world-cta] .world-copy :is(h2, .eyebrow, .text-link) {
  color: var(--cta-ink) !important;
  opacity: 1 !important;
}
html:root body .world-cta[data-world-cta] .world-copy>p:not(.eyebrow) {
  color: var(--cta-body) !important;
  opacity: 1 !important;
}
html:root body .world-cta[data-world-cta] .world-actions .button {
  color: var(--cta-button-ink) !important;
  background: var(--cta-button) !important;
}
html:root body .world-cta[data-world-cta] .world-actions .button:hover {
  color: var(--cta-button-ink) !important;
  background: var(--cta-button) !important;
}
@keyframes brand-cta-drift {
  from { transform: translate3d(-2%, -1%, 0) rotate(-1deg); }
  to { transform: translate3d(2%, 1%, 0) rotate(1deg); }
}
html[data-capture-active=true] body .world-cta::before,
html[data-motion=paused] body .world-cta::before,
.motion-paused .world-cta::before { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  html:root body .world-cta[data-world-cta]::before { animation: none !important; }
}
/* Enterprise opens over film even in the light theme. */
.enterprise-page .product-header[data-scroll-chrome] {
  --chrome-ink: color-mix(in srgb, #f7f5ef calc((1 - var(--header-progress)) * 100%), var(--edition-ink, #242424));
}
.enterprise-page .product-header[data-scroll-chrome] :is(.nav-login,.theme-toggle,.product-menu-toggle,.enterprise-nav>a) {
  color: var(--chrome-ink) !important;
}