/* styles.css - minimal local fallback layer
   Purpose: Provide readable, accessible baseline if Tailwind CDN fails or user is offline.
   This does NOT attempt to replicate full Tailwind utility coverage; it ensures text visibility,
   font usage, and basic layout integrity. */

/* Font family fallbacks */
body,html { margin:0; padding:0; font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif; }
*, *::before, *::after { box-sizing: border-box; }

/* Color variables matching theme */
:root {
  --color-base:#0a0a0a;
  --color-neon:#D7FF00;
  --color-ink:#e5e7eb;
  --color-panel:#18181b;
  --color-border:#27272a;
}

body { background:var(--color-base); color:var(--color-ink); -webkit-font-smoothing:antialiased; }

/* Fluid media fallbacks */
img, video, canvas, svg { max-width: 100%; height: auto; }
iframe { max-width: 100%; }

/* Headings readable */
h1,h2,h3,h4,h5,h6 { color:#fff; font-weight:700; line-height:1.15; letter-spacing:.5px; }

/* Links */
a { color:var(--color-ink); text-decoration:none; }
a:hover, a:focus { color:var(--color-neon); }

/* Utility-ish minimal set (only what we rely on visually if Tailwind missing) */
.text-neon { color:var(--color-neon) !important; }
.text-white { color:#ffffff !important; }
.text-zinc-100 { color:#f4f4f5 !important; }
.text-zinc-200 { color:#e5e7eb !important; }
.text-zinc-300 { color:#d4d4d8 !important; }
.text-zinc-400 { color:#a1a1aa !important; }
.text-zinc-500 { color:#71717a !important; }
.bg-base { background:var(--color-base) !important; }
.border { border:1px solid var(--color-border); }
.border-zinc-800 { border-color:var(--color-border) !important; }
.rounded-xl { border-radius:1rem; }
.rounded-lg { border-radius:.75rem; }
.rounded-md { border-radius:.5rem; }

/* Basic flex/grid fallbacks */
.flex { display:flex; }
.grid { display:grid; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.justify-center { justify-content:center; }
.gap-3 { gap:.75rem; }
.gap-4 { gap:1rem; }
.gap-6 { gap:1.5rem; }

/* Spacing (only few) */
.p-4 { padding:1rem; }
.p-8 { padding:2rem; }
.py-6 { padding-top:1.5rem; padding-bottom:1.5rem; }
.mx-auto { margin-left:auto; margin-right:auto; }

/* Width helpers */
.w-full { width:100%; }
.max-w-6xl { max-width:72rem; }
.max-w-7xl { max-width:80rem; }

/* Typography helpers */
.uppercase { text-transform:uppercase; }
.font-semibold { font-weight:600; }
.font-bold { font-weight:700; }
.tracking-wide { letter-spacing:.05em; }
.tracking-wider { letter-spacing:.08em; }
.text-xs { font-size:.75rem; }
.text-sm { font-size:.875rem; }
.text-base { font-size:1rem; }
.text-lg { font-size:1.125rem; }
.text-xl { font-size:1.25rem; }
.text-2xl { font-size:1.5rem; }
.text-3xl { font-size:1.875rem; }
.text-4xl { font-size:2.25rem; }
.text-5xl { font-size:3rem; }
.text-6xl { font-size:3.75rem; }
.leading-relaxed { line-height:1.6; }

/* Buttons baseline */
button { cursor:pointer; font-family:inherit; }
button:focus-visible, a:focus-visible { outline:2px solid var(--color-neon); outline-offset:2px; }

/* Simple neon accent */
.bg-neon { background:var(--color-neon); color:#000; }
.bg-neon\/90 { background:rgba(215,255,0,0.9); }
.bg-neon\/20 { background:rgba(215,255,0,0.2); }

/* Transitional placeholders if Tailwind missing */
.transition-colors, .transition-all { transition:all .25s ease; }

/* Active nav link highlight */
.nav-active { border-color: var(--color-neon) !important; color: #fff !important; }

/* Hide desktop nav on small screens (keep mobile menu) */
@media (max-width: 639px){
  header nav { display:none !important; }
}

/* Boutique section grid fallback */
#boutique .grid { display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width:768px){ #boutique .grid { grid-template-columns:1fr 1fr; gap:2rem; } }

/* Gallery controls spacing on mobile */
@media (max-width:640px){
  #work .flex.items-center.gap-3 { gap:.5rem; }
  #pageIndicator { margin-left:.5rem; }
}

/* Hero starburst fallback positioning/visibility */
.hero-starburst { position:absolute; top:-1rem; right:-1rem; width:6rem; height:6rem; display:none; }
@media (min-width:768px){ .hero-starburst { display:block; top:-1.5rem; right:-5.5rem; width:7rem; height:7rem; } }

/* Video aspect fallback */
.aspect-video { position:relative; width:100%; padding-top:56.25%; }
.aspect-video > * { position:absolute; inset:0; }

/* Hide if Tailwind provides more complex states */
.hidden { display:none !important; }

/* Basic container layout */
header, section, footer { width:100%; }

/* Scroll behavior fallback */
html { scroll-behavior:smooth; }

/* Selection */
::selection { background:var(--color-neon); color:#000; }

/* Ensure overlays readable */
.bg-black\/20 { background:rgba(0,0,0,0.2); }
.bg-black\/40 { background:rgba(0,0,0,0.4); }
.bg-zinc-900\/60 { background:rgba(24,24,27,0.6); }

/* Minimal responsive tweak */
@media (max-width:640px){ .text-5xl { font-size:2.5rem; } }

/* Hero badges visibility fallbacks (independent of Tailwind) */
.hero-badges-mobile { display:flex !important; }
.hero-badges-desktop { display:none !important; }
@media (min-width:640px){
  .hero-badges-mobile { display:none !important; }
  .hero-badges-desktop { display:flex !important; }
}

/* Hero badges layout fallbacks (independent of Tailwind) */
.hero-badges-wrap {
  display: inline-flex;
  align-items: center;
  border-radius: 0.5rem;
  background: var(--neon, #a8ff00);
  color: #000;
  max-width: 100%;
}
.hero-badges-inner {
  padding: 0.75rem 1.25rem; /* bumped padding for prominence */
  font-weight: 700; /* font-bold */
  text-transform: uppercase;
  letter-spacing: 0.08em; /* tracking-wide */
}
.hero-badges-desktop {
  align-items: center;
  column-gap: 0.5rem; /* gap-2 */
  white-space: nowrap;
}
@media (min-width: 768px) {
  .hero-badges-desktop { column-gap: 0.75rem; }
}
.hero-badges-desktop .h-2.w-2.rounded-full.bg-black,
.hero-badges-desktop .dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: #000;
}
.hero-badges-mobile {
  row-gap: 0.5rem; /* gap-2 */
  text-align: center;
}

/* Fallback font sizes for badges */
.hero-badges-desktop { font-size: 0.75rem; }
@media (min-width: 768px) { .hero-badges-desktop { font-size: 0.875rem; } }
@media (min-width: 1024px) { .hero-badges-desktop { font-size: 1.125rem; } }

/* Very small devices polish */
@media (max-width: 360px){
  .headline { font-size: clamp(20px, 6.2vw, 28px); }
  p { font-size: 0.875rem; }
}

/* Phone-specific centering and spacing for hero badges */
@media (max-width: 640px){
  .hero-badges-wrap { 
    display: flex !important; /* override inline-flex to allow centering via margins */
    margin-left: auto; 
    margin-right: auto; 
    justify-content: center;
  }
  .hero-badges-inner { 
    padding: 0.5rem 0.75rem; /* tighten padding */
  }
  .hero-badges-mobile { 
    row-gap: 0.35rem; 
  }
  .hero-badges-mobile span { 
    line-height: 1.2; 
  }
}

/* Note: For full fidelity, keep Tailwind CDN. This file only guards against invisibility issues. */
/* --- Extracted custom component & animation styles from inline HTML --- */
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html { scroll-behavior:auto; } }
.ph { background:linear-gradient(180deg,#d4d4d8 0%,#bdbdc5 100%); }
.headline { font-size:clamp(24px,4.5vw,48px); line-height:1.2; overflow-wrap:break-word; word-break:break-word; }
@media (max-width:767px){ .headline { font-size:clamp(22px,6vw,32px); } }
.subline { font-size:clamp(28px,5.5vw,60px); line-height:1; }
.headline-sub { display:block; font-size:clamp(18px,3.2vw,36px); line-height:1.1; }
.chunky { letter-spacing:.02em; }
.dash { position:relative; padding-left:1.125rem; }
.dash:before { content:""; position:absolute; left:0; top:50%; width:12px; height:2px; background:currentColor; transform:translateY(-50%); }

/* Video gallery items */
.video-item { transition:opacity .3s ease-in-out, transform .2s ease, box-shadow .3s ease; }
@media (hover:hover){ .video-item:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(215,255,0,.15); } }
.video-item:active { transform:scale(.98); }
#videoGallery { min-height:350px; }
@media (max-width:767px){ #videoGallery { min-height:280px; } }
@media (min-width:768px) and (max-width:1023px){ #videoGallery { min-height:320px; } }

/* Navigation button disabled state */
.nav-btn-disabled { opacity:.4; cursor:not-allowed; pointer-events:none; }
.nav-btn-disabled:hover { color:inherit !important; border-color:inherit !important; }

/* WhatsApp widget */
.whatsapp-widget { position:fixed; bottom:20px; right:20px; z-index:999; }
.whatsapp-button { display:flex; align-items:center; justify-content:center; width:56px; height:56px; background:#25D366; border-radius:50%; box-shadow:0 4px 12px rgba(37,211,102,.4); cursor:pointer; transition:all .3s ease; animation:pulse-whatsapp 2s infinite; }
.whatsapp-button:hover { transform:scale(1.1); box-shadow:0 6px 20px rgba(37,211,102,.6); }
.whatsapp-button svg { width:32px; height:32px; fill:#fff; }
@keyframes pulse-whatsapp { 0%,100% { box-shadow:0 4px 12px rgba(37,211,102,.4);} 50% { box-shadow:0 4px 20px rgba(37,211,102,.7);} }
.whatsapp-tooltip { position:absolute; right:75px; bottom:15px; background:#fff; color:#0a0a0a; padding:10px 16px; border-radius:8px; white-space:nowrap; font-size:14px; font-weight:500; box-shadow:0 4px 12px rgba(0,0,0,.15); opacity:0; transform:translateX(10px); transition:all .3s ease; pointer-events:none; }
.whatsapp-tooltip:after { content:""; position:absolute; right:-6px; top:50%; transform:translateY(-50%); width:0; height:0; border-left:6px solid #fff; border-top:6px solid transparent; border-bottom:6px solid transparent; }
.whatsapp-widget:hover .whatsapp-tooltip { opacity:1; transform:translateX(0); }
@media (max-width:640px){ .whatsapp-widget { bottom:80px; right:16px; } .whatsapp-button { width:52px; height:52px; } .whatsapp-button svg { width:26px; height:26px; } .whatsapp-tooltip { display:none; } }

/* Modal tweaks */
#videoModal { backdrop-filter:blur(8px); }
@media (max-width:640px){ #videoModal .max-w-4xl { margin:0; max-width:100%; } #closeModal { top:8px; right:8px; } }

/* Accessibility & interaction */
@media (prefers-reduced-motion:reduce){ .process-step { animation:none !important; opacity:1 !important; transform:none !important; } }
@media (hover:none){ button:active, a:active { opacity:.7; transform:scale(.98); } }
button:focus-visible, a:focus-visible { outline:2px solid var(--color-neon); outline-offset:2px; }

/* Keyframes (deduped) */
@keyframes slideUp { from { opacity:0; transform:translateY(1.5rem);} to { opacity:1; transform:translateY(0);} }
@keyframes fadeIn { from { opacity:0;} to { opacity:1;} }
@keyframes pulse-slow { 0%,100% { opacity:1;} 50% { opacity:.5;} }
@keyframes bounce-slow { 0%,100% { transform:translateY(0);} 50% { transform:translateY(-4px);} }
@keyframes spin-slow { from { transform:rotate(0deg);} to { transform:rotate(360deg);} }

/* Animation utility classes */
.animate-pulse-slow { animation:pulse-slow 2s ease-in-out infinite; }
.animate-bounce-slow { animation:bounce-slow 2s ease-in-out infinite; }
.animate-spin-slow { animation:spin-slow 4s linear infinite; }
.animate-fade-in { animation:fadeIn .8s ease-out forwards; }
.animate-fade-in-delay { animation:fadeIn .8s ease-out .3s forwards; }

/* Reveal on scroll (subtle and professional) */
.reveal { opacity:0; transform:translateY(12px); transition:opacity .9s ease, transform .9s cubic-bezier(0.22, 1, 0.36, 1); transition-delay:var(--reveal-delay, 0ms); will-change: opacity, transform; }
.reveal.is-visible { opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .reveal { opacity:1 !important; transform:none !important; transition:none !important; } }

/* Neon text enforce */
.text-neon, h4.text-neon { color:#D7FF00 !important; }

/* Process step hover (from second inline block) */
.process-step:hover .bg-zinc-900\/60 { transform:translateY(-4px); }