/* =========================================================
   Angel Gerena — Tap Card — Pearl Atelier / Liquid Glass
   Finesse Media LLC
   ========================================================= */

@font-face{ font-family:"Cormorant Garamond"; font-weight:600; font-style:normal; font-display:swap; src:url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face{ font-family:"Cormorant Garamond"; font-weight:700; font-style:normal; font-display:swap; src:url("../fonts/cormorant-garamond-latin-700-normal.woff2") format("woff2"); }

:root{
  /* light (default) */
  --bg:#F3F2F7;
  --ink:#141B30;
  --ink-2:#4A5470;
  --ink-3:#7D849A;
  --gold:#A8862F;
  --gold-soft:#E8D49A;
  --navy:#1C2640;

  --field-1:#C7B6FF;   /* lilac */
  --field-2:#A8CCFF;   /* sky */
  --field-3:#FFCDA8;   /* peach */
  --field-4:#F2DFA2;   /* champagne */
  --field-o:.85;

  --glass:rgba(255,255,255,.34);
  --glass-strong:rgba(255,255,255,.55);
  --glass-rim-a:rgba(255,255,255,.95);
  --glass-rim-b:rgba(255,255,255,.25);
  --glass-edge:rgba(20,27,48,.06);
  --glass-shadow:0 10px 30px -12px rgba(28,38,64,.28), 0 2px 6px -2px rgba(28,38,64,.10);
  --spec:rgba(255,255,255,.75);

  --prominent:rgba(24,32,58,.86);
  --prominent-ink:#F8F6F1;

  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --blur:blur(20px) saturate(1.9) brightness(1.06);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.2,.7,.2,1);

  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0C0E18;
    --ink:#F2F0EA;
    --ink-2:rgba(242,240,234,.74);
    --ink-3:rgba(242,240,234,.52);
    --gold:#D9BC6E;
    --field-1:#5B45C9; --field-2:#2F62C4; --field-3:#B8683A; --field-4:#8C7430; --field-o:.55;
    --glass:rgba(255,255,255,.08);
    --glass-strong:rgba(255,255,255,.14);
    --glass-rim-a:rgba(255,255,255,.45);
    --glass-rim-b:rgba(255,255,255,.06);
    --glass-edge:rgba(0,0,0,.25);
    --glass-shadow:0 12px 34px -12px rgba(0,0,0,.6), 0 2px 6px -2px rgba(0,0,0,.4);
    --spec:rgba(255,255,255,.28);
    --prominent:rgba(246,242,232,.92);
    --prominent-ink:#141B30;
    --blur:blur(20px) saturate(1.7) brightness(.95);
  }
}
:root[data-theme="dark"]{
  --bg:#0C0E18; --ink:#F2F0EA; --ink-2:rgba(242,240,234,.74); --ink-3:rgba(242,240,234,.52); --gold:#D9BC6E;
  --field-1:#5B45C9; --field-2:#2F62C4; --field-3:#B8683A; --field-4:#8C7430; --field-o:.55;
  --glass:rgba(255,255,255,.08); --glass-strong:rgba(255,255,255,.14);
  --glass-rim-a:rgba(255,255,255,.45); --glass-rim-b:rgba(255,255,255,.06); --glass-edge:rgba(0,0,0,.25);
  --glass-shadow:0 12px 34px -12px rgba(0,0,0,.6), 0 2px 6px -2px rgba(0,0,0,.4);
  --spec:rgba(255,255,255,.28); --prominent:rgba(246,242,232,.92); --prominent-ink:#141B30;
  --blur:blur(20px) saturate(1.7) brightness(.95);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--bg); -webkit-tap-highlight-color:transparent; scroll-padding-top:env(safe-area-inset-top,0px); }
html,body{ margin:0; }
body{
  min-height:100svh;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  display:flex; justify-content:center;
  padding:
    max(12px, env(safe-area-inset-top))
    16px
    calc(96px + env(safe-area-inset-bottom));   /* room for the docked bar */
}
button{ font:inherit; color:inherit; }
a{ color:inherit; }

