/* Base */
html { touch-action: manipulation; background-color: #0C0F1A; }
html:not(.dark) { background-color: #EEF1F6; }
body { font-family: 'Instrument Sans', sans-serif; touch-action: manipulation; }
h1, h2, h3, h4, h5, h6, .font-heading { font-family: 'Satoshi', sans-serif; }

/* Header brand mark — full SVG wordmark (icon + AOULINK).
   Text path uses fill="currentColor" so dark/light mode flow through Tailwind classes. */
.brand-mark {
  height: 22px;
  width: auto;
  display: block;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-drag: none;
}
@media (min-width: 640px) { .brand-mark { height: 26px; } }

/* Glass Card */
.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.light .glass, html:not(.dark) .glass {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Header shell — solid surface bg, with bottom edge fading into page at top
   state only. When scrolled the fade is removed for a clean edge. */
.nav-shell {
  background-color: #0C0F1A;
}
.nav-shell::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 28px;
  background: linear-gradient(to bottom, rgba(12, 15, 26, 1) 0%, rgba(12, 15, 26, 0) 100%);
  pointer-events: none;
  transition: opacity 0.3s ease;
  opacity: 1;
}
html:not(.dark) .nav-shell {
  background-color: #EEF1F6;
}
html:not(.dark) .nav-shell::after {
  background: linear-gradient(to bottom, rgba(238, 241, 246, 1) 0%, rgba(238, 241, 246, 0) 100%);
}
.nav-shell.nav-scrolled::after {
  opacity: 0;
}

/* Glow */
.glow-purple { box-shadow: 0 0 40px rgba(99, 102, 241, 0.3); }
.glow-green { box-shadow: 0 0 40px rgba(0, 229, 153, 0.3); }

/* Animated gradient background */
.hero-bg {
  background: radial-gradient(ellipse at 20% 50%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
              radial-gradient(ellipse at 80% 20%, rgba(0, 229, 153, 0.1) 0%, transparent 50%),
              radial-gradient(ellipse at 50% 80%, rgba(6, 182, 212, 0.08) 0%, transparent 50%);
}
html:not(.dark) .hero-bg {
  background: radial-gradient(ellipse at 20% 50%, rgba(99, 102, 241, 0.12) 0%, transparent 50%),
              radial-gradient(ellipse at 80% 20%, rgba(0, 229, 153, 0.09) 0%, transparent 50%),
              radial-gradient(ellipse at 50% 80%, rgba(6, 182, 212, 0.07) 0%, transparent 50%);
}

/* Floating animation */
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-12px); } }
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-float-delayed { animation: float 6s ease-in-out 2s infinite; }

/* Pulse ring */
@keyframes pulse-ring {
  0% { transform: scale(0.9); opacity: 0.7; box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.3); }
  100% { transform: scale(1.4); opacity: 0; box-shadow: 0 0 20px 5px rgba(99, 102, 241, 0); }
}
.animate-pulse-ring { animation: pulse-ring 2s ease-out infinite; }

