/* ==========================================================================
   KINETIC MOTION LAYER — index.html only
   Kinetic typography, marquee band, magnetic buttons, 3D tilt, parallax
   ========================================================================== */

:root {
  --k-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Scroll progress bar --- */
.k-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2.5px;
  z-index: 9999;
  background: linear-gradient(90deg, var(--emerald-bright), var(--gold-primary));
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.65);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
  pointer-events: none;
}

/* --- Kinetic word masks (split by JS) --- */
.k-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.k-inner {
  display: inline-block;
  transform: translateY(125%) rotate(4deg);
  opacity: 0;
  transition:
    transform 1.05s var(--k-ease),
    opacity 0.65s ease;
  transition-delay: var(--kd, 0s);
  will-change: transform, opacity;
}

.k-in .k-inner {
  transform: translateY(0) rotate(0deg);
  opacity: 1;
}

/* Soft variant — paragraphs: gentle rise + fade, no hard mask */
.k-soft .k-inner {
  transform: translateY(16px);
  transition-duration: 0.75s, 0.6s;
}
.k-soft.k-in .k-inner { transform: translateY(0); }

/* Gradient words: paint rich burnished gold on the moving word itself */
.k-split .text-gold-gradient {
  background: none;
  -webkit-text-fill-color: initial;
  color: inherit;
  animation: none;
}
.k-split .text-gold-gradient .k-inner {
  background-image: linear-gradient(135deg, #34d399 0%, #a3e635 55%, #10b981 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 800;
}

/* --- Kinetic marquee band (Refined Luxury Botanical Ribbon) --- */
.k-marquee-band {
  position: relative;
  overflow: hidden;
  padding: 16px 0;
  background: rgba(6, 18, 12, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(74, 222, 128, 0.16);
  border-bottom: 1px solid rgba(74, 222, 128, 0.16);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  width: 100%;
}

.k-marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
  white-space: nowrap;
  width: 100%;
}

.k-marquee-track {
  display: inline-flex;
  width: max-content;
  flex-shrink: 0;
  will-change: transform;
}

.k-track-left {
  animation: k-marquee-left 28s linear infinite;
}

.k-track-right {
  animation: k-marquee-right 28s linear infinite;
}

.k-marquee-band:hover .k-marquee-track {
  animation-play-state: paused;
}

.marquee-content {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  padding-right: 32px;
  flex-shrink: 0;
  white-space: nowrap;
}

.marquee-content span {
  font-family: var(--font-heading);
  font-size: clamp(0.98rem, 1.5vw, 1.3rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.marquee-content .k-sep {
  font-size: 0.95em;
  color: var(--lime-accent);
  opacity: 0.85;
  display: inline-block;
  animation: k-spin 12s linear infinite;
}

.k-row-solid .marquee-content span {
  color: var(--emerald-bright);
}

.k-row-outline {
  margin-top: 6px;
}

.k-row-outline .marquee-content span {
  color: transparent;
  -webkit-text-stroke: 1px rgba(163, 230, 53, 0.55);
}

@keyframes k-marquee-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes k-marquee-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

@keyframes k-spin {
  to { transform: rotate(360deg); }
}

/* --- Kinetic nav underline sweep --- */
.desktop-nav .nav-item {
  position: relative;
}
.desktop-nav .nav-item::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-primary), var(--emerald-bright));
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.5s var(--k-ease);
}
.desktop-nav .nav-item:hover::after,
.desktop-nav .nav-item.active::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

/* --- Magnetic buttons --- */
.k-mag {
  will-change: transform;
  transition: all 0.4s var(--k-ease);
}
.k-mag.k-mag-live {
  transition: none;
}

/* --- 3D tilt cards --- */
.bento-card,
.product-card,
.cta-glass-card {
  transform-style: preserve-3d;
}
.k-tilt {
  will-change: transform;
  transition: transform 0.35s var(--k-ease);
}
.k-tilt.k-tilt-live {
  transition: transform 0.08s linear;
}

/* --- Product image hover lift --- */
.product-thumb-img {
  transition: transform 0.55s var(--k-ease), filter 0.55s ease;
}
.product-card:hover .product-thumb-img {
  transform: translateY(-10px) scale(1.06);
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.55));
}

/* --- Protocol number pop --- */
.protocol-step.is-visible .protocol-num,
.protocol-step .protocol-num {
  transition: transform 0.6s var(--k-ease), filter 0.6s ease;
}
.protocol-step:hover .protocol-num {
  transform: translateY(-4px) scale(1.08);
  filter: drop-shadow(0 0 24px rgba(163, 230, 53, 0.6));
}

/* ==========================================================================
   LINEMAN-STYLE SECTION & CARD REVEAL CHOREOGRAPHY
   Zero extra libraries — 100% GPU accelerated via IntersectionObserver
   ========================================================================== */

