/*
 * ============================================================
 * TECHSTAS CINEMA — Cinematic Effects CSS
 * Phase 5: Animation Engine
 * ============================================================
 */

/* ── Reduced Motion Override ── */
@media (prefers-reduced-motion: reduce) {
    [data-cinema-section] *,
    .cinema-float,
    .film-burn-overlay,
    .theatre-curtain { animation: none !important; transition: none !important; }
}

/* ── Will-change Optimisation ── */
[data-cinema-section] { will-change: transform, opacity; }

/* ── Initial hidden state (JS removes this after GSAP inits) ── */
[data-cinema-animate] {
    opacity: 0;
    transform: translateY(28px);
    transition: none;
}
.cinema-loaded [data-cinema-animate] {
    opacity: 1;
    transform: none;
}

/* ────────────────────────────────────────────────────────────
   FILM BURN EFFECT
   ───────────────────────────────────────────────────────────*/
.film-burn-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 40% at 50% 50%, transparent 55%, rgba(255,140,0,0.08) 80%, rgba(180,60,0,0.18) 100%),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0,0,0,0.04) 2px,
            rgba(0,0,0,0.04) 4px
        );
    mix-blend-mode: multiply;
    opacity: 0;
    animation: filmBurnFlicker 8s ease-in-out infinite;
}
@keyframes filmBurnFlicker {
    0%,100% { opacity: 0; }
    5%       { opacity: 0.6; }
    8%       { opacity: 0.2; }
    10%      { opacity: 0.8; }
    15%      { opacity: 0; }
    50%      { opacity: 0; }
    55%      { opacity: 0.4; }
    58%      { opacity: 0; }
}

/* ────────────────────────────────────────────────────────────
   THEATRE CURTAIN EFFECT
   ───────────────────────────────────────────────────────────*/
.theatre-curtain {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    pointer-events: none;
}
.theatre-curtain__left,
.theatre-curtain__right {
    flex: 1;
    background: linear-gradient(180deg, #0a0a0a 0%, #1a0a00 50%, #0a0a0a 100%);
    transform-origin: left center;
    transition: transform 1.2s cubic-bezier(0.77,0,0.175,1);
}
.theatre-curtain__right { transform-origin: right center; }
.theatre-curtain.open .theatre-curtain__left  { transform: translateX(-100%); }
.theatre-curtain.open .theatre-curtain__right { transform: translateX(100%); }
.theatre-curtain.hidden { display: none; }

/* Curtain texture overlay */
.theatre-curtain__left::after,
.theatre-curtain__right::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 2px,
        transparent 2px, transparent 20px
    );
}

/* ────────────────────────────────────────────────────────────
   TEXT REVEAL (clip-path)
   ───────────────────────────────────────────────────────────*/
.text-reveal-wrap {
    overflow: hidden;
    display: block;
}
.text-reveal-inner {
    display: block;
    transform: translateY(110%);
}
/* GSAP will animate translateY to 0 */

/* ────────────────────────────────────────────────────────────
   GLOW PULSE
   ───────────────────────────────────────────────────────────*/
@keyframes glowPulse {
    0%, 100% { filter: drop-shadow(0 0 30px rgba(212,175,55,0.3)); }
    50%       { filter: drop-shadow(0 0 60px rgba(212,175,55,0.6)); }
}
.glow-pulse { animation: glowPulse 3s ease-in-out infinite; }

/* ────────────────────────────────────────────────────────────
   FLOATING CINEMA ELEMENTS
   ───────────────────────────────────────────────────────────*/
.cinema-floats {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.cinema-float {
    position: absolute;
    opacity: 0.04;
    color: #d4af37;
    font-size: clamp(1.5rem, 4vw, 3rem);
    animation: floatDrift linear infinite;
    will-change: transform;
}
@keyframes floatDrift {
    0%   { transform: translateY(100vh) rotate(0deg); opacity: 0; }
    5%   { opacity: 0.04; }
    95%  { opacity: 0.04; }
    100% { transform: translateY(-15vh) rotate(360deg); opacity: 0; }
}

/* ────────────────────────────────────────────────────────────
   FILM GRAIN OVERLAY
   ───────────────────────────────────────────────────────────*/
.film-grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    animation: grainShift 0.15s steps(1) infinite;
}
@keyframes grainShift {
    0%  { background-position: 0 0; }
    20% { background-position: -50px -20px; }
    40% { background-position: 30px 40px; }
    60% { background-position: -20px 10px; }
    80% { background-position: 40px -30px; }
}

