/* =============================================================
   Alpha Medical Shop — Link in Bio
   Premium glass / aurora landing page
   Sections:
     1. Design tokens
     2. Reset & base
     3. Atmosphere (aurora, grain, pointer light)
     4. Stage & glass card
     5. Logo & header
     6. Links (liquid glass buttons)
     7. Trust row & footer
     8. Entrance animations
     9. Responsive & platform (safe areas, reduced motion)
   ============================================================= */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Surfaces */
  --bg: #000000;
  --panel: #0f1115;
  --panel-2: #14161c;

  /* Ink */
  --white: #ffffff;
  --text: rgba(255, 255, 255, 0.92);
  --text-dim: rgba(255, 255, 255, 0.58);
  --text-faint: rgba(255, 255, 255, 0.40);

  /* Gradient accents (blue / purple / cyan — kept elegant) */
  --cyan: #5eead4;
  --blue: #60a5fa;
  --purple: #a78bfa;

  /* Glass */
  --glass: rgba(255, 255, 255, 0.055);
  --glass-strong: rgba(255, 255, 255, 0.085);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-border-hi: rgba(255, 255, 255, 0.26);

  /* Shadows */
  --shadow-card: 0 40px 120px -30px rgba(0, 0, 0, 0.9);
  --shadow-btn: 0 10px 30px -12px rgba(0, 0, 0, 0.8);
  --glow: 0 0 60px -10px rgba(96, 165, 250, 0.35);

  /* Geometry & motion */
  --radius-card: 30px;
  --radius-btn: 20px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 2. Reset & base ---------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100svh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* iOS/120Hz smooth momentum scroll */
  -webkit-overflow-scrolling: touch;
}

a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
img, svg { display: block; }
ul { list-style: none; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ---------- 3. Atmosphere ---------- */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  will-change: transform;
  mix-blend-mode: screen;
}

.aurora--1 {
  width: 60vmax; height: 60vmax;
  top: -22vmax; left: -14vmax;
  background: radial-gradient(circle at 50% 50%, rgba(96, 165, 250, 0.9), transparent 62%);
  animation: drift-1 26s var(--ease-soft) infinite alternate;
}
.aurora--2 {
  width: 52vmax; height: 52vmax;
  bottom: -20vmax; right: -12vmax;
  background: radial-gradient(circle at 50% 50%, rgba(167, 139, 250, 0.85), transparent 62%);
  animation: drift-2 32s var(--ease-soft) infinite alternate;
}
.aurora--3 {
  width: 44vmax; height: 44vmax;
  top: 30%; left: 45%;
  background: radial-gradient(circle at 50% 50%, rgba(94, 234, 212, 0.6), transparent 60%);
  animation: drift-3 38s var(--ease-soft) infinite alternate;
}

@keyframes drift-1 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(6vmax, 5vmax, 0) scale(1.12); }
}
@keyframes drift-2 {
  0%   { transform: translate3d(0, 0, 0) scale(1.05); }
  100% { transform: translate3d(-5vmax, -4vmax, 0) scale(1); }
}
@keyframes drift-3 {
  0%   { transform: translate3d(-50%, -50%, 0) scale(1); }
  100% { transform: translate3d(-42%, -58%, 0) scale(1.18); }
}

/* Fine noise texture over everything for depth */
.grain {
  position: absolute;
  inset: -50%;
  background-image: url("assets/noise.png");
  background-size: 180px 180px;
  opacity: 0.05;
  mix-blend-mode: overlay;
}

/* Soft light that follows the pointer / touch */
.pointer-glow {
  position: absolute;
  top: 0; left: 0;
  width: 460px; height: 460px;
  margin: -230px 0 0 -230px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120, 180, 255, 0.16), transparent 65%);
  transform: translate3d(-1000px, -1000px, 0);
  transition: opacity 0.6s var(--ease-soft);
  opacity: 0;
  will-change: transform;
}

/* ---------- 4. Stage & glass card ---------- */
.stage {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding:
    calc(env(safe-area-inset-top) + 32px)
    calc(env(safe-area-inset-right) + 20px)
    calc(env(safe-area-inset-bottom) + 32px)
    calc(env(safe-area-inset-left) + 20px);
}

