html.site-intro-active,
html.site-intro-active body { overflow: hidden !important; overscroll-behavior: none; }
#site-intro[hidden] { display: none !important; }
#site-intro {
  --intro-ink: #f5ecdd;
  --intro-accent: #d89565;
  position: fixed; inset: 0; z-index: 2147483646;
  display: grid; place-items: center; overflow: hidden; isolation: isolate;
  background: #211a20; color: var(--intro-ink); touch-action: none;
  font-family: Arial, sans-serif; text-align: center;
  animation: intro-exit .3s ease-in 2.2s both;
}
#site-intro, #site-intro * { box-sizing: border-box; }
#site-intro p { margin: 0; }
#site-intro .intro-content { position: relative; z-index: 2; width: 100%; padding: 32px 24px; }
#site-intro .intro-symbol { display: block; width: 52px; height: 62px; margin: 0 auto 26px; color: var(--intro-accent); }
#site-intro .intro-word { display: block; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(64px, 13vw, 150px); font-weight: 400; line-height: 1; letter-spacing: .04em; margin-left: .04em; }
#site-intro .intro-tagline { margin-top: 24px; font-size: 17px; line-height: 1.5; letter-spacing: .08em; }
#site-intro .intro-progress { width: 148px; height: 1px; margin: 48px auto 17px; background: #f5ecdd26; overflow: hidden; }
#site-intro .intro-progress::after { content: ''; display: block; height: 100%; background: var(--intro-accent); transform-origin: left; animation: intro-progress 2.2s cubic-bezier(.2,.65,.35,1) both; }
#site-intro .intro-status { font-size: 14px; line-height: 1.4; letter-spacing: .1em; opacity: .65; }
#site-intro .intro-signature { position: absolute; bottom: max(28px, env(safe-area-inset-bottom)); left: 20px; right: 20px; font-size: 12px; letter-spacing: .16em; opacity: .5; }
#site-intro .intro-atmosphere { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
#site-intro.intro-braise .intro-atmosphere::before { content: ''; position: absolute; left: 0; right: 0; bottom: -30%; height: 100%; background: radial-gradient(ellipse at 50% 95%, #ce632e38, transparent 65%); animation: intro-glow 2.5s ease-out both; }
#site-intro .intro-ember { position: absolute; bottom: -8px; left: var(--x); width: 2px; height: 3px; border-radius: 50%; background: #e3a06e; box-shadow: 0 0 7px #ed8b46; opacity: 0; animation: intro-ember 2.4s ease-out var(--delay) both; }
#site-intro.intro-trame { --intro-ink: #183e4b; --intro-accent: #3653a3; background: #eef2f3; font-family: Outfit, Arial, sans-serif; }
#site-intro.intro-trame .intro-atmosphere { background-image: linear-gradient(#183e4b08 1px, transparent 1px), linear-gradient(90deg, #183e4b08 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse, #000, transparent 75%); }
#site-intro.intro-trame .intro-word { font-family: Outfit, Arial, sans-serif; font-weight: 600; letter-spacing: .08em; margin-left: .08em; }
#site-intro.intro-trame .intro-tagline { letter-spacing: .025em; }
#site-intro.intro-trame .intro-symbol { width: 128px; height: 74px; margin-bottom: 28px; }
#site-intro.intro-trame .intro-symbol path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: intro-draw 1.8s cubic-bezier(.25,.6,.3,1) .12s both; }
#site-intro.intro-trame .intro-progress { background: #183e4b22; }
#site-intro .intro-corner { position: absolute; width: 22px; height: 22px; border-color: #183e4b35; border-style: solid; }
#site-intro .intro-corner:nth-child(1) { top: 32px; left: 32px; border-width: 1px 0 0 1px; }
#site-intro .intro-corner:nth-child(2) { top: 32px; right: 32px; border-width: 1px 1px 0 0; }
#site-intro .intro-corner:nth-child(3) { bottom: 32px; left: 32px; border-width: 0 0 1px 1px; }
#site-intro .intro-corner:nth-child(4) { bottom: 32px; right: 32px; border-width: 0 1px 1px 0; }
@keyframes intro-exit { from { opacity: 1; } to { opacity: 0; } }
@keyframes intro-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes intro-glow { from { opacity: .2; transform: scale(.95); } to { opacity: 1; transform: scale(1.05); } }
@keyframes intro-ember { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: .6; } 100% { opacity: 0; transform: translate(20px, -58vh); } }
@keyframes intro-draw { to { stroke-dashoffset: 0; } }
@media (max-width: 480px) {
  #site-intro .intro-tagline { font-size: 15px; letter-spacing: .025em; }
  #site-intro .intro-progress { margin-top: 36px; }
  #site-intro .intro-symbol { margin-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  #site-intro, #site-intro *, #site-intro *::before, #site-intro *::after { animation: none !important; }
  #site-intro.intro-trame .intro-symbol path { stroke-dashoffset: 0; }
  #site-intro .intro-ember { display: none; }
}