/*
Theme Name: Madrugadas S.L.
Theme URI: https://madrugadas.es
Author: Madrugadas S.L.
Description: Tema a medida de Madrugadas S.L. — estética de cartel de cine (Anton + Archivo, paleta noche/ámbar) sobre WooCommerce. Impresión bajo demanda.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: madrugadas
*/

/* La configuración de colores y utilidades viene de Tailwind (ver functions.php).
   Aquí van solo los estilos propios de la marca, portados del index.html. */

::selection { background: #C98A2B; color: #0B0B0D; }
html { scroll-behavior: smooth; }
body { background: #0B0B0D; color: #EFEAE0; }

/* ---- grano de película ---- */
.grain::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 60;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* ---- línea de destello anamórfico (la firma) ---- */
.flare { position: relative; height: 2px; background: linear-gradient(90deg, transparent, #C98A2B 18%, #C98A2B 82%, transparent); }
.flare::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 140px; height: 5px;
  background: radial-gradient(closest-side, rgba(255,255,255,.9), rgba(255,255,255,0));
}
.flare::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 9px; height: 9px; background: #fff;
  box-shadow: 0 0 14px 3px rgba(255,255,255,.75);
}
.flare-hero::before, .flare-hero::after { left: 43%; }

/* ---- marquesina ---- */
.marquee-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- créditos (uppercase con tracking) ---- */
.credits { text-transform: uppercase; letter-spacing: .32em; font-weight: 500; }

/* ---- tarjeta de póster: barrido de destello al hover ---- */
.poster { position: relative; overflow: hidden; }
.poster img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.poster:hover img { transform: scale(1.04); }
.poster::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(232,180,90,.14) 45%, rgba(255,255,255,.22) 50%, rgba(232,180,90,.14) 55%, transparent);
  transform: skewX(-12deg); transition: left .7s ease; pointer-events: none;
}
.poster:hover::after { left: 120%; }

/* mockup con modelo: aparece con fundido al hover */
.poster .mockup {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06);
  transition: opacity .55s ease, transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.poster:hover .mockup, .poster:focus-visible .mockup { opacity: 1; transform: scale(1); }

/* ---- entrada del hero ---- */
.fade-up { opacity: 0; transform: translateY(22px); animation: fadeUp .9s ease forwards; }
.d1 { animation-delay: .1s } .d2 { animation-delay: .28s } .d3 { animation-delay: .46s }
.d4 { animation-delay: .64s } .d5 { animation-delay: .82s }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

/* ---- aparición al hacer scroll ---- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.on { opacity: 1; transform: translateY(0); }

/* ---- foco visible ---- */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid #E8B45A; outline-offset: 3px; border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .fade-up { animation: none; opacity: 1; transform: none; }
  .reveal { transition: none; opacity: 1; transform: none; }
  .poster img, .poster::after { transition: none; }
  html { scroll-behavior: auto; }
}

/* ════ WooCommerce con la piel de Madrugadas ════ */
.woocommerce-breadcrumb { color: #4E5866; font-size: 12px; letter-spacing: .1em; }

/* Botones */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt {
  background: #C98A2B; color: #0B0B0D; border-radius: 0;
  text-transform: uppercase; letter-spacing: .28em; font-weight: 600; font-size: 11px;
  padding: .9em 1.6em; transition: background .2s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #respond input#submit:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
  background: #E8B45A; color: #0B0B0D;
}

/* Precios y títulos */
.woocommerce ul.products li.product .price, .woocommerce div.product p.price,
.woocommerce div.product span.price { color: #E8B45A; font-weight: 600; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { color: #EFEAE0; font-weight: 500; }

/* Rejilla de productos */
.woocommerce ul.products li.product { background: #131318; border: 1px solid rgba(255,255,255,.05); padding: 12px; }
.woocommerce ul.products li.product img { margin-bottom: 12px; }

/* Mensajes */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  background: #131318; border-top: 3px solid #C98A2B; color: #EFEAE0;
}
.woocommerce-message::before, .woocommerce-info::before { color: #C98A2B; }

/* Formularios */
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce .select2-container--default .select2-selection--single, select {
  background: #0F0F13; border: 1px solid rgba(255,255,255,.1); color: #EFEAE0; border-radius: 0;
}

/* Tablas (carrito) */
.woocommerce table.shop_table { border: 1px solid rgba(255,255,255,.08); }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-top: 1px solid rgba(255,255,255,.06); }