/* ========================================================================
   LA GRAN BERNAL — Animations layer (additive)
   ======================================================================== */

/* ----- Smooth defaults --------------------------------------------------- */
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* ----- Floating particles in hero --------------------------------------- */
.hero { position: relative; }
.hero__particles {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.hero__particles .p {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-warm), transparent 70%);
  opacity: 0;
  animation: pFloat var(--d, 14s) linear infinite;
  animation-delay: var(--delay, 0s);
  filter: blur(.5px);
}
.hero__particles .p.large { width: 14px; height: 14px; opacity: .8; }
.hero__particles .p.dim { background: radial-gradient(circle, rgba(228,181,58,.6), transparent 70%); }
@keyframes pFloat {
  0%   { transform: translate3d(0, 110vh, 0) scale(.4); opacity: 0; }
  10%  { opacity: .8; }
  50%  { transform: translate3d(var(--dx, 30px), 50vh, 0) scale(1); }
  90%  { opacity: .5; }
  100% { transform: translate3d(var(--dx2, -20px), -20vh, 0) scale(.6); opacity: 0; }
}

/* hero mesh gets a slight scroll-driven parallax via JS variable --scrollY */
.hero__mesh { transform: translate3d(0, calc(var(--scrollY, 0) * .3px), 0) scale(1); }
.hero__grid-bg { transform: translate3d(0, calc(var(--scrollY, 0) * .15px), 0); }

/* hero reel parallax: extra wobble */
.hero__visual {
  transform: translate3d(0, calc(var(--scrollY, 0) * -.08px), 0);
  transition: transform .15s linear;
}
.hero__tag {
  animation: tagFloat 4.5s ease-in-out infinite;
}
@keyframes tagFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-8px) rotate(1deg); }
}
.hero__live {
  animation: liveFloat 5.5s ease-in-out infinite;
}
@keyframes liveFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* ----- Background ambient gradient that breathes ------------------------ */
.hero__mesh {
  animation: meshDrift 22s var(--ease-in-out) infinite alternate, meshHue 30s linear infinite;
}
@keyframes meshHue {
  0%   { filter: blur(20px) saturate(120%) hue-rotate(0deg); }
  50%  { filter: blur(24px) saturate(140%) hue-rotate(-12deg); }
  100% { filter: blur(20px) saturate(120%) hue-rotate(0deg); }
}

/* ----- Words split for section titles (JS adds .word spans) ------------ */
.split .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  margin-right: .2em;
}
.split .word > .w-in {
  display: inline-block;
  transform: translateY(115%) rotate(6deg);
  opacity: 0;
  will-change: transform, opacity;
  transition:
    transform .9s cubic-bezier(.2,.7,.2,1),
    opacity .9s cubic-bezier(.2,.7,.2,1);
}
.split.is-in .word > .w-in { transform: translateY(0) rotate(0); opacity: 1; }

/* per-word stagger */
.split.is-in .word:nth-child(1)  > .w-in { transition-delay: .02s; }
.split.is-in .word:nth-child(2)  > .w-in { transition-delay: .08s; }
.split.is-in .word:nth-child(3)  > .w-in { transition-delay: .14s; }
.split.is-in .word:nth-child(4)  > .w-in { transition-delay: .20s; }
.split.is-in .word:nth-child(5)  > .w-in { transition-delay: .26s; }
.split.is-in .word:nth-child(6)  > .w-in { transition-delay: .32s; }
.split.is-in .word:nth-child(7)  > .w-in { transition-delay: .38s; }
.split.is-in .word:nth-child(8)  > .w-in { transition-delay: .44s; }
.split.is-in .word:nth-child(9)  > .w-in { transition-delay: .50s; }
.split.is-in .word:nth-child(10) > .w-in { transition-delay: .56s; }
.split.is-in .word:nth-child(11) > .w-in { transition-delay: .62s; }
.split.is-in .word:nth-child(12) > .w-in { transition-delay: .68s; }