/* Scroll fade-in — upgraded with spring easing + blur */
.fade-up { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.fade-up.visible { opacity: 1; transform: translateY(0); }

.fade-left { opacity: 0; transform: translateX(-30px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.fade-left.visible { opacity: 1; transform: translateX(0); }

.fade-right { opacity: 0; transform: translateX(30px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.fade-right.visible { opacity: 1; transform: translateX(0); }

.fade-scale { opacity: 0; transform: scale(0.95); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.fade-scale.visible { opacity: 1; transform: scale(1); }

/* Glass card hover lift */
.glass {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.glass:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 229, 153, 0.08);
}
html:not(.dark) .glass:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}
nav.glass:hover {
  transform: none;
  box-shadow: none;
}
/* Prevent hover lift inside beam-card (overflow:hidden clips the translateY) */
.beam-card > .glass:hover {
  transform: none;
}

/* CTA button shimmer */
.btn-shimmer {
  position: relative;
  overflow: hidden;
}
.btn-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.5s ease;
}
.btn-shimmer:hover::after {
  left: 100%;
}

/* Nav link underline animation */
.nav-link-animated {
  position: relative;
}
.nav-link-animated::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.nav-link-animated:hover::after {
  transform: scaleX(1);
}

/* Chain scroll pause on hover */
.chain-scroll-container:hover .animate-scroll-chains {
  animation-play-state: paused;
}

/* Navbar scroll state */
.nav-scrolled {
  background: rgba(12, 15, 26, 0.65) !important;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
html:not(.dark) .nav-scrolled {
  background: rgba(250, 251, 253, 0.72) !important;
}

/* i18n shimmer loading */
.i18n-loading [data-i18n],
.i18n-loading [data-i18n-html] {
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  color: transparent !important;
  border-radius: 4px;
  min-width: 60px;
  display: inline-block;
}
html:not(.dark) .i18n-loading [data-i18n],
html:not(.dark) .i18n-loading [data-i18n-html] {
  background: linear-gradient(90deg, rgba(0,0,0,0.04) 25%, rgba(0,0,0,0.07) 50%, rgba(0,0,0,0.04) 75%);
  background-size: 200% 100%;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Chain scroll */
@keyframes scroll-chains { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.animate-scroll-chains { animation: scroll-chains 30s linear infinite; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animate-float, .animate-float-delayed, .animate-pulse-ring, .animate-scroll-chains,
  .animate-float-5s, .animate-float-6s, .animate-float-7s,
  .orbit-ring, .orbit-item, .orbit-center, .divider-dot,
  .beam-card::before, .shine-border::before { animation: none !important; }

  .fade-up, .fade-left, .fade-right, .fade-scale { opacity: 1; transform: none; transition: none; }
  .section-divider .divider-line { transform: scaleX(1); opacity: 1; transition: none; }

  .meteor { display: none; }
  .animate-pulse-glow { animation: none; opacity: 0.2; transform: translate(-50%, -50%) scale(1); }

  /* Orbit items shown in static positions */
  .orbit-item { animation: none; }
  .orbit-dot { animation: none; }
}

/* i18n: FOUC prevention */
.i18n-loading { opacity: 0; }
.i18n-ready { opacity: 1; transition: opacity 0.15s ease; }

/* Language dropdown animation */
#langDropdown {
  transform: translateY(-4px);
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}
#langDropdown.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* CJK font fallback */
html[lang="zh"] .font-heading, html[lang="zh"] h1, html[lang="zh"] h2, html[lang="zh"] h3, html[lang="zh"] h4 {
  font-family: 'Noto Sans SC', sans-serif;
}
html[lang="zh"] body, html[lang="zh"] p, html[lang="zh"] span, html[lang="zh"] a, html[lang="zh"] li, html[lang="zh"] button {
  font-family: 'Noto Sans SC', sans-serif;
}
html[lang="ja"] .font-heading, html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3, html[lang="ja"] h4 {
  font-family: 'Noto Sans JP', sans-serif;
}
html[lang="ja"] body, html[lang="ja"] p, html[lang="ja"] span, html[lang="ja"] a, html[lang="ja"] li, html[lang="ja"] button {
  font-family: 'Noto Sans JP', sans-serif;
}

/* Noise grain overlay */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}
html:not(.dark) body::before {
  opacity: 0.02;
}

/* Mobile: lock html scrolling, make body the scroll container. Without
   viewport-fit=cover, iOS Safari constrains body to safe-area, so body
   bg won't fill the home-indicator area at the bottom. Making body the
   scroll container prevents page content from being visually visible
   behind the (translucent) iOS status bar / Dynamic Island when scrolling. */
@media (max-width: 1023px) {
  html { height: 100%; overflow: hidden; }
  body {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: none;
    scroll-padding-top: 100px;
  }
  body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    pointer-events: none;
    z-index: 40;
    background: linear-gradient(to bottom, #0C0F1A, #0C0F1A calc(100% - 12px), transparent);
    transition: opacity 0.3s ease;
    opacity: 1;
  }
  html:not(.dark) body::after {
    background: linear-gradient(to bottom, #EEF1F6, #EEF1F6 calc(100% - 12px), transparent);
  }
  body:has(.nav-scrolled)::after {
    opacity: 0;
  }
}

/* Dot grid pattern */
.dot-grid {
  position: relative;
}
.dot-grid::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}
html:not(.dark) .dot-grid::after {
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.07) 1px, transparent 1px);
}

/* Section divider animations */
@keyframes divider-pulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.8); }
}
@keyframes divider-extend {
  from { transform: scaleX(0.3); opacity: 0.3; }
  to { transform: scaleX(1); opacity: 1; }
}
.divider-dot {
  animation: divider-pulse 3s ease-in-out infinite;
}
.divider-line {
  transform: scaleX(0.3);
  opacity: 0.3;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.section-divider.visible .divider-line {
  transform: scaleX(1);
  opacity: 1;
}

/* Float animation variations */
.animate-float-5s { animation: float 5s ease-in-out infinite; }
.animate-float-6s { animation: float 6s ease-in-out infinite; }
.animate-float-7s { animation: float 7s ease-in-out infinite; }

/* Slow spin animation */
@keyframes spin-slow { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.animate-spin-slow { animation: spin-slow 120s linear infinite; }

/* Focus-visible for keyboard accessibility */
:focus-visible {
  outline: 2px solid #00E599;
  outline-offset: 2px;
  border-radius: 4px;
}
html:not(.dark) :focus-visible {
  outline-color: #4F46E5;
}

/* Selection branding */
::selection { background: rgba(0, 229, 153, 0.3); color: inherit; }
::-moz-selection { background: rgba(0, 229, 153, 0.3); color: inherit; }

/* Orbiting chain logos */
.orbit-center {
  box-shadow: 0 0 40px rgba(0, 229, 153, 0.3), 0 0 80px rgba(0, 229, 153, 0.1);
  animation: orbit-center-pulse 3s ease-in-out infinite;
}
@keyframes orbit-center-pulse {
  0%, 100% { box-shadow: 0 0 40px rgba(0, 229, 153, 0.3), 0 0 80px rgba(0, 229, 153, 0.1); }
  50% { box-shadow: 0 0 60px rgba(0, 229, 153, 0.5), 0 0 120px rgba(0, 229, 153, 0.15); }
}

@keyframes orbit-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes orbit-counter-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

.orbit-ring {
  overflow: visible;
  animation: orbit-spin var(--orbit-duration) linear infinite;
}
.orbit-ring-inner { --orbit-duration: 20s; }
.orbit-ring-middle { --orbit-duration: 30s; }
.orbit-ring-outer { --orbit-duration: 45s; }

.orbit-item {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: calc(cos(var(--angle)) * var(--ring-radius, 120px)) calc(sin(var(--angle)) * var(--ring-radius, 120px));
  margin: -20px 0 0 -20px;
  animation: orbit-counter-spin var(--orbit-duration) linear infinite;
}
.orbit-ring-inner .orbit-item { --ring-radius: 120px; --orbit-duration: 20s; }
.orbit-ring-middle .orbit-item { --ring-radius: 180px; --orbit-duration: 30s; margin: -16px 0 0 -16px; }

.orbit-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 229, 153, 0.4);
  box-shadow: 0 0 8px rgba(0, 229, 153, 0.3);
  transform: rotate(var(--angle)) translateX(230px);
  margin: -3px 0 0 -3px;
}

