/* Animaciones premium. Se cargan despues de styles.css */
:root { --ease: cubic-bezier(.16, 1, .3, 1); }
/* Evita scroll horizontal por los elementos que entran desde los lados */
html, body { overflow-x: clip; }

/* ---------- Revelado al hacer scroll ---------- */
.js [data-r] {
  opacity: 0; transform: translateY(36px); filter: blur(6px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.js [data-r="left"]  { transform: translateX(-48px); }
.js [data-r="right"] { transform: translateX(48px); }
.js [data-r="zoom"]  { transform: scale(.94); }
.js [data-r].in { opacity: 1; transform: none; filter: none; }

/* ---------- Titulares del hero (mascara por linea) ---------- */
.hero h1 .line { display: block; overflow: hidden; padding-bottom: .08em; }
.hero h1 .line > span {
  display: block; transform: translateY(115%); opacity: 0;
  animation: lineUp 1.2s var(--ease) forwards;
  animation-delay: calc(.55s + var(--i, 0) * .16s);
}
@keyframes lineUp { to { transform: none; opacity: 1; } }

/* ---------- Titulos de seccion con linea dorada ---------- */
.section__title { position: relative; padding-bottom: 18px; }
.section__title::after {
  content: ""; position: absolute; left: 50%; bottom: 0; height: 1px; width: 0;
  background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
  transform: translateX(-50%); transition: width 1.4s var(--ease) .3s;
}
.section__title--left::after { left: 0; transform: none; background: linear-gradient(90deg, var(--gold-2), transparent); }
.section__title.in::after { width: 140px; }

/* ---------- Logo animado (video) ---------- */
/* El video tiene fondo negro: "screen" lo hace invisible sobre el verde y deja solo el trazo dorado. */
.logo-anim {
  position: relative; display: grid; width: min(100%, 300px); justify-self: center;
  mix-blend-mode: screen;
  animation: logoIn 2s var(--ease) both, logoFloat 8s ease-in-out 2s infinite;
}
.logo-anim::before {
  content: ""; position: absolute; inset: -12%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(201, 162, 77, .20), transparent 70%);
  animation: logoGlow 5s ease-in-out infinite;
}
.logo-tilt {
  position: relative; display: grid;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s var(--ease);
}
.logo-video {
  display: block; width: 100%; aspect-ratio: 720 / 1050; object-fit: cover; object-position: 50% 25%;
  background: #000; pointer-events: none;
}
@keyframes logoIn {
  from { opacity: 0; transform: scale(.88) translateY(26px); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes logoFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes logoGlow { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* Logo del encabezado */
.brand .emblem { transition: transform .8s var(--ease), filter .8s var(--ease); }
.brand:hover .emblem { transform: rotate(-4deg) scale(1.08); filter: drop-shadow(0 0 10px rgba(232, 205, 130, .5)); }
.brand__text strong { background: linear-gradient(100deg, #c9a24d 20%, #fff1b8 45%, #c9a24d 70%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: textShine 7s ease-in-out 1s infinite; }
@keyframes textShine { 0% { background-position: 160% 0; } 40%, 100% { background-position: -60% 0; } }

/* ---------- Particulas de oro en el hero ---------- */
.hero { position: relative; }
.gold-dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.hero > *:not(.gold-dust) { position: relative; z-index: 1; }

/* ---------- Header ---------- */
.header { transition: padding .5s var(--ease), box-shadow .5s var(--ease), background .5s; }
.header.scrolled { padding-top: 8px; padding-bottom: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); background: rgba(5, 24, 18, .95); }
.header .emblem--sm { transition: width .5s var(--ease); }
.header.scrolled .emblem--sm { width: 36px; }
.nav a { position: relative; border-bottom: 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold-2); transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease); }
.nav a:hover::after, .nav a.active::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Botones: destello ---------- */
.btn { position: relative; overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease), filter .3s, background .3s; }
.btn::before { content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 50%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); transition: left .9s var(--ease); pointer-events: none; }
.btn:hover::before { left: 130%; }
.btn--gold:hover { box-shadow: 0 8px 26px rgba(201, 162, 77, .35); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.97); }

/* ---------- Fotos del hero ---------- */
.hero__photos .photo { clip-path: inset(100% 0 0 0 round 10px); animation: photoIn 1.5s var(--ease) forwards; transition: transform .9s var(--ease); }
.hero__photos .photo--model { animation-delay: .9s; }
.hero__photos .photo--nugget { animation-delay: 1.15s; }
@keyframes photoIn { to { clip-path: inset(0 0 0 0 round 10px); } }
.hero__photos .photo { translate: 0 var(--py, 0px); }
.hero__photos .photo:hover { transform: scale(1.025); }