/* Em inside split title shimmers */
.split em {
  background: linear-gradient(120deg, var(--gold-deep), var(--gold-warm), var(--copper), var(--gold-deep));
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradShimmer 6s linear infinite;
}
.section--ink .split em {
  background: linear-gradient(120deg, var(--gold-warm), var(--gold), var(--copper), var(--gold-warm));
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradShimmer 6s linear infinite;
}
@keyframes gradShimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ----- Section eyebrow draws its line ----------------------------------- */
.section-eyebrow::before {
  transform-origin: left;
  animation: drawLine 1.1s var(--ease-out) both;
}
.reveal .section-eyebrow::before { transform: scaleX(0); animation: none; }
.reveal.is-in .section-eyebrow::before { animation: drawLine 1.1s var(--ease-out) .15s forwards; }
@keyframes drawLine {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ----- Marquee: extra life --------------------------------------------- */
.marquee {
  cursor: grab;
}
.marquee:active { cursor: grabbing; }
.marquee__track {
  will-change: transform;
}
/* Lighten/scale a marquee item on hover */
.marquee__item {
  transition: transform .4s var(--ease-bounce), color .3s ease;
}
.marquee__item:hover {
  transform: scale(1.1) rotate(-1deg);
  color: var(--gold);
}
/* Subtle vertical bob on each marquee item */
.marquee__item {
  animation: marqBob 4s ease-in-out infinite;
}
.marquee__item:nth-child(odd) { animation-delay: .8s; }
.marquee__item:nth-child(3n)  { animation-delay: 1.6s; }
@keyframes marqBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* ----- Hero title: layered shadow + cursor blink ----------------------- */
.hero__title em::before {
  content: ""; position: absolute;
  left: -4%; right: -4%; top: 6%; bottom: 6%;
  background: radial-gradient(closest-side, rgba(228,181,58,.30), transparent 70%);
  filter: blur(20px);
  z-index: -2;
  animation: emGlow 4s ease-in-out infinite alternate;
}
@keyframes emGlow {
  0%   { opacity: .55; transform: scale(.95); }
  100% { opacity: 1;   transform: scale(1.1); }
}

/* ----- Pulse dot intensified ------------------------------------------- */
.hero__eyebrow {
  animation: eyebrowSlide .9s var(--ease-out) .2s both;
}
@keyframes eyebrowSlide {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* ----- Section eyebrows fade up from below ----------------------------- */
.reveal .section-eyebrow,
.reveal .section-title,
.reveal .section-lead {
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal.is-in .section-eyebrow { opacity: 1; transform: none; transition-delay: .05s; }
.reveal.is-in .section-title   { opacity: 1; transform: none; transition-delay: .15s; }
.reveal.is-in .section-lead    { opacity: 1; transform: none; transition-delay: .30s; }

/* ----- Benefit cards: real 3D tilt ------------------------------------- */
.benefits { perspective: 1200px; }
.benefit {
  transform-style: preserve-3d;
  will-change: transform;
  transition:
    transform .3s cubic-bezier(.2,.7,.2,1),
    border-color .35s ease,
    box-shadow .35s ease;
}
.benefit__icon { transition: transform .5s var(--ease-bounce); }
.benefit:hover .benefit__icon { transform: translateZ(40px) rotate(-8deg) scale(1.1); }
.benefit__title, .benefit__body, .benefit__num {
  transition: transform .4s var(--ease-out);
}
.benefit:hover .benefit__title { transform: translateZ(24px); }
.benefit:hover .benefit__body  { transform: translateZ(14px); }
.benefit:hover .benefit__num   { transform: translateZ(8px); color: var(--gold-deep); }

/* number badge counter style */
.benefit__num { transition: color .3s ease, transform .4s var(--ease-out); }

/* ----- Categories cards: floating accent ring -------------------------- */
.cat::before {
  transition: opacity .5s ease;
}
.cat .cat__arrow {
  transition: transform .45s var(--ease-bounce), background .35s ease, color .35s ease, border-color .35s ease;
}
.cat:hover .cat__arrow { transform: rotate(-45deg) scale(1.1); }
.cat__title {
  display: inline-block;
  transition: transform .45s var(--ease-out);
}
.cat:hover .cat__title { transform: translateX(6px); }
.cat__count {
  transition: transform .45s var(--ease-out), color .3s ease;
}
.cat:hover .cat__count { transform: translateX(6px); color: var(--gold-warm); }

/* Categories: stagger entrance handled by data-stagger; add slight rotate */
.reveal[data-stagger] .cat { transform: translateY(40px) rotate(-1.5deg); }
.reveal.is-in[data-stagger] .cat { transform: none; transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }

/* ----- Product cards: shimmer sweep ------------------------------------ */
.product { position: relative; }
.product::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .8s var(--ease-out);
  pointer-events: none;
  border-radius: inherit;
  mix-blend-mode: overlay;
  opacity: 0;
}
.product:hover::after { transform: translateX(120%); opacity: 1; }
.product__media img {
  filter: saturate(.92);
  transition: transform .7s var(--ease-out), filter .5s ease;
}
.product:hover .product__media img { filter: saturate(1.15); }

/* ----- Cat filters: animated underline & ripple ------------------------ */
.cat-filter {
  overflow: hidden;
  position: relative;
}
.cat-filter::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%), rgba(228,181,58,.35), transparent 60%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.cat-filter:hover::before { opacity: 1; }
.cat-filter.active::before { opacity: 0; }

/* ----- Brand cells: subtle wobble + reveal sweep ---------------------- */
.brand-cell {
  position: relative;
  overflow: hidden;
  transform: translateY(0);
  transition: transform .45s var(--ease-bounce), color .3s ease, background .3s ease, border-color .3s ease;
}
.brand-cell::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent, rgba(228,181,58,.18), transparent);
  transform: translateX(-100%);
  transition: transform .7s var(--ease-out);
}
.brand-cell:hover { transform: translateY(-6px) scale(1.04); }
.brand-cell:hover::before { transform: translateX(100%); }

