/* ============ STUDIO SECTION (v2) ============
   Full-bleed space scene. Palette: deep void indigo / starlight ice,
   deliberately NOT orange-led. Vanilla CSS, transform/opacity only. */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Manrope",system-ui,sans-serif;
  background:#04060d;
  color:#eef1f8;
  overflow-x:hidden;
}

.studio{
  position:relative;
  min-height:118vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  background:#04060d;
  padding:clamp(90px,14vh,150px) 24px;
}

/* --- cinematic backdrop --- */
.studio-bgwrap{
  position:absolute; inset:0; z-index:-3; overflow:hidden;
}
.studio-bg{
  width:100%; height:100%;
  object-fit:cover; object-position:center 38%;
  /* motion.js owns this transform: data-scroll-scale="1.14,1" eases the
     zoom out across the section pass. No CSS transform here on purpose. */
}
/* legibility grade: keeps text readable over any part of the scene */
.studio-grade{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 62% 46% at 50% 60%, rgba(2,4,10,.52) 0%, rgba(2,4,10,0) 72%),
    radial-gradient(ellipse 90% 62% at 50% 46%, rgba(3,5,12,.22) 0%, rgba(3,5,12,.55) 78%, rgba(2,3,8,.82) 100%),
    linear-gradient(180deg, rgba(3,5,12,.72) 0%, rgba(3,5,12,.12) 26%, rgba(3,5,12,.10) 62%, rgba(2,3,8,.88) 100%);
}

/* --- scroll traveller: light streak on a faint orbit line --- */
.studio-track{
  position:absolute; left:0; right:0; top:64%;
  height:1px; z-index:-1;
  background:linear-gradient(90deg, transparent, rgba(168,205,255,.22) 18%, rgba(168,205,255,.22) 82%, transparent);
}
.studio-traveller{
  position:absolute; top:50%; left:0; margin-top:-6px;
  display:flex; align-items:center;
  /* motion.js owns this transform (data-scroll-x="-180,1280"):
     no CSS transform or will-change here on purpose. */
}
.traveller-tail{
  width:120px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, rgba(150,197,255,.85));
  filter:blur(.4px);
}
.traveller-core{
  width:11px; height:11px; margin-left:-4px; border-radius:50%;
  background:#eaf4ff;
  box-shadow:0 0 14px 3px rgba(160,205,255,.9), 0 0 44px 10px rgba(120,165,255,.35);
  animation:corePulse 2.6s ease-in-out infinite;
}
@keyframes corePulse{0%,100%{opacity:1}50%{opacity:.72}}

/* --- floating glass chips: parallax [data-speed] + idle [data-float]
       are composed by motion.js on the outer element; the inner body
       carries the REAL GLASS recipe (MOTION-SPEC 0.4, verbatim). --- */
.studio-chip{position:absolute; z-index:1}
.chip-a{top:17%; left:6%}
.chip-b{bottom:20%; right:6%}
.chip-body{
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 16px;
  font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#e6efff;
  border-radius:999px; /* pill override on top of the glass recipe */
}
.chip-dot{
  width:7px; height:7px; border-radius:50%; flex:none;
  background:#9fd0ff; box-shadow:0 0 10px 2px rgba(140,190,255,.8);
}

