/* ============================================================
   KANTHO BAKERY — animations.css
   Keyframes y animaciones puras CSS
   ============================================================ */

/* ---------- Preloader (estilo unseen.co) ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--preloader-bg, #0a0a0a);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  clip-path: inset(0 0 0 0);
  will-change: clip-path;
  overflow: hidden;
}
/* Mismo patrón de panadería que ya se usa de fondo en el resto del
   sitio (config.bgPatternImage), a la deriva lenta. La opacidad se
   controla desde el panel: Tema y efectos > Preloader > "Opacidad del
   patrón en la pantalla de carga" (preloaderPatternOpacity). */
.preloader-pattern {
  position: absolute;
  inset: -12%;
  z-index: 0;
  background-image: var(--preloader-pattern-img, url('assets/images/patterns/caja-negro.webp'));
  background-repeat: repeat;
  background-size: 420px;
  opacity: var(--preloader-pattern-opacity, 0.06);
  animation: bgPatternDrift 150s linear infinite alternate;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .preloader-pattern { animation: none; }
}
/* El texto y la barra van SIEMPRE por encima de la textura */
.preloader-word, .preloader-progress-wrap, .preloader-tag {
  position: relative;
  z-index: 1;
}
.preloader-word { display: flex; overflow: hidden; perspective: 700px; }
.preloader-letter {
  font-family: var(--font-heading);
  font-size: clamp(3.4rem, 11vw, 8rem);
  line-height: 1;
  color: var(--text);
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
  -webkit-text-stroke: 0 transparent;
  backface-visibility: hidden;
}
.preloader-letter.is-accent { color: var(--primary); font-style: italic; }

/* Formas del morph de la letra K mientras carga la barra */
.preloader-letter.kf-serif   { font-family: var(--font-heading); font-style: normal; font-weight: 400; color: var(--text); }
.preloader-letter.kf-serif-b { font-family: var(--font-heading); font-style: normal; font-weight: 600; color: var(--text); }
.preloader-letter.kf-accent  { font-family: var(--font-heading); font-style: italic;  font-weight: 500; color: var(--primary); }
.preloader-letter.kf-sans-t  { font-family: var(--font-body);    font-style: normal; font-weight: 300; color: var(--text); }
.preloader-letter.kf-sans-b  { font-family: var(--font-body);    font-style: normal; font-weight: 600; color: var(--primary); }
.preloader-letter.kf-outline { font-family: var(--font-heading); font-style: normal; font-weight: 600; color: transparent; -webkit-text-stroke: 2px var(--primary); }
.preloader-letter.kf-lower   { font-family: var(--font-heading); font-style: italic;  font-weight: 400; color: var(--text); }
.preloader-letter.kf-out-w   { font-family: var(--font-body);    font-style: normal; font-weight: 600; color: transparent; -webkit-text-stroke: 1.5px var(--text); }
.preloader-progress-wrap {
  width: min(320px, 60vw);
  height: 2px;
  background: rgba(245,245,240,0.12);
  overflow: hidden;
}
.preloader-progress {
  width: 0%;
  height: 100%;
  background: var(--primary);
  will-change: width;
}
.preloader-tag {
  font-size: 0.65rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- Scroll indicator ---------- */
@keyframes scrollDrop {
  0%   { top: -100%; }
  55%  { top: 0; }
  100% { top: 100%; }
}

/* ---------- Marquee infinito ---------- */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---------- Reveal helpers (fallback sin JS / reduced motion off) ---------- */
.reveal-mask {
  clip-path: inset(100% 0 0 0);
  will-change: clip-path;
}
.no-js .reveal-mask,
.no-anim .reveal-mask { clip-path: inset(0 0 0 0); }

/* ---------- Entrada del menú móvil ---------- */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(10,10,10,0.97);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.7s var(--ease-expo-inout);
}
.nav-overlay.is-open { clip-path: inset(0 0 0 0); }
.nav-overlay a {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 8vw, 3.4rem);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease-expo-out), transform 0.5s var(--ease-expo-out);
}
.nav-overlay.is-open a { opacity: 1; transform: translateY(0); }
.nav-overlay.is-open a:nth-child(1) { transition-delay: 0.15s; }
.nav-overlay.is-open a:nth-child(2) { transition-delay: 0.22s; }
.nav-overlay.is-open a:nth-child(3) { transition-delay: 0.29s; }
.nav-overlay.is-open a:nth-child(4) { transition-delay: 0.36s; }
.nav-overlay.is-open a:nth-child(5) { transition-delay: 0.43s; }

/* ---------- Cursor personalizado ---------- */
.custom-cursor {
  width: 12px;
  height: 12px;
  background: var(--primary);
  border-radius: 50%;
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.3s var(--ease-expo-out), height 0.3s var(--ease-expo-out),
              background 0.3s, border 0.3s, opacity 0.3s;
  mix-blend-mode: difference;
  opacity: 0;
}
.custom-cursor.is-visible { opacity: 1; }
.custom-cursor.is-hover {
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--primary);
}
@media (hover: none), (max-width: 900px) {
  .custom-cursor { display: none; }
}

/* ---------- Fade genérico de entrada ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Grano fílmico global ---------- */
.grain {
  position: fixed;
  inset: -100%;
  z-index: 8000;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainJitter 0.9s steps(2) infinite;
}
@keyframes grainJitter {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-1.6%, 1.2%); }
  50%  { transform: translate(1.4%, -0.9%); }
  75%  { transform: translate(-0.9%, -1.5%); }
  100% { transform: translate(0, 0); }
}

/* ---------- Accesibilidad: movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  .hero-scroll .scroll-line::after { animation: none; }
}