/* ============================================================
   CDF HOME – Cinematic Pack + Hero Scroll + Tipeee + Reveal
   (DEDUPLICATED – single copy)
============================================================ */

/* ===== TIPEEE PAGE ===== */
.cdf-hero { height: 100vh; position: relative; display: flex; align-items: center; justify-content: center; }
.cdf-hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.55); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.cdf-hero h1 { font-size: 46px; text-shadow: 3px 3px 8px #000; }
.cdf-hero::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 180px; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.9)); }
.motto { font-size: 18px; margin-top: 10px; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,.85)); }
.hero-content { position: relative; text-align: center; max-width: 800px; padding: 20px; }
.hero-content h1 { font-size: 52px; text-shadow: 4px 4px 12px #000; }
.hero-sub { margin: 18px 0 28px; font-size: 16px; letter-spacing: 1px; color: var(--cdf-text-dim); }
.cta-engage { display: inline-block; padding: 14px 36px; font-family: 'BlackOpsOne'; font-size: 18px; background: #7fa64b; color: #000; border-radius: 10px; box-shadow: 0 8px 25px rgba(0,0,0,.7); }
.cta-engage:hover { background: #c7ff7c; transform: translateY(-3px); }
.scroll-indicator { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); text-align: center; color: rgba(255,255,255,.6); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
.scroll-indicator .mouse { width: 20px; height: 34px; border: 1px solid rgba(255,255,255,.6); border-radius: 12px; margin: 6px auto 0; position: relative; }
.scroll-indicator .mouse::before { content: ""; width: 3px; height: 6px; background: rgba(255,255,255,.8); position: absolute; top: 6px; left: 50%; transform: translateX(-50%); animation: scrollDown 1.8s infinite; }
@keyframes scrollDown { 0% { opacity: 0; top: 6px; } 30% { opacity: 1; } 100% { opacity: 0; top: 16px; } }

/* Galerie, Sections, CTA */
.cdf-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 14px; margin-bottom: 40px; }
.cdf-gallery img { border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,.6); }
.cdf-section { margin-bottom: 30px; }
.cdf-section ul { list-style: none; padding: 0; }
.cdf-section li::before { content: "•"; color: var(--cdf-accent); margin-right: 8px; }
.cdf-final { text-align: center; padding: 40px 20px; }
.btn-support { display: inline-block; margin-top: 20px; padding: 14px 28px; font-family: 'BlackOpsOne'; background: #7fa64b; color: #000; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.6); }
.btn-support:hover { background: #c7ff7c; }

/* ===== SPLITS ===== */
.cdf-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: center; margin: 40px 0; }
.cdf-split.reverse { grid-template-columns: .9fr 1.1fr; }
.cdf-split.reverse .cdf-text { order: 2; }
.cdf-split.reverse .cdf-image { order: 1; }
.cdf-text { text-align: left; }
.cdf-image img { width: 100%; height: 260px; object-fit: cover; border-radius: 10px; box-shadow: 0 0 18px rgba(0,0,0,.7); border: 2px solid var(--cdf-border); }
@media (max-width: 992px) { .cdf-split, .cdf-split.reverse { grid-template-columns: 1fr; } .cdf-text, .cdf-image { order: unset !important; text-align: center; } .cdf-image img { height: 220px; } }

.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; margin: 80px 0; }
.split.reverse { grid-template-columns: .9fr 1.1fr; }
.split.reverse .text { order: 2; }
.patch img { width: 100%; height: 280px; object-fit: cover; border-radius: 12px; border: 3px dashed rgba(255,255,255,.4); box-shadow: inset 0 0 0 2px rgba(0,0,0,.6), 0 0 25px rgba(0,0,0,.8); }
.final-cta { text-align: center; padding: 80px 20px; }
.btn-engage { display: inline-block; margin-top: 25px; padding: 16px 36px; font-family: 'BlackOpsOne'; background: #7fa64b; color: #000; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,.7); }
@media (max-width: 992px) { .split { grid-template-columns: 1fr; } .patch img { height: 220px; } }

/* ===== CINEMATIC / BRIEFING ===== */
.cinematic { animation: filmGrain 6s infinite; }
@keyframes filmGrain { 0% { filter: contrast(1) brightness(1); } 50% { filter: contrast(1.05) brightness(.98); } 100% { filter: contrast(1) brightness(1); } }
.briefing-hero { height: 85vh; background: url('/images/cdf/hero.jpg') center/cover no-repeat; position: relative; border-radius: 14px; overflow: hidden; }
.briefing-overlay { position: absolute; inset: 0; background: radial-gradient(circle, rgba(0,0,0,.6), rgba(0,0,0,.95)); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.briefing-tag { margin-top: 20px; font-family: monospace; opacity: .8; }
.briefing { margin-top: -40px; padding-top: 80px; }

/* ===== REVEAL (Apparition tactique) ===== */
.reveal { opacity: 0; transform: translateY(24px) scale(.96); filter: blur(2px); transition: opacity .7s ease-out, transform .7s cubic-bezier(.22,1,.36,1), filter .6s ease-out; }
.reveal.visible { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
.reveal-block { opacity: 0; transform: translateY(30px); transition: all .9s ease; }
.reveal-block.visible { opacity: 1; transform: translateY(0); }
.reveal-heavy { opacity: 0; transform: translateY(40px); transition: opacity .9s ease-out, transform .9s ease-out; }
.reveal-heavy.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: .2s; }
.delay-2 { transition-delay: .4s; }

/* ===== PATCH IMAGE COUSUE ===== */
.patch-image { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,.7); }
.patch-image img { display: block; width: 100%; height: auto; }
.patch-image::before { content: ""; position: absolute; inset: 6px; border: 2px dashed rgba(255,255,255,.18); border-radius: 10px; pointer-events: none; }
.patch-image::after { content: ""; position: absolute; inset: 0; border-radius: 14px; box-shadow: inset 0 0 18px rgba(0,0,0,.65), 0 0 0 3px #1b1b1b; }

/* ============================================================
   HOME – CINEMATIC PACK (single copy)
============================================================ */
.home { width: 100%; display: flex; flex-direction: column; gap: 26px; padding-bottom: 30px; }

.home-hero {
    position: relative; height: calc(90vh - var(--cdf-navbar-height)); min-height: 640px;
    width: min(1300px, 96vw); margin: 0 auto; border-radius: 16px; overflow: hidden;
    box-shadow: 0 0 25px rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.08);
}
.home-hero-bg { position: absolute; inset: 0; background: url('/images/cdf/hero.jpg') center/cover no-repeat; transform: scale(1.05); animation: homeKenBurns 18s ease-in-out infinite alternate; }
@keyframes homeKenBurns { from { transform: scale(1.05) translateY(0px); } to { transform: scale(1.12) translateY(-10px); } }
.home-hero-vignette { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(0,0,0,.35), rgba(0,0,0,.92)), linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.90)); }
.home-hero::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 1px, rgba(0,0,0,0) 3px, rgba(0,0,0,0) 7px); opacity: .10; mix-blend-mode: overlay; pointer-events: none; }
.home-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.9)); pointer-events: none; }
.home-hero-content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 26px; }
.home-kicker { font-family: monospace; letter-spacing: 2px; opacity: .75; font-size: 12px; margin-bottom: 16px; }
.home-title { font-size: clamp(34px, 4vw, 58px); text-shadow: 4px 4px 12px #000; margin-bottom: 8px; }
.home-title-accent { width: min(520px, 80%); height: 3px; border-radius: 999px; background: linear-gradient(to right, transparent, var(--cdf-accent), transparent); opacity: .9; margin: 6px 0 14px; filter: drop-shadow(0 0 8px rgba(143,191,90,.25)); }
.home-subtitle { max-width: 820px; margin: 0 auto 18px; color: var(--cdf-text-dim); letter-spacing: .6px; font-size: 15px; }
.home-stats { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 0 0 18px; }
.home-pill { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 14px; border-radius: 12px; background: rgba(20,35,20,.62); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 10px 22px rgba(0,0,0,.35); backdrop-filter: blur(4px); }
.home-pill .k { font-family: monospace; letter-spacing: 1.5px; font-size: 11px; opacity: .75; }
.home-pill .v { font-family: 'BlackOpsOne'; font-size: 14px; color: var(--cdf-accent-2); text-shadow: 0 0 8px rgba(0,0,0,.6); }
.home-hint { margin-top: 14px; font-size: 12px; opacity: .75; letter-spacing: 1px; }
.home-cta { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; border-radius: 12px; font-family: 'BlackOpsOne'; background: #7fa64b; color: #000; box-shadow: 0 8px 25px rgba(0,0,0,.55); border: 1px solid #394622; transition: transform .2s ease, filter .2s ease, background .2s ease; }
.home-cta:hover { transform: translateY(-3px); background: #c7ff7c; }
.home-cta.ghost { background: rgba(20,35,20,.65); color: #e9f2e7; border: 1px solid rgba(255,255,255,.14); }
.home-cta.ghost:hover { filter: brightness(1.1); transform: translateY(-3px); }
.home-cta.big { padding: 16px 34px; font-size: 18px; }
.home-cta-row { opacity: var(--ctaOpacity, 1); transform: translateY(var(--ctaShiftY, 0px)); will-change: transform, opacity; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* Scroll button */
.home-scroll { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3; background: transparent; border: 0; cursor: pointer; display: grid; place-items: center; gap: 6px; padding: 10px 12px; color: rgba(255,255,255,.78); }
.home-scroll-label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-family: monospace; }
.home-scroll-mouse { width: 22px; height: 36px; border: 1px solid rgba(255,255,255,.55); border-radius: 14px; position: relative; box-shadow: 0 0 18px rgba(255,255,255,.65); }
.home-scroll-mouse::before { content: ""; width: 3px; height: 7px; background: rgba(255,255,255,.85); position: absolute; top: 8px; left: 50%; transform: translateX(-50%); border-radius: 999px; animation: homeWheel 1.6s infinite; }
@keyframes homeWheel { 0% { opacity: 0; transform: translateX(-50%) translateY(0px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(12px); } }
.home-scroll-arrow { width: 10px; height: 10px; border-right: 2px solid rgba(255,255,255,.65); border-bottom: 2px solid rgba(255,255,255,.65); transform: rotate(45deg); animation: homeArrow 1.6s infinite; margin-top: -2px; }
@keyframes homeArrow { 0%,100% { opacity: .35; transform: rotate(45deg) translateY(0); } 50% { opacity: 1; transform: rotate(45deg) translateY(3px); } }

/* Briefing / sections / split / grid */
.home-briefing, .home-split, .home-final { width: min(1300px, 96vw); margin: 0 auto; }
.home-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 26px; align-items: center; }
.home-split.reverse { grid-template-columns: .95fr 1.05fr; }
.home-split.reverse .home-split-text { order: 2; }
.home-list { list-style: none; padding: 0; margin: 0; }
.home-list li { position: relative; padding-left: 18px; margin: 8px 0; color: var(--cdf-text-dim); }
.home-list li::before { content: "▸"; position: absolute; left: 0; color: var(--cdf-accent); text-shadow: 0 0 10px rgba(143,191,90,.25); }
.home-grid { width: min(1300px, 96vw); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }

@media (max-width: 992px) {
    .home-hero { min-height: 560px; }
    .home-split, .home-split.reverse { grid-template-columns: 1fr; }
    .home-grid { grid-template-columns: 1fr; }
    .home-pill { width: 100%; justify-content: center; }
}

/* ===== HERO SCROLL SPLIT ===== */
.home-hero.scroll-stage { height: calc(140vh - var(--cdf-navbar-height)); }
.home-hero-stage { position: sticky; top: var(--cdf-navbar-height); height: calc(90vh - var(--cdf-navbar-height)); display: flex; align-items: center; justify-content: center; z-index: 2; padding: 24px; }
.home-hero-grid { width: min(1150px, 100%); display: grid; grid-template-columns: var(--textW, 100%) var(--mediaW, 0%); gap: var(--gap, 0px); align-items: center; }
.home-hero-text { transform: translateX(var(--textShift, 0px)); transition: none; }
.home-hero[data-split="1"] .home-hero-text { text-align: left; }
.home-hero:not([data-split="1"]) .home-hero-text { text-align: center; }
.home-hero-media { opacity: var(--mediaOpacity, 0); transform: translateX(var(--mediaShift, 40px)) scale(var(--mediaScale, .96)); pointer-events: none; will-change: transform, opacity; }
.hero-media-frame { border-radius: 14px; overflow: hidden; box-shadow: 0 10px 26px rgba(0,0,0,.65); }
.hero-media-frame img { width: 100%; height: min(360px, 40vh); object-fit: cover; display: block; }

@media (max-width: 992px) {
    .home-hero.scroll-stage { height: calc(125vh - var(--cdf-navbar-height)); }
    .home-hero-grid { grid-template-columns: 1fr; gap: 14px; }
    .home-hero-media { opacity: 1; transform: none; }
    .home-hero-text { transform: none; text-align: center !important; }
}