html.jk-intro-active, html.jk-intro-active body { overflow:hidden!important; height:100%; }
#jk-cinematic-intro{position:fixed;inset:0;z-index:100000;isolation:isolate;overflow:hidden;background:#02050b;color:#fff;display:grid;place-items:center;min-height:100svh;min-height:100dvh;opacity:1;visibility:visible;transform:translateZ(0);transition:opacity .9s ease,visibility .9s ease;touch-action:pan-y;cursor:default}
#jk-cinematic-intro .jk-intro-backdrop{position:absolute;inset:-8%;background:radial-gradient(ellipse at 50% 48%,#063c77 0%,#06182d 37%,#010309 75%);animation:jkIntroBreath 8s ease-in-out infinite alternate;z-index:-4}
#jk-cinematic-intro .jk-intro-smoke-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;mix-blend-mode:screen;opacity:1;filter:blur(5px) saturate(1.12);-webkit-mask-image:radial-gradient(ellipse 78% 72% at 50% 52%,rgba(0,0,0,.12) 0%,rgba(0,0,0,.28) 38%,rgba(0,0,0,.78) 65%,rgba(0,0,0,.32) 84%,transparent 100%);mask-image:radial-gradient(ellipse 78% 72% at 50% 52%,rgba(0,0,0,.12) 0%,rgba(0,0,0,.28) 38%,rgba(0,0,0,.78) 65%,rgba(0,0,0,.32) 84%,transparent 100%)}
/* Lumière volumétrique et éclairs, indépendants du masque de fumée. */
#jk-cinematic-intro .jk-intro-storm-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;mix-blend-mode:screen}
#jk-cinematic-intro .jk-intro-art{filter:brightness(calc(1 + var(--jk-storm-light,0) * .22))}
#jk-cinematic-intro .jk-intro-smoke-canvas{filter:blur(3px) saturate(1.18);opacity:.85}
#jk-cinematic-intro:after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(#0006,transparent 12%,transparent 86%,#0008);box-shadow:inset 0 0 100px #0005}
/* Accueil de base : image de référence complète et fumée animée. */
#jk-cinematic-intro .jk-intro-environment{position:absolute;inset:-3%;z-index:0;background:url('/assets/56-soundsystem-hero-readable.png') center/cover no-repeat;filter:blur(22px) brightness(.3);opacity:.7}
#jk-cinematic-intro .jk-intro-scene{position:absolute;inset:0;z-index:1;display:grid;place-items:center;padding:0}
#jk-cinematic-intro .jk-intro-medallion{position:relative;width:100%;height:100%;filter:none;animation:jkIntroArtIn 1.5s .12s ease-out both;transform:scale(1.025);opacity:0}
#jk-cinematic-intro .jk-intro-art{display:block;position:relative;width:100%;height:100%;object-fit:contain;object-position:center}
#jk-cinematic-intro .jk-intro-metal-sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,transparent 36%,#ceeaff10 43%,#fff9 49%,#d5eaff20 54%,transparent 62%);background-size:320% 100%;mix-blend-mode:soft-light;opacity:.55;-webkit-mask:url('/assets/56-soundsystem-metallic-v1.png') center/contain no-repeat;mask:url('/assets/56-soundsystem-metallic-v1.png') center/contain no-repeat;animation:jkMetalReflection 10s ease-in-out infinite}
@keyframes jkMetalReflection{0%,15%{background-position:100% 50%;opacity:0}32%{opacity:.55}60%,100%{background-position:0% 50%;opacity:0}}
@media(max-aspect-ratio:4/5){#jk-cinematic-intro .jk-intro-scene{inset:12% 0 18%}#jk-cinematic-intro .jk-intro-medallion{width:100%;height:100%}}
#jk-cinematic-intro .jk-intro-light{position:absolute;inset:-8%;z-index:2;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(ellipse 28% 52% at 16% 58%,#168bff55,transparent 75%),radial-gradient(ellipse 24% 46% at 85% 38%,#16a3ff44,transparent 75%);animation:jkLightBreathe 11s ease-in-out infinite alternate;translate:calc(var(--jk-depth-x,0px) * -.6) calc(var(--jk-depth-y,0px) * -.6)}
#jk-cinematic-intro .jk-intro-light:before{content:"";position:absolute;inset:-15%;background:linear-gradient(112deg,transparent 28%,#67cbff15 34%,transparent 40%,transparent 61%,#328dff12 66%,transparent 72%);filter:blur(22px);animation:jkLightDrift 19s ease-in-out infinite alternate}
@keyframes jkLightBreathe{from{opacity:.35;transform:scale(1)}to{opacity:.8;transform:scale(1.045)}}
@keyframes jkLightDrift{from{transform:translate3d(-2%,-1%,0) rotate(-3deg)}to{transform:translate3d(2%,1%,0) rotate(3deg)}}
#jk-cinematic-intro .jk-intro-vignette{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,#0003 100%),linear-gradient(0deg,#02050b99,transparent 18%,transparent 88%,#0003)}
#jk-cinematic-intro .jk-intro-scroll-hint{position:absolute;z-index:5;left:50%;bottom:clamp(25px,5vh,52px);transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:11px 18px 11px 22px;border:1px solid #ffffff66;border-radius:999px;background:linear-gradient(125deg,#07111ee8,#0d263bdd);color:#fff;backdrop-filter:blur(16px);font-family:inherit;font-size:10px;font-weight:800;letter-spacing:.16em;white-space:nowrap;text-align:left;text-shadow:0 2px 10px #000;cursor:pointer;box-shadow:0 8px 32px #0005,inset 0 1px 0 #ffffff12;transition:border-color .25s,box-shadow .25s;animation:jkScrollHintFloat 4s ease-in-out infinite}
#jk-cinematic-intro .jk-intro-hint-detail{display:block;margin-top:6px;font-size:8px;font-weight:500;letter-spacing:.13em;color:#a7c4da}
#jk-cinematic-intro .jk-intro-scroll-hint:hover{border-color:#9edfff;box-shadow:0 8px 36px #0006,0 0 24px #299bff24}
#jk-cinematic-intro .jk-intro-scroll-hint:focus-visible{outline:2px solid #c8edff;outline-offset:5px}
#jk-cinematic-intro .jk-intro-scroll-hint b{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#fff;color:#07111e;font-size:19px;line-height:1}
#jk-cinematic-intro .jk-cta-flame{display:inline-block;font-size:1.25em;vertical-align:-1px;filter:drop-shadow(0 0 5px #ff7a18);animation:jkCtaFlame .9s ease-in-out infinite alternate}
#jk-cinematic-intro .jk-cta-flame:last-child{animation-delay:-.45s}
@keyframes jkCtaFlame{from{transform:translateY(1px) scale(.92)}to{transform:translateY(-2px) scale(1.08)}}
@keyframes jkScrollHintFloat{0%,100%{translate:0 0}50%{translate:0 6px}}
#jk-cinematic-intro .jk-intro-sound-notice{position:absolute;z-index:6;right:clamp(18px,3vw,42px);top:clamp(18px,3vh,32px);width:300px;max-width:calc(100% - 36px);padding:12px 18px;border:1px solid #64baff77;border-radius:999px;background:#06101add;color:#eaf6ff;backdrop-filter:blur(14px);font:700 10px/1.5 system-ui,sans-serif;letter-spacing:.04em;text-align:center;box-shadow:0 0 28px #168dff33;animation:jkSoundNoticeIn .45s ease both}
#jk-cinematic-intro .jk-intro-sound-notice[hidden]{display:none}
@keyframes jkSoundNoticeIn{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@media(max-width:650px){#jk-cinematic-intro .jk-intro-sound-notice{top:18px;right:18px;width:240px;font-size:9px;padding:10px 14px}}
@media(max-width:650px){#jk-cinematic-intro .jk-intro-scroll-hint{font-size:9px;letter-spacing:.1em;gap:10px;padding:9px 13px 9px 16px}}
#jk-cinematic-intro.jk-intro-departing{animation:jkIntroDeparture .68s cubic-bezier(.2,.75,.25,1) forwards;pointer-events:none;will-change:opacity,transform}
#jk-cinematic-intro.jk-intro-departing .jk-intro-medallion{opacity:1;animation:jkArtDeparture .68s cubic-bezier(.2,.75,.25,1) forwards}
#jk-cinematic-intro.jk-intro-departing .jk-intro-smoke-canvas{opacity:1;animation:jkSmokeDeparture .68s cubic-bezier(.2,.75,.25,1) forwards}
#jk-cinematic-intro.jk-intro-gone{visibility:hidden;opacity:0;pointer-events:none}
@keyframes jkIntroArtIn{to{opacity:1;transform:scale(1)}}
@keyframes jkIntroBreath{to{transform:scale(1.09);filter:brightness(1.2)}}
@keyframes jkSmokeFlow{0%{transform:translate3d(-3%,2%,0) scale(1);filter:blur(35px)}50%{transform:translate3d(3%,-3%,0) scale(1.08);filter:blur(45px)}100%{transform:translate3d(-1%,-5%,0) scale(1.12);filter:blur(38px)}}
@keyframes jkIntroDeparture{0%{opacity:1;clip-path:inset(0);transform:scale(1)}55%{opacity:.96;clip-path:inset(0);transform:scale(1.015)}100%{opacity:0;clip-path:inset(0);transform:scale(1.035);visibility:hidden}}
@keyframes jkArtDeparture{0%{transform:scale(1);filter:brightness(1) blur(0)}55%{transform:scale(1.055);filter:brightness(1.12) blur(0)}100%{transform:scale(1.12);filter:brightness(1.28) blur(4px)}}
@keyframes jkSmokeDeparture{0%{transform:scale(1);opacity:1;filter:blur(5px)}100%{transform:scale(1.22) translateY(-4%);opacity:0;filter:blur(30px)}}
@media(max-width:650px){#jk-cinematic-intro .jk-intro-art{object-position:50% 50%}#jk-cinematic-intro .jk-intro-title{font-size:clamp(48px,14vw,82px)}#jk-cinematic-intro .jk-intro-eyebrow{letter-spacing:.2em}#jk-cinematic-intro .jk-intro-enter{font-size:9px;letter-spacing:.1em;gap:10px;padding:10px 13px 10px 16px}}
@media(prefers-reduced-motion:reduce){#jk-cinematic-intro *,#jk-cinematic-intro *:before,#jk-cinematic-intro *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}