/* ==========================================================================
   THE WITCH MMA — LINKS (dionebarbosamma.com/links/)
   The link-in-bio page. Loaded after pages.css and commerce.css. A pinned
   stage plays on the scroll like FIGHTER (src/pages/links.js sets --fill,
   --burn, --pull and each block's --a), then plain rows of links.
   ========================================================================== */

/* ------------------------------------------------------------------ stage */
/* Full-bleed: out of the .doc column and up under the header. */
.doc .lk-track{
  position:relative;
  width:100vw; margin:calc(-1 * (clamp(16px,2.4vw,30px) * 2 + 40px)) 0 clamp(8px, 1.5vw, 24px) calc(50% - 50vw);
  height:200svh;
}
.lk-stage{
  position:sticky; top:0;
  height:100svh; overflow:hidden;
  --fill:0%; --burn:0; --pull:0;
}

/* the giant outlined name, filling with violet from the baseline (as on FIGHTER) */
.lk-word{
  position:absolute; left:50%; top:13svh;
  transform:translate3d(-50%, calc(var(--pull) * -4svh), 0);
  white-space:nowrap; pointer-events:none;
}
.lk-word span{
  display:block;
  font-family:var(--display); font-weight:900;
  font-size:min(19.5vw, 46svh);
  line-height:.8; letter-spacing:-.03em;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(242,243,245,.28);
  background:linear-gradient(to top, var(--blood) var(--fill), transparent var(--fill));
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 0 60px rgba(138,43,226,.18));
}
.q-lite .lk-word span{ filter:none; }

