/*
 * Sizes are in px, not rem: WT's rem assumes a 16px root, and this Webflow page sets html to 14px.
 *
 * White Tiger HUD, ported from white-tiger-site (git show main:...):
 *   components/HudFrame.tsx           -> .wt-hud-frame   (corner brackets, WT monogram, 01/05 counter, flavour name)
 *   components/JourneyProgressBar.tsx -> .wt-hud-progress (glowing journey line + hotspot)
 *   components/FlavorPicker.tsx       -> .wt-hud-picker  (eyebrow, title, tagline, PREV/NEXT edge tabs, dive-in cue)
 *   app/globals.css                   -> safe-area vars, reduced motion/transparency rules
 * WT's Tailwind classes are written out as plain CSS; the Tailwind value each one came from is noted.
 * Per-flavour colours/faces come from WT's flavorTheme.ts and are set by wt-hud.js as custom properties.
 * Driven by wt-hud.js; nothing here touches the scene, backgrounds or the ROAR overlay.
 */

/* ─── Tokens (globals.css) ─── */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  /* layout.tsx fonts: one body face, one display face per flavour. */
  --font-body: 'Geist', system-ui, sans-serif;
  --font-body-rounded: 'Nunito', var(--font-body);
  --font-display-energy: 'Bebas Neue';
  --font-display-zero: 'Space Grotesk';
  --font-display-rose: 'Cormorant Garamond';
  --font-display-marshmallow: 'Fredoka';
  --font-display-cheesecake: 'Fraunces';
  /* Tailwind's default font-mono stack (HudFrame uses `font-mono`). */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

/* The gradient_overlay vignette used to live inside the removed Pling .hud (z-index 1). */
.wt-vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Everything the HUD owns; faded in by the loader. `safe-layer` = padding by the safe insets. */
.wt-hud {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  color: #fff;
  font-family: var(--font-body);
}

.wt-safe-layer {
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}

/* ─── Futuristic HUD ───
 * Mono labels, hairline corner ticks, a slow scan line, a segmented progress rail and
 * flavour-colour glows. --wt-accent / --wt-glow come from the current flavour (wt-hud.js). */

.wt-hud {
  --hud-mono: 'JetBrains Mono', var(--font-mono);
  --hud-edge: 24px;
  --hud-dim: rgba(255, 255, 255, 0.55);
}

/* Slow horizontal scan line sweeping top to bottom, barely there. */
.wt-hud-scan {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.5;
}
.wt-hud-scan::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--wt-accent) 70%, transparent) 50%, transparent);
  box-shadow: 0 0 12px var(--wt-glow);
  animation: wt-hud-scan 9s linear infinite;
  opacity: 0.35;
}
@keyframes wt-hud-scan {
  from { transform: translateY(-2vh); }
  to { transform: translateY(102vh); }
}

/* Frame: corner ticks, system label, counter, flavour name. */
.wt-hud-frame {
  position: absolute;
  inset: 0;
  font-family: var(--hud-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hud-dim);
}
.wt-hud-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: color-mix(in srgb, var(--wt-accent) 80%, #fff);
  border-style: solid;
  border-width: 0;
  opacity: 0.8;
  filter: drop-shadow(0 0 4px var(--wt-glow));
}
.wt-hud-corner.is-tl { top: calc(var(--safe-top) + 14px); left: calc(var(--safe-left) + 14px); border-top-width: 1px; border-left-width: 1px; }
.wt-hud-corner.is-tr { top: calc(var(--safe-top) + 14px); right: calc(var(--safe-right) + 14px); border-top-width: 1px; border-right-width: 1px; }
.wt-hud-corner.is-bl { bottom: calc(var(--safe-bottom) + 14px); left: calc(var(--safe-left) + 14px); border-bottom-width: 1px; border-left-width: 1px; }
.wt-hud-corner.is-br { bottom: calc(var(--safe-bottom) + 14px); right: calc(var(--safe-right) + 14px); border-bottom-width: 1px; border-right-width: 1px; }

.wt-hud-monogram,
.wt-hud-counter {
  position: absolute;
  top: calc(var(--safe-top) + 22px);
  display: flex;
  align-items: center;
  gap: 8px;
}
.wt-hud-monogram { left: calc(var(--safe-left) + 36px); color: #fff; }
.wt-hud-counter { right: calc(var(--safe-right) + 36px); color: var(--wt-accent); }
.wt-hud-led {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--wt-accent);
  box-shadow: 0 0 8px var(--wt-glow);
  animation: wt-hud-blink 2.4s ease-in-out infinite;
}
@keyframes wt-hud-blink { 50% { opacity: 0.25; } }
/* The journey-time flavour label sits in the top bar, centred. */
.wt-hud-name {
  position: absolute;
  top: calc(var(--safe-top) + 22px);
  left: 50%;
  translate: -50% 0;
  color: var(--hud-dim);
  white-space: nowrap;
  transition: opacity .2s linear;
}

