/* Short, optional brand introduction. The page remains usable without JavaScript. */
.brand-intro{position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#111416;color:#f4f4ee;overflow:hidden;z-index:10000;box-sizing:border-box;animation:intro-exit .5s ease 3.45s both}
.brand-intro::backdrop{background:#111416}
.brand-intro .intro-stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;background:radial-gradient(ellipse at 50% 40%,#2c3033 0%,#151819 50%,#0b0e10 100%)}
.brand-intro .intro-wordmark{position:relative;z-index:2;margin:0;text-align:center;animation:intro-title 1.15s cubic-bezier(.2,.7,.2,1) .35s both;will-change:transform,opacity}
.brand-intro .intro-wordmark strong{display:block;color:#f4f4ee;font-family:Arial,Helvetica,sans-serif;font-size:clamp(32px,8vw,112px);font-weight:700;line-height:1.12;letter-spacing:.015em;white-space:nowrap}
.brand-intro .intro-wordmark span{display:block;margin-top:18px;padding-left:.38em;font-family:Arial,Helvetica,sans-serif;font-size:clamp(12px,2vw,24px);line-height:1.5;letter-spacing:.38em;color:#c6ccd0;animation:intro-subtitle .7s ease .95s both}
.brand-intro .intro-slats{position:absolute;inset:-12% -4%;display:grid;grid-template-columns:repeat(16,1fr);gap:clamp(6px,1.7vw,30px);perspective:900px;transform:skewX(-7deg);z-index:3;pointer-events:none}
.brand-intro .intro-slat{background:linear-gradient(90deg,#070a0c 0%,#1a1e20 70%,#a3a9ab 99%,#e2e5e5 100%);transform-origin:left center;animation:intro-slat 1.55s cubic-bezier(.3,.05,.25,1) calc(var(--i)*22ms) both;will-change:transform,opacity}
.brand-intro .intro-skip{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));z-index:5;min-width:82px;min-height:44px;padding:10px 18px;border:1px solid #737e84;border-radius:0;background:#111416;color:#f5f5f2;font:16px/1.5 Arial,Sarabun,sans-serif;cursor:pointer}
.brand-intro .intro-skip:hover{background:#303639}.brand-intro .intro-skip:focus-visible{outline:2px solid white;outline-offset:5px}
@keyframes intro-slat{0%,12%{transform:rotateY(0);opacity:1}75%{opacity:1}100%{transform:rotateY(88deg) translateY(-6%);opacity:0}}
@keyframes intro-title{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes intro-subtitle{from{opacity:0;letter-spacing:.65em}to{opacity:1;letter-spacing:.38em}}
@keyframes intro-exit{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){.brand-intro{display:none}.brand-intro,.brand-intro *{animation:none!important}}