body{background:#0c0d12;color:#f7f8fc}.studio-page{min-height:100svh;height:auto;display:flex;justify-content:center;padding:100px 3.5vw}.hero{position:relative;isolation:isolate;display:grid;grid-template-columns:1.35fr 1fr;align-items:center;width:min(1380px,100%);margin:auto;min-height:460px;border-radius:56px;background:linear-gradient(120deg,#191c25 0%,#1a1c26 65%,#252837 100%);box-shadow:inset 0 2px 2px #ffffff0b,inset 0 -1px 1px #00000035,0 24px 70px #00000024}.hero-copy{padding:64px 0 64px clamp(32px,6.4vw,96px);position:relative;z-index:1}h1{font-size:clamp(34px,4.1vw,62px);font-weight:650;letter-spacing:-.035em;line-height:1.1;margin:0 0 26px}.hero-copy p{font-size:clamp(18px,2vw,29px);font-weight:400;line-height:1.6;color:#c3c5d2;margin:0 0 44px}.project-button{display:inline-flex;align-items:center;justify-content:center;min-height:66px;padding:16px 48px;border-radius:100px;background:linear-gradient(160deg,#3c60ff,#3544ef);color:white;font-size:clamp(18px,1.8vw,26px);font-weight:600;text-decoration:none;box-shadow:inset 0 1px 1px #ffffff38,0 7px 14px #05092245;position:relative;isolation:isolate;overflow:hidden}.logo-stage{position:relative;aspect-ratio:1;min-width:0;width:min(100%,480px);margin:auto;transform:scale(1.08);pointer-events:none}.logo-stage canvas{cursor:default}.logo-stage #error{inset:25%;font-size:16px}.motion-toggle{align-self:center;margin:28px 0 0;color:#b5b7c7;background:transparent;border-color:#77798d33;font-size:13px}.studio-page :focus-visible{outline:3px solid #8eaaff;outline-offset:5px}@media(max-width:760px){.studio-page{padding:90px 20px 40px}.hero{grid-template-columns:1fr;border-radius:32px}.hero-copy{padding:36px 28px 0}.hero-copy p{margin-bottom:28px}.desktop-break{display:none}.logo-stage{width:min(100%,440px);margin:auto;transform:none}.project-button{min-height:54px;padding:14px 26px}h1{margin-bottom:18px}.motion-toggle{margin-top:16px}}@media(prefers-reduced-motion:reduce){.project-button{transition:none}}

/* A fixed membrane silhouette; the height-field lighting follows the cube. */
.hero{background:#11131a;box-shadow:inset 0 1px 1px #ffffff10,0 24px 65px #0006}
#surface{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;pointer-events:none;z-index:0;cursor:default}
.hero::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;box-shadow:inset 0 1px 1px #d9eaff16,inset 0 -4px 5px #0008}
.logo-stage{z-index:1}
@media(hover:none){.project-button:hover{transform:none}}

/* The reflection travels along the curved rim, leaving the label clear. */
.project-button{
  background:linear-gradient(180deg,#3548f1 0%,#303ce0 48%,#2429a7 100%);
  box-shadow:inset 0 1px 1px #ffffff38,inset 0 -3px 6px #070810b3,0 7px 14px #0006;
  transition:box-shadow .55s ease;
}
.project-button span{position:relative;z-index:2;text-shadow:0 1px 3px #10111980}
.project-button::before{
  content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(ellipse at 42% 0%,#fff 0%,#e1e3ff79 9%,transparent 29%),
    radial-gradient(ellipse at 85% 100%,#ffffffb3 0%,#999dbc44 9%,transparent 24%);
  background-size:145% 100%,132% 100%;
  background-position:100% 50%,0% 50%;
  box-shadow:inset 0 2px 1px #e8eaff70,inset 2px 0 3px #dfe2ff40;
  mask-image:linear-gradient(180deg,#000 0%,transparent 36%,transparent 68%,#000 100%);
  opacity:.63;
  animation:button-reflex 24s ease-in-out infinite alternate;
  transition:opacity .68s ease,background-position 2.6s cubic-bezier(.25,.65,.25,1),box-shadow .7s ease;
}
.project-button::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 -4px 7px #08090d99,inset -2px 0 4px #08090d66}
.project-button:is(:hover,:focus-visible){
  box-shadow:inset 0 1px 2px #e7e9ff84,inset 0 -3px 6px #070810b3,0 9px 21px #000a;
}
.project-button:is(:hover,:focus-visible)::before{
  opacity:1;background-position:0% 50%,100% 50%;
  box-shadow:inset 0 2px 2px #f6f6ffcf,inset 2px 0 4px #dfe2ff79;
  transition-duration:.22s,2.3s,.38s;
}
.project-button:active{box-shadow:inset 0 2px 7px #07080dcc}
@keyframes button-reflex{from{filter:brightness(.85)}to{filter:brightness(1.1)}}
html[data-motion="paused"] .project-button::before{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .project-button,.project-button::before{transition:none}
  .project-button::before{animation:none}
}

.study-defs{position:absolute;overflow:hidden;pointer-events:none}

/* Native scroll snap keeps each composition aligned with its cube stop. */
html{scroll-snap-type:y mandatory}
.studio-page{scroll-snap-align:start;scroll-snap-stop:always}
.panel-studies{
  width:min(1380px,93vw);margin:0 auto;padding:0 0 11svh;
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,3.6svh,48px)
}
.panel-study{
  min-width:0;min-height:79svh;display:flex;align-items:center;
  scroll-snap-align:center;scroll-snap-stop:always
}
.panel-study svg{display:block;width:100%;height:auto;overflow:visible}
.study-art{position:relative;width:100%}
.study-slot{
  position:absolute;left:var(--disk-x);top:var(--disk-y);
  width:var(--disk-size);aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none
}
#cube[data-studio]{
  position:fixed;inset:0 auto auto 0;z-index:2;pointer-events:none;touch-action:auto;
  width:var(--cube-size,0px);height:var(--cube-size,0px)
}
@media(max-width:760px){
  .panel-studies{width:calc(100% - 40px);padding-bottom:16svh}
  .panel-study{min-height:68svh}
}

.study-surface{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero,.study-art{opacity:var(--scene-opacity,1)}
.studio-page .motion-toggle{
  position:fixed;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));
  z-index:5;margin:0;background:#14151a
}
.studio-page .motion-toggle:hover{background:#24252c}

.flight-noise{
  position:fixed;top:0;left:0;z-index:3;pointer-events:none;opacity:0;
  width:var(--noise-width,0);height:16px;
  background:
    linear-gradient(90deg,#c6d7ff,#f7faff 75%,#bfa6ff) 10% 25% / 33% 1px no-repeat,
    linear-gradient(90deg,#e5edff,#c4acff) 90% 51% / 21% 2px no-repeat,
    repeating-linear-gradient(90deg,#dfeaff 0 3px,transparent 3px 8px) 58% 76% / 54% 1px no-repeat,
    linear-gradient(90deg,#a0adff,#f4f6ff) 5% 100% / 18% 2px no-repeat
}
@media(prefers-reduced-motion:reduce){.flight-noise{display:none}}

/* Four type roles across the compositions. The artwork owns the cube anchors. */
.study-art{container-type:inline-size}
.study-stage{position:relative;isolation:isolate}
.study-copy-list{position:absolute;inset:0;pointer-events:none}
.study-copy{
  position:absolute;
  left:var(--copy-x);top:var(--copy-y);width:var(--copy-w);
  transform:translateY(-50%);
  pointer-events:auto;
}
.study-kicker{
  margin:0 0 .5rem;color:#a8a9ba;
  font-size:.8125rem;font-weight:500;line-height:1.3;
}
.study-title{
  margin:0;font-size:clamp(1.375rem,2.9cqi,2.5rem);font-weight:650;
  letter-spacing:-.035em;line-height:1.08;text-wrap:balance;
}
.study-body{
  margin:.5rem 0 0;max-width:38ch;color:#c3c5d2;
  font-size:clamp(.875rem,1.43cqi,1.25rem);line-height:1.45;
}
.study-action{
  margin-top:.65rem;font-size:clamp(.875rem,1.25cqi,1.0625rem);
  font-weight:600;line-height:1.2;
}
.study-action.project-button{min-height:42px;padding:.6rem 1.1rem}
.study-link{
  display:inline-flex;min-height:40px;align-items:center;gap:.4em;
  color:#e5e8ff;text-underline-offset:.2em;
}
.study-link:hover{color:#fff}
.study-action:focus-visible{outline-color:#8eaaff}

@media(max-width:900px){
  .study-copy-list{
    position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.6rem;margin-top:.7rem;
  }
  .study-copy{
    position:static;transform:none;width:auto;
    padding:1rem 1.1rem;border-radius:20px;background:#19191e;
  }
  .study-copy:only-child{grid-column:1/-1}
  .study-title{font-size:clamp(1.25rem,4cqi,1.75rem)}
  .study-body{font-size:.9375rem}
}
@media(max-width:560px){
  .study-copy-list{grid-template-columns:minmax(0,1fr)}
}

body{overflow-x:clip;isolation:isolate}
.panel-trails{
  position:fixed;inset:0;z-index:-1;width:100%;height:100%;
  opacity:.33;pointer-events:none;touch-action:auto;
}

.study-art.is-morphing{visibility:hidden}
.study-morph{
  position:fixed;top:0;left:0;z-index:1;pointer-events:none;
}
.study-morph .study-stage{aspect-ratio:2}
.study-morph .study-copy{
  pointer-events:none;
  transform:translateY(-50%) translate3d(var(--morph-shift,0px,0px),0);
  will-change:transform;
}
.study-morph-copy{position:absolute;inset:0}
@media(max-width:900px){
  .study-morph-copy{position:static;display:grid}
  .study-morph-copy .study-copy-list{grid-area:1/1}
  .study-morph .study-copy{transform:none}
}

.hero.is-morphing{visibility:hidden}
.study-morph.is-opening .study-stage{height:100%;aspect-ratio:auto}
.study-morph.is-opening .study-morph-copy,
.study-morph:not(.is-opening) .opening-morph-copy{display:none}
.opening-morph-copy{position:absolute;inset:0}
.opening-morph-copy .hero-copy,.opening-morph-copy .study-copy{
  position:absolute;inset:0 auto auto 0;
  pointer-events:none;
}

.study-morph-copy > [hidden]{display:none}