/* ============================================================
   Studio Lumière — Site Stylesheet
   ============================================================ */

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body { background: #ffffff; color: var(--brand-secondary); }

/* ---- Header behavior ---- */
#site-header { background: linear-gradient(180deg, rgba(0,0,0,0.4), transparent); color: #fff; }
#site-header.scrolled { background: rgba(255,255,255,.97); color: var(--brand-secondary); box-shadow: 0 1px 24px rgba(0,0,0,.06); backdrop-filter: blur(8px); }
#site-header.scrolled .site-brand, #site-header.scrolled .site-nav a { color: var(--brand-secondary); }
#site-header .site-nav a:hover { color: var(--brand-primary); }
#site-header .site-nav a { color: rgba(255,255,255,.9); transition: color .2s; }

/* ---- Hero ---- */
.hero-section .hero-img { transition: transform 20s ease-out; }
.hero-section.in-view .hero-img { transform: scale(1.0); }
.hero-fallback {
  background:
    radial-gradient(ellipse at 30% 20%, var(--brand-soft), transparent 50%),
    radial-gradient(ellipse at 70% 80%, var(--brand-accent), transparent 50%),
    linear-gradient(135deg, #2a2a2a, #1a1a1a);
}

/* ---- Reveal animations (lightweight, no JS framework) ---- */
.reveal { opacity: 0; transform: translateY(30px); animation: reveal-up 1.2s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: var(--delay, 0s); }
@keyframes reveal-up { to { opacity: 1; transform: none; } }

.reveal-up { opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal-up.in { opacity: 1; transform: none; }

/* ---- Grain overlay (cinematic feel) ---- */
.grain-overlay { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .25 0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.6'/></svg>"); opacity:.35; mix-blend-mode: overlay; }

/* ---- Fade mask for marquee ---- */
.mask-fade {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

/* ---- Testimonials carousel ---- */
.testimonial-slide { display: none; }
.testimonial-slide.active { display: block; animation: fade-in .6s ease; }
@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.testimonial-dot.active { background: var(--brand-primary); width: 24px; border-radius: 999px; }
.testimonial-dot { transition: all .3s; }

/* ---- Lightbox ---- */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.92); display: none; align-items: center; justify-content: center; padding: 2rem; }
.lightbox.open { display: flex; animation: fade-in .25s ease; }
.lightbox img { max-width: 95%; max-height: 90vh; object-fit: contain; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.lightbox-close, .lightbox-nav { position: absolute; color: white; font-size: 32px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); height: 48px; width: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s; }
.lightbox-close { top: 1.5rem; right: 1.5rem; }
.lightbox-nav.prev { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox-nav.next { right: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox-close:hover, .lightbox-nav:hover { background: var(--brand-primary); color: var(--brand-secondary); border-color: var(--brand-primary); }

/* ---- Portfolio placeholder pattern (when empty) ---- */
.portfolio-placeholder { background-image:
  linear-gradient(135deg, var(--brand-accent) 25%, transparent 25%, transparent 75%, var(--brand-accent) 75%),
  linear-gradient(135deg, var(--brand-accent) 25%, transparent 25%, transparent 75%, var(--brand-accent) 75%);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
  background-color: var(--brand-soft);
}

/* ---- Mobile menu ---- */
#mobile-menu.open { display: block; }

/* ---- Print niceness ---- */
@media print {
  #site-header, footer, [data-no-print] { display: none !important; }
}

/* ---- Utility: hide scrollbar on horizontal sliders ---- */
.gallery-slider::-webkit-scrollbar { display: none; }
.gallery-slider { scrollbar-width: none; }

/* ---- Smooth focus state for inputs ---- */
input:focus, textarea:focus, select:focus { outline: none; }

/* ---- Toast (for "copied!") ---- */
#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--brand-secondary); color: #fff; padding: .75rem 1.5rem; border-radius: 999px; font-size: 14px; opacity: 0; transition: all .3s; z-index: 200; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }