/* Cinematic six-blade aperture with a compact, centered bilingual signature. */
:root {
  --opening-duration: 3.86s;
  --opening-background: #141118;
  --opening-ink-1: #c6dcff;
  --opening-ink-2: #cfc3fa;
  --opening-ink-3: #e0bfea;
  --opening-ink-4: #efc6d1;
  --opening-ink-5: #f4debc;
}
:root[data-theme="dark"] {
  --opening-background: #11160f;
  --opening-ink-1: #c4ddd0;
  --opening-ink-2: #c5ddb1;
  --opening-ink-3: #d8e6b9;
  --opening-ink-4: #e5dfbd;
  --opening-ink-5: #efdbc4;
}
.intro {
  --signature-width: min(390px, 62vw);
  --iris-size: 110vw;
}
.intro stop:nth-child(1) { stop-color: var(--opening-ink-1); }
.intro stop:nth-child(2) { stop-color: var(--opening-ink-2); }
.intro stop:nth-child(3) { stop-color: var(--opening-ink-3); }
.intro stop:nth-child(4) { stop-color: var(--opening-ink-4); }
.intro stop:nth-child(5) { stop-color: var(--opening-ink-5); }
.intro-curtain {
  background: var(--opening-background);
  animation: iris-curtain var(--opening-duration) linear both;
}
.intro-glow {
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--opening-ink-2) 10%, transparent), transparent 64%);
  animation: iris-glow var(--opening-duration) ease both;
}
.intro-blades {
  width: var(--iris-size);
  height: var(--iris-size);
  animation: iris-blades var(--opening-duration) cubic-bezier(.87, 0, .13, 1) both;
}
.intro-blades g { fill: var(--opening-background); }
.intro-blades polygon { vector-effect: non-scaling-stroke; stroke-width: 1.4px; }
.intro-name {
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.5vh, 22px);
  padding: 0;
  transform: none;
  animation: signature-presence var(--opening-duration) linear both;
}
/* Tight viewBoxes center the visible ink as well as its containers. */
.signature { overflow: visible; flex: none; height: auto; }
.signature-en { width: var(--signature-width); }
.signature-cn { width: min(205px, 42vw); }
.signature-stroke { stroke-dasharray: 1; stroke-dashoffset: 1; }
.intro-enabled .signature-stroke {
  animation: signature-write var(--stroke-duration) cubic-bezier(.35, 0, .4, 1) var(--stroke-delay) both;
}
.intro-skip {
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: calc(20px + env(safe-area-inset-right, 0px));
  min-width: 80px;
  min-height: 44px;
  font-size: 17px;
}
.intro-enabled .gallery-column .gallery-track { animation-play-state: paused; }
.intro-enabled .gallery-hero {
  animation: gallery-arrival var(--opening-duration) linear both;
}
.intro-enabled .gallery-header,
.intro-enabled .gallery-footer {
  animation: gallery-controls-arrival var(--opening-duration) linear both;
}
@keyframes signature-write { to { stroke-dashoffset: 0; } }
@keyframes signature-presence {
  0%, 5% { opacity: 0; }
  12%, 76% { opacity: 1; }
  76% { animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  96%, 100% { opacity: 0; }
}
@keyframes iris-blades {
  0%, 18% { transform: scale(.34) rotate(0deg); opacity: 1; }
  62% { transform: scale(1.7) rotate(14deg); opacity: 1; }
  100% { transform: scale(10) rotate(30deg); opacity: 0; }
}
@keyframes iris-curtain {
  0%, 68% { opacity: 1; }
  68% { animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  94%, 100% { opacity: 0; }
}
@keyframes iris-glow {
  0%, 35% { opacity: 0; transform: scale(.3); }
  60% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.6); }
}
@keyframes gallery-arrival {
  0%, 66% { filter: blur(5px); }
  66% { animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  100% { filter: blur(0); }
}
@keyframes gallery-controls-arrival {
  0%, 80% { opacity: 0; }
  100% { opacity: 1; }
}
@media (max-width: 600px) {
  .intro { --signature-width: 65vw; --iris-size: 160vmax; }
  .signature-cn { width: min(185px, 45vw); }
  .intro-name { gap: 16px; }
}
@media (orientation: landscape) and (max-height: 540px) {
  .intro { --signature-width: min(38vw, 290px, 90svh); }
  .signature-cn { width: min(22vw, 155px, 44svh); }
  .intro-name { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .signature-stroke { stroke-dashoffset: 0; animation: none !important; }
}