/* Beam pulse */
.orbit-beam {
  opacity: 0;
  animation: beam-pulse 4s ease-in-out infinite;
}
.orbit-beam:nth-child(1) { animation-delay: 0s; }
.orbit-beam:nth-child(2) { animation-delay: 1s; }
.orbit-beam:nth-child(3) { animation-delay: 2s; }
.orbit-beam:nth-child(4) { animation-delay: 3s; }
@keyframes beam-pulse {
  0%, 100% { opacity: 0; }
  30%, 70% { opacity: 0.6; }
}

/* Mobile: all items orbit on a single ring */
@media (max-width: 640px) {
  .orbit-container { height: 320px !important; overflow: visible !important; }
  .orbit-ring-inner { width: 240px !important; height: 240px !important; }
  .orbit-ring-inner .orbit-item { --ring-radius: 120px; }
  /* Collapse middle ring onto inner ring */
  .orbit-ring-middle {
    width: 240px !important; height: 240px !important;
    border-color: transparent !important;
    --orbit-duration: 20s;
  }
  .orbit-ring-middle .orbit-item {
    --ring-radius: 120px; --orbit-duration: 20s;
    margin: -20px 0 0 -20px;
  }
  .orbit-ring-middle .orbit-item img { width: 2.5rem; height: 2.5rem; }
  .orbit-ring-outer { display: none; }
  .orbit-beams { display: none; }
}

html:not(.dark) .orbit-dot {
  background: rgba(0, 229, 153, 0.6);
  box-shadow: 0 0 8px rgba(0, 229, 153, 0.4);
}

/* Border beam — @property for animating conic-gradient angle */
@property --beam-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes beam-rotate {
  to { --beam-angle: 360deg; }
}

.beam-card {
  position: relative;
  border-radius: inherit;
  overflow: hidden;
}
.beam-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--beam-angle), transparent 0%, transparent 70%, rgba(0, 229, 153, 0.7) 78%, transparent 86%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: beam-rotate 4s linear infinite;
  z-index: 0;
  will-change: background;
}
.beam-card.beam-accent::before {
  background: conic-gradient(from var(--beam-angle), transparent 0%, transparent 70%, rgba(99, 102, 241, 0.7) 78%, transparent 86%, transparent 100%);
}
.beam-card > .glass {
  position: relative;
  z-index: 1;
}

