/*
  GAIETY copy safety layer
  Text is never dependent on JavaScript, observers or motion classes.
*/

.reveal,
.reveal.is-visible,
html.motion-ready .reveal,
html.motion-ready .reveal.is-visible,
html.ds-motion-active .reveal,
html.ds-motion-active .reveal.ds-animate,
html.ds-motion-active .reveal.ds-animate.is-visible,
html.ds-motion-active .reveal.ds-animate:not(.is-visible) {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  clip-path: none !important;
}

.word-mask,
html.ds-motion-active .word-mask {
  overflow: visible !important;
}

.word-inner,
html.ds-motion-active .word-inner,
html.ds-motion-active .is-visible .word-inner,
html.ds-motion-active body.is-loaded .hero-copy .word-inner {
  opacity: 1 !important;
  transform: none !important;
}

/* Preserve layout transforms that are structural rather than decorative. */
.cinematic-copy.reveal,
.cinematic-copy.reveal.is-visible,
html.motion-ready .cinematic-copy.reveal,
html.ds-motion-active .cinematic-copy.reveal {
  transform: translateY(-50%) !important;
}

/* The base stylesheet gives reveal elements an entrance offset. Remove it safely
   from regular content while leaving the holodex 3D composition untouched. */
.reveal:not(.cinematic-copy):not(.holodex-card) {
  transform: none !important;
}

/* Copy remains available even when scripts are blocked or fail. */
.hero-copy,
.intro-copy,
.cinematic-copy,
.anatomy-heading,
.holodex-copy,
.section-heading,
.text-card > div,
.card-caption,
.specs-grid,
.water-alert,
.trust-head,
.trust-item,
.offer-copy,
.promise-copy,
.faq-title,
.faq-list,
.footer-brand,
.footer-links,
.footer-bottom {
  visibility: visible !important;
}

/* New editorial image for the technical plate card. */
.poster-card > img {
  content: url("7e16370e-033a-4f3d-96bb-0c65e66827f1.png");
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  opacity: 1 !important;
}

/* Conversion-forward CTA system */
.site-header:not(.is-solid) .header-buy {
  color: #003d28;
  background: #fff;
  border-color: #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,.2);
}

.header-buy {
  min-width: 152px;
  text-align: center;
  font-weight: 800;
  letter-spacing: .025em;
}

.hero-actions {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-top: 31px;
}

.hero-buy-primary {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 34px;
  min-width: min(440px, 100%);
  min-height: 68px;
  padding: 13px 16px 13px 23px;
  overflow: hidden;
  color: #fff;
  background: #006039;
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 22px 50px rgba(0,0,0,.3);
  font-size: .79rem;
  font-weight: 800;
  letter-spacing: .035em;
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.hero-buy-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 22%, rgba(255,255,255,.19), transparent 58%);
  transform: translateX(-120%);
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}

.hero-buy-primary:hover {
  transform: translateY(-2px);
  background: #007749;
  box-shadow: 0 28px 60px rgba(0,0,0,.38);
}

.hero-buy-primary:hover::before { transform: translateX(120%); }

.hero-buy-primary > span {
  display: grid;
  gap: 4px;
}

.hero-buy-primary small {
  font-size: .57rem;
  font-weight: 700;
  letter-spacing: .09em;
  line-height: 1.2;
  text-transform: uppercase;
  color: rgba(255,255,255,.76);
}

.hero-buy-primary strong {
  min-width: 112px;
  padding: 12px 14px;
  color: #183226;
  background: #f5f0e5;
  font: 700 1.65rem/1 "Cormorant Garamond", Georgia, serif;
  text-align: center;
}

.hero-discover {
  display: grid;
  place-items: center;
  min-height: 68px;
  padding: 0 22px;
  border: 1px solid rgba(255,255,255,.46);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  backdrop-filter: blur(8px);
  transition: background .25s ease, border-color .25s ease;
}

.hero-discover:hover {
  background: rgba(255,255,255,.12);
  border-color: #fff;
}

.desktop-buy-dock {
  position: fixed;
  z-index: 58;
  right: 24px;
  bottom: 24px;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 22px;
  min-width: 330px;
  padding: 12px 12px 12px 19px;
  color: #153126;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,96,57,.22);
  box-shadow: 0 25px 70px rgba(0,39,25,.27);
  backdrop-filter: blur(18px);
}

.desktop-buy-dock div { display: grid; gap: 3px; }
.desktop-buy-dock span {
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(21,49,38,.62);
}
.desktop-buy-dock small {
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #006039;
}
.desktop-buy-dock strong {
  font: 700 1.65rem/1 "Cormorant Garamond", Georgia, serif;
}
.desktop-buy-dock b {
  display: grid;
  place-items: center;
  min-height: 48px;
  padding: 0 22px;
  color: #fff;
  background: #006039;
  font-size: .72rem;
  letter-spacing: .035em;
  transition: background .25s ease, transform .25s ease;
}
.desktop-buy-dock:hover b { background: #007749; transform: translateX(2px); }

.mobile-buy > div {
  display: grid;
  gap: 2px;
}

.mobile-buy small {
  font-size: .55rem;
  font-weight: 700;
  line-height: 1.15;
  color: #006039;
}

.mobile-buy a {
  min-width: 132px;
  background: #006039;
  color: #fff;
  font-weight: 800;
}

@media (max-width: 900px) {
  .desktop-buy-dock { display: none; }
  .header-buy { min-width: auto; }
  .hero-actions { display: grid; width: 100%; }
  .hero-buy-primary { min-width: 0; width: 100%; }
  .hero-discover { min-height: 54px; }
  .hero-copy { bottom: clamp(112px, 15vh, 160px); }
}

@media (max-width: 560px) {
  .hero h1 { margin-bottom: 0; }
  .hero-actions { margin-top: 23px; gap: 9px; }
  .hero-buy-primary {
    min-height: 62px;
    padding-left: 18px;
    gap: 14px;
  }
  .hero-buy-primary strong {
    min-width: 98px;
    font-size: 1.42rem;
  }
  .hero-buy-primary small { font-size: .52rem; }
  .hero-discover { display: none; }
  .site-header .header-buy { padding: 9px 12px; font-size: .67rem; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .word-inner,
  .hero-buy-primary,
  .hero-buy-primary::before,
  .desktop-buy-dock b {
    transition: none !important;
    animation: none !important;
  }
}