/* ────────────────────────────────────────────────────────────
   PARALLAX DEPTH
   ───────────────────────────────────────────────────────────*/
[data-parallax] { will-change: transform; }

/* ────────────────────────────────────────────────────────────
   POSTER SHINE
   ───────────────────────────────────────────────────────────*/
.poster-shine {
    position: relative;
    overflow: hidden;
}
.poster-shine::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -75%;
    width: 50%;
    height: 200%;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255,255,255,0.08) 50%,
        transparent 80%
    );
    transform: skewX(-20deg);
    transition: left 0.6s ease;
}
.poster-shine:hover::after { left: 125%; }

/* ────────────────────────────────────────────────────────────
   SCROLL PROGRESS BAR
   ───────────────────────────────────────────────────────────*/
.cinema-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: linear-gradient(90deg, #d4af37, #ffd97a, #d4af37);
    z-index: 10000;
    transition: width 0.1s linear;
    box-shadow: 0 0 8px rgba(212,175,55,0.6);
}

/* ────────────────────────────────────────────────────────────
   SPOTLIGHT REVEAL
   ───────────────────────────────────────────────────────────*/
.spotlight-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        circle 300px at var(--mx, 50%) var(--my, 50%),
        rgba(212,175,55,0.06) 0%,
        transparent 60%
    );
    z-index: 3;
    transition: background 0.1s;
}

/* ────────────────────────────────────────────────────────────
   IMAGE SCAN EFFECT
   ───────────────────────────────────────────────────────────*/
@keyframes imageScan {
    0%   { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}
.image-scan {
    position: relative;
    overflow: hidden;
}
.image-scan::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(212,175,55,0.12) 50%,
        transparent 60%
    );
    background-size: 200% 100%;
    animation: imageScan 3s ease-in-out infinite;
    pointer-events: none;
}


/* ============================================================
   ACCESSIBILITY + PERFORMANCE — Techstas Cinema Platform
   ============================================================ */

/* ── Focus Styles ────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid #d4af37;
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── Skip Link ───────────────────────────────────────────── */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 10000;
    padding: 0.5rem 1rem;
    background: #d4af37;
    color: #fff;
    border-radius: 0 0 8px 8px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s;
}
.skip-to-content:focus {
    top: 0;
}

/* ── Screen-reader only ──────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border-width: 0;
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .cinema-float { display: none !important; }
    @keyframes cinemaFloatDrift { from { transform: none; } to { transform: none; } }
}

/* ── Mobile responsive baseline ─────────────────────────── */
@media (max-width: 768px) {
    /* Engine layout grids stack on mobile */
    [data-cinema-section] [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    [data-cinema-section] [style*="display:grid"] {
        gap: 2rem !important;
    }
    /* Poster widths */
    [data-cinema-section] img[style*="width:280px"] {
        width: 100% !important;
        max-width: 260px !important;
        margin: 0 auto !important;
        display: block !important;
    }
    /* Typography scaling handled by clamp() in layouts */
}

@media (max-width: 480px) {
    [data-cinema-section] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* ── Font-display swap (loaded via JS font loader) ───────── */
@font-face {
    font-family: 'Cinzel';
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    font-display: swap;
}

/* ── Image performance ───────────────────────────────────── */
img {
    max-width: 100%;
    height: auto;
}
/* Aspect-ratio placeholders prevent layout shift */
img[style*="aspect-ratio"] {
    background: rgba(255,255,255,0.03);
}

/* ── Colour contrast helpers ─────────────────────────────── */
.text-primary   { color: #f5f5f5; }
.text-muted     { color: #888; }
.text-accent    { color: #d4af37; }
.text-gold      { color: #D4AF37; }
.text-chrome    { color: #c0c0c0; }

/* ── Print ───────────────────────────────────────────────── */
@media print {
    #main-navbar, .cinema-floats, .cinema-scroll-progress,
    #page-transition-overlay, .scroll-top-btn { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
}

/* Alpine x-cloak — hide elements until Alpine initialises */
[x-cloak] { display: none !important; }