/* =========================================================
   SIAMTECH SURIN — opening intro (assets/intro.js)
   Plays on every page load: the logo materialises inside a HUD core, the catalog "loads",
   the core unlocks, then the logo flies into the header while a portal opens onto the page.
   Always dark, whatever the site theme.
   ========================================================= */
@property --sti-hole { syntax: "<length>"; inherits: false; initial-value: 0px; }

/* while the intro covers the page: no scrolling, and the hero sits painted in its final state
   (so the browser can paint it early); its entrance animations start fresh when the class goes */
html.sti-on { overflow: hidden; }
html.sti-on .ht-inner { animation: none !important; transform: none; }
html.sti-on .reveal-up { animation: none !important; opacity: 1; transform: none; }
html.sti-on .feature { animation: none !important; }
html.sti-on .brand img { visibility: hidden; }

.sti, .sti-logo, .sti-rim, .sti-logo-scan {
  --core: min(64vmin, 420px, 50vh);
  --cy: 44%;
  --tsz: clamp(24px, 5.6vw, 50px);
  --g: #d8ad66; --gh: #f5d9a2; --grgb: 216, 173, 102;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
/* the visible-viewport unit only where the browser knows it (a custom property would take it blindly and break) */
@supports (height: 1svh) {
  .sti, .sti-logo, .sti-rim, .sti-logo-scan { --core: min(64vmin, 420px, 50svh); }
}
.sti { position: fixed; inset: 0; z-index: 10000; overflow: hidden; background: #040507; color: #eef1f4; cursor: progress;
  font-family: "Anuphan", system-ui, sans-serif; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; touch-action: none; }
.sti-bg { position: absolute; inset: 0; background: radial-gradient(circle at 50% var(--cy), #10151c 0%, #06080b 48%, #020304 78%); }
.sti-floor {
  position: absolute; left: -50%; right: -50%; bottom: -30%; height: 90%;
  background-image: linear-gradient(rgba(var(--grgb), .3) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--grgb), .3) 1px, transparent 1px);
  background-size: 46px 46px; transform-origin: 50% 100%; transform: perspective(520px) rotateX(64deg);
  -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 35%, transparent 100%); mask-image: linear-gradient(0deg, transparent 0%, #000 35%, transparent 100%);
  opacity: 0; animation: stiFloor 6s linear forwards;
}
.sti canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sti-core { position: absolute; left: 50%; top: var(--cy); width: var(--core); height: var(--core); translate: -50% -50%; transition: transform .95s cubic-bezier(.7, 0, .2, 1), opacity .8s ease; }
.sti-rays {
  position: absolute; inset: -60%; border-radius: 50%; opacity: 0; transform: scale(.55);
  background: repeating-conic-gradient(from 0deg, rgba(var(--grgb), 0) 0deg 7deg, rgba(245, 217, 162, .3) 9deg, rgba(var(--grgb), 0) 11deg 20deg);
  -webkit-mask-image: radial-gradient(circle, #000 16%, transparent 60%); mask-image: radial-gradient(circle, #000 16%, transparent 60%);
}
.sti-sweep {
  position: absolute; inset: 21%; border-radius: 50%; opacity: 0; transition: opacity .3s ease;
  background: conic-gradient(from 0deg, rgba(var(--grgb), 0) 0 72%, rgba(var(--grgb), .08) 80%, rgba(245, 217, 162, .55) 99.6%, rgba(255, 255, 255, .9) 100%);
  animation: stiSpin 1.15s linear infinite;
}
.sti.is-scanning .sti-sweep { opacity: 1; }
.sti.is-unlocked .sti-sweep { opacity: 0; }

/* HUD rings */
.sti svg.sti-rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; transform: scale(.55); filter: drop-shadow(0 0 5px rgba(var(--grgb), .6)); }
.sti-rings * { transform-box: view-box; transform-origin: 50% 50%; }
.sti-rings .r-track { fill: none; stroke: rgba(255, 255, 255, .09); stroke-width: 1.6; }
.sti-rings .r-progress { fill: none; stroke: var(--gh); stroke-width: 1.8; stroke-linecap: round; }
.sti-rings .g-seg { animation: stiSpin 6s linear infinite; }
.sti-rings .seg { fill: none; stroke: rgba(var(--grgb), .28); stroke-width: 4.4; transition: stroke .2s ease, stroke-width .2s ease; }
.sti-rings .seg.on { stroke: var(--gh); }
.sti-rings .g-notch { animation: stiSpin 2.4s linear infinite reverse; }
.sti-rings .r-notch { fill: none; stroke: rgba(245, 217, 162, .9); stroke-width: .9; stroke-dasharray: 9 27.13; }
.sti-rings .r-dash { fill: none; stroke: rgba(var(--grgb), .65); stroke-width: .7; stroke-dasharray: 1.2 3.5; animation: stiSpin 16s linear infinite; }
.sti-rings .g-text { animation: stiSpin 24s linear infinite reverse; }
.sti-rings .r-text { fill: var(--gh); font: 500 5.2px var(--mono); opacity: .85; }
.sti-rings .x line { stroke: rgba(var(--grgb), .85); stroke-width: .8; }
.sti.is-rings svg.sti-rings { opacity: 1; transform: none; transition: opacity .6s ease, transform 1.1s var(--ease); }
.sti.is-unlocked .g-seg { animation-play-state: paused; }
.sti.is-unlocked .seg { stroke: #fff4dc; stroke-width: 5.4; }
.sti.is-unlocked .sti-rays { animation: stiRays 1.8s ease-out forwards; }
.sti.is-unlocked svg.sti-rings { animation: stiRingKick .7s var(--ease); }

/* HUD corner brackets */
.sti-brk { position: absolute; width: 26px; height: 26px; border: 0 solid rgba(var(--grgb), .9); opacity: 0; }
.sti-brk.tl { left: -9%; top: -9%; border-width: 2px 0 0 2px; }
.sti-brk.tr { right: -9%; top: -9%; border-width: 2px 2px 0 0; }
.sti-brk.bl { left: -9%; bottom: -9%; border-width: 0 0 2px 2px; }
.sti-brk.br { right: -9%; bottom: -9%; border-width: 0 2px 2px 0; }
.sti.is-rings .sti-brk { animation: stiBrk .8s var(--ease) .2s forwards; }
.sti.is-unlocked .sti-brk { border-color: #fff4dc; }

/* scan line over the logo + shockwaves */
.sti-scan { position: absolute; left: 22%; right: 22%; top: 24%; height: 2px; border-radius: 2px; opacity: 0; z-index: 3;
  background: linear-gradient(90deg, transparent, var(--gh), #fff, var(--gh), transparent); box-shadow: 0 0 16px 3px rgba(245, 217, 162, .8); }
.sti.is-scanning .sti-scan { animation: stiScan .9s ease-in-out 2 alternate; }
.sti.is-unlocked .sti-scan { animation: none; opacity: 0; }
.sti-wave { position: absolute; left: 30%; top: 30%; width: 40%; height: 40%; border-radius: 50%; border: 2px solid var(--gh); opacity: 0; z-index: 3;
  box-shadow: 0 0 30px rgba(245, 217, 162, .6), inset 0 0 30px rgba(245, 217, 162, .4); }
.sti.is-unlocked .sti-wave { animation: stiWave 1.1s cubic-bezier(.1, .7, .3, 1) forwards; }
.sti.is-unlocked .sti-wave.w2 { animation-delay: .14s; border-width: 1px; }
.sti.is-unlocked .sti-wave.w3 { animation-delay: .3s; border-width: 1px; border-color: rgba(255, 255, 255, .75); }

/* HUD readout */
.sti-hud { position: absolute; left: 50%; top: calc(var(--cy) + var(--core) * .59 + 16px); translate: -50% 0; width: min(620px, 94vw); text-align: center; transition: opacity .5s ease, transform .8s var(--ease); }
.sti-status { font: 500 11.5px/1.4 var(--mono); letter-spacing: .3em; color: #b7bfca; opacity: 0; animation: stiFade .5s ease .5s forwards; }
.sti-status i { font-style: normal; color: var(--g); }
.sti-pct { margin-top: 6px; font: 500 clamp(30px, 6vw, 44px)/1 var(--mono); color: var(--gh); letter-spacing: .06em; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px rgba(var(--grgb), .7); opacity: 0; animation: stiFade .5s ease .6s forwards; }
.sti-title { position: absolute; left: 0; right: 0; top: 0; white-space: nowrap; font: 600 var(--tsz)/1.1 var(--mono); letter-spacing: .6em; color: #fff; opacity: 0; filter: blur(12px);
  text-shadow: 0 0 18px rgba(245, 217, 162, .9), 0 0 42px rgba(var(--grgb), .7); }
.sti-sub { position: absolute; left: 0; right: 0; top: calc(var(--tsz) * 1.1 + 14px); font: 500 clamp(15px, 2.4vw, 19px)/1.5 "Anuphan", system-ui, sans-serif; color: var(--gh); opacity: 0; transform: translateY(10px); }
.sti-sub small { display: block; margin-top: 4px; font: 500 11px/1.4 var(--mono); letter-spacing: .3em; color: #7d8896; }
.sti.is-unlocked .sti-pct, .sti.is-unlocked .sti-status { animation: stiOut .25s ease forwards; }
.sti.is-granted .sti-title { animation: stiTitle 1s var(--ease) forwards; }
.sti.is-granted .sti-sub { animation: stiRise .8s var(--ease) .35s forwards; }

/* the logo lives outside the overlay so it can fly into the header while the portal opens.
   It materialises once its image has decoded (.is-ready); intro.js then drops that animation and
   .is-on holds the end state, so the glow is not clipped and later effects cannot replay it. */
.sti-logo { position: fixed; left: 50%; top: var(--cy); z-index: 10002; width: calc(var(--core) * .44); height: calc(var(--core) * .44);
  margin: calc(var(--core) * -.22) 0 0 calc(var(--core) * -.22); border-radius: 50%; object-fit: cover; pointer-events: none; background: #040507;
  box-shadow: 0 0 0 1px rgba(var(--grgb), .6), 0 0 40px 6px rgba(var(--grgb), .35);
  opacity: 0; clip-path: inset(0 0 100% 0 round 50%); transition: box-shadow .4s ease, filter .4s ease; }
.sti-logo.is-ready { animation: stiMaterialize 1.1s cubic-bezier(.5, 0, .2, 1) .1s forwards; }
.sti-logo.is-on { opacity: 1; clip-path: none; }
.sti-logo.is-dim { filter: saturate(.75) brightness(.88); }
.sti-logo.is-charged { filter: none; box-shadow: 0 0 0 2px var(--gh), 0 0 90px 24px rgba(var(--grgb), .65), 0 0 180px 70px rgba(245, 217, 162, .22); }
.sti-logo.is-landed { box-shadow: 0 0 0 1px rgba(var(--grgb), .45), 0 8px 24px -8px rgba(var(--grgb), .55); }
.sti-logo-scan { position: fixed; z-index: 10003; left: 50%; top: var(--cy); width: calc(var(--core) * .56); height: 3px; margin-left: calc(var(--core) * -.28); border-radius: 3px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--gh), #fff, var(--gh), transparent); box-shadow: 0 0 18px 4px rgba(245, 217, 162, .85); opacity: 0; }
.sti-logo-scan.is-ready { animation: stiPrint 1.1s cubic-bezier(.5, 0, .2, 1) .1s forwards; }

/* portal: a hole grows from the core and reveals the page; a gold rim rides its edge.
   From here the overlay no longer takes taps or touches. */
.sti.is-open { --sti-hole: 150vmax; transition: --sti-hole 1.15s cubic-bezier(.7, 0, .2, 1), opacity .45s ease .8s; opacity: 0; cursor: auto; pointer-events: none; touch-action: auto;
  -webkit-mask-image: radial-gradient(circle at 50% var(--cy), transparent var(--sti-hole), #000 calc(var(--sti-hole) + 1px));
  mask-image: radial-gradient(circle at 50% var(--cy), transparent var(--sti-hole), #000 calc(var(--sti-hole) + 1px)); }
.sti.is-open .sti-core { transform: scale(2.6); opacity: 0; }
.sti.is-open .sti-hud { opacity: 0; transform: translateY(-14px) scale(1.06); }
.sti-rim { position: fixed; left: 50%; top: var(--cy); z-index: 10001; width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 50%; pointer-events: none; opacity: 0;
  border: 2px solid var(--gh); box-shadow: 0 0 34px 8px rgba(245, 217, 162, .55), inset 0 0 34px 6px rgba(245, 217, 162, .45); }
.sti-ping { position: fixed; z-index: 10003; border-radius: 50%; pointer-events: none; border: 2px solid #f5d9a2; box-shadow: 0 0 18px 4px rgba(245, 217, 162, .7); animation: stiPing .9s cubic-bezier(.2, .7, .3, 1) forwards; }

@keyframes stiSpin { to { transform: rotate(1turn); } }
@keyframes stiFade { to { opacity: 1; } }
@keyframes stiOut { to { opacity: 0; transform: translateY(-6px); } }
@keyframes stiFloor { 0% { opacity: 0; background-position: 0 0; } 20% { opacity: .55; } 100% { opacity: .38; background-position: 0 322px; } }
@keyframes stiMaterialize { 0% { opacity: 1; clip-path: inset(0 0 100% 0 round 50%); filter: brightness(2.2) saturate(0); } 70% { filter: brightness(1.4) saturate(.6); } 100% { opacity: 1; clip-path: inset(0 0 0 0 round 50%); filter: none; } }
@keyframes stiPrint { 0% { opacity: 0; transform: translateY(calc(var(--core) * -.22)); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(var(--core) * .22)); } }
@keyframes stiScan { 0% { top: 24%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 76%; opacity: 0; } }
@keyframes stiWave { 0% { opacity: 1; transform: scale(.5); } 100% { opacity: 0; transform: scale(7.5); } }
@keyframes stiRays { 0% { opacity: 0; transform: rotate(0deg) scale(.55); } 22% { opacity: 1; } 100% { opacity: 0; transform: rotate(38deg) scale(1.25); } }
@keyframes stiRingKick { 0% { transform: scale(1); } 30% { transform: scale(1.13); } 100% { transform: scale(1); } }
@keyframes stiTitle { 0% { opacity: 0; letter-spacing: .6em; filter: blur(12px); } 55% { opacity: 1; } 100% { opacity: 1; letter-spacing: .14em; filter: blur(0); } }
@keyframes stiRise { to { opacity: 1; transform: none; } }
@keyframes stiBrk { from { opacity: 0; transform: scale(1.6); } to { opacity: 1; transform: none; } }
@keyframes stiPing { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(2.4); } }

@media (max-width: 480px) {
  .sti-status { letter-spacing: .2em; font-size: 10.5px; }
  .sti-brk { width: 20px; height: 20px; }
  .sti-sub small { letter-spacing: .2em; }
}
/* phones held sideways: a smaller core placed higher, so the whole readout stays on screen */
@media (orientation: landscape) and (max-height: 500px) {
  .sti, .sti-logo, .sti-rim, .sti-logo-scan {
    --core: min(40vh, 300px);
    --cy: 36%;
    --tsz: clamp(20px, min(5.6vw, 9vh), 44px);
  }
  @supports (height: 1svh) {
    .sti, .sti-logo, .sti-rim, .sti-logo-scan { --core: min(40svh, 300px); }
  }
  .sti-pct { font-size: clamp(22px, 8vh, 36px); }
}
/* calmer version for people who ask their device for less motion.
   app.css cuts every animation/transition to .001ms !important under this query; the few
   intentional fades below restate their timing with !important to survive that. */
@media (prefers-reduced-motion: reduce) {
  .sti-floor, .sti-sweep, .sti-rings .g-seg, .sti-rings .g-notch, .sti-rings .r-dash, .sti-rings .g-text { animation: none; }
  .sti-floor { opacity: .3; }
  .sti.is-unlocked .sti-rays, .sti.is-unlocked svg.sti-rings, .sti.is-unlocked .sti-wave, .sti.is-scanning .sti-scan { animation: none; }
  .sti-logo { clip-path: none; }
  .sti-logo.is-ready { animation: stiFade .8s ease .1s forwards !important; }
  .sti-logo-scan { display: none; }
  .sti.is-open { -webkit-mask-image: none; mask-image: none; transition: opacity .7s ease !important; }
  .sti.is-open .sti-core { transform: none; }
}