/* ---------- Color fields behind the glass ---------- */
.fields{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.fields i{ position:absolute; border-radius:50%; filter:blur(64px); opacity:var(--field-o); will-change:transform; }
.fields .f1{ width:340px; height:340px; background:var(--field-1); top:-90px; left:-110px; animation:driftA 22s ease-in-out infinite alternate; }
.fields .f2{ width:300px; height:300px; background:var(--field-2); top:28%; right:-140px; animation:driftB 26s ease-in-out infinite alternate; }
.fields .f3{ width:320px; height:320px; background:var(--field-3); top:58%; left:-150px; animation:driftA 30s ease-in-out infinite alternate-reverse; }
.fields .f4{ width:260px; height:260px; background:var(--field-4); bottom:-80px; right:-60px; animation:driftB 24s ease-in-out infinite alternate-reverse; }
.fields::after{ /* fine grain so the glass has texture to refract */
  content:""; position:absolute; inset:0; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Liquid glass material ---------- */
.glass{
  position:relative; isolation:isolate;
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);
          backdrop-filter:var(--blur);
  box-shadow:
    inset 0 1px 1px var(--glass-rim-a),
    inset 0 -1px 1px var(--glass-edge),
    var(--glass-shadow);
}
.glass::before{ /* gradient rim: bright top-left, fading, catch-light bottom-right */
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; z-index:2;
  background:linear-gradient(135deg, var(--glass-rim-a), var(--glass-rim-b) 38%, transparent 55%, var(--glass-rim-b) 75%, var(--glass-rim-a));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.glass::after{ /* specular highlight that follows the finger */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
  background:radial-gradient(120px 80px at var(--mx,30%) var(--my,0%), var(--spec), transparent 70%);
  opacity:.55; transition:opacity .3s ease;
}
.glass.lit::after{ opacity:1; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{ background:var(--glass-strong); }
}

/* pressable liquid behavior */
.press{
  cursor:pointer; border:0; text-decoration:none; user-select:none; -webkit-user-select:none; touch-action:manipulation;
  transition:transform .45s var(--spring), box-shadow .3s ease, background .3s ease;
}
.press:active, .press.down{ transform:scale(.955); transition:transform .12s ease; }
.press .drop{ /* liquid drop that swells from the touch point */
  position:absolute; z-index:0; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,.35) 45%, transparent 70%);
  animation:drop .6s var(--ease) forwards;
}
.press > *{ position:relative; z-index:3; }
.press > .drop{ position:absolute; z-index:0; }

/* ---------- Card ---------- */
.card{ position:relative; z-index:2; width:100%; max-width:430px; }

