/* ============================================================
   DATA IN MOTION — project page styles (green-only)
   ============================================================ */

.proj-nav-back {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
}
.proj-nav-back .circle { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--ink-20); display: grid; place-items: center; transition: transform .35s var(--ease), background .3s, border-color .3s, color .3s; }
.proj-nav-back:hover .circle { transform: translateX(-4px); background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* HERO */
.dm-hero { position: relative; padding-top: 160px; overflow: hidden; }
.dm-hero .halo-green.h-a { width: 46%; height: 64%; top: -10%; right: -8%; opacity: .5; }
.dm-hero .halo-green.h-b { width: 34%; height: 40%; bottom: 0; left: -8%; opacity: .3; }
.dm-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.dm-tags .pill { background: rgba(183,245,109,0.14); border-color: rgba(156,224,72,0.4); color: var(--green-deep); box-shadow: none; }
.dm-hero h1 { font-family: var(--font-display); font-size: clamp(3rem, 10vw, 8.5rem); letter-spacing: -0.04em; line-height: 0.88; text-transform: uppercase; }
.dm-hero h1 em { font-style: normal; color: var(--green-deep); }
.dm-hero .lead { font-size: clamp(1.1rem, 1.8vw, 1.45rem); color: var(--ink-55); max-width: 56ch; margin-top: 30px; }

.dm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 56px; }
.dm-stat { padding: 26px 0; border-top: 2px solid var(--ink); }
.dm-stat b { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -0.03em; }
.dm-stat span { font-family: var(--font-mono); font-size: .82rem; color: var(--ink-40); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 760px) { .dm-stats { grid-template-columns: repeat(2, 1fr); } }

/* Main visual — large data scene */
.dm-visual {
  position: relative; margin-top: 70px; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 16/8; background: var(--noir); color: var(--paper-on-noir);
  box-shadow: 0 60px 120px -50px rgba(12,13,11,0.7);
  display: grid; place-items: center;
}
.dm-visual .halo-green { width: 56%; height: 80%; bottom: -16%; left: 22%; opacity: .7; }
.dm-bigviz { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 18px; height: 50%; }
.dm-bigviz .col { width: 46px; border-radius: 12px 12px 0 0; transform-origin: bottom;
  background: linear-gradient(to top, var(--green-deep), var(--green-2)); box-shadow: 0 16px 30px -10px rgba(0,0,0,0.4), 0 0 24px rgba(183,245,109,0.3);
  animation: barpulse 3s ease-in-out infinite; }
@keyframes barpulse { 0%,100% { transform: scaleY(.7); } 50% { transform: scaleY(1); } }
.dm-float-num { position: absolute; font-family: var(--font-display); font-weight: 600; color: var(--paper-on-noir); z-index: 3; }
.dm-float-num.a { font-size: clamp(40px, 7vw, 96px); top: 12%; left: 8%; opacity: .95; animation: floaty 7s ease-in-out infinite; }
.dm-float-num.b { font-size: clamp(28px, 4vw, 56px); top: 18%; right: 10%; color: var(--green); animation: floaty 8s ease-in-out infinite 1s; }
.dm-float-num.c { font-size: clamp(22px, 3vw, 42px); bottom: 14%; right: 16%; color: var(--paper-on-noir); opacity: .8; animation: floaty 6s ease-in-out infinite .5s; }

