/* Proportional scale follows --design-scale. Original: archive/before-scale-85-20261028/material-intro.css */
/* Selected Studio direction. Existing assets and grid; no new artwork. */
body[data-variant="B"] { --studio-chrome: 0; }
[data-variant="B"] .site-header { position: fixed; inset: 0 0 auto; }
[data-variant="B"] :is(.site-header, .chapter-bar, .mobile-chapters, .prototype-switcher) {
  opacity: var(--studio-chrome);
}
[data-variant="B"][data-intro="playing"] :is(.site-header, .chapter-bar, .mobile-chapters, .prototype-switcher) {
  pointer-events: none;
}
.studio-story {
  --intro-progress: 0;
  --intro-opacity: 1;
  --intro-title-opacity: 1;
  --intro-cue-opacity: 1;
  --intro-shift: 0px;
  --studio-reveal: 0;
  --studio-rise: calc(18px * var(--design-scale, .85));
  --intro-distance: 425svh;
  position: relative;
}
.studio-story::after { content: ''; display: block; height: var(--intro-distance); }
.studio-stage { position: sticky; top: 0; min-height: 100svh; background-color:var(--ink); }
.studio-intro {
  position: absolute; inset: 0 0 auto; height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: calc(36px * var(--design-scale, .85)); pointer-events: none;
  opacity: var(--intro-opacity);
}
.studio-intro-title {
  opacity:var(--intro-title-opacity);
  transform: translateY(var(--intro-shift));
  width: min(calc(1500px * var(--design-scale, .85)), 100%); max-width: none;
  font: 700 clamp(calc(54px * var(--design-scale, .85)), calc(8.3vw * var(--design-scale, .85)), calc(146px * var(--design-scale, .85)))/1.02 var(--sans);
  letter-spacing: -.048em; text-align: center;
}
.studio-intro-title span { display: block; }
/* A quiet reading cue, not a second action. It leaves as the visitor scrolls. */
.material-page .studio-scroll-cue {
  position:absolute; z-index:2; left:50%;
  bottom:max(40px,5svh,calc(env(safe-area-inset-bottom,0px) + 28px));
  width:max-content; max-width:calc(100% - 40px); margin:0;
  transform:translateX(-50%); opacity:var(--intro-cue-opacity);
  color:#d8d5d0; font:500 18px/1.4 var(--sans);
  letter-spacing:.01em; text-align:center;
}
.studio-scroll-cue-inner {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  animation:intro-cue-enter .7s .4s both;
}
.studio-scroll-cue-arrow {
  color:var(--coral); font-size:26px; line-height:1;
  animation:intro-cue-nudge 1.8s 1.1s 2;
}
@keyframes intro-cue-enter {
  from { opacity:0; transform:translateY(-4px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes intro-cue-nudge {
  0%,100% { transform:translateY(0); }
  45% { transform:translateY(5px); }
}
@media (max-width:700px) {
  .material-page .studio-scroll-cue { font-size:17px; bottom:max(44px,calc(env(safe-area-inset-bottom,0px) + 32px)); }
}
@media (max-height:500px) and (orientation:landscape) {
  .material-page .studio-scroll-cue { bottom:max(28px,calc(env(safe-area-inset-bottom,0px) + 20px)); font-size:16px; }
  .studio-scroll-cue-inner { flex-direction:row; gap:12px; }
  .studio-scroll-cue-arrow { font-size:22px; }
}
[data-variant="B"] .studio-content {
  min-height: 100svh;
  padding: calc(var(--header) + calc(48px * var(--design-scale, .85))) 0 calc(100px * var(--design-scale, .85));
  opacity: var(--studio-reveal);
  transform: translateY(var(--studio-rise));
}
/* All hero elements inherit this one parent fade. No separate artwork lead-in. */
[data-variant="B"] .button {
  box-shadow: calc(5px * var(--design-scale, .85)) calc(5px * var(--design-scale, .85)) 0 var(--coral);
  transform: translate(calc(-2px * var(--design-scale, .85)), calc(-2px * var(--design-scale, .85)));
  transition: transform .16s, box-shadow .16s;
}
[data-variant="B"] .button:hover {
  box-shadow: calc(8px * var(--design-scale, .85)) calc(8px * var(--design-scale, .85)) 0 var(--coral);
  transform: translate(calc(-5px * var(--design-scale, .85)), calc(-5px * var(--design-scale, .85)));
}
[data-variant="B"] .button:active {
  box-shadow: calc(1px * var(--design-scale, .85)) calc(1px * var(--design-scale, .85)) 0 var(--coral);
  transform: translate(calc(2px * var(--design-scale, .85)), calc(2px * var(--design-scale, .85)));
}
[data-variant="B"] .hero .button { max-width: min(100%, calc(510px * var(--design-scale, .85))); }
[data-variant="B"] .closing .button { flex-shrink: 0; max-width: calc(510px * var(--design-scale, .85)); }
@media (min-width: 901px) and (max-height: 850px) {
  [data-variant="B"] .studio-content { padding-top: calc(var(--header) + calc(32px * var(--design-scale, .85))); }
  .studio-content .studio-opening { grid-template-columns: 1.5fr .75fr; gap: calc(64px * var(--design-scale, .85)); }
  .studio-content h1 { font-size: max(13px, clamp(calc(66px * var(--design-scale, .85)), calc(6.5vw * var(--design-scale, .85)), calc(90px * var(--design-scale, .85)))); max-width: 14ch; }
  .studio-content .lead { font-size: max(13px, calc(22px * var(--design-scale, .85))); margin-top: calc(22px * var(--design-scale, .85)); }
  .studio-content .studio-image .hero-art { height: calc(330px * var(--design-scale, .85)); }
  .studio-content .studio-foot { margin-top: calc(32px * var(--design-scale, .85)); }
}
@media (max-width: 900px) {
  .studio-intro { padding: calc(28px * var(--design-scale, .85)); }
  .studio-intro-title { font-size: max(13px, clamp(calc(48px * var(--design-scale, .85)), calc(8.2vw * var(--design-scale, .85)), calc(76px * var(--design-scale, .85)))); }
  [data-variant="B"] .studio-content { padding-top: calc(var(--header) + calc(32px * var(--design-scale, .85))); padding-bottom: calc(152px * var(--design-scale, .85)); }
  [data-variant="B"] .closing .button { flex-shrink: 1; }
}
@media (max-width: 700px) {
  .studio-story { --intro-distance: 380svh; }
  .studio-intro { padding-inline: calc(24px * var(--design-scale, .85)); }
  .studio-intro-title { font-size: max(13px, clamp(calc(40px * var(--design-scale, .85)), calc(10.8vw * var(--design-scale, .85)), calc(70px * var(--design-scale, .85)))); line-height: 1.06; text-align: left; }
  .studio-intro-title span { max-width: 13ch; }
  .studio-intro-title span + span { margin-top: .18em; }
  .studio-content .studio-image .hero-art { height: calc(340px * var(--design-scale, .85)); }
  [data-variant="B"] .hero .button { min-height: calc(76px * var(--design-scale, .85)); padding-right: calc(20px * var(--design-scale, .85)); }
  [data-variant="B"] .button span { flex-shrink: 0; }
}
@media (max-height: 480px) and (min-width: 600px) {
  .studio-intro-title { font-size: max(13px, clamp(calc(38px * var(--design-scale, .85)), calc(6.5vw * var(--design-scale, .85)), calc(64px * var(--design-scale, .85)))); }
}
@media (prefers-reduced-motion: reduce) {
  .studio-scroll-cue-inner,.studio-scroll-cue-arrow { animation:none; }
  .studio-story { --intro-distance: 0px; }
  .studio-stage { position: relative; }
  .studio-intro { display: none; }
  [data-variant="B"] .studio-content { opacity: 1; transform: none; }
  [data-variant="B"] :is(.site-header, .chapter-bar, .mobile-chapters, .prototype-switcher) { opacity: 1; }
  [data-variant="B"] .button, [data-variant="B"] .button:hover, [data-variant="B"] .button:active { transform: none; }
}