.topbar{ display:flex; align-items:center; justify-content:center; gap:10px; margin:6px 0 4px; min-height:40px; }
.pill{
  display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 14px; border-radius:999px;
  font-size:12px; font-weight:600; letter-spacing:.01em; color:var(--ink-2);
}
.pill .dot{ width:7px; height:7px; border-radius:50%; background:#2FBF6A; box-shadow:0 0 0 3px rgba(47,191,106,.18); }

/* hero portrait + logo badge */
.hero{ position:relative; width:min(248px, 64vw); aspect-ratio:4/5; margin:26px auto 30px; perspective:900px; }
.tilt{
  position:absolute; inset:0;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;
  transition:transform .6s var(--spring);
  animation:float 7s ease-in-out infinite;
}
.rim{ position:absolute; inset:-8px; border-radius:42px; }
.photo{
  position:absolute; inset:0; margin:0; border-radius:34px; overflow:hidden;
  box-shadow:0 34px 60px -26px rgba(28,38,64,.55), 0 0 0 1px rgba(255,255,255,.4);
  background:#D9D6E0;
}
.photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; display:block; }
.photo::after{ /* glass gloss across the photo */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    linear-gradient(155deg, rgba(255,255,255,.34), rgba(255,255,255,0) 32%),
    radial-gradient(140px 90px at var(--gx,30%) var(--gy,8%), rgba(255,255,255,.28), transparent 70%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7), inset 0 0 0 1px rgba(255,255,255,.18);
}
.badge-orb{
  position:absolute; right:-22px; bottom:-22px; z-index:5;
  width:92px; height:92px; border-radius:50%; padding:0; display:grid; place-items:center;
  /* high-gloss piano black: deep core, soft top reflection, cool rim light at the bottom edge */
  background:
    radial-gradient(60% 38% at 50% 8%, rgba(255,255,255,.34), rgba(255,255,255,.08) 55%, rgba(255,255,255,0) 72%),
    radial-gradient(45% 22% at 50% 96%, rgba(170,190,255,.22), rgba(170,190,255,0) 100%),
    radial-gradient(100% 100% at 50% 45%, #1A1B1F 0%, #0B0B0D 55%, #000 100%);
  background-color:#050506;
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,.55),
    inset 0 -2px 3px rgba(255,255,255,.10),
    inset 0 -10px 18px rgba(0,0,0,.8),
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 0 0 1.5px rgba(197,164,75,.40),
    0 18px 32px -10px rgba(0,0,0,.7);
  animation:float 7s ease-in-out infinite; animation-delay:-2s;
}
/* ---------- Logo sphere: camera lens + autofocus animation ---------- */
/* focus ring: fine distance-scale ticks with longer major marks, turning slowly like a lens being focused */
.badge-orb .lens-ring{
  position:absolute; inset:-13px; border-radius:50%; pointer-events:none; z-index:1;
  background:
    repeating-conic-gradient(from 0deg, rgba(197,164,75,.95) 0 1.2deg, transparent 1.2deg 30deg),
    repeating-conic-gradient(from 0deg, rgba(197,164,75,.45) 0 .8deg, transparent .8deg 6deg);
  -webkit-mask:radial-gradient(circle, transparent 60.5%, #000 61.5%, #000 66%, transparent 67%);
          mask:radial-gradient(circle, transparent 60.5%, #000 61.5%, #000 66%, transparent 67%);
  animation:focusTurn 9s cubic-bezier(.45,0,.2,1) infinite;
}
/* index arc: a short bright segment that sweeps the opposite way, like a HUD readout */
.badge-orb .lens-index{
  position:absolute; inset:-6px; border-radius:50%; pointer-events:none; z-index:1;
  background:conic-gradient(from 0deg, rgba(240,212,140,.95) 0 34deg, transparent 34deg 180deg, rgba(160,180,255,.55) 180deg 196deg, transparent 196deg);
  -webkit-mask:radial-gradient(circle, transparent 66%, #000 67%, #000 69.5%, transparent 70.5%);
          mask:radial-gradient(circle, transparent 66%, #000 67%, #000 69.5%, transparent 70.5%);
  animation:spin 6s linear infinite reverse;
}
/* autofocus brackets: hunt, then snap and lock on the logo every few seconds */
.badge-orb .af{ position:absolute; inset:-24px; pointer-events:none; z-index:6; animation:afHunt 5.5s cubic-bezier(.3,0,.2,1) infinite; }
.badge-orb .af i{ position:absolute; width:14px; height:14px; border:0 solid rgba(255,255,255,.85); transition:border-color .2s ease; animation:afColor 5.5s steps(1) infinite; }
.badge-orb .af i:nth-child(1){ top:0; left:0; border-width:2px 0 0 2px; border-top-left-radius:3px; }
.badge-orb .af i:nth-child(2){ top:0; right:0; border-width:2px 2px 0 0; border-top-right-radius:3px; }
.badge-orb .af i:nth-child(3){ bottom:0; left:0; border-width:0 0 2px 2px; border-bottom-left-radius:3px; }
.badge-orb .af i:nth-child(4){ bottom:0; right:0; border-width:0 2px 2px 0; border-bottom-right-radius:3px; }
/* shutter flash on tap */
.badge-orb .shutter{ position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:5; opacity:0;
  background:radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,.4) 45%, rgba(255,255,255,0) 70%); }
.badge-orb.snap .shutter{ animation:shutterFlash .45s ease-out; }
.badge-orb.snap .af{ animation:afSnap .6s cubic-bezier(.34,1.56,.64,1); }
.badge-orb.snap .af i{ animation:none; border-color:#F0D48C; }
/* these decorative layers are positioned absolutely, not by the .press child rule */
.press > .lens-ring, .press > .lens-index, .press > .af, .press > .shutter{ position:absolute; }

@keyframes focusTurn{ 0%{ transform:rotate(0deg); } 35%{ transform:rotate(38deg); } 50%{ transform:rotate(30deg); } 85%{ transform:rotate(-8deg); } 100%{ transform:rotate(0deg); } }
@keyframes afHunt{
  0%{ transform:scale(1.18); opacity:.35; }
  30%{ transform:scale(1.06); opacity:.7; }
  38%{ transform:scale(1.12); opacity:.7; }
  48%{ transform:scale(1); opacity:1; }
  78%{ transform:scale(1); opacity:1; }
  100%{ transform:scale(1.18); opacity:.35; }
}
@keyframes afColor{ 0%{ border-color:rgba(255,255,255,.85); } 48%{ border-color:#F0D48C; } 78%{ border-color:rgba(255,255,255,.85); } }
@keyframes afSnap{ 0%{ transform:scale(1.25); opacity:.4; } 100%{ transform:scale(1); opacity:1; } }
@keyframes shutterFlash{ 0%{ opacity:0; } 15%{ opacity:1; } 100%{ opacity:0; } }
.badge-orb::after{ /* crisp mirror highlight, like light on lacquer */
  content:""; position:absolute; top:5%; left:20%; width:60%; height:26%; border-radius:50% 50% 45% 45%;
  background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.12) 70%, rgba(255,255,255,0));
  pointer-events:none; z-index:4;
}
.badge-orb .logo{ width:76%; height:76%; object-fit:contain; filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(197,164,75,.25)); position:relative; z-index:3; }
.badge-orb .mono{ font-family:var(--serif); font-weight:700; font-size:34px; color:var(--gold); position:relative; z-index:3; }

/* identity */
h1{
  font-family:var(--serif); font-weight:700; font-size:clamp(40px, 12vw, 48px); line-height:.95;
  letter-spacing:-.01em; text-align:center; margin:0; color:var(--ink);
}
.role{ text-align:center; font-size:13px; line-height:1.6; color:var(--ink-2); margin:12px auto 0; max-width:34ch; }
.role .r{ white-space:nowrap; }
.role .s{ color:var(--gold); padding:0 3px; }
.org{ text-align:center; margin:8px 0 22px; font-size:11px; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); }

/* primary + secondary capsules */
.save{
  width:100%; min-height:56px; border-radius:999px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:16px; font-weight:600; letter-spacing:.01em;
  color:var(--prominent-ink); background:var(--prominent);
}
.save svg{ width:19px; height:19px; }
.save.glass{ background:var(--prominent); }
.save.done{ background:linear-gradient(100deg, #2B8A57, #36A76A); color:#fff; }
.pair{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.cap{
  min-height:50px; border-radius:999px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:14px; font-weight:600; color:var(--ink);
}
.cap svg{ width:18px; height:18px; color:var(--gold); }

/* sections */
.sec{ display:flex; align-items:center; gap:10px; margin:26px 4px 10px; font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }
.sec::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, rgba(125,132,154,.35), transparent); }

.svc{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tile{ border-radius:22px; padding:14px 14px 13px; overflow:hidden; }
.tile .ti{ width:34px; height:34px; border-radius:11px; display:grid; place-items:center; margin-bottom:10px; color:var(--navy);
  background:linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.45));
  box-shadow:inset 0 1px 1px #fff, 0 3px 8px -4px rgba(28,38,64,.35); }
.tile .ti svg{ width:18px; height:18px; }
.tile b{ display:block; font-size:14px; font-weight:700; color:var(--ink); }
.tile small{ display:block; font-size:12px; color:var(--ink-2); margin-top:2px; line-height:1.35; }

/* link rows */
.list{ display:flex; flex-direction:column; gap:10px; }
.row{
  display:flex; align-items:center; gap:14px; min-height:64px; padding:10px 16px 10px 12px; border-radius:24px; overflow:hidden; color:var(--ink);
}
.row .badge{ width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center; color:#3A2E0E;
  background:linear-gradient(135deg, #F6EAC2, #D9C07A); box-shadow:inset 0 1px 1px rgba(255,255,255,.8), 0 3px 8px -4px rgba(120,90,20,.5); }
.row .badge svg{ width:19px; height:19px; }
.row .tx{ flex:1; min-width:0; }
.row .tx b{ display:block; font-size:15px; font-weight:650; }
.row .tx small{ display:block; font-size:12.5px; color:var(--ink-2); margin-top:2px; }
.row .go{ width:30px; height:30px; flex:none; border-radius:50%; display:grid; place-items:center; color:var(--ink-2);
  background:rgba(255,255,255,.35); box-shadow:inset 0 1px 1px rgba(255,255,255,.8); }
.row .go svg{ width:14px; height:14px; transition:transform .35s var(--spring); }
.row.lit .go svg{ transform:translate(2px,-2px); }

footer{ margin-top:26px; text-align:center; font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); }
footer a{ text-decoration:none; color:var(--gold); }
footer p{ margin:6px 0 0; font-weight:500; letter-spacing:.14em; }

/* ---------- Contact row (in the page) ---------- */
.quick{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px; }
.qbtn{
  min-height:68px; border-radius:22px; overflow:hidden; text-decoration:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  font-size:12.5px; font-weight:600; color:var(--ink);
}
.qbtn svg, .dbtn svg{ width:22px; height:22px; color:var(--navy); }
.qbtn.wa svg, .dbtn.wa svg{ color:#1FA855; }
.qbtn.em svg, .dbtn.em svg{ color:var(--gold); }

/* ---------- Docked bar (locks to the bottom edge after the row scrolls away) ---------- */
.dockbar{
  position:fixed; z-index:30; left:0; right:0; bottom:0;
  padding:8px 14px calc(8px + env(safe-area-inset-bottom));
  background:rgba(246,245,250,.80);
  -webkit-backdrop-filter:blur(24px) saturate(1.8); backdrop-filter:blur(24px) saturate(1.8);
  border-top:1px solid rgba(20,27,48,.08);
  box-shadow:0 -10px 30px -18px rgba(28,38,64,.35);
  transform:translateY(110%); visibility:hidden;
  transition:transform .45s var(--spring), visibility 0s linear .45s;
}
.dockbar.show{ transform:none; visibility:visible; transition:transform .45s var(--spring), visibility 0s; }
.dock-inner{ max-width:430px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.dbtn{
  position:relative; min-height:50px; border-radius:16px; overflow:hidden; text-decoration:none;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:13px; font-weight:650; color:var(--ink);
  background:rgba(255,255,255,.55); box-shadow:inset 0 1px 1px rgba(255,255,255,.9), inset 0 0 0 1px rgba(20,27,48,.06);
}
.dbtn svg{ width:20px; height:20px; }
.dbtn.lit{ background:rgba(255,255,255,.8); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .qbtn svg, :root:not([data-theme="light"]) .dbtn svg{ color:#C9D4FF; }
  :root:not([data-theme="light"]) .qbtn.wa svg, :root:not([data-theme="light"]) .dbtn.wa svg{ color:#3DDC84; }
  :root:not([data-theme="light"]) .qbtn.em svg, :root:not([data-theme="light"]) .dbtn.em svg{ color:var(--gold); }
  :root:not([data-theme="light"]) .dockbar{ background:rgba(14,16,28,.80); border-top-color:rgba(255,255,255,.08); box-shadow:0 -10px 30px -18px rgba(0,0,0,.7); }
  :root:not([data-theme="light"]) .dbtn{ background:rgba(255,255,255,.08); box-shadow:inset 0 1px 1px rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.06); }
  :root:not([data-theme="light"]) .dbtn.lit{ background:rgba(255,255,255,.16); }
  :root:not([data-theme="light"]) .tile .ti{ color:#E8ECFF; background:linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.06)); box-shadow:inset 0 1px 1px rgba(255,255,255,.35); }
  :root:not([data-theme="light"]) .row .go{ background:rgba(255,255,255,.08); box-shadow:inset 0 1px 1px rgba(255,255,255,.2); }
}

/* ---------- Toast (drops from the top like a notification) ---------- */
#toast{
  position:fixed; z-index:70; left:50%; top:calc(10px + env(safe-area-inset-top));
  transform:translate(-50%, -140%); opacity:0; pointer-events:none;
  max-width:88vw; min-height:44px; padding:12px 18px; border-radius:999px;
  display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap;
  background:var(--glass-strong);
  transition:transform .55s var(--spring), opacity .25s ease;
}
#toast.show{ opacity:1; transform:translate(-50%, 0); }
#toast svg{ width:16px; height:16px; color:#2FBF6A; flex:none; }

/* ---------- Sheets (QR + Share) ---------- */
.modal{
  position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center; padding:24px;
  background:rgba(20,27,48,.28); -webkit-backdrop-filter:blur(10px) saturate(1.3); backdrop-filter:blur(10px) saturate(1.3);
}
.modal.show{ display:flex; }
.modal .sheet{ width:100%; max-width:340px; border-radius:36px; padding:22px 20px 18px; text-align:center; background:var(--glass-strong); animation:sheetIn .5s var(--spring); }
.modal h2{ margin:0; font-family:var(--serif); font-weight:700; font-size:26px; color:var(--ink); }
.modal .u{ margin:4px 0 14px; font-size:12px; color:var(--ink-2); word-break:break-all; }
.modal .close{ width:100%; margin-top:14px; }
.qrbox{ padding:12px; border-radius:22px; background:#fff; box-shadow:inset 0 0 0 1px rgba(20,27,48,.06); }
.qrbox svg{ width:100%; height:auto; display:block; }

.urlbox{
  width:100%; margin:12px 0 14px; min-height:44px; padding:0 16px; border:0; border-radius:999px;
  font:500 13px/1 var(--sans); color:var(--ink-2); text-align:center; text-overflow:ellipsis;
  background:rgba(255,255,255,.55); box-shadow:inset 0 1px 2px rgba(20,27,48,.08), inset 0 0 0 1px rgba(20,27,48,.06);
}
.urlbox:focus{ outline:2px solid #6E8CFF; outline-offset:2px; }
.share-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.share-grid .cap{ min-height:52px; font-size:13.5px; }
.share-grid .wa-ic{ color:#1FA855; }
.share-grid .cap.ok svg{ color:#2FBF6A; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .urlbox{ background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
  :root:not([data-theme="light"]) .modal{ background:rgba(0,0,0,.4); }
}

/* ---------- Entrance ---------- */
.reveal{ opacity:0; transform:translateY(14px) scale(.98); }
.booted .reveal{ animation:rise .8s var(--spring) forwards; animation-delay:calc(var(--i,0) * 60ms); }

:focus-visible{ outline:2px solid #6E8CFF; outline-offset:3px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes float{ 0%,100%{ translate:0 0; } 50%{ translate:0 -6px; } }
@keyframes driftA{ to{ transform:translate(70px,60px) scale(1.12); } }
@keyframes driftB{ to{ transform:translate(-60px,80px) scale(.92); } }
@keyframes drop{ from{ transform:scale(1); opacity:1; } to{ transform:scale(28); opacity:0; } }
@keyframes rise{ to{ opacity:1; transform:none; } }
@keyframes sheetIn{ from{ opacity:0; transform:scale(.9); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}