/* TIMELINE */
.timeline { position: relative; padding-left: 80px; }
.tl-rail { position: absolute; left: 27px; top: 8px; bottom: 8px; width: 2px; background: var(--ink-20); }
.tl-progress { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--green-deep); box-shadow: 0 0 12px var(--green-glow); }
.tl-step { position: relative; padding-bottom: clamp(60px, 9vh, 120px); }
.tl-step:last-child { padding-bottom: 0; }
.tl-node {
  position: absolute; left: -68px; top: 0; width: 56px; height: 56px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--ink-20); display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink-40);
  transition: all .5s var(--ease); z-index: 2;
}
.tl-step.active .tl-node { border-color: var(--green-deep); color: var(--ink); background: var(--green); box-shadow: 0 14px 30px -10px var(--green-glow); transform: scale(1.05); }
.tl-step h3 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); margin-bottom: 14px; }
.tl-step .tl-eye { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--green-deep); }
.tl-step p { color: var(--ink-55); max-width: 60ch; font-size: 1.08rem; }
.tl-media { margin-top: 26px; border-radius: 22px; overflow: hidden; border: 1px solid var(--ink-20); }
.tl-media .ph { aspect-ratio: 16/8; display: grid; place-items: center; position: relative;
  background: repeating-linear-gradient(45deg, #ecefe8 0 12px, #e3e7df 12px 24px); }
.tl-media .ph.noir { background: var(--noir); }
.tl-media .ph .lbl { font-family: var(--font-mono); font-size: 13px; color: #9aa092; }
.tl-explor { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.tl-explor .sw { aspect-ratio: 4/3; border-radius: 16px; }

/* VIDEO PLAYER */
.player-section { position: relative; }
.player-section .halo-green { width: 60%; height: 80%; top: -10%; left: 20%; opacity: .4; }
.player {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/9;
  background: var(--noir);
  box-shadow: 0 70px 140px -50px rgba(12,13,11,0.7);
  display: grid; place-items: center;
}
.player .halo-green { width: 44%; height: 64%; bottom: -10%; right: 8%; opacity: .5; }
.player-play {
  position: relative; z-index: 3; width: 96px; height: 96px; border-radius: 50%;
  background: var(--green); display: grid; place-items: center; cursor: pointer;
  transition: transform .4s var(--ease), opacity .3s; box-shadow: 0 20px 50px -10px var(--green-glow);
}
.player-play:hover { transform: scale(1.08); }
.player-play svg { margin-left: 4px; }
.player-bar { position: absolute; left: 26px; right: 26px; bottom: 22px; z-index: 3; display: flex; align-items: center; gap: 14px; }
.player-bar .track { flex: 1; height: 5px; border-radius: 100px; background: rgba(242,244,236,0.25); overflow: hidden; }
.player-bar .track .done { width: 34%; height: 100%; background: var(--green); border-radius: 100px; transition: width .12s linear; }
.player-bar .t { font-family: var(--font-mono); font-weight: 500; font-size: 13px; color: var(--paper-on-noir); }
.player-cap { text-align: center; color: var(--ink-40); font-family: var(--font-mono); font-size: 13px; margin-top: 18px; }

/* next project */
.dm-next { text-align: center; }
.dm-next a { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 5vw, 3.6rem); display: inline-flex; align-items: center; gap: 20px; text-transform: uppercase; letter-spacing: -0.02em; }
.dm-next a .circle { width: 64px; height: 64px; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; transition: transform .4s var(--ease); }
.dm-next a:hover .circle { transform: translateX(8px); }

@media (max-width: 760px) {
  .timeline { padding-left: 56px; }
  .tl-rail { left: 19px; }
  .tl-node { left: -56px; width: 40px; height: 40px; font-size: .85rem; }
  .tl-explor { grid-template-columns: 1fr; }
}

/* ============================================================
   PER-PROJECT HERO VISUALS (inside .dm-visual)
   ============================================================ */
.pv { position: relative; z-index: 2; width: 100%; height: 100%; display: grid; place-items: center; }

/* — Bankai : énergie / vitesse — */
.pv-burst { position: absolute; inset: 0; overflow: hidden; }
.pv-burst .ring { position: absolute; top: 50%; left: 50%; width: 34%; aspect-ratio: 1; transform: translate(-50%,-50%); border-radius: 50%; border: 2px solid var(--green); box-shadow: 0 0 40px var(--green-glow); animation: burstpulse 3s ease-in-out infinite; }
.pv-burst .ring.r2 { width: 50%; opacity: .4; animation-delay: .6s; }
.pv-burst .ring.r3 { width: 66%; opacity: .2; animation-delay: 1.2s; }
@keyframes burstpulse { 0%,100% { transform: translate(-50%,-50%) scale(.92); } 50% { transform: translate(-50%,-50%) scale(1.04); } }
.pv-burst .slash { position: absolute; height: 3px; width: 60%; left: 20%; background: linear-gradient(90deg, transparent, var(--green), transparent); transform-origin: center; }
.pv-burst .slash.s1 { top: 30%; transform: rotate(-24deg); animation: slashmove 2.4s ease-in-out infinite; }
.pv-burst .slash.s2 { top: 54%; transform: rotate(-24deg); animation: slashmove 2.4s ease-in-out infinite .4s; }
.pv-burst .slash.s3 { top: 70%; transform: rotate(-24deg); animation: slashmove 2.4s ease-in-out infinite .8s; }
@keyframes slashmove { 0%,100% { opacity: .3; transform: rotate(-24deg) translateX(-12px); } 50% { opacity: 1; transform: rotate(-24deg) translateX(12px); } }

/* — K2000 : scanner — */
.pv-scanner { width: 64%; display: flex; flex-direction: column; gap: 16px; }
.pv-scanner .bay { height: 20px; border-radius: 12px; background: #15170f; overflow: hidden; position: relative; box-shadow: inset 0 0 12px rgba(0,0,0,.6); }
.pv-scanner .bay i { position: absolute; top: 0; bottom: 0; width: 34%; border-radius: 12px; background: linear-gradient(90deg, transparent, var(--green)); box-shadow: 0 0 26px var(--green-glow); }
.pv-scanner .bay.b1 i { animation: scan 2.2s ease-in-out infinite; }
.pv-scanner .bay.b2 i { animation: scan 2.2s ease-in-out infinite reverse; opacity: .6; }
.pv-scanner .bay.b3 i { animation: scan 3s ease-in-out infinite; opacity: .35; }
@keyframes scan { 0%,100% { left: -34%; } 50% { left: 100%; } }

/* — Cover : vinyle — */
.pv-vinyl { width: min(58%, 320px); aspect-ratio: 1; border-radius: 50%; position: relative;
  background: repeating-radial-gradient(circle at center, #0c0d0b 0 5px, #1a1c15 5px 7px);
  display: grid; place-items: center; animation: spin-slow 9s linear infinite; box-shadow: 0 40px 70px -24px rgba(0,0,0,.6); }
.pv-vinyl .label { width: 40%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 34% 30%, var(--green-2), var(--green-deep)); display: grid; place-items: center; }
.pv-vinyl .label::after { content: ''; width: 14%; aspect-ratio: 1; border-radius: 50%; background: var(--noir); }
.pv-vinyl .shine { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.14) 50%, transparent 60%); }

/* — Comptoir : navigateur — */
.pv-browser { width: 80%; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 40px 70px -28px rgba(0,0,0,.5); }
.pv-browser .bar { height: 36px; background: #e7e9e2; display: flex; align-items: center; gap: 7px; padding: 0 14px; }
.pv-browser .bar i { width: 10px; height: 10px; border-radius: 50%; background: #c4c8bc; }
.pv-browser .bar .url { margin-left: 10px; height: 16px; flex: 1; max-width: 60%; border-radius: 8px; background: #fff; }
.pv-browser .scr { padding: 18px; background: #fafaf8; display: grid; gap: 12px; }
.pv-browser .scr .headrow { display: flex; justify-content: space-between; align-items: center; }
.pv-browser .scr .h-block { width: 46%; height: 26px; border-radius: 6px; background: #15170f; }
.pv-browser .scr .nav-block { width: 30%; height: 12px; border-radius: 6px; background: var(--green-deep); }
.pv-browser .scr .hero-block { height: 80px; border-radius: 10px; background: linear-gradient(135deg, #1a1c15, #0c0d0b); position: relative; overflow: hidden; }
.pv-browser .scr .hero-block::after { content: ''; position: absolute; width: 60%; height: 140%; right: -10%; bottom: -20%; background: radial-gradient(circle, var(--green-glow), transparent 65%); }
.pv-browser .scr .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pv-browser .scr .cards span { height: 44px; border-radius: 8px; background: #e7e9e2; }
.pv-browser .scr .cards span:nth-child(2) { background: var(--green); }

/* — Affiche : poster — */
.pv-poster { width: 46%; aspect-ratio: 3/4; border-radius: 10px; background: linear-gradient(160deg, #16180f, #0c0d0b); padding: clamp(14px,2vw,24px); display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 40px 70px -24px rgba(0,0,0,.6); position: relative; overflow: hidden; }
.pv-poster::after { content: ''; position: absolute; width: 80%; aspect-ratio: 1; border-radius: 50%; right: -20%; top: 30%; border: 2px solid var(--green); opacity: .5; }
.pv-poster .pp-top { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--green); position: relative; z-index: 1; }
.pv-poster .pp-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 3vw, 2.4rem); line-height: .9; color: var(--paper-on-noir); text-transform: uppercase; letter-spacing: -.02em; position: relative; z-index: 1; }
.pv-poster .pp-foot { display: flex; gap: 6px; position: relative; z-index: 1; }
.pv-poster .pp-foot i { width: 26px; height: 5px; border-radius: 4px; background: var(--green-deep); }
.pv-poster .pp-foot i:nth-child(2) { background: rgba(242,244,236,.3); }

/* — Minecraft : voxels — */
.pv-voxel { perspective: 800px; }
.pv-voxel .iso { transform: rotateX(56deg) rotateZ(45deg); transform-style: preserve-3d; display: grid; grid-template-columns: repeat(3, 52px); grid-auto-rows: 52px; gap: 10px; }
.pv-voxel .vx { border-radius: 8px; background: linear-gradient(160deg, #2a2d24, #15170f); box-shadow: 0 14px 22px -6px rgba(0,0,0,.5); animation: cubefloat 4s ease-in-out infinite; }
.pv-voxel .vx.g { background: linear-gradient(160deg, var(--green-2), var(--green-deep)); box-shadow: 0 14px 26px -6px var(--green-glow); }

/* ============================================================
   PROJECT GALLERY / SHOWCASE
   ============================================================ */
.pgal { display: grid; gap: clamp(16px, 2vw, 26px); }
.pgal.cols-3 { grid-template-columns: repeat(3, 1fr); }
.pgal.cols-2 { grid-template-columns: repeat(2, 1fr); }
.pgal .frame { position: relative; border-radius: 18px; overflow: hidden; background: var(--noir); border: 1px solid var(--ink-12);
  display: grid; place-items: center; }
.pgal .frame .lbl { font-family: var(--font-mono); font-size: 12px; color: rgba(242,244,236,.5); position: absolute; bottom: 14px; left: 16px; }
.pgal .frame .halo-green { width: 70%; height: 70%; opacity: .4; }
.pgal .frame.ar-square { aspect-ratio: 1; }
.pgal .frame.ar-portrait { aspect-ratio: 3/4; }
.pgal .frame.ar-wide { aspect-ratio: 16/10; }
.showcase-note { text-align: center; color: var(--ink-40); font-family: var(--font-mono); font-size: 13px; margin-top: 20px; }
@media (max-width: 760px) { .pgal.cols-3, .pgal.cols-2 { grid-template-columns: 1fr; } }