/* SKAY RECORDS / CHROME STORY V12 - extension ciblée de la V10 corrigée */
/* No layout-changing spacers: ribbons sit on top of existing section boundaries. */
.showcase,.journey,.interlude,.prices,.contact{position:relative}
.skay-universal-ribbon{position:absolute;z-index:18;top:0;left:0;right:0;height:38px;overflow:hidden;pointer-events:none;background:linear-gradient(90deg,#8994a5 0%,#eff2f6 20%,#bdc6d2 49%,#f1f3f7 78%,#778396 100%);box-shadow:0 1px 0 #ffffff70,0 13px 36px #070b1426;border-top:1px solid #fff7;border-bottom:1px solid #0c142538;color:#131820;transform:translateZ(0)}
.skay-universal-ribbon:before,.skay-universal-ribbon:after{content:"";position:absolute;top:0;bottom:0;width:10%;z-index:2;pointer-events:none}.skay-universal-ribbon:before{left:0;background:linear-gradient(90deg,#c5cedb,transparent)}.skay-universal-ribbon:after{right:0;background:linear-gradient(270deg,#c5cedb,transparent)}
.skay-universal-ribbon-track{display:flex;width:max-content;min-width:200%;align-items:center;height:100%;white-space:nowrap;animation:skayV12Marquee 35s linear infinite;will-change:transform}
.skay-universal-ribbon-track span{font:700 11px/1 Arial,sans-serif;letter-spacing:.31em;padding:0 2rem}.skay-universal-ribbon-track b{font-size:16px;padding:0 24px;color:#586579;font-weight:400}
@keyframes skayV12Marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* Five equal beats. Original V10 main layout, widths and section spacing untouched. */
.journey-scroll{height:510svh}.journey-nav{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.journey-step{padding:13px 2px}.journey-step strong{font-size:9px;letter-spacing:.025em}
/* all old layers morph away at the exact same time as the five new visual chapters */
.journey-visual .journey-disc,.journey-visual .journey-ring,.journey-visual .journey-tracks,.journey-visual .journey-playhead{opacity:0!important;visibility:hidden!important;pointer-events:none}
.journey-visual .skay-stage{z-index:6;opacity:0;visibility:hidden;pointer-events:none;filter:blur(13px);transform:translate3d(0,28px,0) scale(.89) rotateX(-8deg);transition:opacity .68s cubic-bezier(.22,1,.36,1),filter .7s ease,transform .8s cubic-bezier(.22,1,.36,1),visibility .7s;transform-origin:center;backface-visibility:hidden}
.journey-visual[data-stage="0"] .skay-produce,.journey-visual[data-stage="1"] .skay-voice,.journey-visual[data-stage="2"] .skay-mix,.journey-visual[data-stage="3"] .skay-master,.journey-visual[data-stage="4"] .skay-final{opacity:1;visibility:visible;filter:blur(0);transform:translate3d(0,0,0) scale(1) rotateX(0);transition-delay:.06s}
/* Quiet, shared morphing connector: a silver light that travels between forms. */
.journey-visual:after{content:"";position:absolute;z-index:5;top:50%;left:50%;height:70%;width:1px;opacity:.35;pointer-events:none;background:linear-gradient(180deg,transparent,#d8eaff,transparent);transform:translate(-50%,-50%) rotate(calc(var(--jlocal,0)*95deg)) scaleX(calc(1 + var(--jlocal,0)*36));box-shadow:0 0 34px #acc9ff55;transition:opacity .3s}
/* Voice / distinct microphone-and-wave recording studio artwork. */
.skay-voice-world{position:relative;flex:1;min-height:0;display:grid;place-items:center;isolation:isolate}.voice-halo{position:absolute;width:min(70%,300px);aspect-ratio:1;border-radius:50%;border:1px solid #e9f2ff6b;box-shadow:0 0 0 21px #8babc419,0 0 0 65px #91b4db0c,inset 0 0 60px #8ca9db1c;animation:voiceHalo 7s ease-in-out infinite}.voice-microphone{height:60%;max-height:290px;min-height:135px;position:relative;width:125px;z-index:3;filter:drop-shadow(0 22px 18px #000a);animation:voiceFloat 5s ease-in-out infinite}.mic-capsule{position:absolute;top:0;left:36px;width:53px;height:52%;border-radius:38px;background:repeating-linear-gradient(0deg,#b9c9de 0 2px,#43546e 3px 5px,#9eaec2 6px 8px);border:4px solid #ebf3fd;box-shadow:inset 12px 4px 17px #fff6,inset -12px 2px 16px #0008,0 0 25px #b4cfff44}.mic-capsule:after{content:"";position:absolute;inset:10px -12px -24px;border:3px solid #b8cce7;border-top:0;border-radius:0 0 48px 48px}.mic-stem{position:absolute;top:57%;bottom:7%;left:60px;width:5px;border-radius:10px;background:linear-gradient(90deg,#33445b,#e1ebf8,#62738c)}.mic-stand{position:absolute;bottom:6%;width:80px;height:5px;left:23px;background:linear-gradient(90deg,transparent,#e7f1fc 50%,transparent)}.voice-pop{position:absolute;z-index:4;width:91px;height:91px;border-radius:50%;border:4px solid #acbbcf8c;transform:translate(-50px,-13px) rotate(-16deg);background:repeating-linear-gradient(0deg,#d8e6ff11 0 2px,transparent 2px 5px);box-shadow:inset 0 0 0 1px #fff5,0 0 0 5px #aabddc18}.voice-waves{position:absolute;inset:25% 1% 17%;display:flex;gap:3px;align-items:center;justify-content:center;z-index:1;mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}.voice-waves i{height:var(--h);width:4px;flex:1;max-width:7px;border-radius:7px;opacity:.44;background:linear-gradient(#eaf4ff,#6789bd,#eef5ff);animation:voiceSignal 1.6s ease-in-out infinite alternate;animation-delay:var(--d)}.voice-rec{display:flex;align-items:center;gap:8px;color:#f4d6d6}.voice-rec i{width:7px;height:7px;border-radius:50%;background:#d77b81;box-shadow:0 0 12px #f77681;animation:voiceHalo 2s ease-in-out infinite}
@keyframes voiceFloat{50%{transform:translateY(-12px)}}@keyframes voiceHalo{50%{opacity:.58;transform:scale(1.04)}}@keyframes voiceSignal{to{transform:scaleY(.6);opacity:.7}}
/* Final deliverable, treated as an actual release rather than another waveform. */
.final-composition{position:relative;flex:1;display:grid;place-items:center;isolation:isolate;min-height:0}.final-aura{position:absolute;width:min(73%,350px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#a8bcd17a,#5c72952e 50%,transparent 74%);filter:blur(23px);animation:finalGlow 8s ease-in-out infinite}.final-cover{position:absolute;z-index:3;aspect-ratio:1;width:min(55%,300px);min-width:175px;background:radial-gradient(ellipse at 25% 12%,#65768f,#1b293a 40%,#070c14 90%);border:1px solid #d7e9ffb3;box-shadow:18px 25px 65px #000c,inset 0 0 60px #ccdcff18;transform:translateX(-10%) rotate(-7deg);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:18px;color:#dceafa;animation:finalCover 8s ease-in-out infinite;overflow:hidden}.final-cover:before{content:"";position:absolute;inset:-90%;background:linear-gradient(105deg,transparent 45%,#eff8ff33 50%,transparent 55%);transform:translateX(-50%);animation:finalShine 7s ease-in-out infinite;pointer-events:none}.cover-kicker,.cover-bottom{font-size:clamp(6px,.7vw,10px);letter-spacing:.22em;text-align:center}.final-cover img{width:75%;object-fit:contain;filter:drop-shadow(0 0 16px #c2d6ff66)}.cover-title{text-align:center;font-size:clamp(15px,2.4vw,33px);line-height:.93;font-weight:750;letter-spacing:-.045em}.final-vinyl{position:absolute;z-index:2;left:50%;width:min(48%,275px);aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#111925 0 3px,#354255 4px 5px,#111927 6px 9px);border:1px solid #adbed9b8;box-shadow:12px 14px 35px #0009;transform:translateX(19%);animation:finalVinyl 8s ease-in-out infinite}.final-record-label{position:absolute;inset:36%;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#667d9e,#172437);border:1px solid #d3e0fb9a}.final-record-label img{width:95%}.final-ready{position:absolute;z-index:5;bottom:3%;right:1%;display:flex;align-items:center;gap:7px;color:#dceeff;background:#0b1727c9;border:1px solid #c5d5e76c;border-radius:100px;padding:8px 12px;font-size:9px;letter-spacing:.1em;box-shadow:0 8px 30px #0008}.final-ready:first-letter{color:#8fe4ba}
@keyframes finalCover{50%{transform:translate(-10%,-8px) rotate(-4deg)}}@keyframes finalGlow{50%{opacity:.6;transform:scale(1.07)}}@keyframes finalVinyl{50%{transform:translateX(31%) rotate(18deg)}}@keyframes finalShine{40%,100%{transform:translateX(50%)}}
@media(max-width:700px){.journey-scroll{height:480svh}.journey-nav{gap:2px}.journey-step{padding:8px 1px}.journey-step strong{font-size:7px}.journey-visual .skay-stage{inset:18% 6% 13%}.voice-microphone{transform:scale(.8);transform-origin:center;max-height:170px}.voice-waves i{width:2px}.final-cover{width:47%;min-width:120px;padding:10px}.final-vinyl{width:40%}.final-ready{font-size:7px;padding:6px}.cover-title{font-size:16px}.skay-universal-ribbon{height:27px}.skay-universal-ribbon-track span{font-size:8px}.journey-copy h3{font-size:clamp(35px,7vw,55px)}}
@media(prefers-reduced-motion:reduce){.skay-universal-ribbon-track,.voice-microphone,.voice-halo,.voice-waves i,.final-aura,.final-cover,.final-vinyl,.final-cover:before{animation:none!important}}

/* V12 FIX: seamless animated ribbon, independently moving regardless of viewport width */
.skay-universal-ribbon-track{min-width:0;width:max-content;animation:skayV12Marquee 16s linear infinite!important;animation-play-state:running!important}
.skay-universal-ribbon-track>span{display:block;flex:0 0 auto;min-width:50vw;white-space:nowrap}
@keyframes skayV12Marquee{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-50%,0,0)}}


/* === V12.2 targeted polish === */
/* Smaller, clearly animated universal ribbon */
.skay-universal-ribbon{height:28px;box-shadow:0 1px 0 #ffffff50,0 8px 22px #070b141f;border-top:1px solid #fff5;border-bottom:1px solid #0c142526;background:linear-gradient(90deg,#8a96a8 0%,#f2f5f8 18%,#c2cbd7 48%,#f4f6fa 78%,#7a8699 100%)}
.skay-universal-ribbon:before,.skay-universal-ribbon:after{width:8%}
.skay-universal-ribbon-track{display:inline-flex;align-items:center;gap:0;min-width:max-content;width:max-content;animation:skayV12Marquee 12s linear infinite!important;animation-play-state:running!important;backface-visibility:hidden;transform:translate3d(0,0,0)}
.skay-universal-ribbon-track>span{display:inline-flex;align-items:center;flex:0 0 auto;min-width:auto;white-space:nowrap;padding:0 2.25rem;font:700 9.5px/1 Arial,sans-serif;letter-spacing:.28em}
.skay-universal-ribbon-track b{font-size:13px;padding:0 18px;color:#546173;font-weight:500}
@keyframes skayV12Marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* Remove the full-width bright seam between journey and next section */
.journey-progress{display:none!important}
.journey-end{position:relative;z-index:2;padding-bottom:120px!important}
.interlude,.prices,.contact{margin-top:-1px}

/* Stronger visual identity for the five-step morphing sequence */
.journey-visual{perspective:1400px}
.journey-visual::before{content:"";position:absolute;z-index:4;left:50%;top:50%;width:46%;height:46%;border-radius:42% 58% 51% 49% / 52% 44% 56% 48%;opacity:.20;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(214,228,248,.75),rgba(143,177,216,.18) 44%,transparent 70%);filter:blur(28px);transform:translate(-50%,-50%) scale(calc(.92 + var(--jlocal,0)*.22)) rotate(calc(var(--jlocal,0)*140deg));transition:opacity .35s ease,transform .4s ease}
.journey-visual::after{width:2px;height:74%;opacity:.5;background:linear-gradient(180deg,transparent,#dceafd,transparent);transform:translate(-50%,-50%) rotate(calc(var(--jlocal,0)*165deg)) scaleX(calc(1 + var(--jlocal,0)*48));box-shadow:0 0 42px rgba(172,201,255,.48)}
.journey-visual .skay-stage{--stage-tx:0px;--stage-ty:26px;--stage-r:0deg;filter:blur(14px);transform:translate3d(var(--stage-tx),var(--stage-ty),0) scale(.88) rotate(var(--stage-r));transition:opacity .72s cubic-bezier(.22,1,.36,1),filter .72s ease,transform .82s cubic-bezier(.22,1,.36,1),visibility .72s}
.journey-visual .skay-produce{--stage-tx:-60px;--stage-ty:20px;--stage-r:-7deg}
.journey-visual .skay-voice{--stage-tx:0px;--stage-ty:34px;--stage-r:0deg}
.journey-visual .skay-mix{--stage-tx:58px;--stage-ty:18px;--stage-r:6deg}
.journey-visual .skay-master{--stage-tx:-22px;--stage-ty:-8px;--stage-r:4deg}
.journey-visual .skay-final{--stage-tx:42px;--stage-ty:16px;--stage-r:-6deg}
.journey-visual[data-stage="0"] .skay-produce,.journey-visual[data-stage="1"] .skay-voice,.journey-visual[data-stage="2"] .skay-mix,.journey-visual[data-stage="3"] .skay-master,.journey-visual[data-stage="4"] .skay-final{filter:blur(0);transform:translate3d(0,0,0) scale(1) rotate(0deg)}

/* Make each chapter feel different while scrolling through it */
.journey-visual[data-stage="0"] .skay-seq-grid{transform:perspective(1200px) rotateX(calc(14deg - var(--jlocal,0)*9deg)) rotateY(calc(-10deg + var(--jlocal,0)*8deg)) scale(calc(.94 + var(--jlocal,0)*.08));transition:transform .28s ease}
.journey-visual[data-stage="0"] .skay-pads i{transition:transform .26s ease,filter .26s ease}
.journey-visual[data-stage="0"] .skay-pads i.is-lit{transform:translateY(calc(-2px - var(--jlocal,0)*2px));filter:brightness(calc(1 + var(--jlocal,0)*.32))}
.journey-visual[data-stage="1"] .skay-voice-world{transform:scale(calc(.95 + var(--jlocal,0)*.08)) translateY(calc(var(--jlocal,0)*-8px));transition:transform .3s ease}
.journey-visual[data-stage="1"] .voice-waves{opacity:calc(.72 + var(--jlocal,0)*.28)}
.journey-visual[data-stage="1"] .voice-pop{transform:translate(-50px,-13px) rotate(calc(-16deg + var(--jlocal,0)*12deg));transition:transform .3s ease}
.journey-visual[data-stage="2"] .skay-mixer{transform:perspective(1200px) rotateX(calc(18deg - var(--jlocal,0)*13deg)) rotateY(calc(8deg - var(--jlocal,0)*8deg)) scale(calc(.93 + var(--jlocal,0)*.07));transition:transform .32s ease,box-shadow .32s ease;box-shadow:0 28px 65px rgba(0,0,0,.36)}
.journey-visual[data-stage="2"] .skay-channel{transform:translateY(calc((.5 - var(--jlocal,0))*4px));transition:transform .25s ease}
.journey-visual[data-stage="3"] .skay-master-art{transform:scale(calc(.92 + var(--jlocal,0)*.1)) rotate(calc(-3deg + var(--jlocal,0)*6deg));transition:transform .32s ease}
.journey-visual[data-stage="3"] .skay-master-wave{opacity:calc(.56 + var(--jlocal,0)*.4)}
.journey-visual[data-stage="4"] .final-composition{transform:scale(calc(.94 + var(--jlocal,0)*.08));transition:transform .35s ease}
.journey-visual[data-stage="4"] .final-cover{transform:translateX(calc(-10% + var(--jlocal,0)*3%)) rotate(calc(-7deg + var(--jlocal,0)*4deg))}
.journey-visual[data-stage="4"] .final-vinyl{transform:translateX(calc(19% + var(--jlocal,0)*10%)) rotate(calc(var(--jlocal,0)*18deg))}

/* Smoother CTA/copy change during stage transitions */
.journey-copy{transition:opacity .36s ease,transform .42s cubic-bezier(.22,1,.36,1)}
.journey-copy.is-changing{opacity:.10;transform:translateY(18px)}

@media(max-width:700px){
  .skay-universal-ribbon{height:23px}
  .skay-universal-ribbon-track{animation-duration:10s!important}
  .skay-universal-ribbon-track>span{font-size:7.5px;padding:0 1.35rem;letter-spacing:.24em}
  .skay-universal-ribbon-track b{font-size:10px;padding:0 12px}
  .journey-end{padding-bottom:90px!important}
}