/* ===========================================================
   DTS — Couche cinématique (motion) par-dessus Nocturne
   Aurora, carte corridor animée, compteurs, révélations,
   tableau de départs vivant. Respecte prefers-reduced-motion.
   =========================================================== */

/* ---------- Hero immersif ---------- */
.hero{position:relative;overflow:hidden;min-height:90vh;display:flex;align-items:center;isolation:isolate}
.hero-inner{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center;
  padding:72px 28px 80px;width:100%;position:relative;z-index:2}

/* Aurora : glows accent qui dérivent lentement */
.aurora{position:absolute;inset:-30% -10%;z-index:0;pointer-events:none;filter:blur(70px);opacity:.55}
.aurora::before,.aurora::after{content:"";position:absolute;border-radius:50%}
.aurora::before{width:52vw;height:52vw;left:-6vw;top:-8vw;
  background:radial-gradient(circle,rgba(145,132,217,.55),transparent 60%);animation:auroraA 18s ease-in-out infinite alternate}
.aurora::after{width:44vw;height:44vw;right:-4vw;bottom:-12vw;
  background:radial-gradient(circle,rgba(76,83,151,.6),transparent 62%);animation:auroraB 22s ease-in-out infinite alternate}
@keyframes auroraA{0%{transform:translate(0,0) scale(1)}100%{transform:translate(8vw,6vw) scale(1.18)}}
@keyframes auroraB{0%{transform:translate(0,0) scale(1.05)}100%{transform:translate(-7vw,-5vw) scale(.9)}}

/* Grille pointillée subtile */
.grid-bg{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(233,233,237,.10) 1px,transparent 1px);background-size:34px 34px;
  mask-image:radial-gradient(ellipse 80% 70% at 60% 40%,#000 30%,transparent 78%)}

/* Titre : entrée mot à mot */
.hero-title{font-size:clamp(40px,5.4vw,66px);line-height:1.02;letter-spacing:-.035em;max-width:15ch;margin:18px 0 22px}
.hero-title .w{display:inline-block;opacity:0;transform:translateY(22px);filter:blur(6px);
  animation:wordIn .7s cubic-bezier(.2,.7,.2,1) forwards}
.hero-title .accent{color:var(--color-accent-400)}
@keyframes wordIn{to{opacity:1;transform:none;filter:none}}

/* Entrées douces (hero) */
.fade-up{opacity:0;transform:translateY(16px);animation:fadeUp .8s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.5s}.d2{animation-delay:.65s}.d3{animation-delay:.8s}.d4{animation-delay:.95s}
@keyframes fadeUp{to{opacity:1;transform:none}}

/* ---------- Carte corridor animée ---------- */
.hero-map{position:relative;opacity:0;transform:scale(.97);animation:mapIn 1s .35s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes mapIn{to{opacity:1;transform:none}}
.corridor{width:100%;height:auto;display:block;overflow:visible}
.map-frame{position:relative;background:radial-gradient(120% 120% at 70% 20%,#1b1d2b,#12141f);
  border:1px solid var(--color-divider);border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow-lg)}
.map-topline{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 60%,transparent)}
.map-topline .dot{width:7px;height:7px;border-radius:50%;background:#8fe3b0;box-shadow:0 0 0 0 rgba(143,227,176,.6);animation:live 2s infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(143,227,176,.5)}70%{box-shadow:0 0 0 8px rgba(143,227,176,0)}100%{box-shadow:0 0 0 0 rgba(143,227,176,0)}}

/* routes : tracé qui se dessine puis flux continu */
.route{fill:none;stroke:var(--color-accent);stroke-width:1.6;opacity:.28;
  stroke-dasharray:100;stroke-dashoffset:100;animation:draw 1.7s .45s ease forwards}
.fr-glow{filter:drop-shadow(0 0 6px rgba(181,171,252,.95))}
.route.branch{opacity:.18;stroke-width:1.2}
@keyframes draw{to{stroke-dashoffset:0}}
.flow{fill:none;stroke:var(--color-accent-400);stroke-width:1.8;stroke-linecap:round;
  stroke-dasharray:2 16;opacity:.9;animation:flow 3.2s linear infinite}
@keyframes flow{to{stroke-dashoffset:-180}}

/* pastilles de fret qui voyagent */
.freight{offset-rotate:0deg;animation:travel 5.5s linear infinite}
.freight.f2{animation-delay:-1.8s;animation-duration:6.2s}
.freight.f3{animation-delay:-3.6s;animation-duration:5s}
@keyframes travel{from{offset-distance:0%}to{offset-distance:100%}}

/* noeuds villes */
.node circle.core{fill:var(--color-accent)}
.node.hub circle.core{fill:#b5abfc}
.node .ring{fill:none;stroke:var(--color-accent);opacity:.6;transform-origin:center;transform-box:fill-box;
  animation:ring 2.6s ease-out infinite}
.node.slow .ring{animation-duration:3.4s}
@keyframes ring{0%{transform:scale(.5);opacity:.7}100%{transform:scale(2.6);opacity:0}}
.node text{fill:color-mix(in srgb,var(--color-text) 80%,transparent);font:500 11px var(--font-body)}
.node .sub{fill:color-mix(in srgb,var(--color-text) 45%,transparent);font-size:9px}

/* ---------- Compteurs ---------- */
.count{font-variant-numeric:tabular-nums}

/* ---------- Révélations au scroll ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(1){transition-delay:.0s}
.stagger.in>*:nth-child(2){transition-delay:.09s}
.stagger.in>*:nth-child(3){transition-delay:.18s}
.stagger.in>*:nth-child(4){transition-delay:.27s}

/* Cartes : relief + lueur au survol */
.card,.step{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
.card:hover,.step:hover{transform:translateY(-6px)}
.card.elev-sm:hover{box-shadow:0 0 0 1px var(--color-accent),0 18px 40px rgba(0,0,0,.5),0 0 40px rgba(145,132,217,.14)}
.step:hover{border-color:var(--color-accent);box-shadow:0 14px 34px rgba(0,0,0,.5),0 0 30px rgba(145,132,217,.12)}
.card i.ph{transition:transform .3s,color .3s}
.card:hover i.ph{transform:scale(1.12) translateY(-1px)}

/* Boutons : lueur */
.btn-primary{position:relative;transition:transform .2s,background .2s,box-shadow .3s}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(145,132,217,.35)}

/* ---------- Tableau de départs vivant ---------- */
.board-section{position:relative}
.board-live .table tbody tr{opacity:0;transform:translateY(10px);animation:rowIn .5s forwards}
.board-live.in .table tbody tr{animation-play-state:running}
.board-live .table tbody tr:nth-child(1){animation-delay:.05s}
.board-live .table tbody tr:nth-child(2){animation-delay:.14s}
.board-live .table tbody tr:nth-child(3){animation-delay:.23s}
.board-live .table tbody tr:nth-child(4){animation-delay:.32s}
@keyframes rowIn{to{opacity:1;transform:none}}
.tag-accent.blink{animation:blink 2.4s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.45}}
/* ligne de balayage "temps réel" */
.scanner{position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--color-accent),transparent);opacity:.55;animation:scan 4.5s linear infinite}
@keyframes scan{0%{transform:translateY(0);opacity:0}10%{opacity:.55}90%{opacity:.55}100%{transform:translateY(360px);opacity:0}}

