/* ============================================================
   Oceanic Apparels — Cinematic Layer (additive)
   Load AFTER style.css. Uses existing :root tokens
   (--navy, --gold, --light, --font-display, --shadow, etc.).
   Everything degrades gracefully without JS / with reduced motion.
   ============================================================ */

/* ---- 1. Hero video background ---- */
.hero-section { position: relative; overflow: hidden; }
.hero-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
}
.hero-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(105deg,
        rgba(7,20,64,.92) 0%,
        rgba(7,20,64,.78) 45%,
        rgba(13,36,97,.45) 100%);
}
/* Lift existing hero content above the video/overlay */
.hero-section .container { position: relative; z-index: 2; }
.hero-section .hero-bg { z-index: 0; }
@media (max-width: 991px){
    .hero-overlay { background: linear-gradient(180deg, rgba(7,20,64,.92), rgba(7,20,64,.85)); }
}

/* ---- 2. Section rhythm: deep-navy bands + fabric texture ---- */
.section-navy {
    background: var(--navy-dark);
    color: #e8ecf6;
}
.section-navy h2, .section-navy h3, .section-navy h4 { color: #fff; }
.section-navy .section-tag { color: var(--gold); }
.fabric-texture {
    background-image:
        linear-gradient(0deg, rgba(0,0,0,.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,.015) 1px, transparent 1px);
    background-size: 7px 7px;
}
.section-navy.fabric-texture {
    background-image:
        linear-gradient(0deg, rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(var(--navy-dark), var(--navy-dark));
    background-size: 7px 7px, 7px 7px, 100% 100%;
}

/* ---- 3. Client logo marquee ---- */
.logo-marquee {
    background: var(--light);
    padding: 2.25rem 0;
    overflow: hidden;
}
.logo-marquee .marquee-label {
    text-align: center; font-size: .8rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--gray); font-weight: 700;
    margin-bottom: 1.25rem;
}
.marquee-viewport { overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track {
    display: flex; align-items: center; gap: 3.5rem; width: max-content;
    animation: marquee-scroll 32s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-item {
    flex: 0 0 auto; height: 46px; display: flex; align-items: center;
    font-family: var(--font-display); font-weight: 700; color: var(--navy);
    opacity: .55; filter: grayscale(1); transition: var(--transition);
    font-size: 1.05rem; white-space: nowrap;
}
.marquee-item img { height: 46px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .6; transition: var(--transition); }
.marquee-item:hover, .marquee-item:hover img { opacity: 1; filter: grayscale(0); }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- 4. Scroll-reveal (visible by default; JS sets initial state) ---- */
/* No initial hiding here on purpose — if JS is off, content shows. */
.reveal-ready [data-reveal] { opacity: 0; }

/* ---- 5. Count-up stat emphasis ---- */
.count-stat { font-variant-numeric: tabular-nums; }

/* ---- 6. Industries — pinned horizontal scroll ---- */
.industries-pin { position: relative; }
.industries-track { display: flex; }
.industry-panel {
    flex: 0 0 100vw; min-height: 78vh;
    position: relative; display: flex; align-items: flex-end;
    background-size: cover; background-position: center;
    color: #fff;
}
.industry-panel::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(7,20,64,.88) 0%, rgba(7,20,64,.25) 60%, rgba(7,20,64,.1) 100%);
}
.industry-panel .panel-content { position: relative; z-index: 2; padding: 3rem clamp(1.5rem, 6vw, 6rem) 4rem; max-width: 760px; }
.industry-panel .panel-index { font-family: var(--font-display); font-size: 1rem; color: var(--gold); font-weight: 700; letter-spacing: .1em; }
.industry-panel h3 { font-size: clamp(1.6rem, 4vw, 2.6rem); margin: .35rem 0 .6rem; }
.industry-panel p { font-size: 1.02rem; line-height: 1.7; color: #dfe5f3; max-width: 620px; }
/* Fallback when not pinned (mobile / no-JS): horizontal snap scroll */
@media (max-width: 991px), (prefers-reduced-motion: reduce) {
    .industries-track {
        overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    }
    .industry-panel { flex-basis: 88vw; min-height: 60vh; scroll-snap-align: start; }
}

/* ---- 7. Sticky "Watch Factory Tour" button + video modal ---- */
.btn-factory-tour {
    position: fixed; left: 20px; bottom: 24px; z-index: 1040;
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--navy); color: #fff; border: 1px solid rgba(255,255,255,.15);
    padding: .7rem 1.1rem; border-radius: 50px; font-weight: 600; font-size: .9rem;
    box-shadow: var(--shadow); cursor: pointer; transition: var(--transition);
}
.btn-factory-tour:hover { background: var(--navy-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.btn-factory-tour i { color: var(--gold); font-size: 1.05rem; }
@media (max-width: 575px){ .btn-factory-tour .ft-label { display: none; } .btn-factory-tour { padding: .8rem; } }

.video-modal {
    position: fixed; inset: 0; z-index: 2000; display: none;
    align-items: center; justify-content: center;
    background: rgba(4,10,30,.85); backdrop-filter: blur(4px); padding: 1.25rem;
}
.video-modal.open { display: flex; }
.video-modal-inner { position: relative; width: min(960px, 100%); aspect-ratio: 16/9; }
.video-modal-inner iframe { width: 100%; height: 100%; border: 0; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.video-modal-close {
    position: absolute; top: -14px; right: -14px; width: 40px; height: 40px;
    border-radius: 50%; border: 0; background: #fff; color: var(--navy-dark);
    font-size: 1.3rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow);
}

/* ---- 8. Reduced motion: kill all motion ---- */
@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none !important; }
    .reveal-ready [data-reveal] { opacity: 1 !important; }
    html { scroll-behavior: auto !important; }
}