:root{color-scheme:dark;font-family:-apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;background:#080909;color:#eee8dc}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}main{position:fixed;inset:0;background:#080909;isolation:isolate}video,canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}canvas{z-index:0}video{z-index:1}video.switching{opacity:0}.overlay{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:#080909;transition:opacity .65s ease,visibility .65s; padding:32px}.overlay.finished{opacity:0;visibility:hidden;pointer-events:none}.loading-content{width:min(320px,100%);transform:translateY(-8px)}.wordmark{position:relative;overflow:hidden;width:min(5.4em,100%);font-size:clamp(28px,7vw,38px);margin:0 auto 44px}.wordmark img{display:block;width:100%;height:auto}.glint{position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,#fff5 48%,transparent 76%);transform:translateX(-150%);animation:glint 2.8s ease-in-out infinite}.meter{height:1px;background:#ffffff24;overflow:hidden}.meter span{display:block;width:0;height:100%;background:#eee8dc;box-shadow:0 0 12px #eee8dc80;transition:width .2s linear}.loading-meta{display:flex;justify-content:space-between;gap:12px;margin-top:15px;font-size:12px;line-height:1.6;color:#b3b2ac}#percent{font-variant-numeric:tabular-nums}.action{display:block;margin:28px auto 0;border:1px solid #ffffff50;border-radius:30px;padding:12px 24px;background:transparent;color:#eee8dc;font:inherit;font-size:14px;cursor:pointer}.sound{position:absolute;z-index:4;right:8px;top:57%;transform:translateY(-50%);width:48px;height:48px;display:grid;place-items:center;border:1px solid #ffffff30;border-radius:50%;color:#fff;background:#1115;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);cursor:pointer;transition:background .2s,opacity .2s;touch-action:manipulation}.sound svg{width:23px;height:23px}.sound:disabled{opacity:0;pointer-events:none}.sound:hover,.action:hover{background:#ffffff24}.sound:focus-visible,.action:focus-visible{outline:2px solid #eee8dc;outline-offset:5px}.playing-icon{display:none}.sound[aria-pressed="true"] .playing-icon{display:inline}.sound[aria-pressed="true"] .muted-icon{display:none}[hidden]{display:none!important}.no-script{position:absolute;inset:0;z-index:10;display:grid;place-items:center;background:#080909;padding:24px}@keyframes glint{0%,15%{transform:translateX(-150%)}85%,100%{transform:translateX(150%)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* The photographic plate provides the stone, aged brass and ivy. Text stays
   live so Vietnamese diacritics remain crisp at every device pixel ratio. */
.intro-actions {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: max(10%, calc(env(safe-area-inset-bottom) + 64px));
  transform: translateX(-50%);
  width: min(68vw, 560px);
  display: grid;
  gap: clamp(10px, 1.5vh, 24px);
  visibility: hidden;
  pointer-events: none;
}
.intro-actions.is-visible { visibility: visible; pointer-events: auto; }
.intro-actions { transition: opacity .38s ease, transform .48s cubic-bezier(.22,.61,.36,1); }
.intro-actions.is-leaving { opacity: 0; transform: translateX(-50%) translateY(12px); pointer-events: none; }
video.journey-film { transition: opacity .38s ease; }
#cinema-fade {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #000;
  opacity: 0;
  pointer-events: none;
}
#cinema-fade.is-active { pointer-events: auto; }
.intro-action-wrap { opacity: 0; }
.stone-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4.8;
  padding: 0 6%;
  border: 0;
  border-radius: 18px;
  background: url('./media/bamita-button.png') center / 104% 166% no-repeat;
  color: #c9ad7d;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  filter: drop-shadow(0 5px 5px #0006);
  transition: transform .25s ease, filter .25s ease;
}
.stone-button > span {
  font-family: inherit;
  font-weight: 400;
  font-size: clamp(19px, 5.65vw, 47px);
  line-height: 1.25;
  letter-spacing: .005em;
  text-shadow: 0 1px 0 #f4dab180, 0 2px 1px #745431, 0 4px 3px #080806, 1px 5px 6px #000a;
}
.order-button > span { text-transform: uppercase; font-size: clamp(24px, 7.5vw, 62px); }
.brand-name { text-transform: uppercase; }
.stone-button[href] { cursor: pointer; }
.stone-button[aria-disabled='true'] { cursor: default; }
.stone-button:focus-visible { outline: 2px solid #f2d29b; outline-offset: 6px; }
@media (hover: hover) {
  .stone-button:hover { transform: translateY(-3px); filter: brightness(1.12) drop-shadow(0 8px 9px #0007); }
}
.stone-button:active { transform: translateY(1px) scale(.985); }
.intro-actions.is-visible .intro-action-wrap {
  animation: stone-arrive 1050ms both;
}
.intro-actions.is-visible .intro-action-wrap:nth-child(2) { animation-delay: 130ms; }
@keyframes stone-arrive {
  0% { opacity: 0; transform: translate3d(0, 48vh, 0) scale(.96); animation-timing-function: cubic-bezier(.16,.78,.25,1); }
  65% { opacity: 1; transform: translate3d(0, -12px, 0) scale(1.012); animation-timing-function: ease-in-out; }
  83% { opacity: 1; transform: translate3d(0, 4px, 0) scale(.998); animation-timing-function: ease-out; }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@media (max-height: 500px) and (orientation: landscape) {
  .intro-actions { width: min(42vw, 340px); gap: 8px; }
  .stone-button > span { font-size: clamp(18px, 3.4vw, 28px); }
  .order-button > span { font-size: clamp(22px, 4.4vw, 36px); }
}
@media (prefers-reduced-motion: reduce) {
  .intro-actions.is-visible .intro-action-wrap { opacity: 1; transform: none; }
}

/* A deliberate, audible start; the loader dissolves only after playback starts. */
.action {
  width: 100%;
  min-width: 184px;
  min-height: 54px;
  margin-top: 32px;
  padding: 16px 32px;
  border: 1px solid #fff;
  border-radius: 999px;
  background: #fff;
  color: #080909;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .2em;
  box-shadow: 0 6px 24px #0003;
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.action:not([hidden]) { animation: start-appear .6s cubic-bezier(.2,.7,.2,1) both; }
.action:hover { background: #f1f1ef; box-shadow: 0 8px 30px #ffffff18; }
.action:active { transform: scale(.97); }
.action:disabled { cursor: wait; }
.overlay { transition: opacity 1.1s cubic-bezier(.4,0,.2,1), visibility 1.1s; }
.loading-content { transition: opacity .65s ease, transform .9s cubic-bezier(.2,.7,.2,1), filter .7s ease; }
.overlay.finished .loading-content { opacity: 0; transform: translateY(-22px) scale(1.035); filter: blur(5px); }
@keyframes start-appear {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hold the last frame while seeking, then gently blend into the loop. */
video.loop-blend { transition: opacity .32s ease-in-out; }
video.switching { transition: none; }