/* Beam paused when off-screen */
.beam-card.beam-paused::before {
  animation-play-state: paused;
}

/* Light mode: softer beams */
html:not(.dark) .beam-card::before {
  background: conic-gradient(from var(--beam-angle), transparent 0%, transparent 70%, rgba(0, 229, 153, 0.4) 78%, transparent 86%, transparent 100%);
}
html:not(.dark) .beam-card.beam-accent::before {
  background: conic-gradient(from var(--beam-angle), transparent 0%, transparent 70%, rgba(99, 102, 241, 0.4) 78%, transparent 86%, transparent 100%);
}

/* Fallback for browsers without @property */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .beam-card::before {
    background: linear-gradient(135deg, rgba(0, 229, 153, 0.2), transparent, rgba(99, 102, 241, 0.2));
    animation: none;
  }
}

/* Spotlight mouse-follow */
@media (hover: hover) {
  .beam-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(200px circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%), rgba(255,255,255,0.08), transparent);
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .beam-card:hover::after {
    opacity: 1;
  }
  html:not(.dark) .beam-card::after {
    background: radial-gradient(200px circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%), rgba(0,0,0,0.03), transparent);
  }
}

/* Rolling digit counter */
.digit-counter {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  line-height: 1;
}
.digit-col {
  display: inline-block;
  height: 1.2em;
  overflow: hidden;
  position: relative;
}
.digit-col-inner {
  display: flex;
  flex-direction: column;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.digit-col-inner span {
  display: block;
  height: 1.2em;
  line-height: 1.2em;
  text-align: center;
}
.digit-static {
  display: inline-block;
  line-height: 1.2em;
}

/* Shine border buttons */
.shine-border {
  position: relative;
  overflow: hidden;
}
.shine-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(from var(--beam-angle, 0deg), transparent 0%, transparent 60%, rgba(255,255,255,0.5) 70%, transparent 80%, transparent 100%);
  animation: beam-rotate 3s linear infinite;
  z-index: 0;
}
.shine-border > * {
  position: relative;
  z-index: 1;
}
/* Inner fill to mask center of conic gradient */
.shine-border::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: inherit;
  z-index: 0;
}

/* Pulsing background glow */
@keyframes pulse-glow {
  0%, 100% { opacity: 0.15; transform: translate(-50%, -50%) scale(0.95); }
  50% { opacity: 0.25; transform: translate(-50%, -50%) scale(1.05); }
}
.animate-pulse-glow {
  animation: pulse-glow 4s ease-in-out infinite;
}

/* Meteor shower */
.meteor {
  position: absolute;
  width: 2px;
  height: 80px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(0,229,153,0.4), transparent);
  border-radius: 999px;
  transform: rotate(-45deg);
  animation: meteor-fall var(--duration, 2s) linear infinite;
  z-index: 1;
  pointer-events: none;
}
@keyframes meteor-fall {
  0% { transform: rotate(-45deg) translateY(-100px); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: rotate(-45deg) translateY(600px); opacity: 0; }
}

html:not(.dark) .meteor {
  background: linear-gradient(to bottom, rgba(99, 102, 241, 0.5), rgba(0,229,153,0.3), transparent);
}

/* WebGL hero shader canvas */
#heroShader {
  pointer-events: none;
  will-change: transform;
}
#heroShader.hidden {
  display: none;
}