/* 1. Generic Section Elements with [data-reveal] (Headings, Eyebrows, Filter Bar, Callouts) */
/* Exclude hero elements so hero remains fully visible & instant */
section:not(.hero-luxury) [data-reveal],
footer [data-reveal] {
  opacity: 0;
  transform: translateY(56px);
  transition:
    opacity 0.9s var(--k-ease),
    transform 0.9s var(--k-ease);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}

section:not(.hero-luxury) [data-reveal].is-visible,
footer [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Ensure Hero stays completely visible */
.hero-luxury [data-reveal],
.hero-visual-card,
.hero-stage,
.hero-product-image {
  opacity: 1 !important;
  transform: none;
}

/* 2. Staggered Cards Entrance (Manifesto Pillars, Products, Bento Cards, Regimen Steps) */
.k-card-reveal {
  opacity: 0;
  transform: translateY(60px) scale(0.94);
  transition:
    opacity 0.95s var(--k-ease),
    transform 0.95s var(--k-ease),
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease;
  will-change: opacity, transform;
}

.k-card-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 3. Luxury Product Card Pedestal & Image Reveal */
.luxury-product-card .card-product-img {
  transform: translateY(0) scale(1);
  opacity: 1;
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 0.35s ease;
  will-change: transform, filter;
}

.luxury-product-card.is-visible .card-product-img {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.luxury-product-card:hover .card-product-img {
  transform: translateY(-8px) scale(1.05);
  filter: drop-shadow(0 20px 32px rgba(0, 0, 0, 0.75));
}

/* 4. Manifesto Pillars Hover & Focus */
.pillar-item {
  transition:
    opacity 0.85s var(--k-ease),
    transform 0.85s var(--k-ease),
    border-color 0.35s ease,
    background 0.35s ease;
}

.pillar-item .pillar-num {
  display: inline-block;
  transform: translateX(-16px);
  opacity: 0;
  transition: transform 0.85s var(--k-ease), opacity 0.85s ease;
}

.pillar-item.is-visible .pillar-num {
  transform: translateX(0);
  opacity: 1;
}

.pillar-item:hover {
  transform: translateY(-4px);
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(16, 185, 129, 0.04);
}

/* 5. Bento Card Icons Pop */
.bento-card .bento-icon-box {
  transform: scale(0.65) rotate(-10deg);
  opacity: 0;
  transition:
    transform 0.85s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.85s ease;
}

.bento-card.is-visible .bento-icon-box {
  transform: scale(1) rotate(0deg);
  opacity: 1;
}

/* 6. Regimen Steps Hover & Number Pop with Spring Bounce */
.regimen-card {
  transition:
    opacity 0.85s var(--k-ease),
    transform 0.85s var(--k-ease),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.regimen-card .regimen-num {
  display: inline-block;
  transform: scale(0.55) translateY(14px);
  opacity: 0;
  transition:
    transform 0.85s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.85s ease;
}

.regimen-card.is-visible .regimen-num {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.regimen-card:hover {
  transform: translateY(-5px);
  border-color: rgba(52, 211, 153, 0.35);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
}

.regimen-card:hover .regimen-num {
  color: var(--emerald-bright);
  text-shadow: 0 0 16px rgba(52, 211, 153, 0.5);
}

/* 7. Institutional Capsule Reveal */
.institutional-capsule {
  transition:
    opacity 0.95s var(--k-ease),
    transform 0.95s var(--k-ease);
}

/* --- Hero stage mouse parallax (JS sets translate on inner layers) --- */
.hero-stage {
  transition: transform 0.5s var(--k-ease);
  will-change: transform;
}
.hero-grid-lines {
  transition: transform 0.7s var(--k-ease);
  will-change: transform;
}

/* --- Framer Motion parallax wrapper --- */
.k-parallax-layer {
  width: 100%;
  will-change: transform;
}

/* --- Framer Motion active: Motion owns transforms per-frame,
       so CSS transitions must not interpolate them --- */
.fm-active [data-reveal],
.fm-active .k-inner,
.fm-active .k-reveal,
.fm-active .hero-stage,
.fm-active .hero-grid-lines,
.fm-active .btn-gold,
.fm-active .btn-whatsapp-pill,
.fm-active .bento-card,
.fm-active .product-card,
.fm-active .cta-glass-card {
  transition-property: background-color, border-color, box-shadow, filter;
  transition-duration: 0.35s;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .k-marquee-band { padding: 30px 0; }
  .k-marquee-track > span { gap: 26px; padding-right: 26px; }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .k-progress { display: none; }
  .k-word { display: inline; padding: 0; margin: 0; overflow: visible; }
  .k-inner { transform: none !important; opacity: 1 !important; transition: none !important; animation: none !important; }
  .k-marquee-track,
  .k-marquee-track > span,
  .k-sep { animation: none !important; }
  .k-mag, .k-tilt, .hero-stage, .hero-grid-lines { transform: none !important; transition: none !important; }
}