/* ---------- Tarjetas de producto ---------- */
.card__img { transition: transform .8s var(--ease), box-shadow .8s var(--ease); }
.card:hover .card__img { transform: translateY(-6px); box-shadow: 0 22px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(201, 162, 77, .45); }
.card__img img { transition: transform 1.2s var(--ease); }
.card:hover .card__img img { transform: scale(1.07); }
.card__img svg { transition: transform 1s var(--ease); }
.card:hover .card__img svg { transform: scale(1.1) rotate(-3deg); }
.badge { animation: badgePulse 3s ease-in-out infinite; }
@keyframes badgePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232, 205, 130, 0); } 50% { box-shadow: 0 0 14px 0 rgba(232, 205, 130, .45); } }

/* ---------- Carrito ---------- */
.drawer { transition: transform .7s var(--ease); }
.overlay { animation: fadeIn .5s ease both; }
@keyframes fadeIn { from { opacity: 0; } }
.btn--cart.bump { animation: bump .6s var(--ease); }
@keyframes bump { 30% { transform: scale(1.12); } 100% { transform: scale(1); } }
.modal { animation: fadeIn .4s ease both; }
.modal__box { animation: modalIn .7s var(--ease) both; }
@keyframes modalIn { from { opacity: 0; transform: translateY(30px) scale(.97); } }

/* ---------- Otros ---------- */
.social-card, .location__info, .knowledge { transition: border-color .6s, box-shadow .6s var(--ease); }
.social-card:hover, .location__info:hover, .knowledge:hover { border-color: rgba(232, 205, 130, .6); box-shadow: 0 18px 40px rgba(0, 0, 0, .3); }
.map { animation: logoFloat 7s ease-in-out infinite; filter: drop-shadow(0 0 12px rgba(201, 162, 77, .25)); }
.wa__btn { animation: waPulse 2.4s infinite, waIn 1s var(--ease) 1.2s both; }
@keyframes waIn { from { opacity: 0; transform: scale(.3); } }

/* ---------- Accesibilidad: sin movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-r] { opacity: 1; transform: none; filter: none; transition: none; }
  .hero h1 .line > span, .logo-anim, .logo-anim::before, .hero__photos .photo,
  .brand__text strong, .badge, .map, .wa__btn { animation: none !important; }
  .hero h1 .line > span { transform: none; opacity: 1; }
  .hero__photos .photo { clip-path: none; }
  .section__title::after { width: 140px; transition: none; }
  .gold-dust { display: none; }
}

/* ---------- Fotos con movimiento (efecto Ken Burns) ---------- */
.photo > .kb, .photo::before {
  content: ""; position: absolute; inset: 0; background: inherit; border-radius: inherit;
  animation: kenburns 16s ease-in-out infinite alternate; will-change: transform;
}
.hero__photos .photo--nugget::before { animation-name: kenburnsB; animation-duration: 19s; }
.photo--forge::before { animation-name: kenburnsC; animation-duration: 21s; }
@keyframes kenburns  { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.16) translate(-3%, -2.5%); } }
@keyframes kenburnsB { from { transform: scale(1.16) translate(2.5%, 2%); } to { transform: scale(1.03) translate(-1%, 0); } }
@keyframes kenburnsC { from { transform: scale(1.04) translate(-2%, 1%); } to { transform: scale(1.15) translate(2.5%, -2%); } }
/* Fotos de producto: deriva lenta */
.card__img img { animation: kenburnsB 18s ease-in-out infinite alternate; }
.card:hover .card__img img { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .photo::before, .card__img img { animation: none !important; } }

/* ---------- Foto: Nuestra Historia ---------- */
.story { aspect-ratio: 1024 / 640; min-height: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #061b14; box-shadow: 0 24px 50px rgba(0, 0, 0, .35); }
.story img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; animation: kenburnsB 20s ease-in-out infinite alternate; }
/* Video encima de la foto (se muestra cuando ya cargó) */
.story { position: relative; }
.story video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; opacity: 0; transition: opacity .9s ease; background: #061b14; pointer-events: none; }
.story.is-live video { opacity: 1; }
.story.is-live.is-rest video { opacity: 0; }   /* entre vuelta y vuelta se disuelve hacia la foto */
.story__hint { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; font-size: 12px; letter-spacing: .6px; color: var(--gold-1); background: rgba(5, 24, 18, .72); border: 1px solid var(--line); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity .6s, transform .6s var(--ease); }
.story__hint.gone { opacity: 0; transform: translateY(6px); }
.story:hover .story__hint { opacity: 0; }
@media (max-width: 900px) { .story { aspect-ratio: 4 / 3; } }
@media (prefers-reduced-motion: reduce) { .story img { animation: none; } }