/* Telegram WebView performance overrides */
.tg-webview body::before {
  display: none;
}
.tg-webview .hero-glow {
  filter: none;
  opacity: 0.15;
  background: radial-gradient(circle, rgba(0,229,153,0.15), rgba(99,102,241,0.1), transparent 70%);
}
.tg-webview .glass {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.tg-webview .nav-scrolled {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.tg-webview .animate-float,
.tg-webview .animate-float-delayed,
.tg-webview .animate-float-5s,
.tg-webview .animate-float-6s,
.tg-webview .animate-float-7s {
  animation: none;
}
.tg-webview .animate-pulse-glow {
  animation: none;
  opacity: 0.2;
}
.tg-webview .orbit-ring {
  animation: none;
}
.tg-webview .orbit-item {
  animation: none;
}
.tg-webview .beam-card::before {
  animation: none;
}
.tg-webview .shine-border::before {
  animation: none;
}

/* Remove will-change on hidden/inactive elements to free compositing layers */
.tg-webview #heroShader {
  will-change: auto;
}
.tg-webview .beam-card::before {
  will-change: auto;
}

/* Ensure body::before overlay is fully removed (higher specificity) */
html.tg-webview body::before {
  display: none !important;
}

/* Force hero-bg onto its own compositing layer for smooth scroll repaint */
.tg-webview .hero-bg {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* ─── Phone mockup: 3D tilt + screen spotlight (desktop hover only) ─── */
.hero-phone-tilt {
  display: inline-block;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: auto;
}
.hero-phone-tilt[data-tilt-active] {
  transition: none; /* JS does its own low-pass smoothing during mousemove */
}

.phone-frame {
  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.30),
    0 25px 50px -12px rgba(0, 0, 0, 0.50),
    0 0 0 1px rgba(255, 255, 255, 0.05);
  transition: box-shadow 0.4s ease;
}
.hero-phone-tilt:hover .phone-frame {
  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.30),
    0 35px 70px -14px rgba(0, 0, 0, 0.60),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}

.phone-spotlight {
  position: absolute;
  inset: 0;
  z-index: 15; /* above static reflection (z-10), below dynamic island (z-20) */
  pointer-events: none;
  border-radius: 45px;
  background: radial-gradient(
    circle 180px at var(--phone-mx, 50%) var(--phone-my, 50%),
    rgba(255, 255, 255, 0.10),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  mix-blend-mode: screen;
}
.hero-phone-tilt:hover .phone-spotlight {
  opacity: 1;
}
:root:not(.dark) .phone-spotlight {
  /* Light-mode screenshot has bright background; need stronger spotlight to read */
  background: radial-gradient(
    circle 180px at var(--phone-mx, 50%) var(--phone-my, 50%),
    rgba(255, 255, 255, 0.18),
    transparent 65%
  );
}

/* Slight glow boost while hovering — reinforces the "lit object" feel */
.hero-phone-live:has(.hero-phone-tilt:hover) .hero-glow {
  opacity: 1.4;
  filter: blur(90px);
  transition: opacity 0.4s ease, filter 0.4s ease;
}

/* Downgrades: any of these disables both tilt and spotlight */
@media (prefers-reduced-motion: reduce) {
  .hero-phone-tilt { transform: none !important; transition: none !important; }
  .phone-spotlight { opacity: 0 !important; }
}
@media (hover: none), (pointer: coarse) {
  /* Touch devices: no hover-tilt, no spotlight — but allow JS scroll-driven tilt to set transform */
  .hero-phone-tilt { transition: none; }
  .phone-spotlight { display: none; }
}
html.lite-hero .hero-phone-tilt { transform: none !important; }
html.lite-hero .phone-spotlight { display: none; }

/* lite-hero: keep the live phone but strip expensive paint effects */
html.lite-hero .hero-phone-live {
  animation: none;
  transform: none;
}
html.lite-hero .hero-phone-live .phone-frame {
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.4) !important;
}
html.lite-hero .hero-phone-live .pointer-events-none {
  display: none;
}
html.lite-hero .hero-glow {
  display: none;
}

.tg-webview [data-parallax] {
  transform: none;
}
.tg-webview [data-parallax] > div:first-child {
  box-shadow: none !important;
  border-radius: 32px !important;
}
/* Remove the second overflow-clipping layer (outer frame already clips) */
.tg-webview [data-parallax] > div:first-child > div {
  overflow: visible !important;
  border-radius: 0 !important;
}
/* Override the heavy inline box-shadow on the phone frame element */
.tg-webview [data-parallax] [style*="box-shadow"] {
  box-shadow: none !important;
}
/* Remove text-shadow inside phone mockup */
.tg-webview [data-parallax] [style*="text-shadow"] {
  text-shadow: none !important;
}
/* Remove the screen reflection overlay inside phone */
.tg-webview [data-parallax] .pointer-events-none {
  display: none;
}
/* Faster SVG rendering — trade anti-aliasing for speed */
.tg-webview [data-parallax] svg {
  shape-rendering: optimizeSpeed;
}
/* Kill scroll indicator bounce animation */
.tg-webview .animate-bounce {
  animation: none;
}

/* ==================== QR DOWNLOAD MODAL ==================== */

/* Reset default dialog styles */
.qr-modal {
  background: transparent;
  border: none;
  padding: 0;
  max-width: none;
  max-height: none;
  overflow: visible;
  align-items: center;
  justify-content: center;
}
.qr-modal[open] {
  display: flex;
}
.qr-modal:not([open]) {
  display: none;
}

