/* ==========================================================================
   Discovery Airways — Splash intro "Departure clearance"
   Đúng 2,5 giây: sân đỗ hiện ra theo phối cảnh → logo dựng từng cánh →
   tên thương hiệu mở khoá cùng trục wght của Montserrat → bảng số leo cao độ
   → cất cánh, nền trượt lên nhường chỗ cho hero.
   Nạp sau styles.css nên ghi đè phần khung .tb-splash cũ.
   ========================================================================== */
.page-taxibay .tb-splash,
.tb-splash {
  display: block;
  background: transparent;   /* nền do .tb-boot-sheet giữ, xem ghi chú dưới */
  perspective: 1000px;
}

/* Nền tối nằm ở <html> để không có nháy trắng trước khi JS chạy, và để khi
   .tb-boot-sheet trượt lên thì phía sau là hero chứ không phải một lớp đen. */
html.tb-splash-armed,
html.tb-splash-armed body.page-taxibay { background: #070d16; }

/* ---------- nền mở ra bằng chính hình khối logo ----------
   Thay vì trượt lên, tấm nền bị "đục" một lỗ hình logo lớn dần ở giữa: hero
   lộ ra qua đúng dáng thương hiệu. Logo có khoảng hở giữa các cánh nên phóng
   to mãi vẫn còn vệt tối — vì vậy ở cuối tấm nền mờ hẳn đi để dọn sạch.
   ------------------------------------------------------------------------ */
@property --tb-open {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false;
}

.tb-boot-sheet {
  position: absolute;
  inset: 0;
  overflow: hidden;
  will-change: opacity;
  -webkit-mask:
    linear-gradient(#000 0 0),
    url("assets/airways-mark.svg?v=20261030") center / var(--tb-open, 0%) no-repeat;
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0),
    url("assets/airways-mark.svg?v=20261030") center / var(--tb-open, 0%) no-repeat;
  mask-composite: exclude;
}
.tb-boot-sky {
  position: absolute;
  inset: -2%;
  background:
    radial-gradient(64% 46% at 50% 58%, rgba(183, 149, 82, .2), transparent 66%),
    radial-gradient(120% 78% at 50% 116%, rgba(72, 124, 170, .18), transparent 62%),
    linear-gradient(172deg, #060c14 0%, #0a1622 54%, #102132 100%);
}



/* Bản canvas (script.js): tấm trời được vẽ lên <canvas> và lỗ logo được đục
   bằng Path2D, nên bỏ mask CSS và lớp .tb-boot-sky trùng lặp. */
.tb-boot-sheet.is-canvas { -webkit-mask: none; mask: none; }
.tb-boot-sheet.is-canvas .tb-boot-sky { display: none; }
.tb-boot-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* ---------- lõi thương hiệu ---------- */
.tb-boot-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 24px;
}
.tb-boot-core {
  display: grid;
  justify-items: center;
  gap: 20px;
  text-align: center;
  will-change: transform, opacity;
}
.tb-boot-mark {
  width: clamp(46px, 5vw, 68px);
  aspect-ratio: 296 / 436;
}
.tb-boot-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tb-boot-mark .dw-blade { transform-box: fill-box; transform-origin: 50% 100%; will-change: transform, opacity; }

.tb-boot-word { display: grid; gap: 2px; }
.tb-boot-word span { display: block; overflow: hidden; }
.tb-boot-word b {
  display: block;
  font-family: var(--font-title);
  font-size: clamp(30px, 6vw, 66px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: .05em;
  color: #fff;
  font-variation-settings: "wght" 200;
  will-change: transform, font-variation-settings;
}
.tb-boot-word span:last-child b {
  color: transparent;
  background: linear-gradient(96deg, #e6cd91, #f6e6bd 46%, #c39a44);
  -webkit-background-clip: text;
  background-clip: text;
}
.tb-boot-tag {
  font-family: var(--font-body);
  font-size: clamp(9px, 1.1vw, 11px);
  font-style: normal;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(240, 226, 195, .72);
  opacity: 0;
}

/* ---------- bảng thông số trước chuyến bay ---------- */
.tb-boot-panel {
  position: absolute;
  left: 50%;
  bottom: clamp(46px, 7vh, 92px);
  transform: translateX(-50%);
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 3vw, 34px);
  font-family: var(--font-body);
  white-space: nowrap;
}
.tb-boot-panel span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(224, 198, 141, .58);
  opacity: 0;
}
.tb-boot-panel b {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--font-title);
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 500;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: #fff6e4;
}
.tb-boot-panel b i { font-style: normal; }
.tb-boot-panel b s {
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(224, 198, 141, .72);
}

.tb-boot-bar {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 4.4vh, 54px);
  width: min(240px, 46vw);
  height: 1px;
  transform: translateX(-50%);
  background: rgba(232, 210, 155, .17);
  overflow: hidden;
}
.tb-boot-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(232, 210, 155, .35), #f2dda6);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

@media (max-width: 620px) {
  .tb-boot-panel { gap: 12px; }
  .tb-boot-panel span:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.tb-motion-forced) .tb-splash { display: none !important; }
}