/* REAL GLASS recipe (MOTION-SPEC 0.4) — only ever over bright scene art */
.glass{
  background:linear-gradient(155deg,
    rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.06) 38%,
    rgba(255,255,255,0.03) 62%, rgba(255,255,255,0.09) 100%);
  backdrop-filter:blur(18px) saturate(160%) brightness(1.08);
  -webkit-backdrop-filter:blur(18px) saturate(160%) brightness(1.08);
  border:1px solid transparent;
  background-clip:padding-box;
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 0 rgba(255,255,255,0.06),
    0 24px 48px -16px rgba(0,0,0,0.45);
  border-radius:24px;
  position:relative;
}
.glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(160deg,
    rgba(255,255,255,0.65), rgba(255,255,255,0.12) 30%,
    rgba(255,255,255,0.04) 55%, rgba(255,255,255,0.45) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.glass::after{
  content:""; position:absolute; inset:0 0 auto 0; height:42%;
  border-radius:24px 24px 50% 50% / 24px 24px 18px 18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0));
  pointer-events:none;
}
@supports not (backdrop-filter: blur(1px)){
  .glass{background:rgba(16,24,48,0.82)}
}
@media (max-width:768px){
  .glass{backdrop-filter:blur(12px) saturate(150%) brightness(1.08);
    -webkit-backdrop-filter:blur(12px) saturate(150%) brightness(1.08)}
}

/* --- content over the scene (train ref: bold type ON the scene) --- */
.studio-inner{
  position:relative; z-index:2;
  width:100%; max-width:1180px; margin:0 auto;
  text-align:center;
}
.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
/* Sami's actual studio logo, as a transparent white wordmark
   (alpha baked from the original black-background artwork). */
.studio-logo{
  display:block; width:min(680px,86vw); height:auto; margin:0 auto;
  filter:drop-shadow(0 6px 30px rgba(0,0,10,.55));
}
.studio-tag{
  font-family:"Fraunces",Georgia,serif; font-style:italic; font-weight:500;
  font-size:clamp(1.15rem,2.4vw,1.55rem);
  color:#F3E9CF; margin-top:20px;
  text-shadow:0 2px 18px rgba(0,0,10,.9), 0 1px 5px rgba(0,0,10,.9);
}
.studio-points{
  display:flex; justify-content:space-between; gap:34px;
  max-width:1060px; margin:52px auto 46px; text-align:left;
}
.studio-point{
  flex:0 1 340px;
  font-size:.98rem; font-weight:500; line-height:1.65; color:#E4EBFA;
  text-shadow:0 2px 14px rgba(0,0,10,.9), 0 1px 4px rgba(0,0,10,.9);
}
.studio-point strong{
  display:block; margin-bottom:8px;
  font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:1.14rem;
  color:#ffffff;
}
.point-right{text-align:right}
.studio-cta{
  display:inline-block;
  padding:15px 34px; border-radius:999px;
  font-weight:800; font-size:.98rem; color:#0a1224; text-decoration:none;
  background:linear-gradient(120deg,#f2f6ff,#bcd4ff);
  box-shadow:0 16px 38px rgba(90,140,255,.35), inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .25s ease;
}
.studio-cta:hover{transform:translateY(-2px)}
.studio-sign{
  margin-top:22px; font-size:.8rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(216,228,250,.92);
  text-shadow:0 2px 12px rgba(0,0,10,.9);
}

/* reveals: spec values (MOTION-SPEC 0.1) — 700ms, 28px, gated on .js so
   no-JS still shows everything; motion.js adds .in once */
.js [data-reveal]{opacity:0; transform:translateY(28px); transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.js [data-reveal].in{opacity:1; transform:none}

/* --- mobile --- */
@media (max-width:820px){
  .studio{min-height:0; padding:132px 20px 110px}
  .studio-bg{object-position:center 30%}
  .studio-track{top:auto; bottom:15%}
  .studio-points{flex-direction:column; gap:26px; margin:40px auto 38px}
  .studio-point{flex:none}
  .point-right{text-align:left}
  /* chip moves to the empty space under the sign line: at top:8% it sat
     directly on the kicker text on narrow screens */
  .chip-a{top:30px; bottom:auto; left:0; right:0; margin-inline:auto; width:fit-content}
  .chip-b{display:none} /* one parallax layer is enough on small screens */
  .chip-body{font-size:.66rem; padding:8px 13px}
}

@media (prefers-reduced-motion: reduce){
  .traveller-core{animation:none}
  .js [data-reveal]{opacity:1; transform:none; transition:none}
}