.card {
  width: min(440px, 100%);
  padding: 40px 26px 28px;
  border-radius: var(--radius-card);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)),
    rgba(15, 17, 21, 0.55);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  backdrop-filter: blur(28px) saturate(150%);
  position: relative;
  overflow: hidden;
}

/* Top highlight edge — the "liquid glass" rim */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, var(--glass-border-hi), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* ---------- 5. Logo & header ---------- */
.logo {
  display: grid;
  place-items: center;
  margin-bottom: 22px;
}
.logo__mark {
  filter: drop-shadow(0 8px 26px rgba(96, 165, 250, 0.35));
}

.head { text-align: center; margin-bottom: 30px; }
.head__title {
  font-size: clamp(1.7rem, 6vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #ffffff, rgba(255,255,255,0.72));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.head__tag {
  margin-top: 8px;
  font-size: clamp(0.95rem, 3.4vw, 1.05rem);
  color: var(--text-dim);
  font-weight: 450;
}
.head__region {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--text-faint);
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
}
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px 1px var(--cyan);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.8); }
}

/* ---------- 6. Links (liquid glass buttons) ---------- */
.links {
  display: grid;
  gap: 14px;
  margin-bottom: 28px;
}

.link {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius-btn);
  background:
    linear-gradient(180deg, var(--glass-strong), rgba(255,255,255,0.02)),
    rgba(20, 22, 28, 0.5);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-btn);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
  transition:
    transform 0.35s var(--ease),
    border-color 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    background 0.35s var(--ease);
}

.link:hover {
  border-color: var(--glass-border-hi);
  box-shadow: var(--shadow-btn), var(--glow);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.03)),
    rgba(22, 24, 30, 0.6);
}
.link:active { transform: scale(0.985); }

.link__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  font-size: 1.35rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
}
.link__body { display: grid; gap: 2px; min-width: 0; }
.link__label { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; }
.link__sub {
  font-size: 0.8rem; color: var(--text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.link__chev {
  color: var(--text-faint);
  font-size: 1.1rem;
  transition: transform 0.35s var(--ease), color 0.35s var(--ease);
}
.link:hover .link__chev { transform: translateX(4px); color: var(--text); }

/* Specular reflection sweep on hover */
.link__shine {
  position: absolute;
  top: 0; left: -60%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.16), transparent);
  transform: skewX(-18deg);
  z-index: -1;
  opacity: 0;
}
.link:hover .link__shine {
  animation: sweep 0.9s var(--ease) forwards;
}
@keyframes sweep {
  0%   { left: -60%; opacity: 0; }
  30%  { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}

/* Ripple (spawned by JS on click/touch) */
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: radial-gradient(circle, rgba(255,255,255,0.35), transparent 70%);
  pointer-events: none;
  z-index: -1;
  animation: ripple 0.6s var(--ease-soft) forwards;
}
@keyframes ripple {
  to { transform: scale(2.4); opacity: 0; }
}

/* ---------- 7. Trust row & footer ---------- */
.trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  margin-bottom: 22px;
}
.trust__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  color: var(--text-dim);
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
}
.trust__item svg { color: var(--cyan); opacity: 0.9; }

.foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.72rem;
  color: var(--text-faint);
}
.foot__sep { opacity: 0.5; }

/* ---------- 8. Entrance animations ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px) scale(0.99);
  filter: blur(6px);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition:
    opacity 0.8s var(--ease),
    transform 0.8s var(--ease),
    filter 0.8s var(--ease);
}

/* ---------- 9. Responsive & platform ---------- */
@media (min-width: 480px) {
  .card { padding: 46px 34px 30px; }
}

/* Large / 4K desktop: keep the card centered and crisp, scale type slightly */
@media (min-width: 1600px) {
  .card { width: 480px; }
  .head__title { font-size: 2.35rem; }
}

/* Coarse pointers: disable pointer glow, keep tap feedback */
@media (hover: none) {
  .pointer-glow { display: none; }
  .link:hover .link__shine { animation: none; }
}

/* Honour reduced-motion: freeze ambient + entrance motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .aurora { animation: none; }
  [data-reveal] { opacity: 1; transform: none; filter: none; }
}