/* SKAY RECORDS / V23. Two approachable interactive sound sculptures. */
#journeyScroll .skay-mix,#journeyScroll .skay-master{min-height:0;gap:8px;justify-content:space-between}
#journeyScroll .skay-sonic-card{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(9px,1.3vw,16px);padding:clamp(16px,2.15vw,30px);position:relative;isolation:isolate;border:1px solid #b1c8e14a;border-radius:24px;background:radial-gradient(ellipse at 50% 20%,#33475e 0%,#152234 48%,#0a111b 98%);box-shadow:inset 0 1px #ffffff24,0 25px 80px #0006;color:#edf4ff;--sonic-energy:0}
#journeyScroll .skay-sonic-card:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 34%,rgba(216,231,255,.13),transparent 60%);opacity:calc(.5 + var(--sonic-energy)*.45);z-index:-1}
#journeyScroll .sonic-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
#journeyScroll .sonic-overline{color:#adbed4;font-weight:650;font-size:9px;letter-spacing:.19em}
#journeyScroll .sonic-dot{width:8px;height:8px;border-radius:50%;background:#7a91ad;box-shadow:0 0 0 4px #e0ecff12;transition:background .3s,box-shadow .3s}
#journeyScroll .skay-sonic-card.is-live .sonic-dot{background:#b1f0d8;box-shadow:0 0 0 5px #a3f2d71d,0 0 17px #9de8c4ab}
#journeyScroll .sonic-title h4{font-size:clamp(32px,4vw,62px);line-height:.94;letter-spacing:-.082em;margin:0;font-weight:660}
#journeyScroll .sonic-title h4 em{font-style:normal;background:linear-gradient(100deg,#f4f8ff,#8b9db7 55%,#eff6ff);color:transparent;-webkit-background-clip:text;background-clip:text}
#journeyScroll .sonic-title p{font-size:clamp(11px,.95vw,14px);color:#a8b9cd;line-height:1.45;margin:9px 0 0;max-width:360px}
/* One distinctive chrome sculpture for both panels; its appearance follows user choices. */
#journeyScroll .sonic-art{position:relative;flex:1;min-height:85px;max-height:205px;display:grid;place-items:center;isolation:isolate;overflow:hidden}
#journeyScroll .sonic-ripple{position:absolute;border:1px solid #b2cde72e;border-radius:50%;aspect-ratio:1;opacity:.72;pointer-events:none}
#journeyScroll .ripple-1{width:160px;transform:rotateX(64deg) rotate(-30deg);animation:skayRippleOne 9s ease-in-out infinite alternate}
#journeyScroll .ripple-2{width:230px;transform:rotateX(75deg) rotate(24deg);animation:skayRippleTwo 11s ease-in-out infinite alternate}
#journeyScroll .ripple-3{width:295px;transform:rotateX(74deg) rotate(-12deg);opacity:.36}
@keyframes skayRippleOne{to{transform:rotateX(64deg) rotate(18deg) scale(1.09)}}
@keyframes skayRippleTwo{to{transform:rotateX(75deg) rotate(-30deg) scale(.94)}}
#journeyScroll .sonic-orb{position:relative;width:clamp(95px,10vw,166px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 23%,#f4f7ff,#b9c8d8 12%,#617994 33%,#26394f 58%,#0d1927 88%);box-shadow:inset -15px -16px 40px #0008,inset 8px 8px 30px #fff5,0 0 0 14px #9fb6d014,0 16px 58px #c1d3f327;transform:scale(calc(1 + var(--sonic-energy)*.13));transition:transform .22s ease,filter .45s ease,background .5s ease}
#journeyScroll .sonic-orb i{position:absolute;inset:0;border-radius:inherit;background:conic-gradient(from 100deg,transparent 30%,#d7e6ff45 45%,transparent 62%);animation:skayOrbGloss 14s linear infinite}
@keyframes skayOrbGloss{to{transform:rotate(360deg)}}
#journeyScroll .sonic-art-mood[data-mood="highpass"] .sonic-orb{background:radial-gradient(circle at 32% 20%,#fff,#dde5f1 16%,#748dae 42%,#18283a 78%);filter:brightness(1.15)}
#journeyScroll .sonic-art-caption{position:absolute;bottom:1px;font-size:9px;letter-spacing:.18em;color:#acbfda;font-weight:700}
#journeyScroll .sonic-choices{display:grid;grid-template-columns:1fr 1fr;gap:9px}
#journeyScroll .sonic-choice{display:flex;align-items:center;gap:12px;padding:12px;border-radius:13px;border:1px solid #b9cde53a;background:#e5f1ff0a;color:#c7d5e8;text-align:left;cursor:pointer;transition:transform .32s cubic-bezier(.22,1,.36,1),border .25s,background .3s,color .3s;min-width:0}
#journeyScroll .sonic-choice:hover{transform:translateY(-3px);border-color:#e1eeff99}
#journeyScroll .sonic-choice.is-selected{background:linear-gradient(110deg,#edf4ff,#b2c7dc);border-color:#f2f8ff;color:#142135;box-shadow:0 8px 32px #a7bfdc1b}
#journeyScroll .sonic-choice-glyph{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;border:1px solid currentColor;font-size:19px;flex:none}
#journeyScroll .sonic-choice strong{display:block;font-size:clamp(11px,1vw,14px)}
#journeyScroll .sonic-choice small{display:block;font-size:9px;opacity:.72;line-height:1.5;margin-top:3px}
#journeyScroll .sonic-slider{display:flex;flex-direction:column;gap:8px}
#journeyScroll .sonic-slider>span{display:flex;justify-content:space-between;gap:9px;color:#e2edf9;font-size:12px}
#journeyScroll .sonic-slider output{font-variant-numeric:tabular-nums;color:#dcebf9}
#journeyScroll .sonic-slider small{font-size:9px;display:flex;justify-content:space-between;letter-spacing:.035em;color:#8fa4c0}
#journeyScroll input[type="range"]{width:100%;min-width:0;accent-color:#eff6ff;cursor:pointer;touch-action:pan-y}
#journeyScroll .sonic-slider input{height:19px}
/* Mastering as a simple visual three-tone sculpture */
#journeyScroll .sonic-art-tone{min-height:108px;max-height:178px}
#journeyScroll .tone-rail{height:100%;width:min(78%,370px);display:flex;gap:12%;align-items:center;justify-content:center;position:relative;z-index:2}
#journeyScroll .tone-column{width:19%;max-width:85px;height:76%;border-radius:55px;position:relative;display:grid;place-items:center;background:#d2e8ff0b;border:1px solid #dbeaff29;overflow:hidden}
#journeyScroll .tone-column i{position:absolute;bottom:0;left:0;right:0;height:50%;border-radius:50% 50% 20px 20px;background:linear-gradient(to top,#5c789c,#dbeaff 92%);box-shadow:0 0 28px #9dbdd67d;transition:height .16s ease-out}
#journeyScroll .tone-baseline{position:absolute;left:7%;right:7%;top:50%;height:1px;background:#e6f3ff66;z-index:3;pointer-events:none}
#journeyScroll .tone-glow{position:absolute;width:58%;height:80%;border-radius:50%;filter:blur(50px);background:#91a9cf30;pointer-events:none}
#journeyScroll .sonic-tone-controls{display:grid;gap:9px}
#journeyScroll .sonic-tone{display:grid;grid-template-columns:minmax(135px,.85fr) 1.15fr;align-items:center;gap:12px;min-width:0}
#journeyScroll .sonic-tone>span{display:flex;align-items:center;gap:8px;color:#d4e3f3;font-size:12px}
#journeyScroll .sonic-tone-symbol{display:grid;place-items:center;font-size:18px;color:#f0f6ff;width:24px}
#journeyScroll .sonic-tone input{height:20px}
#journeyScroll .sonic-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;border-top:1px solid #a8bed536;padding-top:12px}
#journeyScroll .sonic-back{border:0;background:none;color:#dde9f8;font-size:11px;text-decoration:underline;text-decoration-color:#7087a5;text-underline-offset:6px;cursor:pointer;padding:7px 0}
#journeyScroll .sonic-back:hover{color:white}
#journeyScroll .sonic-status{font-size:9px;letter-spacing:.055em;color:#a0b5cf;max-width:240px;line-height:1.45}
/* Animate the objects like the other story scenes: cinematic entrance AND exit. */
#journeyScroll .skay-sonic-card>*{opacity:0;transform:translateY(21px) scale(.985);filter:blur(5px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1),filter .8s ease}
#journeyScroll .journey-visual[data-stage="2"] .skay-fx-panel>*,#journeyScroll .journey-visual[data-stage="3"] .skay-eq-panel>*{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
#journeyScroll .skay-sonic-card>*:nth-child(2){transition-delay:.06s}
#journeyScroll .skay-sonic-card>*:nth-child(3){transition-delay:.14s}
#journeyScroll .skay-sonic-card>*:nth-child(4){transition-delay:.22s}
#journeyScroll .skay-sonic-card>*:nth-child(5){transition-delay:.3s}
#journeyScroll .skay-sonic-card>*:nth-child(6){transition-delay:.35s}
#journeyScroll .skay-mix>.v16-tag,#journeyScroll .skay-master>.v16-tag,#journeyScroll .skay-mix>.v17-listen-real,#journeyScroll .skay-master>.v17-listen-real{display:none!important}
#skayAudioImportPrompt{position:fixed;z-index:130;bottom:100px;left:50%;transform:translateX(-50%);border:1px solid #cedcf2;border-radius:24px;background:#e8f2ff;color:#101823;box-shadow:0 18px 60px #0006;cursor:pointer;font-weight:650;padding:13px 20px;font-size:12px;max-width:90vw}
#skayAudioImportPrompt[hidden]{display:none!important}
@media(max-width:1100px){#journeyScroll .skay-sonic-card{padding:16px;gap:9px}#journeyScroll .sonic-title h4{font-size:clamp(25px,3vw,42px)}#journeyScroll .sonic-art{max-height:140px}#journeyScroll .sonic-choice{padding:8px}#journeyScroll .sonic-choice-glyph{width:26px;height:26px;font-size:16px}}
@media(max-width:700px){#journeyScroll .journey-visual .skay-mix,#journeyScroll .journey-visual .skay-master{inset:6% 4% 5%}#journeyScroll .skay-sonic-card{border-radius:14px;gap:4px;padding:7px}#journeyScroll .sonic-overline{font-size:6px}#journeyScroll .sonic-dot{height:6px;width:6px}#journeyScroll .sonic-title h4{font-size:clamp(18px,4.1vw,26px);line-height:.96}#journeyScroll .sonic-title p{font-size:8px;margin:3px 0 0;line-height:1.2}#journeyScroll .sonic-art{min-height:41px;max-height:85px}#journeyScroll .sonic-orb{width:70px}#journeyScroll .sonic-ripple{transform:scale(.52)!important}#journeyScroll .sonic-art-caption{font-size:6px}#journeyScroll .sonic-choice{gap:5px;padding:5px;border-radius:8px}#journeyScroll .sonic-choice-glyph{width:18px;height:18px;font-size:12px}#journeyScroll .sonic-choice strong{font-size:8px}#journeyScroll .sonic-choice small{font-size:6px;margin-top:0}#journeyScroll .sonic-slider{gap:3px}#journeyScroll .sonic-slider>span{font-size:8px}#journeyScroll .sonic-slider input{height:14px}#journeyScroll .sonic-slider small{font-size:6px}#journeyScroll .sonic-tone{grid-template-columns:1fr 1.15fr;gap:6px}#journeyScroll .sonic-tone>span{gap:3px;font-size:8px}#journeyScroll .sonic-tone-symbol{font-size:12px;width:12px}#journeyScroll .sonic-tone input{height:14px}#journeyScroll .sonic-tone-controls{gap:2px}#journeyScroll .sonic-art-tone{min-height:50px;max-height:70px}#journeyScroll .sonic-bottom{padding-top:4px;gap:4px}#journeyScroll .sonic-back{font-size:7px;padding:3px 0}#journeyScroll .sonic-status{font-size:6px;max-width:165px}}
@media(prefers-reduced-motion:reduce){#journeyScroll .skay-sonic-card>*{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}#journeyScroll .sonic-orb i,#journeyScroll .sonic-ripple{animation:none!important}}
/* Layout fit: keep every control visible inside the original V15 scene height. */
@media(min-width:701px){
 #journeyScroll .skay-sonic-card{gap:7px;padding:14px 20px}
 #journeyScroll .sonic-title h4{font-size:clamp(28px,3.0vw,44px)}
 #journeyScroll .sonic-title p{font-size:11px;margin-top:5px;line-height:1.35}
 #journeyScroll .sonic-art{min-height:58px;max-height:100px}
 #journeyScroll .sonic-art-tone{min-height:60px;max-height:95px}
 #journeyScroll .sonic-orb{width:85px}
 #journeyScroll .sonic-choice{padding:7px 11px}
 #journeyScroll .sonic-choice-glyph{width:25px;height:25px;font-size:15px}
 #journeyScroll .sonic-slider{gap:4px}
 #journeyScroll .sonic-bottom{padding-top:7px}
}
@media(max-width:700px){
 /* These two sound tools need usable space, not the legacy 46% preview height. */
 #journeyScroll .journey-main:has(.journey-visual[data-stage="2"]),
 #journeyScroll .journey-main:has(.journey-visual[data-stage="3"]){grid-template-rows:68% 32%}
 #journeyScroll .journey-main:has(.journey-visual[data-stage="2"]) .journey-copy p,
 #journeyScroll .journey-main:has(.journey-visual[data-stage="3"]) .journey-copy p{display:none}
 #journeyScroll .journey-main:has(.journey-visual[data-stage="2"]) .journey-cta,
 #journeyScroll .journey-main:has(.journey-visual[data-stage="3"]) .journey-cta{display:none}
 #journeyScroll .journey-main:has(.journey-visual[data-stage="2"]) .journey-copy h3,
 #journeyScroll .journey-main:has(.journey-visual[data-stage="3"]) .journey-copy h3{font-size:clamp(23px,6vw,32px);margin:4px 0;line-height:.95}
 #journeyScroll .journey-main:has(.journey-visual[data-stage="2"]) .journey-info,
 #journeyScroll .journey-main:has(.journey-visual[data-stage="3"]) .journey-info{padding:8px 12px}
 #journeyScroll .journey-main:has(.journey-visual[data-stage="2"]) .journey-eyebrow,
 #journeyScroll .journey-main:has(.journey-visual[data-stage="3"]) .journey-eyebrow{font-size:8px}
 #journeyScroll .journey-visual .skay-mix,#journeyScroll .journey-visual .skay-master{inset:10% 5% 8%}
 #journeyScroll .skay-sonic-card{overflow:hidden}
 #journeyScroll .sonic-art{max-height:80px}
}