/* =====================================================================
   Etapa 2 — capa inmersiva (atmósfera, parallax, micro-interacciones)
   ===================================================================== */

/* Atmósfera dorada sobre todo el scroll.
   mix-blend-mode:screen → brilla en secciones oscuras (marino), casi invisible en crema. */
.atmos{position:fixed;inset:0;z-index:30;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.atmos__neb{position:absolute;border-radius:50%;filter:blur(46px);
  animation:atmosDrift 40s ease-in-out infinite alternate}

/* Brillo dorado que sigue el cursor (solo escritorio). */
.cursor-glow{position:fixed;left:0;top:0;width:320px;height:320px;border-radius:50%;pointer-events:none;
  z-index:34;mix-blend-mode:screen;opacity:0;transition:opacity .6s ease;will-change:transform;
  background:radial-gradient(circle, rgba(201,162,78,.16), rgba(150,186,222,.06) 45%, transparent 66%)}
.cursor-glow.on{opacity:1}

@keyframes atmosUp{to{transform:translateY(-114vh)}}
@keyframes atmosSway{from{transform:translateX(-10px)}to{transform:translateX(10px)}}
@keyframes atmosDrift{from{transform:translate(-6%,0)}to{transform:translate(8%,-4%)}}

@media (prefers-reduced-motion: reduce){ .atmos,.cursor-glow{display:none} }

/* =====================================================================
   Etapa 2c — micro-detalles
   Estados iniciales ocultos SOLO bajo .fx (JS activo, sin reduce-motion).
   ===================================================================== */

/* Tarjetas: inclinación 3D + reflejo especular (el JS mueve --gx/--gy). */
.tarjeta,.tarjeta-info{transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;position:relative}
.card-glare{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2;
  border-radius:inherit;
  background:radial-gradient(230px circle at var(--gx,50%) var(--gy,0%),
    rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 34%, rgba(30,55,75,.07) 78%)}
.tarjeta.tilt-on,.tarjeta-info.tilt-on{box-shadow:0 42px 74px -40px rgba(33,63,85,.62)}
.tarjeta.tilt-on .card-glare,.tarjeta-info.tilt-on .card-glare{opacity:1}

/* Umbral dorado: filete que crece del centro al cruzar a las secciones marino. */
.fx .seccion--marino::before{content:"";position:absolute;left:8%;right:8%;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--oro-vivo) 30%,var(--oro-claro) 50%,var(--oro-vivo) 70%,transparent);
  transform:scaleX(0);transition:transform 1.6s cubic-bezier(.2,.7,.2,1) .1s}
.fx .seccion--marino.umbral::before{transform:scaleX(1)}

/* Historia: la foto se revela como abriéndose un telón (cortina + leve zoom). */
.fx .historia__foto .foto-slot{clip-path:inset(0 0 100% 0);transform:scale(1.06);
  transition:clip-path 1.35s cubic-bezier(.2,.7,.2,1) .2s, transform 1.9s cubic-bezier(.2,.7,.2,1) .2s}
.fx .historia__foto.cortina .foto-slot{clip-path:inset(0 0 0 0);transform:scale(1)}

/* Dress code: swatches con pop escalonado. */
.fx .swatch{opacity:0;transform:scale(.5) translateY(12px)}
.swatches.pop .swatch{animation:swatchPop .55s cubic-bezier(.2,.85,.3,1.45) both}
@keyframes swatchPop{to{opacity:1;transform:none}}
.swatch__disco{transition:transform .3s ease}
.swatch:hover .swatch__disco{transform:translateY(-4px) scale(1.06)}

/* Galería: cascada al aparecer (transform/opacity los pone el JS). */
.fx .galeria__grid .foto-slot{opacity:0;will-change:transform}

/* Luna de miel: chispas doradas en el frente de la barra. */
.meta{position:relative}
.meta-sparks{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:visible}
.spark{position:absolute;width:5px;height:5px;border-radius:50%;will-change:transform,opacity;
  background:radial-gradient(circle,#FFF6D8,#C9A24E 62%,transparent);
  box-shadow:0 0 8px 2px rgba(201,162,78,.6)}

/* CTA principales: barrido de luz al entrar en pantalla. */
.cta-shine{position:relative;overflow:hidden}
.cta-shine::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;pointer-events:none;
  transform:skewX(-18deg);opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent)}
.cta-shine.shine::after{animation:ctaShine 1.15s ease forwards}
@keyframes ctaShine{0%{left:-60%;opacity:0}14%{opacity:1}100%{left:135%;opacity:0}}

@media (prefers-reduced-motion: reduce){
  .fx .swatch,.fx .galeria__grid .foto-slot{opacity:1}
  .fx .historia__foto .foto-slot{clip-path:none;transform:none;transition:none}
  .meta-sparks,.card-glare{display:none}
}