.brand-opening { position: relative; min-height: min(820px, calc(100svh - var(--header-height))); height: calc(100svh - var(--header-height)); background: #fff; overflow: hidden; isolation: isolate; }
.opening-stage { position: absolute; inset: 0; }
.opening-glass { position: absolute; width: clamp(200px, 24vw, 330px); height: auto; top: 48%; left: 50%; opacity: 0; transform-origin: 50% 75%; will-change: transform, opacity; }
.opening-glass { aspect-ratio: 1; mix-blend-mode: multiply; }
.opening-glass > img { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; z-index: 1; }
.opening-liquid { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.opening-wordmark { position: absolute; left: 50%; top: 48%; width: min(70vw, 430px); text-align: center; transform: translate(-50%, -50%); }
.opening-wordmark img { width: min(100%, 350px); height: auto; }
.opening-wordmark img { display: block; margin: 0 auto; }
.opening-korean { position: relative; width: min(100%, 350px); margin: 0 auto; }
.opening-english {
  display: block; margin-top: 22px; color: #111;
  font-family: var(--title); font-size: clamp(36px, 5vw, 58px);
  font-weight: 400; font-synthesis: none; line-height: 1;
  letter-spacing: .075em; padding-left: .075em;
}
.opening-korean::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
  width: min(100%, 350px); transform: translateX(-50%); pointer-events: none;
  -webkit-mask: url('../logo.png') center / 100% 100% no-repeat;
  mask: url('../logo.png') center / 100% 100% no-repeat;
  background: linear-gradient(110deg, transparent 38%, #b88f46 45%, #fff4cf 50%, #b88f46 55%, transparent 62%) 160% 0 / 300% 100% no-repeat;
  opacity: 0;
}
.brand-opening.is-playing .opening-korean::after { animation: opening-shine 1.6s 3.6s cubic-bezier(.25,.46,.45,.94) both; }
.brand-opening.is-playing .opening-wordmark img { animation: opening-radiance 2s 3.3s ease-in-out both; }
.brand-opening.is-playing .opening-english { animation: opening-radiance 2s 3.5s ease-in-out both; }
@keyframes opening-shine {
  0% { opacity: 0; background-position: 160% 0; }
  12%, 82% { opacity: 1; }
  100% { opacity: 0; background-position: -60% 0; }
}
@keyframes opening-radiance {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  45% { filter: drop-shadow(0 0 15px rgba(218,181,107,.42)); }
}
.opening-sparkles { position: absolute; inset: -22% -5%; pointer-events: none; }
.opening-sparkles i {
  position: absolute; display: block; width: clamp(17px, 3vw, 28px); aspect-ratio: 1;
  opacity: 0; transform: scale(.2) rotate(-12deg);
  filter: drop-shadow(0 0 5px rgba(208,170,91,.4));
}
.opening-sparkles i::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle, #fff9e7 0%, #ddbd78 40%, #ac8032 100%);
  clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 38%);
}
.opening-sparkles i:nth-child(1) { left: 8%; top: 18%; --spark-delay: 3.65s; }
.opening-sparkles i:nth-child(2) { right: 10%; top: 4%; --spark-delay: 3.9s; width: clamp(22px, 3.4vw, 34px); }
.opening-sparkles i:nth-child(3) { right: 3%; bottom: 17%; --spark-delay: 4.15s; }
.opening-sparkles i:nth-child(4) { left: 22%; bottom: 4%; --spark-delay: 4.35s; width: clamp(13px, 2vw, 20px); }
.brand-opening.is-playing .opening-sparkles i { animation: opening-twinkle 1.1s var(--spark-delay) ease-in-out both; }
@keyframes opening-twinkle {
  0% { opacity: 0; transform: scale(.2) rotate(-12deg); }
  35% { opacity: 1; transform: scale(1) rotate(0deg); }
  58% { opacity: .8; transform: scale(.8) rotate(6deg); }
  100% { opacity: 0; transform: scale(.2) rotate(16deg); }
}
.page-about .about-main { padding-top: 0; }
.page-about .about-main > .brand-opening { height: 100svh; min-height: 480px; }
.page-about .site-header { transition: opacity .3s ease, transform .3s ease, visibility .3s, background-color .35s ease; }
.page-about:not(.about-header-visible) .site-header { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-100%); }
.opening-actions { position: absolute; bottom: 36px; right: 40px; display: flex; gap: 24px; z-index: 2; }
.opening-actions button { border: 0; padding: 12px 0; color: #666; background: none; font: 12px var(--sans); cursor: pointer; }
.opening-story { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); font-size: 12px; text-decoration: none; color: #444; }
.opening-story span { display: inline-block; margin-left: 12px; }
.opening-scroll {
  position: absolute; left: 50%; bottom: max(32px, env(safe-area-inset-bottom));
  z-index: 2; transform: translateX(-50%); display: grid; justify-items: center;
  gap: 12px; padding: 10px 14px; min-height: 56px; border-radius: 12px;
  color: #666; font-family: var(--sans); font-size: 11px; font-weight: 500;
  line-height: 1.5; letter-spacing: .08em; text-align: center; white-space: nowrap;
  text-decoration: none;
}
html[lang="ko"] .opening-scroll { letter-spacing: .02em; }
.opening-scroll svg {
  width: 20px; height: 24px; fill: none; stroke: currentColor;
  stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round;
  animation: cue-bounce 2s ease-in-out infinite;
}
.opening-scroll:hover { color: #111; }
.opening-scroll:focus-visible { outline: 2px solid #111; outline-offset: 4px; }
.brand-opening.is-preparing .opening-scroll { visibility: hidden; opacity: 0; }
.brand-opening.is-playing .opening-scroll { animation: opening-cue 5s both; }
@keyframes opening-cue {
  0%, 78% { visibility: hidden; opacity: 0; }
  100% { visibility: visible; opacity: 1; }
}
.brand-opening.is-playing .opening-wordmark { animation: opening-logo 4.2s both; }
.brand-opening.is-playing .opening-glass-left { animation: opening-left 4.2s both; }
.brand-opening.is-playing .opening-glass-right { animation: opening-right 4.2s both; }
@keyframes opening-left {
  0% { opacity: 0; transform: translate(-150%, -39%) rotate(-9deg); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  16% { opacity: 1; transform: translate(-136%, -44%) rotate(-5deg); animation-timing-function: cubic-bezier(.45,0,.7,1); }
  38% { opacity: 1; transform: translate(-92%, -50%) rotate(9deg); animation-timing-function: cubic-bezier(.16,1,.3,1); }
  44% { opacity: 1; transform: translate(-103%, -49%) rotate(6deg); animation-timing-function: ease-out; }
  51% { opacity: 1; transform: translate(-104%, -49%) rotate(5.5deg); animation-timing-function: cubic-bezier(.4,0,.2,1); }
  75%,100% { opacity: 0; transform: translate(-124%, -43%) rotate(0deg); }
}
@keyframes opening-right {
  0% { opacity: 0; transform: translate(50%, -38%) rotate(8deg); animation-timing-function: cubic-bezier(.22,.61,.36,1); }
  16% { opacity: 1; transform: translate(37%, -43%) rotate(5deg); animation-timing-function: cubic-bezier(.45,0,.7,1); }
  38% { opacity: 1; transform: translate(-8%, -50%) rotate(-9deg); animation-timing-function: cubic-bezier(.16,1,.3,1); }
  44% { opacity: 1; transform: translate(3%, -49%) rotate(-6deg); animation-timing-function: ease-out; }
  51% { opacity: 1; transform: translate(4%, -49%) rotate(-5.5deg); animation-timing-function: cubic-bezier(.4,0,.2,1); }
  75%,100% { opacity: 0; transform: translate(24%, -43%) rotate(0deg); }
}
@keyframes opening-logo {
  0%, 64% { opacity: 0; transform: translate(-50%, -47%) scale(.98); }
  96%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.brand-opening.is-preparing .opening-wordmark { opacity: 0; }
.brand-opening.is-playing [data-opening-replay] { visibility: hidden; }
.brand-opening:not(.is-playing) [data-opening-skip] { display: none; }
.opening-actions button:focus-visible, .opening-story:focus-visible { outline: 2px solid #111; outline-offset: 4px; }
@media(max-width:560px) {
  .brand-opening { height: 76svh; min-height: 480px; }
  .opening-glass { width: 210px; }
  .opening-wordmark { width: 62vw; }
  .opening-english { margin-top: 18px; }
  .opening-scroll { bottom: max(28px, env(safe-area-inset-bottom)); font-size: 10px; }
    .opening-actions { right: 22px; bottom: 24px; }
  .opening-story { left: 24px; bottom: 36px; transform: none; }
}
@media(prefers-reduced-motion:reduce) {
  .brand-opening .opening-sparkles { display: none; }
  .brand-opening .opening-glass { display: none; }
  .brand-opening .opening-wordmark { animation: none; }
  .brand-opening .opening-wordmark img, .brand-opening .opening-korean::after,
  .brand-opening .opening-english, .brand-opening .opening-scroll,
  .brand-opening .opening-scroll svg { animation: none; }
  .page-about .site-header { transition: none; }
}