/* ---------- Batea interactiva (El Saber del Barequeo) ---------- */
.rock-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: none; width: min(340px, 100%); }
.rock { --wash: 0; position: relative; width: 100%; aspect-ratio: 669 / 373; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: 18px; display: block; }
.b-clip { position: absolute; inset: 0; overflow: hidden; border-radius: 18px; }
.rock:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 6px; }
.rock-hint { margin: 0; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold-2); min-height: 1.4em; text-align: center; max-width: 320px; }
/* La imagen se amplia un poco para que los bordes de las mangas queden fuera del recuadro al agitar */
.b-shake { position: absolute; inset: 0; transform-origin: 50% 70%; }
.b-fit { position: absolute; inset: 0; transform: scale(1.1); transform-origin: 50% 55%; animation: bSway 4.6s ease-in-out infinite alternate; }
@keyframes bSway { from { transform: scale(1.1) rotate(-.7deg); } to { transform: scale(1.1) rotate(.7deg) translateY(-1px); } }
.b-img { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.b-ov { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.b-ov * { transform-box: view-box; }
.rock.shake .b-shake { animation: bShake .75s cubic-bezier(.3, .7, .4, 1); }
@keyframes bShake {
  0%, 100% { transform: none; }
  12% { transform: translate(-9px, 3px) rotate(-3.2deg); }
  26% { transform: translate(8px, -4px) rotate(3deg); }
  40% { transform: translate(-7px, 3px) rotate(-2.4deg); }
  54% { transform: translate(5px, -2px) rotate(1.8deg); }
  70% { transform: translate(-3px, 1px) rotate(-1deg); }
  85% { transform: translate(1px, 0) rotate(.4deg); }
}

/* Agua que limpia el barro: crece desde el centro con cada toque */
.b-wash { transform-origin: 346px 128px; transform: scale(var(--wash)); opacity: 0; transition: transform 1s cubic-bezier(.2, .8, .3, 1), opacity .6s; }
.washed .b-wash { opacity: .94; }
.b-ripples ellipse { transform-origin: 346px 128px; opacity: 0; }
.rock.shake .b-ripples .r1 { animation: bRipple 1.1s ease-out; }
.rock.shake .b-ripples .r2 { animation: bRipple 1.1s ease-out .15s; }
.rock.shake .b-ripples .r3 { animation: bRipple 1.1s ease-out .3s; }
@keyframes bRipple { from { transform: scale(.4); opacity: .8; } to { transform: scale(3.4); opacity: 0; } }

/* Oro */
.b-ng { opacity: 0; transform-origin: center; transform-box: fill-box; scale: .2; transition: opacity .5s, scale .6s cubic-bezier(.2, 1.6, .3, 1); transition-delay: calc(var(--i) * .07s); }
.b-ng.on { opacity: 1; scale: 1; }
.broken .b-ng.on { animation: bGlint 1.4s ease-in-out infinite; animation-delay: calc(var(--i) * .15s); }
@keyframes bGlint { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.6) drop-shadow(0 0 4px #fff3c0); } }
.b-star { transform-origin: center; transform-box: fill-box; animation: rkTwinkle 2.6s ease-in-out infinite; }
.b-glint { transition: opacity .4s; }
.washed .b-glint { opacity: 0; }

/* Rayos al aparecer el oro */
.b-rays { opacity: 0; transform-origin: 346px 122px; transition: opacity .6s; }
.broken .b-rays { opacity: .6; animation: rkRays 10s linear infinite; }
@keyframes rkRays { to { transform: rotate(360deg); } }
@keyframes rkTwinkle { 0%, 100% { transform: scale(.15) rotate(0); opacity: 0; } 45% { transform: scale(1) rotate(45deg); opacity: 1; } 70% { transform: scale(.4) rotate(70deg); opacity: .4; } }

/* Chispas y gotas */
.rk-spark { position: absolute; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; z-index: 3;
  background: radial-gradient(circle, #fff 0, #f6dc86 45%, rgba(240, 207, 106, 0) 72%);
  transform: translate(-50%, -50%); animation: rkSpark var(--t, 1s) cubic-bezier(.1, .7, .3, 1) forwards; }
.rk-spark.drop { background: radial-gradient(circle, #fff 0, #bfe8da 45%, rgba(159, 216, 194, 0) 72%); width: 6px; height: 8px; }
@keyframes rkSpark {
  from { transform: translate(-50%, -50%) scale(var(--s, 1)); opacity: 1; }
  to   { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0); opacity: 0; }
}

/* La pagina se enciende */
.gold-flash { position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%), rgba(255, 246, 200, .95) 0, rgba(240, 207, 106, .6) 16%, rgba(232, 190, 90, .22) 42%, rgba(232, 190, 90, 0) 78%); }
.gold-flash.on { animation: rkFlash 5.5s ease-out forwards; }
@keyframes rkFlash { 0% { opacity: 0; } 5% { opacity: 1; } 22% { opacity: .55; } 70% { opacity: .22; } 100% { opacity: 0; } }

@media (max-width: 900px) { .rock-wrap { width: min(320px, 100%); } }
@media (prefers-reduced-motion: reduce) {
  .b-fit, .b-star, .broken .b-ng.on, .broken .b-rays { animation: none !important; }
  .rock.shake .b-shake, .rock.shake .b-ripples ellipse { animation: none; }
  .b-wash, .b-ng { transition-duration: .01s; }
  .gold-flash.on { animation-duration: 2s; }
}