/* Panel inherits .glass from site -- no duplicate glassmorphism needed */
.qr-modal-panel {
  position: relative;
}

/* Prevent glass hover lift on modal panel */
.qr-modal-panel.glass:hover {
  transform: none;
  box-shadow: none;
}
html:not(.dark) .qr-modal-panel.glass:hover {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Open/close animation (fade + scale) */
.qr-modal {
  opacity: 0;
  transform: scale(0.95);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    overlay 0.25s ease allow-discrete,
    display 0.25s ease allow-discrete;
}

.qr-modal[open] {
  opacity: 1;
  transform: scale(1);
}

@starting-style {
  .qr-modal[open] {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* Backdrop fade */
.qr-modal::backdrop {
  background: rgba(0, 0, 0, 0);
  transition:
    background 0.25s ease,
    overlay 0.25s ease allow-discrete,
    display 0.25s ease allow-discrete;
}

.qr-modal[open]::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

@starting-style {
  .qr-modal[open]::backdrop {
    background: rgba(0, 0, 0, 0);
  }
}

/* Scroll lock while modal open */
html:has(dialog[open]:modal) {
  overflow: hidden;
}

/* Reduced motion: disable modal animation */
@media (prefers-reduced-motion: reduce) {
  .qr-modal {
    transition: none;
  }
  .qr-modal::backdrop {
    transition: none;
  }
}

/* ==================== HERO: ORBITING COINS + AURA + BADGE ==================== */

/* Rotating conic aura behind phone */
.hero-aura {
  position: absolute;
  inset: -40px;
  border-radius: 60px;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    rgba(0, 229, 153, 0.55) 8%,
    rgba(99, 102, 241, 0.45) 22%,
    transparent 40%,
    transparent 58%,
    rgba(6, 182, 212, 0.35) 72%,
    rgba(0, 229, 153, 0.45) 88%,
    transparent 100%
  );
  filter: blur(45px);
  opacity: 0.75;
  z-index: -2;
  animation: aura-spin 14s linear infinite;
  pointer-events: none;
}

html:not(.dark) .hero-aura {
  opacity: 0.55;
  filter: blur(55px);
}

@keyframes aura-spin {
  to { transform: rotate(360deg); }
}

/* Orbit container — centered on phone */
.hero-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  z-index: 3;
  pointer-events: none;
}

.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--size);
  height: var(--size);
  margin-top: calc(var(--size) / -2);
  margin-left: calc(var(--size) / -2);
  border-radius: 50%;
  animation: orbit-rotate var(--duration, 30s) linear infinite;
  animation-delay: var(--delay, 0s);
}

.orbit-reverse {
  animation-direction: reverse;
}

@keyframes orbit-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.orbit-coin {
  position: absolute;
  top: -22px;
  left: 50%;
  margin-left: -22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1E2439;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 24px rgba(0, 229, 153, 0.25);
  animation: orbit-counter var(--duration, 30s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform;
}

.orbit-reverse .orbit-coin {
  animation-direction: reverse;
}

@keyframes orbit-counter {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

html:not(.dark) .orbit-coin {
  background: #FFFFFF;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 0 20px rgba(0, 229, 153, 0.18);
}

/* Hide orbit below lg — too cramped on mobile/tablet */
@media (max-width: 1023px) {
  .hero-orbit { display: none; }
  .hero-aura { inset: -20px; opacity: 0.5; }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .hero-aura, .orbit, .orbit-coin { animation: none; }
}

/* Aoulink badge — sweeping shimmer */
.hero-badge::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 229, 153, 0.18) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: badge-shimmer 3.6s ease-in-out infinite;
  pointer-events: none;
}

html:not(.dark) .hero-badge::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 204, 133, 0.22) 50%,
    transparent 100%
  );
}

@keyframes badge-shimmer {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-badge::after { animation: none; }
}

/* ==================== COMING SOON TOAST ==================== */
.coming-soon-toast {
  position: fixed;
  top: 5rem;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  z-index: 9999;
  padding: 0.75rem 1.25rem;
  border-radius: 0.875rem;
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.06);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  max-width: calc(100vw - 2rem);
  white-space: nowrap;
}
.coming-soon-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .coming-soon-toast { transition: opacity 0ms; }
}

/* ==================== DOWNLOAD FLASH ==================== */
/* Single-button download CTA with platform picker (iOS / Android tiles)
   and a "Phantom Flash" cinematic transition. See script.js initDownloadFlash. */

.dl-launcher {
  position: relative;
  display: inline-block;
}

