/* ============================================================
   OSCORP CAMERAS — oscor-fx.css
   Capa de efectos premium. Aditiva, scoped a .js-fx.
   Paleta: oro #c49a2a · negro #080605 · crema #ece0ce
   ============================================================ */

/* ---------- 1. INTRO · OBTURADOR / IRIS ---------- */
.fx-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #080605;
  display: grid;
  place-items: center;
  /* Iris: el overlay oscuro se retrae desde el centro hacia los bordes */
  clip-path: circle(150% at 50% 50%);
  transition: clip-path 0.9s cubic-bezier(0.85, 0, 0.15, 1), opacity 0.6s ease 0.4s;
  will-change: clip-path;
}
.fx-intro--out {
  clip-path: circle(0% at 50% 50%);
  opacity: 0;
  pointer-events: none;
}
/* Aros de diafragma girando */
.fx-intro__blades {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      transparent 0deg, rgba(196,154,42,.45) 18deg, transparent 36deg,
      transparent 60deg, rgba(196,154,42,.30) 78deg, transparent 96deg,
      transparent 120deg, rgba(196,154,42,.45) 138deg, transparent 156deg,
      transparent 180deg, rgba(196,154,42,.30) 198deg, transparent 216deg,
      transparent 240deg, rgba(196,154,42,.45) 258deg, transparent 276deg,
      transparent 300deg, rgba(196,154,42,.30) 318deg, transparent 336deg);
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 39%, #000 49%, transparent 50%);
          mask: radial-gradient(circle, transparent 38%, #000 39%, #000 49%, transparent 50%);
  animation: fxBlades 1.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  opacity: 0;
}
@keyframes fxBlades {
  0%   { transform: rotate(-60deg) scale(.7); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: rotate(40deg) scale(1.25); opacity: 0; }
}
.fx-intro__brand {
  position: relative;
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: .18em;
  font-size: clamp(1.1rem, 4vw, 1.9rem);
  color: #ece0ce;
  opacity: 0;
  animation: fxBrand 1.15s ease forwards;
}
.fx-intro__brand span { color: #c49a2a; }
@keyframes fxBrand {
  0%   { opacity: 0; letter-spacing: .5em; filter: blur(6px); }
  30%  { opacity: 1; filter: blur(0); }
  80%  { opacity: 1; }
  100% { opacity: .85; letter-spacing: .22em; }
}
.fx-intro-lock { overflow: hidden; }

/* ---------- 2. REVELADO DE TEXTO POR PALABRAS ---------- */
.js-fx .fx-split { /* el contenedor ya tiene su tipografía */ }
.fx-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* el padding evita recortar tildes/colas de letras */
  padding: 0.12em 0.02em;
  margin: -0.12em -0.02em;
}
.fx-wi {
  display: inline-block;
  transform: translateY(115%) rotate(3deg);
  opacity: 0;
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              opacity  0.6s ease;
  will-change: transform;
}
.fx-split.is-in .fx-wi {
  transform: translateY(0) rotate(0);
  opacity: 1;
}

/* ---------- 3. HERO SCRUB ---------- */
.js-fx .hero__content { will-change: transform, opacity; }

/* ---------- 4. CURSOR · PUNTO DE ENFOQUE ---------- */
.fx-cursor-on,
.fx-cursor-on a,
.fx-cursor-on button,
.fx-cursor-on .btn { cursor: none; }
.fx-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 46px; height: 46px;
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease, width .25s ease, height .25s ease;
  mix-blend-mode: difference;
}
.fx-cursor.is-active { opacity: 1; }
/* 4 corchetes tipo punto de enfoque AF */
.fx-cursor span {
  position: absolute;
  width: 9px; height: 9px;
  border: 1.5px solid #c49a2a;
}
.fx-cursor span:nth-child(1) { top: 0; left: 0;  border-right: 0; border-bottom: 0; }
.fx-cursor span:nth-child(2) { top: 0; right: 0; border-left: 0;  border-bottom: 0; }
.fx-cursor span:nth-child(3) { bottom: 0; left: 0;  border-right: 0; border-top: 0; }
.fx-cursor span:nth-child(4) { bottom: 0; right: 0; border-left: 0;  border-top: 0; }
.fx-cursor i {
  position: absolute;
  top: 50%; left: 50%;
  width: 3px; height: 3px;
  background: #c49a2a;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.fx-cursor.is-locked { width: 64px; height: 64px; }
.fx-cursor.is-locked span { width: 13px; height: 13px; border-color: #ece0ce; }
.fx-cursor.is-locked i { background: #ece0ce; }

/* ---------- 5. MARQUEE INERCIA ---------- */
.js-fx .marquee { will-change: transform; }

/* ---------- 6. REVELADO DE IMAGEN · máscara + zoom ---------- */
.js-fx .fx-mask {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.18);
  transition: clip-path 1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.25s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: clip-path, transform;
}
.js-fx .fx-mask.fx-in {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}

/* ---------- 7. TILT 3D ---------- */
.js-fx .fx-tilt {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
  transform-style: preserve-3d;
  will-change: transform;
}
.js-fx .fx-tilt:hover {
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .65);
  z-index: 2;
}

/* ---------- 8. GALERÍA HORIZONTAL FIJADA (pin) ---------- */
.fx-rail__track {
  display: flex;
  gap: 1.5rem;
  align-items: stretch;
}
/* Modo pin: el track se mueve en horizontal mientras la sección queda fija */
.js-fx .fx-rail--pin { position: relative; }
.js-fx .fx-rail--pin .fx-rail__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.js-fx .fx-rail--pin .fx-rail__track {
  padding: 0 6vw;
  will-change: transform;
}
/* Fallback nativo (móvil / reduced-motion / sin JS): scroll horizontal manual */
.fx-rail--native .fx-rail__sticky,
.fx-rail:not(.fx-rail--pin) .fx-rail__sticky {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.fx-rail--native .fx-rail__track,
.fx-rail:not(.fx-rail--pin) .fx-rail__track {
  padding: 1rem 1.25rem;
}
.fx-rail__item { flex: 0 0 auto; scroll-snap-align: center; }

/* ============================================================
   RESPETO TOTAL A prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .fx-intro { display: none !important; }
  .fx-wi { transform: none !important; opacity: 1 !important; transition: none !important; }
  .fx-cursor { display: none !important; }
  .fx-cursor-on, .fx-cursor-on * { cursor: auto !important; }
  .fx-mask { clip-path: none !important; transform: none !important; transition: none !important; }
  .fx-tilt { transform: none !important; }
  .fx-rail__track { transform: none !important; }
}

/* Si el navegador no soporta clip-path circular, no bloquear nunca */
@supports not (clip-path: circle(50%)) {
  .fx-intro { display: none !important; }
}