/* =========================================================================
   Dragonfly Interactive — Base
   Reset, typography defaults, accessibility primitives.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--graphite);
  background: var(--platinum);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
}

/* Page is dark by default for hero, fade into platinum sections via layout */
body.dark-shell {
  background: var(--navy);
  color: var(--platinum);
}

img, svg, video { max-width: 100%; display: block; height: auto; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: inherit;
}

p { max-width: 65ch; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection {
  background: var(--hk-red);
  color: #fff;
}

/* Focus rings — visible, brand-colored */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.on-dark :focus-visible { outline-color: #93b5ff; }

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--navy);
  color: var(--platinum);
  z-index: 100;
}
.skip-link:focus { left: var(--sp-4); top: var(--sp-4); }

/* Container utility */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--section-x);
}
.container--narrow { max-width: var(--container-narrow); }

/* Section utility */
.section {
  padding-block: var(--section-y);
  position: relative;
}
.section--tight { padding-block: calc(var(--section-y) * 0.66); }

/* Surface variants */
.surface-navy {
  background: var(--navy);
  color: var(--platinum);
}
.surface-navy-deep {
  background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
  color: var(--platinum);
}
.surface-platinum {
  background: var(--platinum);
  color: var(--graphite);
}
.surface-platinum-2 {
  background: var(--platinum-2);
  color: var(--graphite);
}

/* Eyebrow label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
}
.on-dark .eyebrow { color: var(--steel-soft); }
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.eyebrow--no-bar::before { display: none; }

/* HK × US tagline strip */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.lockup::before, .lockup::after {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--steel-soft);
  opacity: 0.45;
}
.lockup .hk { color: var(--hk-red); }
.lockup .us { color: var(--cobalt); }
.lockup .x  { color: var(--steel-soft); font-weight: 400; }

/* Gradient text — symbolic HK × US headline highlight. Use sparingly. */
.grad-text {
  background: var(--grad-hkxus);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.grad-text--cool {
  background: var(--grad-cool);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Display headline classes */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.04;
}
.display-hero { font-size: var(--text-hero); }
.display-3xl  { font-size: var(--text-3xl); }
.display-2xl  { font-size: var(--text-2xl); }
.display-xl   { font-size: var(--text-xl); }

/* Body sizes */
.lede {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--steel);
  font-weight: 400;
  max-width: 60ch;
}
.on-dark .lede { color: rgba(230, 234, 240, 0.72); }

.muted { color: var(--steel); }
.on-dark .muted { color: rgba(230, 234, 240, 0.6); }

/* Buttons */
.btn {
  --btn-bg: var(--hk-red);
  --btn-fg: #fff;
  --btn-bd: var(--hk-red);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.85em 1.4em;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.btn:hover {
  background: var(--hk-red-soft);
  border-color: var(--hk-red-soft);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--graphite);
  --btn-bd: rgba(17, 24, 39, 0.16);
}
.btn--ghost:hover {
  background: rgba(17, 24, 39, 0.04);
  border-color: rgba(17, 24, 39, 0.32);
  box-shadow: none;
}
.on-dark .btn--ghost {
  --btn-fg: var(--platinum);
  --btn-bd: rgba(230, 234, 240, 0.22);
}
.on-dark .btn--ghost:hover {
  background: rgba(230, 234, 240, 0.06);
  border-color: rgba(230, 234, 240, 0.40);
}

.btn--cobalt { --btn-bg: var(--cobalt); --btn-bd: var(--cobalt); }
.btn--cobalt:hover { background: var(--cobalt-soft); border-color: var(--cobalt-soft); }

.btn--lg { padding: 1em 1.6em; font-size: var(--text-base); }

.btn .arrow {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-out);
}
.btn:hover .arrow { transform: translateX(3px); }

/* Inline text link */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  color: inherit;
  font-weight: 500;
  position: relative;
  padding-bottom: 2px;
}
.text-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.32;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
  transform-origin: left;
}
.text-link:hover::after { opacity: 0.7; }
.text-link .arrow {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-out);
}
.text-link:hover .arrow { transform: translateX(3px); }

/* Hairline divider */
.hr {
  border: 0;
  height: 1px;
  background: var(--line-dark);
}
.on-dark .hr { background: var(--line); }

/* Visually hidden */
.sr-only {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Reveal on scroll. Default state is visible so the page works without JS.
   When the .js class is present (added by main.js as early as possible), elements
   start hidden and reveal as IntersectionObserver fires. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  will-change: opacity, transform;
}
.js .reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
.js .reveal[data-delay="1"] { transition-delay: 80ms; }
.js .reveal[data-delay="2"] { transition-delay: 160ms; }
.js .reveal[data-delay="3"] { transition-delay: 240ms; }
.js .reveal[data-delay="4"] { transition-delay: 320ms; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* Dot-grid texture overlay — used on navy hero sections */
.dot-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(230, 234, 240, 0.07) 1px, transparent 0);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.dot-grid--light {
  background-image: radial-gradient(circle at 1px 1px, rgba(10, 15, 30, 0.06) 1px, transparent 0);
}

/* Subtle ambient gradient blob — for hero atmosphere */
.ambient-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.ambient-glow::before,
.ambient-glow::after {
  content: "";
  position: absolute;
  width: 60vw;
  height: 60vw;
  max-width: 800px;
  max-height: 800px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.30;
}
.ambient-glow::before {
  background: radial-gradient(circle, rgba(215, 25, 32, 0.45) 0%, transparent 65%);
  top: -10%;
  left: -10%;
}
.ambient-glow::after {
  background: radial-gradient(circle, rgba(30, 91, 255, 0.45) 0%, transparent 65%);
  bottom: -10%;
  right: -10%;
}

/* Card baseline */
.card {
  background: var(--platinum-2);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  border: 1px solid var(--line-dark);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.card--dark {
  background: var(--navy-soft);
  border-color: var(--line);
  color: var(--platinum);
}
.card--interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(17, 24, 39, 0.16);
}
.card--dark.card--interactive:hover {
  border-color: rgba(230, 234, 240, 0.16);
}

/* Top-corner watermark symbol — appears on interior pages */
.brand-watermark {
  position: absolute;
  top: var(--sp-6);
  right: var(--section-x);
  width: 36px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}