/* ----- Zones chips: float in with subtle bob -------------------------- */
.zones-list .zone {
  animation: zoneBobIn .8s var(--ease-out) both;
  will-change: transform;
}
.reveal .zones-list .zone { animation: none; opacity: 0; transform: translateY(15px) scale(.95); }
.reveal.is-in .zones-list .zone {
  animation: zoneIn .65s var(--ease-out) both;
}
@keyframes zoneIn {
  0%   { opacity: 0; transform: translateY(15px) scale(.94); }
  60%  { opacity: 1; transform: translateY(-3px) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.zones-list .zone:nth-child(1)  { animation-delay: .05s; }
.zones-list .zone:nth-child(2)  { animation-delay: .08s; }
.zones-list .zone:nth-child(3)  { animation-delay: .11s; }
.zones-list .zone:nth-child(4)  { animation-delay: .14s; }
.zones-list .zone:nth-child(5)  { animation-delay: .17s; }
.zones-list .zone:nth-child(6)  { animation-delay: .20s; }
.zones-list .zone:nth-child(7)  { animation-delay: .23s; }
.zones-list .zone:nth-child(8)  { animation-delay: .26s; }
.zones-list .zone:nth-child(9)  { animation-delay: .29s; }
.zones-list .zone:nth-child(10) { animation-delay: .32s; }
.zones-list .zone:nth-child(11) { animation-delay: .35s; }
.zones-list .zone:nth-child(12) { animation-delay: .38s; }
.zones-list .zone:nth-child(13) { animation-delay: .41s; }
.zones-list .zone:nth-child(14) { animation-delay: .44s; }
.zones-list .zone:nth-child(15) { animation-delay: .47s; }
.zones-list .zone:nth-child(16) { animation-delay: .50s; }
.zones-list .zone:nth-child(17) { animation-delay: .53s; }
.zones-list .zone:nth-child(18) { animation-delay: .56s; }
.zones-list .zone:nth-child(19) { animation-delay: .59s; }
.zones-list .zone:nth-child(20) { animation-delay: .62s; }
.zones-list .zone:nth-child(21) { animation-delay: .65s; }
.zones-list .zone:nth-child(22) { animation-delay: .68s; }
.zones-list .zone:nth-child(23) { animation-delay: .71s; }
.zones-list .zone:hover {
  transform: translateY(-4px) rotate(-1deg) scale(1.05);
}

/* ----- Map card: animated lines (extra) ------------------------------ */
.map-card svg.bg-map { animation: mapDrift 14s ease-in-out infinite alternate; }
@keyframes mapDrift {
  0%   { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-3%, 1%, 0); }
}
.map-card__title, .map-card__sub, .map-card__label { will-change: transform; }
.reveal .map-card__label, .reveal .map-card__title, .reveal .map-card__sub {
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal.is-in .map-card__label { opacity: 1; transform: none; transition-delay: .25s; }
.reveal.is-in .map-card__title { opacity: 1; transform: none; transition-delay: .35s; }
.reveal.is-in .map-card__sub   { opacity: 1; transform: none; transition-delay: .45s; }

/* ----- About paragraphs cascade ---------------------------------------- */
.reveal .about__text p {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.reveal.is-in .about__text p:nth-of-type(1) { opacity: 1; transform: none; transition-delay: .05s; }
.reveal.is-in .about__text p:nth-of-type(2) { opacity: 1; transform: none; transition-delay: .18s; }
.reveal.is-in .about__text p:nth-of-type(3) { opacity: 1; transform: none; transition-delay: .31s; }
.reveal.is-in .about__text p:nth-of-type(4) { opacity: 1; transform: none; transition-delay: .44s; }

/* ----- FAQ: open with smooth height + glow ----------------------------- */
.faq details { transition: padding .3s ease, background .3s ease; }
.faq details[open] {
  background: linear-gradient(180deg, rgba(228,181,58,.05), transparent 60%);
}
.faq summary { position: relative; }
.faq summary::before {
  content: ""; position: absolute; left: -16px; top: 50%;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  transform: translateY(-50%) scale(0);
  transition: transform .35s var(--ease-bounce);
}
.faq details[open] summary::before { transform: translateY(-50%) scale(1); }
.faq details[open] .faq-body {
  animation: faqOpen .55s var(--ease-out) both;
}
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-8px); max-height: 0; }
  to   { opacity: 1; transform: none; max-height: 500px; }
}