/* timeline : impulsion qui court */
.tl-bar{position:relative;overflow:visible}
.tl-node.cur{box-shadow:0 0 0 0 rgba(145,132,217,.6)}

/* Bande stat : léger flottement du chiffre */
.statband .n{background:linear-gradient(180deg,#fff,#cfd3e5);-webkit-background-clip:text;background-clip:text;color:transparent}

/* marquee ports (ruban défilant) */
.ticker{border-top:1px solid var(--color-divider);border-bottom:1px solid var(--color-divider);overflow:hidden;background:#12141f}
.ticker-track{display:flex;gap:40px;white-space:nowrap;padding:12px 0;width:max-content;animation:tick 28s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-item{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:color-mix(in srgb,var(--color-text) 62%,transparent)}
.ticker-item i{color:var(--color-accent)}
@keyframes tick{to{transform:translateX(-50%)}}

@media(max-width:960px){
  .hero-inner{grid-template-columns:1fr;gap:32px;padding:48px 24px 60px}
  .hero{min-height:auto}
}
@media(prefers-reduced-motion:reduce){
  .aurora::before,.aurora::after,.flow,.freight,.node .ring,.scanner,.ticker-track,.map-topline .dot,.tag-accent.blink{animation:none!important}
  .hero-title .w,.fade-up,.hero-map{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
  .route{stroke-dashoffset:0!important;animation:none!important}
  .reveal,.stagger>*{opacity:1!important;transform:none!important}
}

/* ---------- Variante hero PHOTO plein cadre ---------- */
.hero-photo{min-height:92vh;position:relative;display:flex;align-items:center;overflow:hidden}
.hero-photo-bg{position:absolute;inset:0;z-index:0;background:#0d0f18;overflow:hidden}
.hero-photo-bg img{width:100%;height:100%;object-fit:cover;opacity:.92;
  animation:kenburns 26s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.08) translate(0,0)}to{transform:scale(1.2) translate(-2.5%,-2%)}}
.hero-photo-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(15,17,28,.95),rgba(15,17,28,.6) 52%,rgba(15,17,28,.32)),
             linear-gradient(0deg,var(--color-bg),transparent 42%)}
.hero-photo .wrap{position:relative;z-index:2}
.hero-photo .hero-copy{max-width:660px}
.hero-photo .badge-live{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.02em;
  color:#cfe0f2;background:rgba(4,16,31,.5);border:1px solid rgba(233,233,237,.14);
  padding:8px 13px;border-radius:20px;margin-bottom:18px;backdrop-filter:blur(6px)}
.hero-photo .badge-live .dot{width:7px;height:7px;border-radius:50%;background:#8fe3b0;animation:live 2s infinite}
@media(prefers-reduced-motion:reduce){.hero-photo-bg img{animation:none}}