.studio-opening { position: fixed; inset: 0px; z-index: 300; display: grid; place-items: center; background: rgb(255, 240, 223); pointer-events: none; animation: 0.55s cubic-bezier(0.76, 0, 0.24, 1) 0.8s 1 normal both running opening-exit; overflow: hidden; }
.studio-opening > div { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 20px; padding: 30px; }
.studio-opening span { font-family: "Zen Maru Gothic", sans-serif; font-size: clamp(38px, 7vw, 90px); font-weight: 900; line-height: 1.4; color: rgb(185, 73, 37); animation: 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0s 1 normal both running opening-word; }
.studio-opening span:nth-child(2) { color: rgb(34, 111, 117); animation-delay: 0.1s; }
.studio-opening span:nth-child(3) { color: rgb(154, 100, 29); animation-delay: 0.2s; }
.studio-opening small { flex-basis: 100%; text-align: center; font-size: 18px; font-weight: 700; color: rgb(141, 89, 60); animation: 0.5s ease 0.25s 1 normal both running opening-word; }
@keyframes opening-word { 
  0% { opacity: 0; transform: translateY(35px) rotate(5deg); }
  100% { opacity: 1; transform: translateY(0px) rotate(0deg); }
}
@keyframes opening-exit { 
  100% { clip-path: inset(0px 0px 100%); visibility: hidden; }
}
@media (prefers-reduced-motion: reduce){.studio-opening, .studio-reading-progress { display: none; }}
.studio-opening { animation-duration: 0.7s; animation-delay: 1.8s; }
.studio-opening span { animation-duration: 0.65s; }
.studio-opening span:nth-child(2) { animation-delay: 0.18s; }
.studio-opening span:nth-child(3) { animation-delay: 0.36s; }
.studio-opening small { animation-delay: 0.55s; }
.studio-opening { animation: auto ease 0s 1 normal none running none; z-index: 9999; }
.studio-opening.is-leaving { animation: 0.95s cubic-bezier(0.76, 0, 0.24, 1) 0s 1 normal forwards running curtain-reveal; }
.studio-opening.is-leaving > div { animation: 0.65s ease 0s 1 normal forwards running opening-words-away; }
html.intro-entering body > .p-site-header { animation: 0.85s ease 0s 1 normal both running page-arrive; }
html.intro-entering .p-hero-photo__image { animation: 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0s 1 normal both running hero-settle; }
html.intro-entering .p-hero__copy { animation: 0.95s ease 0.12s 1 normal both running page-arrive; }
html.intro-entering .studio-message { animation: 0.8s ease 0.18s 1 normal both running page-arrive; }
@keyframes curtain-reveal { 
  0% { clip-path: inset(0px); }
  100% { clip-path: inset(0px 0px 100%); }
}
@keyframes opening-words-away { 
  100% { opacity: 0; transform: translateY(-25px); }
}
@media (prefers-reduced-motion: reduce){html.intro-entering .p-hero-photo__image, html.intro-entering .p-hero__copy, html.intro-entering .studio-message { animation: auto ease 0s 1 normal none running none; }}
.studio-opening span.opening-word, .studio-opening span.opening-word:nth-child(2), .studio-opening span.opening-word:nth-child(3) { animation: auto ease 0s 1 normal none running none; }
.studio-opening .opening-word i { display: inline-block; font-style: normal; opacity: 0; animation: opening-letter-in .48s cubic-bezier(.2,.8,.2,1) var(--letter-delay) forwards; }
.studio-opening small { animation-delay: 1.15s; }
@keyframes opening-letter-in { 
  0% { opacity: 0; transform: translateY(20px) rotate(7deg); filter: blur(3px); }
  100% { opacity: 1; transform: translateY(0px) rotate(0deg); filter: blur(0px); }
}
@media (prefers-reduced-motion: reduce){.studio-opening .opening-word i { animation: auto ease 0s 1 normal none running none; opacity: 1; transform: none; filter: none; }}
.studio-opening { background: radial-gradient(at 50% 38%, rgb(255, 253, 245), rgb(255, 240, 223) 65%, rgb(246, 222, 199)); perspective: 1000px; }
.studio-opening::before { content: ""; position: absolute; inset: -50%; pointer-events: none; background: linear-gradient(110deg, transparent 36%, rgba(255, 255, 255, 0.584) 48%, transparent 60%); animation: 5.6s ease-in-out 0s 1 normal both running cinema-light; }
.studio-opening::after { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(183, 138, 85, 0.22); pointer-events: none; animation: 1.6s ease 0s 1 normal both running cinema-frame; }
.studio-opening > div { position: relative; z-index: 1; animation: 5.5s ease-out 0s 1 normal both running cinema-title-drift; gap: 15px 25px; }
.studio-opening span.opening-word { letter-spacing: 0.04em; }
.studio-opening .opening-word i { animation-duration: 1s; animation-timing-function: cubic-bezier(0.16, 0.7, 0.2, 1); }
.studio-opening small { font-size: 20px; letter-spacing: 0.12em; animation: 1.3s ease 2s 1 normal both running cinema-subtitle; }
.studio-opening.is-leaving { animation: 1.2s cubic-bezier(0.65, 0, 0.22, 1) 0s 1 normal forwards running cinema-curtain; }
.studio-opening.is-leaving > div { animation: 0.85s ease 0s 1 normal forwards running opening-words-away; }
html.intro-entering .p-hero-photo__image { animation-duration: 1.45s; }
html.intro-entering .p-hero__copy { animation-duration: 1.3s; animation-delay: 0.2s; }
@keyframes cinema-light { 
  0% { transform: translate(-35%); opacity: 0; }
  25% { opacity: 0.7; }
  100% { transform: translate(35%); opacity: 0; }
}
@keyframes cinema-frame { 
  0% { opacity: 0; transform: scale(0.98); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes cinema-title-drift { 
  0% { transform: scale(0.96) translateY(8px); }
  100% { transform: scale(1) translateY(0px); }
}
@keyframes cinema-subtitle { 
  0% { opacity: 0; transform: translateY(12px); letter-spacing: 0.25em; }
  100% { opacity: 1; transform: translateY(0px); letter-spacing: 0.12em; }
}
@keyframes cinema-curtain { 
  0% { clip-path: inset(0px); opacity: 1; }
  100% { clip-path: inset(0px 0px 100%); opacity: 0.85; }
}
@media (max-width: 760px){.studio-opening > div { gap: 10px 8px; padding: 28px 16px; }
.studio-opening span.opening-word { font-size: clamp(32px, 9vw, 50px); letter-spacing: 0px; }
.studio-opening small { font-size: 16px; line-height: 1.8; }
.studio-opening::after { inset: 12px; }}
@media (prefers-reduced-motion: reduce){.studio-opening { display: none; }}
.studio-opening .opening-event { flex-basis: 100%; text-align: center; margin: 0px 0px 24px; animation: 1.1s ease 0.2s 1 normal both running cinema-subtitle; }
.studio-opening .opening-event > span { display: block; font-family: "Zen Kaku Gothic New", sans-serif; font-size: 20px; line-height: 1.8; font-weight: 700; color: rgb(141, 89, 60); animation: auto ease 0s 1 normal none running none; letter-spacing: 0.04em; }
.studio-opening .opening-event > strong { display: block; font-family: "Zen Maru Gothic", sans-serif; font-size: 30px; line-height: 1.7; font-weight: 900; color: rgb(185, 73, 37); margin-top: 6px; }
.studio-opening .opening-word i { animation-delay: calc(var(--letter-delay) + .65s); }
.studio-opening small { animation-delay: 2.7s; }
@media (max-width: 760px){.studio-opening .opening-event { margin-bottom: 22px; }
.studio-opening .opening-event > span { font-size: 16px; letter-spacing: 0.01em; }
.studio-opening .opening-event > strong { font-size: 22px; line-height: 1.7; }
.studio-opening .opening-word { font-size: clamp(30px, 8.5vw, 46px); }}
@keyframes hero-settle { 
  0% { transform: scale(1.045); filter: brightness(1.08); }
  100% { transform: scale(1); filter: brightness(1); }
}
@keyframes page-arrive { 
  0% { opacity: 0; translate: 0px 14px; }
  100% { opacity: 1; translate: 0px; }
}
html[data-expo-intro=playing]{overflow:hidden}.studio-opening{pointer-events:auto}.studio-opening.is-leaving{pointer-events:none}.studio-opening .opening-skip{position:absolute;right:24px;bottom:24px;padding:10px 20px;border:1px solid #ddb28c;background:#fff8ed;color:#a4482e;font:700 16px/1.5 sans-serif;cursor:pointer}

/* Subtitle occupies its own full-width centered row. */
.studio-opening>div{width:100%;box-sizing:border-box}.studio-opening>div>small{display:block;flex:0 0 100%;width:100%;box-sizing:border-box;margin:0;padding:0;text-align:center;align-self:center;letter-spacing:.06em;text-indent:.06em}

/* Optical alignment for the subtitle, including Japanese punctuation. */
.studio-opening>div>small{translate:.45em 0}