/* Shared interactive layer for the secondary pages (fleet, changi-airport, …).
   Pseudo-states and keyframes only; layout stays inline in each page. Mirrors index.dc.html's helmet. */
body { background: var(--ink-900, #0B0A09); margin: 0; }
a { color: var(--text-mid); } a:hover { color: var(--champagne-400); }
/* Buttons (.btn, .btn--ghost glint, gold .hv-cta, float, icon buttons) live in base.css: index loads base.css but not this file. */
.hv-swipe { scrollbar-width: none; } .hv-swipe::-webkit-scrollbar { display: none; }

/* Text links */
.hv-nav { position: relative; color: var(--text-mid); text-decoration: none; transition: color var(--dur) var(--ease); }
.hv-nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px;
  background: linear-gradient(90deg, var(--champagne-500), rgba(217,190,138,.25));
  transform: scaleX(0); transform-origin: left; transition: transform var(--spring-snappy-dur) var(--spring-snappy); }
.hv-nav:hover { color: var(--gold-300); }
.hv-nav:hover::after, .hv-nav[aria-current="page"]::after { transform: scaleX(1); }
.hv-nav[aria-current="page"] { color: var(--text-hi); }
.hv-nav:focus-visible { outline: 2px solid var(--champagne-400); outline-offset: 4px; border-radius: 2px; }

/* Shimmering hairline: sweeps first, rests second, alternating direction */
@keyframes hv-glide { 0% { transform: translateX(-120%); } 52% { transform: translateX(740%); } 100% { transform: translateX(740%); } }
@keyframes hv-glide-rev { 0% { transform: translateX(740%); } 52% { transform: translateX(-120%); } 100% { transform: translateX(-120%); } }
.hv-rail { position: absolute; top: 0; left: 0; height: 1px; width: 14%;
  background: linear-gradient(90deg, transparent, var(--gold-300) 50%, transparent);
  animation: hv-glide 4s var(--ease-sweep) infinite; }
.hv-rail--rev { animation-name: hv-glide-rev; }

/* Gold foil figures */
@keyframes hv-sheen { from { background-position: 0 0; } to { background-position: -420px 0; } }
.hv-foil { background-image: repeating-linear-gradient(90deg, #E3C468 0px, #EFD489 55px, #F7E6B4 120px, #FFFBEC 210px, #F7E6B4 300px, #EFD489 365px, #E3C468 420px);
  background-size: 420px 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; animation: hv-sheen 5s linear infinite; }

/* Entrance + photo drift */
@keyframes hv-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hv-reveal { animation: hv-rise var(--spring-smooth-dur) var(--spring-smooth) both; }
@supports (animation-timeline: view()) { .hv-reveal { animation-timeline: view(); animation-range: entry 4% cover 22%; } }
/* Below the hero, at-ds/scroll-motion.js moves .hv-reveal text into place at a line on the screen instead. */
html.at-scroll-motion .hv-reveal:not(#hero *) { animation: none; }
@keyframes hv-drift { 0%, 100% { transform: scale(1.02); } 50% { transform: scale(1.08); } }
.hv-drift { animation: hv-drift 26s var(--ease-loop) infinite; will-change: transform; }

/* Inputs */
.at-in::placeholder { color: var(--text-low); opacity: 1; }
.at-row:hover, .at-row[data-mid] { background: rgba(217,190,138,.04); }
.at-row { transition: background-color var(--dur) var(--ease); }

/* Mobile menu: the sheet fades in, the rows under the logo drift up 12px and come into focus in a soft stagger.
   Closing plays it back on the soft --ease-glide before the header unmounts it. The logo row stays put. */
.at-menu { opacity: 0; transition: opacity var(--fluid-out) var(--ease-exit); }
.at-menu[data-phase=open] { opacity: 1; transition-duration: var(--fluid-in); transition-timing-function: var(--ease-fluid); }
.at-menu > :not(:first-child):not(nav), .at-menu nav > a { opacity: 0; translate: 0 8px; transition: opacity var(--fluid-out) var(--ease-exit), translate var(--fluid-out) var(--ease-exit); }
.at-menu[data-phase=open] > :not(:first-child):not(nav), .at-menu[data-phase=open] nav > a { opacity: 1; translate: none; transition-duration: var(--fluid-in); transition-timing-function: var(--ease-fluid); }
.at-menu[data-phase=open] > :nth-child(2) { transition-delay: 30ms; }
.at-menu[data-phase=open] nav > a:nth-child(1) { transition-delay: 60ms; } .at-menu[data-phase=open] nav > a:nth-child(2) { transition-delay: 90ms; } .at-menu[data-phase=open] nav > a:nth-child(3) { transition-delay: 120ms; } .at-menu[data-phase=open] nav > a:nth-child(4) { transition-delay: 150ms; } .at-menu[data-phase=open] nav > a:nth-child(5) { transition-delay: 180ms; } .at-menu[data-phase=open] nav > a:nth-child(6) { transition-delay: 210ms; } .at-menu[data-phase=open] nav > a:nth-child(7) { transition-delay: 240ms; } .at-menu[data-phase=open] nav > a:nth-child(8) { transition-delay: 270ms; } .at-menu[data-phase=open] nav > a:nth-child(9) { transition-delay: 300ms; }
.at-menu[data-phase=open] > :last-child { transition-delay: 340ms; }
@media (prefers-reduced-motion: reduce) { .at-menu, .at-menu * { transition: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .hv-rail, .hv-foil, .hv-reveal, .hv-drift { animation: none !important; }
  .hv-foil { color: var(--gold-300); -webkit-text-fill-color: currentColor; background: none; }
}

/* Centre-of-screen focus on touch (at-ds/center-focus.js) */

/* Phone: page CTAs run the column width, label centred */
@media (max-width: 639px) {
  [data-cta] { width: 100% !important; max-width: none !important; flex: 1 1 100% !important; align-self: stretch !important; justify-content: center !important; text-align: center; box-sizing: border-box; }
  :has(> [data-cta]) { flex-wrap: wrap !important; }
  /* The menu stacks its CTAs in a column: a 100% basis there is height, which wrapped the second button off-screen. */
  [role=dialog] :has(> [data-cta]) { flex-wrap: nowrap !important; }
  [role=dialog] [data-cta] { flex: none !important; }
}

/* Page heroes (changi, seletar, meet-and-greet, maxi-cab): two columns from laptop up;
   below 1000px the photo leads as a wide banner and the two CTAs share the row equally */
@media (min-width: 1000px) { [data-hero] { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 40px clamp(40px, 4.4vw, 72px) !important; } }
@media (max-width: 999px) {
  [data-hero] { grid-template-columns: minmax(0,1fr) !important; gap: 28px !important; }
  [data-hero-photo] { order: -1; aspect-ratio: 16 / 9 !important; }
}
@media (min-width: 640px) and (max-width: 999px) {
  [data-hero-ctas] > * { flex: 1 1 0 !important; justify-content: center !important; }
  [data-hero-shots] { grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
}
@media (max-width: 639px) {
  [data-facts-row] { grid-template-columns: minmax(0,1fr) !important; gap: 6px !important; padding: var(--sp-4) 0 !important; }
  [data-facts-row] > :last-child { font-size: 20px !important; }
}
@media (max-width: 639px) { [data-chips] { display: none !important; } [data-stepper] { display: flex !important; } }
/* FAQ topics: sidebar from laptop up; an even pill grid below 1000px
   (tablet 3 + 2 on a 6-track grid, phone 2 + 2 + 1 full) */
@media (max-width: 999px) {
  [data-topics] { flex: 1 1 100% !important; min-width: 0 !important; display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-2); border-top: 0 !important; }
  [data-topics] > a { grid-column: span 2; min-width: 0; align-items: center; justify-content: space-between; min-height: 48px; box-sizing: border-box; gap: 10px !important; padding: var(--sp-2) var(--sp-4) !important; border: var(--border) solid var(--line-strong) !important; border-radius: var(--radius-full); }
  [data-topics] > a:nth-last-child(-n+2) { grid-column: span 3; }
  [data-topics] > a > :first-child { font-size: var(--body) !important; line-height: 1.2; }
}
@media (max-width: 639px) {
  [data-topics] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-topics] > a, [data-topics] > a:nth-last-child(-n+2) { grid-column: auto; padding: var(--sp-2) 14px !important; border-radius: 24px; }
  [data-topics] > a:last-child:nth-child(odd) { grid-column: 1 / -1; }
  [data-topics] > a > :first-child { font-size: var(--data) !important; }
}
@media (max-width: 999px) {
  [data-topics-wrap] { flex: 1 1 100% !important; gap: 0 !important; max-height: none !important; overflow: visible !important; }
  [data-topics-head], [data-topics-help], [data-topic-bar] { display: none !important; }
  [data-topics] { margin-top: 0 !important; }
}
/* Terms / privacy contents: sticky sidebar from laptop up; a two-column index below 1000px */
@media (max-width: 999px) {
  [data-toc-wrap] { flex: 1 1 100% !important; max-height: none !important; overflow: visible !important; }
  [data-toc-help], [data-toc-bar] { display: none !important; }
  [data-toc] { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-5); }
  [data-toc] > a { padding: 11px var(--sp-1) !important; min-height: 44px; box-sizing: border-box; align-items: center !important; }
}
@media (max-width: 639px) { [data-toc] { column-gap: 14px; } [data-toc] > a > :last-child { font-size: var(--caption) !important; line-height: 1.3; } }
/* Short laptop windows: the sticky contents panel sheds weight instead of clipping */
@media (min-width: 1000px) and (max-height: 820px) {
  [data-toc-help] > span:nth-child(2), [data-toc-help] > a.hv-nav { display: none !important; }
  [data-toc] > a { padding-top: 6px !important; padding-bottom: 6px !important; }
}
@media (min-width: 1000px) and (max-height: 680px) {
  [data-toc-help] { display: none !important; }
}
@media (min-width: 1000px) and (max-height: 560px) {
  [data-topics-help] > span:nth-child(2) { display: none !important; }
}
@media (min-width: 1000px) and (max-height: 460px) {
  [data-topics-help] { display: none !important; }
}
/* Sticky side panels scroll on their own when the window is shorter than they are */
.at-panel { overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ink-500) transparent; padding-right: 6px; }
.at-panel::-webkit-scrollbar { width: 4px; } .at-panel::-webkit-scrollbar-thumb { background: var(--ink-500); border-radius: 2px; }
.at-panel:hover { scrollbar-color: var(--champagne-700) transparent; } .at-panel:hover::-webkit-scrollbar-thumb { background: var(--champagne-700); }

/* Touch audit (phone + tablet): hit areas grow, visuals stay */
[data-hit] { position: relative !important; }
[data-hit]::after { content: ''; position: absolute; inset: -9px -6px; }
@media (max-width: 999px) {
  .hv-nav::before { content: ''; position: absolute; inset: -11px -4px; }
  footer a:not(.btn) { display: inline-flex; align-items: center; min-height: 40px; }
  [role="tablist"][aria-label="Cards"] > button { height: 32px !important; padding: 0 5px !important; }
}
@media (max-width: 639px) {
  [style*="font-size: 9px"], [style*="font-size: 10px"] { font-size: 11px !important; }
}