/* Picker: left-aligned readout under the top bar. */
.wt-hud-picker {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.wt-hud-picker_inner { position: absolute; inset: 0; }
.wt-hud-picker_head {
  text-align: center;
  position: absolute;
  /* Raised (64px -> 40px -> 18px) so the wordmark sits high and the tagline clears the can lid. */
  top: calc(var(--safe-top) + 18px);
  left: calc(var(--safe-left) + 36px);
  right: calc(var(--safe-right) + 36px);
}
.wt-hud-title {
  margin: 0;
  font-family: var(--wt-display);
  font-weight: var(--wt-display-weight);
  font-size: clamp(34px, min(7vw, 8vh), 64px);
  line-height: 1;
  letter-spacing: var(--wt-display-tracking);
  text-transform: var(--wt-display-case);
  color: var(--wt-display-color);
  text-shadow: 0 0 24px var(--wt-glow-50);
}
.wt-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
/* Wordmark Möbius ribbon: a 3D ring of marks, each twisted by half its angle from the front, in a
   full-width window with perspective. Cell transforms are written per frame by wt-hud.js. */
.wt-hud-strip {
  --strip-r: clamp(220px, 34vw, 420px);
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: clamp(64px, min(13vw, 13vh), 110px);
  padding-block: 12px;
  box-sizing: content-box;
  perspective: 1100px;
  perspective-origin: 50% 50%;
}
.wt-hud-strip_track {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.wt-hud-strip_cell {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(480px, 78vw);
  height: clamp(64px, min(13vw, 13vh), 110px);
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
.wt-hud-strip_cell img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
}
.wt-hud-tagline {
  margin: 4px 0 0;
  font-family: var(--hud-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wt-accent);
}
/* Scan-in on flavour change: the readout wipes on left to right. */
.wt-hud-picker.is-swapping .wt-hud-picker_head > :not(.wt-hud-strip) {
  animation: wt-hud-wipe 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.wt-hud-picker.is-swapping .wt-hud-tagline { animation-delay: 0.12s; }
@keyframes wt-hud-wipe {
  from { clip-path: inset(0 100% 0 0); opacity: 0.3; }
  to { clip-path: inset(0 0 0 0); opacity: 1; }
}

.wt-hud-cue {
  position: absolute;
  bottom: calc(var(--safe-bottom) + 76px);
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--hud-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--hud-dim);
  white-space: nowrap;
}
.wt-hud-cue_arrow {
  color: var(--wt-accent);
  text-shadow: 0 0 8px var(--wt-glow);
  animation: wt-hud-bob 1.8s ease-in-out infinite;
}
@keyframes wt-hud-bob { 50% { transform: translateY(4px); } }

/* Bottom bar: PREV · progress rail · NEXT. */
.wt-hud-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  padding-inline: calc(var(--safe-left) + 30px) calc(var(--safe-right) + 30px);
  padding-bottom: calc(var(--safe-bottom) + 26px);
}
.wt-hud-tab {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--wt-tab-accent, var(--wt-accent)) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--wt-tab-accent, var(--wt-accent)) 45%, transparent);
  border-radius: 2px;
  color: #fff;
  font-family: var(--hud-mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.wt-hud-tab_glyph { color: var(--wt-tab-accent, var(--wt-accent)); }
.wt-hud-tab:hover,
.wt-hud-tab:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--wt-tab-accent, var(--wt-accent)) 20%, transparent);
  border-color: var(--wt-tab-accent, var(--wt-accent));
  box-shadow: 0 0 16px var(--wt-tab-glow-50, var(--wt-glow-50)), inset 0 0 10px var(--wt-tab-glow-50, var(--wt-glow-50));
}
.wt-hud-tab:active { transform: scale(0.97); }

.wt-hud-progress { flex: 1; }
.wt-hud-progress_track {
  position: relative;
  height: 1px;
  background: rgba(255, 255, 255, 0.16);
}
.wt-hud-progress_tick {
  position: absolute;
  top: -3px;
  width: 1px;
  height: 7px;
  background: rgba(255, 255, 255, 0.35);
}
.wt-hud-progress_fill {
  position: absolute;
  inset: 0;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: var(--wt-accent);
  box-shadow: 0 0 8px var(--wt-glow);
}
.wt-hud-progress_travel {
  position: absolute;
  inset: 0;
  transform: translateX(0);
}
.wt-hud-progress_dot {
  position: absolute;
  left: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  rotate: 45deg;
  background: #fff;
  box-shadow: 0 0 10px var(--wt-glow), 0 0 3px #fff;
}