/* the athlete: photo A burns away from the feet up into photo B */
.lk-fig{
  position:absolute; left:50%; bottom:0; margin:0;
  height:88svh; aspect-ratio:3 / 4; max-width:118vw;
  transform:translate3d(-50%, calc(var(--pull) * -5svh), 0) scale(calc(1 - var(--pull) * .16));
  transform-origin:50% 100%;
  filter:brightness(calc(1 - var(--pull) * .5));
  -webkit-mask-image:linear-gradient(to top, transparent 0, #000 22%);
          mask-image:linear-gradient(to top, transparent 0, #000 22%);
  pointer-events:none;
}
.lk-fig img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:50% 100%;
}
.lk-fig__a{
  -webkit-mask-image:linear-gradient(to top, transparent calc(var(--burn) * 130% - 30%), #000 calc(var(--burn) * 130%));
          mask-image:linear-gradient(to top, transparent calc(var(--burn) * 130% - 30%), #000 calc(var(--burn) * 130%));
}
/* B shows only where A has burned away */
.lk-fig__b{
  -webkit-mask-image:linear-gradient(to top, #000 calc(var(--burn) * 130% - 30%), transparent calc(var(--burn) * 130%));
          mask-image:linear-gradient(to top, #000 calc(var(--burn) * 130% - 30%), transparent calc(var(--burn) * 130%));
}
/* the flame line, only on her silhouette */
.lk-fig__burn{
  position:absolute; inset:0;
  background:linear-gradient(to top, transparent calc(var(--burn) * 130% - 22%), rgba(178,107,255,.55) calc(var(--burn) * 130% - 16%), rgba(255,214,255,.75) calc(var(--burn) * 130% - 15%), transparent calc(var(--burn) * 130% - 12%));
  -webkit-mask:url("/img/athlete/cutout-2.webp") 50% 100% / contain no-repeat;
          mask:url("/img/athlete/cutout-2.webp") 50% 100% / contain no-repeat;
  mix-blend-mode:screen;
  opacity:calc(min(var(--burn), 1 - var(--burn)) * 3);
}

/* the three blocks of copy (each fades on its own --a) */
.lk-copy{
  --a:0;
  position:absolute; left:var(--gut); right:var(--gut); bottom:clamp(54px, 10svh, 110px);
  text-align:center;
  opacity:var(--a);
  transform:translate3d(0, calc((1 - var(--a)) * 36px), 0);
  text-shadow:0 2px 24px rgba(0,0,0,.65);
  visibility:hidden;
}
.lk-copy .eyebrow{ justify-content:center; }
.lk-copy--id{ --a:1; visibility:visible; }
.lk-name{ font-size:clamp(2.6rem, 7vw, 6.6rem); letter-spacing:.02em; margin:.18em 0 .3em; }
.lk-copy .lede{ text-transform:none; letter-spacing:.14em; }

.lk-copy--mid{ left:auto; right:var(--gut); bottom:auto; top:50%; margin-top:-1em; max-width:min(36rem, 44vw); text-align:right; }
.lk-copy--mid .eyebrow{ justify-content:flex-end; }
.lk-say{ font-size:clamp(3rem, 7.6vw, 8rem); margin:.16em 0 .3em; }

/* the official site, where the stage ends */
.lk-copy--site{ bottom:clamp(40px, 9svh, 100px); }
.lk-copy--site::before{ /* a pool of shadow so the address reads over her */
  content:""; position:absolute; left:50%; top:50%; width:min(1400px, 140vw); height:300%;
  transform:translate(-50%, -50%); z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(5,5,5,.86), rgba(5,5,5,.5) 55%, transparent);
}
.lk-site{ display:inline-flex; flex-direction:column; align-items:center; gap:clamp(14px, 2.4svh, 26px); color:var(--bone); text-decoration:none; margin-top:.5em; }
.lk-site__url{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(1.9rem, 8.2vw, 9rem); line-height:1; letter-spacing:-.01em;
}
.lk-site__url em{ font-style:normal; color:var(--blood-lift); }
.lk-site__go{
  font-family:var(--label); font-weight:500; text-transform:uppercase; letter-spacing:.26em; font-size:.78rem;
  padding:1.05em 2.2em; border:1px solid var(--blood-lift); background:rgba(138,43,226,.22);
  box-shadow:0 0 34px rgba(138,43,226,.38);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.lk-site__go::after{ content:"  →"; }
.lk-site:hover .lk-site__go, .lk-site:focus-visible .lk-site__go{ background:var(--blood-lift); color:var(--ink); }
.lk-site:focus-visible{ outline:2px solid var(--blood-lift); outline-offset:8px; }

.lk-hint{ position:absolute; right:var(--gut); bottom:28px; display:flex; align-items:center; gap:.9em;
  font-family:var(--label); font-weight:500; font-size:.66rem; letter-spacing:.32em; color:var(--bone-dim); }
.lk-auto{ position:absolute; left:var(--gut); bottom:22px; z-index:2; }
.lk-auto[hidden]{ display:none; }
.lk-rail{ position:absolute; right:calc(var(--gut) * .45); top:24svh; bottom:24svh; width:1px; background:rgba(242,243,245,.12); }
.lk-rail i{ position:absolute; inset:0; background:var(--blood-lift); transform:scaleY(0); transform-origin:top; box-shadow:0 0 10px var(--blood-lift); }

@media (max-width:760px), (orientation:portrait){
  .doc .lk-track{ height:190svh; }
  .lk-word{ top:15svh; }
  .lk-word span{ font-size:21vw; -webkit-text-stroke-width:1px; }
  .lk-fig{ height:76svh; }
  .lk-copy--mid{ left:var(--gut); right:var(--gut); top:auto; bottom:clamp(54px, 10svh, 110px); margin:0; max-width:none; text-align:center; }
  .lk-copy--mid .eyebrow{ justify-content:center; }
  .lk-say{ font-size:clamp(2.8rem, 15vw, 5rem); }
  .lk-copy .lede{ font-size:.78rem; letter-spacing:.08em; line-height:1.6; }
  .lk-hint{ left:0; right:0; bottom:16px; justify-content:center; display:none; }
  .lk-rail{ right:10px; }
}

/* reduced motion: the stage stands still, the blocks stack under her */
.lk-still .doc .lk-track{ height:auto; }
.lk-still .lk-stage{ position:relative; height:auto; overflow:visible; padding:22svh 0 0; }
.lk-still .lk-word{ top:12svh; }
.lk-still .lk-fig{ position:relative; left:auto; margin:0 auto; transform:none; filter:none; height:72svh; }
.lk-still .lk-fig__a, .lk-still .lk-fig__burn{ display:none; }
.lk-still .lk-fig__b{ -webkit-mask-image:none; mask-image:none; }
.lk-still .lk-copy{ position:relative; inset:auto; --a:1; visibility:visible; transform:none; margin:0 var(--gut) 48px; max-width:none; text-align:center; }
.lk-still .lk-copy .eyebrow{ justify-content:center; }
.lk-still .lk-copy--mid, .lk-still .lk-hint, .lk-still .lk-rail, .lk-still .lk-auto{ display:none; }

/* ------------------------------------------------------------------ links */
.lk-sec{ max-width:64rem; margin-left:auto; margin-right:auto; }
.lk-list{ list-style:none; margin:0; padding:0; border-bottom:1px solid rgba(242,243,245,.09); }
.lk-row{
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:clamp(14px, 2vw, 28px);
  padding:clamp(16px, 2.2vw, 26px) clamp(10px, 1.6vw, 22px);
  border-top:1px solid rgba(242,243,245,.09);
  color:var(--bone); text-decoration:none;
  transition:background .35s var(--ease);
}
.lk-row:hover, .lk-row:focus-visible{ background:linear-gradient(90deg, rgba(138,43,226,.2), rgba(138,43,226,0) 80%); }
.lk-row:focus-visible{ outline:2px solid var(--blood-lift); outline-offset:-2px; }
.lk-row__mark{
  width:clamp(44px, 4vw, 54px); aspect-ratio:1; display:grid; place-items:center;
  border:1px solid rgba(242,243,245,.16); color:var(--bone);
}
.lk-row__mark b{ font-family:var(--display); font-weight:900; font-size:1.25rem; letter-spacing:.02em; }
.lk-ico{ width:20px; height:20px; fill:currentColor; display:block; }
.lk-ico--line{ fill:none; }
.lk-row__text{ display:flex; flex-direction:column; gap:.3em; min-width:0; }
.lk-row__kind{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(1.35rem, 2.3vw, 2rem); line-height:1; letter-spacing:.01em; }
.lk-row__title{ color:var(--bone-dim); font-size:.92rem; line-height:1.45; }
.lk-row__host{ font-family:var(--label); letter-spacing:.2em; font-size:.68rem; text-transform:uppercase; color:var(--bone-faint); }
.lk-row__arrow{ font-size:1.3rem; color:var(--blood-lift); transition:transform .35s var(--ease); }
.lk-row:hover .lk-row__arrow{ transform:translate(4px, -4px); }

/* the official site leads the list */
.lk-row--site{ background:linear-gradient(90deg, rgba(138,43,226,.3), rgba(138,43,226,.06) 85%); border-top-color:rgba(178,107,255,.55); }
.lk-row--site .lk-row__mark{ border-color:var(--blood-lift); color:var(--blood-lift); box-shadow:0 0 22px rgba(138,43,226,.45); }
.lk-row--site .lk-row__host{ color:#d9c4ff; }
.lk-row--site:hover{ background:linear-gradient(90deg, rgba(138,43,226,.45), rgba(138,43,226,.1) 85%); }
.lk-row--site:hover .lk-row__arrow{ transform:translateX(5px); }

@media (max-width:640px){
  .lk-row{ grid-template-columns:auto 1fr auto; padding-left:4px; padding-right:4px; }
  .lk-row__host{ display:none; }
}

/* ---------------------------------------------------------------- socials */
.lk-socs{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap:12px; }
.lk-soc{
  display:grid; grid-template-columns:auto 1fr; grid-template-areas:"ico name" "n n" "unit unit";
  align-items:center; gap:10px 12px; padding:20px 20px 22px; height:100%;
  color:var(--bone); text-decoration:none; transition:border-color .3s var(--ease);
}
.lk-soc:hover, .lk-soc:focus-visible{ border-color:rgba(178,107,255,.55); }
.lk-soc:focus-visible{ outline:2px solid var(--blood-lift); outline-offset:2px; }
.lk-soc .lk-ico{ grid-area:ico; width:22px; height:22px; }
.lk-soc__name{ grid-area:name; font-family:var(--label); text-transform:uppercase; letter-spacing:.2em; font-size:.74rem; color:var(--bone-dim); }
.lk-soc__n{ grid-area:n; font-size:clamp(2.2rem, 3.6vw, 3rem); margin-top:.3em; }
.lk-soc__unit{ grid-area:unit; font-size:.8rem; color:var(--bone-faint); }
.lk-soc__note{ grid-area:n; font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:1.5rem; margin-top:.6em; line-height:1; }

/* ---------------------------------------------------------------- contact */
.lk-contact__grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.lk-mail{
  display:flex; flex-direction:column; gap:.7em; align-items:flex-start; text-align:left;
  padding:24px; color:var(--bone); text-decoration:none; font:inherit; cursor:pointer;
  transition:border-color .3s var(--ease);
}
.lk-mail:hover, .lk-mail:focus-visible{ border-color:rgba(178,107,255,.55); }
.lk-mail:focus-visible{ outline:2px solid var(--blood-lift); outline-offset:2px; }
.lk-mail .lk-ico{ width:22px; height:22px; color:var(--blood-lift); }
.lk-mail .label{ font-size:.72rem; }
.lk-mail__to{ font-family:var(--display); font-weight:800; font-size:clamp(1.15rem, 1.9vw, 1.6rem); line-height:1.15; overflow-wrap:anywhere; }
@media (max-width:820px){ .lk-contact__grid{ grid-template-columns:1fr; } }

/* -------------------------------------------------------------- site tabs */
.lk-tabs{ display:flex; flex-wrap:wrap; gap:10px; }
.lk-tabs a{
  font-family:var(--label); text-transform:uppercase; letter-spacing:.2em; font-size:.76rem;
  padding:.95em 1.4em; border:1px solid rgba(242,243,245,.16); color:var(--bone); text-decoration:none;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.lk-tabs a:hover, .lk-tabs a:focus-visible{ border-color:var(--blood-lift); background:rgba(138,43,226,.18); }

/* ------------------------------------------------------- the 18+ notice */
.lk-soc--adult .lk-soc__note{ color:#d9c4ff; }
.lk-gate{
  max-width:min(30rem, calc(100vw - 32px)); padding:clamp(24px, 4vw, 40px);
  color:var(--bone); background:linear-gradient(180deg, rgba(24,14,40,.97), rgba(8,6,12,.97));
}
.lk-gate::backdrop{ background:rgba(5,5,5,.78); backdrop-filter:blur(4px); }
.lk-gate__title{ margin:.4em 0 .3em; font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(2rem, 5vw, 3rem); line-height:1; }
.lk-gate__note{ margin:0 0 1.6em; color:var(--bone-dim); line-height:1.6; }
.lk-gate__row{ display:flex; flex-wrap:wrap; gap:10px; }
.lk-gate .btn{ font-size:.72rem; }

/* No source line or tab list at the foot: the "Go deeper" tabs above already end the page. */
.page-links .doc-foot{ display:none; }
.page-links .doc .lk-sec:last-of-type{ margin-bottom:clamp(60px, 8vw, 110px); }

/* ------------------------------------------------- everything centred */
.page-links .sec-head{ text-align:center; margin-left:auto; margin-right:auto; }
.page-links .sec-head .eyebrow{ justify-content:center; }
.page-links .sec-note{ margin-left:auto; margin-right:auto; max-width:56ch; }

/* the stage's middle block sits under her like the other two */
.lk-copy--mid{ left:var(--gut); right:var(--gut); top:auto; bottom:clamp(54px, 10svh, 110px); margin:0; max-width:none; text-align:center; }
.lk-copy--mid .eyebrow{ justify-content:center; }

/* link rows: the mark and the arrow at the sides, the words centred between them */
.lk-row{ grid-template-columns:auto 1fr auto; }
.lk-row__text{ align-items:center; text-align:center; }
.lk-row__host{ display:block; margin-top:.35em; }
.lk-row__mark, .lk-row__arrow{ justify-self:center; }
.lk-row__arrow{ width:clamp(44px, 4vw, 54px); text-align:center; }

.lk-soc{ grid-template-columns:1fr; grid-template-areas:"ico" "name" "n" "unit"; justify-items:center; text-align:center; }
.lk-mail{ align-items:center; text-align:center; }
.lk-tabs{ justify-content:center; }
/* the column itself sits in the middle of the page (".doc section" would pin it left) */
.doc .lk-sec{ margin-left:auto; margin-right:auto; }
/* eight socials: four by two, two by four on a phone */
.lk-socs{ grid-template-columns:repeat(4, 1fr); }
@media (max-width:640px){ .lk-socs{ grid-template-columns:repeat(2, 1fr); } }
.lk-mail__to{ font-size:clamp(1.05rem, 1.5vw, 1.4rem); overflow-wrap:break-word; }
/* SOCIALS follows the "Enter the official site" button closely */
.page-links .lk-copy--site{ bottom:clamp(28px, 6svh, 70px); }
/* the shadow pool behind the address ends above the stage's bottom edge (no visible cut line) */
.page-links .lk-copy--site::before{ height:220%; transform:translate(-50%, -72%); }
.lk-soc__mark{ grid-area:ico; font-family:var(--display); font-weight:900; font-size:1.45rem; line-height:22px; height:22px; }