.dl-launcher__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1.25rem;
  border-radius: 0.875rem;
  background: linear-gradient(90deg, #00CC85, #00E599);
  color: #000;
  font-weight: 600;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  min-width: 220px;
  justify-content: center;
  box-shadow: 0 8px 24px -6px rgba(0, 229, 153, 0.45);
  transition: transform 200ms ease, filter 200ms ease, box-shadow 200ms ease;
  position: relative;
  overflow: hidden;
}
.dl-launcher__btn:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 30px -6px rgba(0, 229, 153, 0.55);
}
.dl-launcher__btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-100%);
  pointer-events: none;
}
.dl-launcher__btn:hover::after {
  animation: dl-shimmer 1.1s ease forwards;
}
@keyframes dl-shimmer {
  to { transform: translateX(100%); }
}
.dl-launcher.is-open .dl-launcher__btn {
  transform: scale(0.98);
  filter: brightness(0.95);
}
.dl-launcher__btn .dl-launcher__caret {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dl-launcher.is-open .dl-launcher__btn .dl-launcher__caret {
  transform: rotate(180deg);
}

.dl-launcher__tray {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px) scale(0.96);
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 0.625rem;
  padding: 0.625rem;
  border-radius: 1.125rem;
  background: rgba(20, 25, 41, 0.92);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.6),
              0 0 0 1px rgba(0, 229, 153, 0.06);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 30;
  min-width: 320px;
}
html:not(.dark) .dl-launcher__tray {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.18),
              0 0 0 1px rgba(0, 229, 153, 0.1);
}
.dl-launcher.is-open .dl-launcher__tray {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}

.dl-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1rem 0.75rem;
  border-radius: 0.875rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: center;
  transition: transform 90ms ease-out,
              background 180ms ease,
              border-color 180ms ease;
}
html:not(.dark) .dl-tile {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}
.dl-tile:hover {
  background: rgba(0, 229, 153, 0.08);
  border-color: rgba(0, 229, 153, 0.3);
}
.dl-tile:active,
.dl-tile.is-pressed {
  transform: scale(0.94);
}
.dl-tile:focus-visible {
  outline: 2px solid #00E599;
  outline-offset: 2px;
}
.dl-tile__logo {
  width: 28px;
  height: 28px;
  fill: currentColor;
}
.dl-tile__label {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.dl-tile__rec {
  display: none;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #00E599;
  letter-spacing: 0.01em;
  line-height: 1.25;
  margin-top: 0.125rem;
  max-width: 100%;
}
.dl-tile[data-recommended="true"] {
  border-color: rgba(0, 229, 153, 0.45);
  background: linear-gradient(180deg,
              rgba(0, 229, 153, 0.10),
              rgba(99, 102, 241, 0.06));
}
.dl-tile[data-recommended="true"]::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 1rem;
  background: linear-gradient(135deg, #00E599, #6366F1);
  z-index: -1;
  opacity: 0.45;
  filter: blur(8px);
  pointer-events: none;
}
.dl-tile[data-recommended="true"] .dl-tile__rec {
  display: inline-block;
}

/* System requirement footnote inside the tray, spans both columns */
.dl-tray__sysreq {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.125rem 0 0;
  padding: 0.5rem 0.5rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
html:not(.dark) .dl-tray__sysreq {
  color: rgba(0, 0, 0, 0.45);
  border-top-color: rgba(0, 0, 0, 0.06);
}
.dl-tray__sysreq-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.85;
}

/* Phantom Flash full-viewport overlay (single instance shared by all launchers) */
.dl-flash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  display: none;
  opacity: 1;
  transition: opacity 400ms cubic-bezier(0.4, 0, 0.6, 1);
}
.dl-flash.is-active {
  display: block;
  pointer-events: auto;
}
.dl-flash.is-leaving {
  opacity: 0;
  pointer-events: none;
}