@media (max-width: 600px) {
  .wt-hud-monogram { left: calc(var(--safe-left) + 26px); }
  .wt-hud-picker_head { left: calc(var(--safe-left) + 26px); right: calc(var(--safe-right) + 26px); }
  .wt-hud-counter { right: calc(var(--safe-right) + 26px); }
  .wt-hud-name { display: none; }
  .wt-hud-bottom { gap: 10px; padding-inline: calc(var(--safe-left) + 18px) calc(var(--safe-right) + 18px); }
  .wt-hud-tab_caption { display: none; }
  .wt-hud-tab { padding: 10px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .wt-hud-scan::before, .wt-hud-led, .wt-hud-cue_arrow { animation: none; }
  .wt-hud-picker.is-swapping .wt-hud-picker_head > :not(.wt-hud-strip) { animation: none; }
}

/* ─── Tactile kick (wt-hud.js watchKicks) ───
   The visual stand-in for a haptic on every step and flavour change (iOS gives the web no haptic
   for swipes): the progress marker pops and the corner brackets flash, 260ms, transform/opacity only. */
.wt-hud.is-kick .wt-hud-progress_dot {
  animation: wt-kick-dot 260ms cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
.wt-hud.is-kick .wt-hud-corner {
  animation: wt-kick-corner 260ms ease-out;
}
@keyframes wt-kick-dot {
  0% { scale: 1; }
  35% { scale: 1.9; }
  100% { scale: 1; }
}
@keyframes wt-kick-corner {
  0% { opacity: 0.8; scale: 1; }
  30% { opacity: 1; scale: 1.25; }
  100% { opacity: 0.8; scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .wt-hud.is-kick .wt-hud-progress_dot,
  .wt-hud.is-kick .wt-hud-corner { animation: none; }
}

/* ─── Swipe hint (wt-hud.js mountSwipeHint) ───
   Under the tagline on the hero: "‹ SWIPE ›" in the HUD mono, arrows drifting gently outward. */
.wt-hud-swipe {
  position: absolute;
  left: 50%;
  top: calc(var(--safe-top) + 18px + clamp(64px, min(13vw, 13vh), 110px) + 24px + 34px);
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--hud-mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  opacity: 0.85;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.wt-hud-swipe.is-done { opacity: 0; }
.wt-hud-swipe_arrow {
  font-size: 15px;
  line-height: 1;
  color: var(--wt-accent);
  animation: wt-swipe-nudge 1.8s ease-in-out infinite;
}
.wt-hud-swipe_arrow.is-left { --dir: -1; }
.wt-hud-swipe_arrow.is-right { --dir: 1; }
@keyframes wt-swipe-nudge {
  0%, 100% { translate: 0 0; opacity: 0.5; }
  50% { translate: calc(var(--dir) * 5px) 0; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .wt-hud-swipe_arrow { animation: none; }
}

/* ─── Sound toggle (wt-hud.js mountSoundToggle) ───
   Under the top-right counter: three small equaliser bars that pulse while sound is on, lying
   flat with a strike when muted. Mono label, the HUD's own quiet style. */
.wt-hud-sound {
  position: absolute;
  top: calc(var(--safe-top) + 44px);
  right: calc(var(--safe-right) + 36px);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 0 6px 8px;
  margin: 0;
  border: 0;
  background: none;
  /* The HUD's mono readout style (the button sits outside .wt-hud-frame, so it is set here). */
  font-family: var(--hud-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hud-dim);
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.25s ease;
}
.wt-hud-sound:hover,
.wt-hud-sound:focus-visible { color: #fff; }
.wt-hud-sound:focus-visible { outline: 1px solid var(--wt-accent); outline-offset: 2px; }
.wt-hud-sound_bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 10px;
}
.wt-hud-sound_bars i {
  width: 2px;
  height: 100%;
  background: var(--wt-accent);
  transform-origin: 50% 100%;
  animation: wt-sound-eq 0.9s ease-in-out infinite;
}
.wt-hud-sound_bars i:nth-child(2) { animation-delay: -0.3s; }
.wt-hud-sound_bars i:nth-child(3) { animation-delay: -0.6s; }
@keyframes wt-sound-eq {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
}
.wt-hud-sound.is-muted .wt-hud-sound_bars i {
  animation: none;
  transform: scaleY(0.25);
  background: var(--hud-dim);
}
.wt-hud-sound.is-muted .wt-hud-sound_label { text-decoration: line-through; }
@media (max-width: 600px) {
  .wt-hud-sound { right: calc(var(--safe-right) + 26px); }
}
@media (prefers-reduced-motion: reduce) {
  .wt-hud-sound_bars i { animation: none; transform: scaleY(0.7); }
}

/* ─── Contact page (wt-contact.js): the stop after Release ───
   Tinted with the flavour on stage (the page's flavour custom properties), in the journey's own
   type: mono tag, bold headline with an accent word, quiet sub line, mono detail labels. */
.wt-contact {
  --c-accent: var(--color-scheme-1--taste-secondary, #7fb2ff);
  --c-deep: var(--color-scheme-1--taste-primary, #0d1f4a);
  position: fixed;
  inset: 0;
  z-index: 28; /* above the stage and journey copy, below the HUD frame (30) */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 72px) 28px calc(env(safe-area-inset-bottom, 0px) + 36px);
  background:
    radial-gradient(90% 70% at 50% 110%, color-mix(in srgb, var(--c-accent) 38%, transparent) 0%, transparent 70%),
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, color-mix(in srgb, var(--c-deep) 92%, #000) 78%, transparent) 0%, rgba(5, 6, 10, 0.88) 80%);
  color: #fff;
  visibility: hidden;
  /* Soft dissolve: the scene behind blurs and darkens while the page fades in over it. */
  opacity: 0;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: opacity 0.7s ease, backdrop-filter 0.7s ease, -webkit-backdrop-filter 0.7s ease, visibility 0s linear 0.7s;
  overflow: hidden;
  pointer-events: none;
}
.wt-contact.is-open {
  visibility: visible;
  opacity: 1;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: opacity 1.2s ease, backdrop-filter 1.2s ease, -webkit-backdrop-filter 1.2s ease, visibility 0s;
  pointer-events: auto;
}
/* Content fades up gently, a little after the dissolve, in a soft order. */
.wt-contact .wt-in {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.wt-contact div.wt-in, .wt-contact p.wt-in, .wt-contact footer.wt-in { display: block; }
.wt-contact_foot.wt-in { display: flex !important; }
.wt-contact_row.wt-in { display: grid !important; }
.wt-contact.is-open .wt-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 1s ease calc(0.45s + var(--i) * 90ms),
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) calc(0.45s + var(--i) * 90ms);
}
.wt-contact .wt-mask { display: inline; }
.wt-contact_accent { color: var(--c-accent); }
/* The ghost word slowly fades in behind everything. */
.wt-contact_ghost { opacity: 0; transition: opacity 0.5s ease; }
.wt-contact.is-open .wt-contact_ghost { opacity: 1; transition: opacity 2s ease 0.6s; }
.wt-contact_glow {
  position: absolute;
  left: 50%;
  top: 40%;
  width: min(120vw, 900px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c-accent) 22%, transparent), transparent);
  pointer-events: none;
}
.wt-contact_ghost {
  position: absolute;
  left: 50%;
  top: 44%;
  translate: -50% -50%;
  margin: 0;
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(90px, 24vw, 300px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--c-accent) 14%, transparent);
  white-space: nowrap;
  pointer-events: none;
}
.wt-contact_inner {
  position: relative;
  width: min(100%, 520px);
  margin: 0 auto;
}
.wt-contact_tag {
  margin: 0 0 14px;
  font-family: var(--hud-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.wt-contact_title {
  margin: 0;
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(40px, 11vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  outline: none;
}
.wt-contact_sub {
  margin: 14px 0 28px;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}
.wt-contact_list { margin: 0; display: grid; gap: 0; }
.wt-contact_row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid color-mix(in srgb, var(--c-accent) 22%, transparent);
}
.wt-contact_row:last-child { border-bottom: 1px solid color-mix(in srgb, var(--c-accent) 22%, transparent); }
.wt-contact_row dt {
  font-family: var(--hud-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  padding-top: 3px;
}
.wt-contact_row dd { margin: 0; font-size: 16px; line-height: 1.45; color: #fff; }
.wt-contact .is-placeholder { color: rgba(255, 255, 255, 0.45); }
.wt-contact_row a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--c-accent) 60%, transparent);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.wt-contact_row a:hover,
.wt-contact_row a:focus-visible { color: var(--c-accent); border-color: var(--c-accent); outline: none; }
.wt-contact_foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.wt-contact_credit {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.55;
  transition: opacity 0.3s ease;
  color: #fff;
  text-decoration: none;
  font-family: var(--hud-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.wt-contact_credit:hover { opacity: 1; }
.wt-contact_credit img { width: 104px; height: auto; display: block; }
.wt-contact_rights {
  margin: 0;
  font-family: var(--hud-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}
/* The HUD's hero picker and journey copy step aside while contact is open. */
html.wt-contact-open .wt-hud-picker,
html.wt-contact-open .wt-hud-swipe,
html.wt-contact-open .wt-hud-bottom { opacity: 0 !important; pointer-events: none; transition: opacity 0.4s ease; }
@media (prefers-reduced-motion: reduce) {
  .wt-contact .wt-in { transform: none !important; }
}