/* ----- CTA final: animated gradient text + button bob ----------------- */
.cta-final__title em {
  background: linear-gradient(120deg, var(--gold-warm), var(--gold), var(--copper), var(--gold-warm));
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradShimmer 6s linear infinite;
}
.cta-final::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(228,181,58,.4), transparent 50%),
    radial-gradient(1.5px 1.5px at 70% 60%, rgba(214,138,60,.4), transparent 50%),
    radial-gradient(1.5px 1.5px at 40% 80%, rgba(228,181,58,.3), transparent 50%),
    radial-gradient(2px 2px at 85% 25%, rgba(255,240,194,.4), transparent 50%),
    radial-gradient(1px 1px at 10% 70%, rgba(228,181,58,.5), transparent 50%);
  background-size: 200% 200%;
  animation: starDrift 18s linear infinite;
  opacity: .7;
  pointer-events: none;
}
@keyframes starDrift {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 200%; }
}

/* ----- Footer huge text: subtle pan ------------------------------------ */
.site-footer::before {
  animation: footerPan 12s ease-in-out infinite alternate;
}
@keyframes footerPan {
  0%   { transform: translateX(-2%); }
  100% { transform: translateX(2%); }
}

/* ----- WhatsApp float: gentle bounce + label sweep --------------------- */
.wa-float {
  animation: waBob 3.4s ease-in-out infinite;
}
@keyframes waBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.wa-float .wa-label {
  background: linear-gradient(90deg, #fff, #d4f5e0, #fff);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradShimmer 4s linear infinite;
}

/* ----- Buttons: scale + glow on hover (sin filter ni shimmer) --------- */
.btn {
  will-change: transform;
  transition:
    transform .28s cubic-bezier(.34,1.56,.64,1),
    box-shadow .35s ease;
}
.btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 14px 32px rgba(11,11,13,.22);
}
.btn--whatsapp:hover {
  box-shadow:
    0 14px 32px rgba(37,211,102,.30),
    0 0 0 3px rgba(37,211,102,.15);
}
.btn--gold:hover {
  box-shadow:
    0 16px 38px rgba(228,181,58,.40),
    0 0 0 3px rgba(228,181,58,.18);
}

/* WhatsApp float: scale + glow */
.wa-float {
  animation: waBob 3.4s ease-in-out infinite;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.wa-float:hover {
  transform: scale(1.12) translateY(-2px);
  box-shadow: 0 28px 60px rgba(37,211,102,.55), 0 0 0 6px rgba(37,211,102,.2);
  animation-play-state: paused;
}

/* ----- Header brand mark: stronger conic -------------------------------- */
.brand__mark::after { animation: spin 4s linear infinite; }
.brand:hover .brand__mark::after { animation-duration: 1.2s; }
.brand:hover .brand__mark {
  background: var(--gold);
  color: var(--ink);
}

/* ----- Counter "flash" pulse when number lands ------------------------- */
.count-pop {
  animation: countPop .6s var(--ease-bounce);
}
@keyframes countPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); color: var(--gold); }
  100% { transform: scale(1); }
}
.hero__meta-item b, .about__stat b { display: inline-block; transition: color .3s ease; }

/* ----- Scroll-y subtle parallax on map-card --------------------------- */
.map-card {
  transform: translate3d(0, calc(var(--scrollY, 0) * -.04px), 0);
  transition: transform .2s linear, box-shadow .3s ease;
}

/* ----- Brands marquee: gradient mask fade-in/out at edges -------------- */
.brands-marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

/* ----- Hero reel: hover pause + tilt on container --------------------- */
.hero__visual:hover .hero__reel-col { animation-play-state: paused; }
.hero__reel-col { will-change: transform; }
.hero__reel-card {
  transition: transform .5s var(--ease-out), filter .4s ease;
  filter: saturate(.9);
}
.hero__reel-card:hover {
  transform: scale(1.06);
  filter: saturate(1.2) brightness(1.05);
  z-index: 5;
}

/* ----- Card image gentle drift on idle --------------------------------- */
.cat__media { animation: catDrift 20s ease-in-out infinite alternate; }
@keyframes catDrift {
  0%   { transform: scale(1.02) translate(0,0); }
  100% { transform: scale(1.08) translate(-1%, -1%); }
}
.cat:hover .cat__media { animation-play-state: paused; transform: scale(1.12); }

/* ----- Section block scroll progress accent ---------------------------- */
.scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 3px;
  width: var(--p, 0%);
  background: linear-gradient(90deg, var(--gold-warm), var(--copper));
  z-index: 90;
  box-shadow: 0 0 12px rgba(228,181,58,.5);
  pointer-events: none;
  transition: width .08s linear;
}

/* ----- Reduced motion guard ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero__particles { display: none; }
  .cat__media { animation: none !important; }
  .hero__mesh { animation: meshDrift 22s ease-in-out infinite alternate !important; }
}