.dl-flash__circle {
  position: absolute;
  inset: 0;
  background-color: #0C0F1A;
  background-image: radial-gradient(
    circle at var(--cx, 50%) var(--cy, 50%),
    #1A4A38 0%,
    #143A2E 14%,
    #102A2E 30%,
    #0E1C28 48%,
    #0C0F1A 70%
  );
  clip-path: circle(0 at var(--cx, 50%) var(--cy, 50%));
}
.dl-flash.is-expanding .dl-flash__circle {
  will-change: clip-path;
  animation: dl-circle-expand 440ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes dl-circle-expand {
  0%   { clip-path: circle(0 at var(--cx, 50%) var(--cy, 50%)); }
  100% { clip-path: circle(150% at var(--cx, 50%) var(--cy, 50%)); }
}

.dl-flash__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96px;
  height: 96px;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
}
.dl-flash__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1.375rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45),
              0 0 0 1px rgba(255, 255, 255, 0.06);
  display: block;
}
.dl-flash.is-flashing .dl-flash__logo {
  animation: dl-logo-flash 440ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes dl-logo-flash {
  0%   { transform: translate(-50%, -50%) scale(0.82); opacity: 0; filter: blur(6px); }
  45%  { transform: translate(-50%, -50%) scale(1.02); opacity: 1; filter: blur(0); }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.dl-flash__grain {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}
.dl-flash.is-flashing .dl-flash__grain {
  animation: dl-grain 440ms steps(4, end) forwards;
}
@keyframes dl-grain {
  0%   { opacity: 0; transform: translate(0, 0); }
  50%  { opacity: 0.18; transform: translate(-1px, 1px); }
  100% { opacity: 0; transform: translate(1px, -1px); }
}

.dl-flash__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* < 360px viewports — stack tiles vertically */
@media (max-width: 360px) {
  .dl-launcher__tray {
    grid-template-columns: 1fr;
    min-width: 240px;
  }
}

/* Reduced-motion: skip Phase 3 + 4, just a 200ms dark fade */
@media (prefers-reduced-motion: reduce) {
  .dl-launcher__tray {
    transition: opacity 120ms ease, transform 120ms ease;
  }
  .dl-flash.is-active {
    background: rgba(12, 15, 26, 0.88);
    transition: opacity 200ms ease;
  }
  .dl-flash.is-active .dl-flash__circle,
  .dl-flash.is-active .dl-flash__logo,
  .dl-flash.is-active .dl-flash__grain {
    display: none;
  }
}

/* (lite-hero / tg-webview override removed — the flash overlay is
   lightweight enough to play on iOS Safari and Telegram WebView; gating
   it there only deprived the primary download targets of the cinematic
   moment. Matching JS lives in script.js commitDownload.) */

/* ==================== FAQ ACCORDION ==================== */

/* Hide native browser disclosure marker */
details.faq-item > summary.faq-summary {
  list-style: none;
}
details.faq-item > summary.faq-summary::-webkit-details-marker {
  display: none;
}

/* Custom rotating caret via ::after pseudo-element */
.faq-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: color 0.2s ease;
}

.faq-summary::after {
  content: '';
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2300E599' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform 0.25s ease;
}

details[open].faq-item > summary.faq-summary::after {
  transform: rotate(180deg);
}

/* Hover: lift question text to primary color */
.faq-summary:hover {
  color: #00E599;
}

/* Answer body — subtle top separator */
.faq-body {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 1rem;
}

/* Light mode border adjustment */
html.light .faq-body,
:root:not(.dark) .faq-body {
  border-top-color: rgba(0, 0, 0, 0.07);
}

/* Reduced-motion: skip caret rotation animation */
@media (prefers-reduced-motion: reduce) {
  .faq-summary::after,
  .faq-summary {
    transition: none;
  }
}

/* ==================== CONTACT ==================== */
/* Whole card is a click-to-copy button */
.contact-card-btn {
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.contact-card-btn:hover .contact-email,
.contact-card-btn:focus-visible .contact-email {
  color: #00E599;
}
.contact-card-btn:active {
  transform: scale(0.995);
}
.contact-card-btn:focus-visible > .glass {
  box-shadow: 0 0 0 2px rgba(0, 229, 153, 0.55);
}

/* Copy confirmation toast — floats just above the email line on click.
   Uses CSS custom properties so the breakpoint flip cleanly overrides the mobile default. */
.contact-copy-toast {
  --toast-x: -50%;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(var(--toast-x)) translateY(4px);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: #00E599;
  color: #0C0F1A;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  box-shadow: 0 8px 22px -8px rgba(0, 229, 153, 0.55);
}
.contact-copy-toast::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #00E599;
}
@media (min-width: 640px) {
  /* Desktop: anchor to start of the email column instead of centering */
  .contact-copy-toast {
    --toast-x: 0%;
    left: 0;
  }
  .contact-copy-toast::after {
    left: 16px;
    transform: translateX(0);
  }
}
.contact-card-btn.is-copied .contact-copy-toast {
  opacity: 1;
  transform: translateX(var(--toast-x)) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .contact-card-btn,
  .contact-copy-toast { transition: none; }
  .contact-card-btn:active { transform: none; }
}