/* ============================================================
   FONTS  (self-hosted — files live in /fonts/, see font guide)
   Self-hosting avoids the GDPR issue of Google's font CDN
   exposing visitor IPs, which keeps the page banner-free.
============================================================ */
@font-face {
  font-family: "Paprika";
  src: url("fonts/paprika-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Carlito";
  src: url("fonts/carlito-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Carlito";
  src: url("fonts/carlito-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   DESIGN TOKENS  (your exact Elementor brand values)
============================================================ */
:root {
  --c-main:        #FFC7C7;   /* main container */
  --c-links-panel: #FFD7D7;   /* buttons container */
  --c-btn-fill:    #FFE9E9;   /* button fill */
  --c-btn-border:  #FFC7C7;   /* button border */
  --c-text:        #BB0C36;   /* general text (Paprika) */
  --c-btn-text:    #000000;   /* button text (Carlito) */

  --radius:    40px;
  --radius-sm: 26px;

  --font-display: "Paprika", "Georgia", serif;
  --font-body:    "Carlito", "Calibri", system-ui, sans-serif;

  /* fluid type — scales between mobile and desktop automatically.
     Desktop targets match your spec (20/12/14/16/19px). */
  --fs-handle:  clamp(1.35rem, 4.5vw, 1.6rem);   /* ~20-25px */
  --fs-tag:     clamp(0.8rem,  2.6vw, 0.85rem);  /* ~12-13px */
  --fs-aka:     clamp(0.95rem, 3.2vw, 1.05rem);  /* ~14-16px */
  --fs-heading: clamp(1.05rem, 3.6vw, 1.15rem);  /* ~16-18px */
  --fs-btn:     clamp(1.05rem, 3.6vw, 1.2rem);   /* ~19px    */
}

/* ============================================================
   RESET
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vw, 40px);
  font-family: var(--font-body);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* ---- BACKGROUND ----
     CSS recreation of your edited image: a soft green glow in the
     upper-left falling into a deep red, vignetting to near-black.
     Vector-based, so it's razor sharp at any size and weighs nothing. */
  background-color: #1b0606;
  background-image:
    radial-gradient(60% 50% at 28% 8%,  rgba(40,140,60,0.85) 0%, rgba(40,140,60,0) 60%),
    radial-gradient(90% 80% at 50% 100%, rgba(150,20,20,0.95) 0%, rgba(70,10,10,0.6) 45%, rgba(20,6,6,1) 100%),
    linear-gradient(160deg, #0f3d1a 0%, #2a0a0a 45%, #1b0606 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Respect users who prefer less motion — disables shake/pulse */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   CONTENT NOTICE (gate)
============================================================ */
.notice {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #101012;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}
.notice.is-hidden { display: none; }

.notice__inner { max-width: 30rem; }

.notice__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(2rem, 7vw, 2.8rem);
  color: #fff;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}
.notice__text {
  font-family: var(--font-body);
  font-size: clamp(1rem, 3.6vw, 1.15rem);
  line-height: 1.5;
  color: #d9d9dd;
  margin-bottom: 2rem;
}
.notice__confirm {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff;
  background: transparent;
  border: 1.5px solid #fff;
  border-radius: 999px;
  padding: 0.9rem 2.4rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease;
}
.notice__confirm:hover  { background: #fff; color: #101012; }
.notice__confirm:active { transform: scale(0.97); }
.notice__leave {
  display: block;
  margin: 1.5rem auto 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: #c9c9cf;
  background: none;
  border: none;
  cursor: pointer;
}
.notice__leave:hover { color: #fff; text-decoration: underline; }
.notice__fine {
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.5;
  color: #76767e;
  margin-top: 2.2rem;
}

/* ============================================================
   MAIN CARD
============================================================ */
.card {
  width: 100%;
  max-width: 480px;
  background: var(--c-main);
  border-radius: var(--radius);
  padding: 0 0 clamp(20px, 5vw, 30px);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  animation: card-in 0.6s ease both;
}
.card[hidden] { display: none; }

@keyframes card-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---- HERO PHOTO that fades into the card ----
   The source photo is square (1:1). To show almost the whole image we
   give the hero a near-square aspect ratio rather than a short cropped
   band. A min/max height keeps it sensible on tiny and huge screens,
   and `object-fit: contain`-style framing isn't used (it would letterbox);
   instead we use cover with a very gentle crop so little is lost. */
.hero {
  position: relative;
  width: 100%;
  /* Near-square: shows essentially the full photo. Capped so the card
     (incl. both main buttons) still fits comfortably on normal screens. */
  aspect-ratio: 1 / 1;
  max-height: min(86vw, 420px);
  overflow: hidden;
}
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 8%;   /* nudge down so the top of her head isn't clipped */
  display: block;
}
/* Gradient overlay that melts the photo's bottom edge into --c-main.
   Shorter than before so it only blends the lower strip and doesn't
   hide the now-fully-visible photo. Colour stops match --c-main. */
.hero__fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 34%;
  background: linear-gradient(to bottom,
              rgba(255,199,199,0)    0%,
              rgba(255,199,199,0.15) 40%,
              rgba(255,199,199,0.55) 70%,
              rgba(255,199,199,0.88) 88%,
              var(--c-main)          100%);
  pointer-events: none;
}

/* ---- PROFILE TEXT ---- */
.profile {
  text-align: center;
  padding: 0 clamp(18px, 5vw, 28px);
  margin-top: -0.6rem;            /* gentle overlap into the fade */
  position: relative;            /* sit above the hero fade */
  z-index: 1;
}
.profile__handle {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-handle);
  color: var(--c-text);
  line-height: 1.1;
}
.profile__tag {
  font-family: var(--font-display);
  font-size: var(--fs-tag);
  color: var(--c-text);
  margin-top: 0.45rem;
  opacity: 0.9;
}
.profile__aka {
  font-family: var(--font-display);
  font-size: var(--fs-aka);
  color: var(--c-text);
  margin-top: 0.3rem;
}

/* ---- IN-APP BROWSER TIP ---- */
.ext-tip {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 1rem clamp(18px, 5vw, 28px) 0;
  padding: 0.8rem 1rem;
  background: #fff4d6;
  border: 1px solid #e8c766;
  border-radius: 16px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.4;
  color: #6a5200;
  text-align: left;
}
.ext-tip[hidden] { display: none; }
.ext-tip__icon { font-size: 1.1rem; line-height: 1.2; }
.ext-tip b { color: #5a4500; }

/* ============================================================
   LINKS PANEL + BUTTONS
============================================================ */
.links {
  background: var(--c-links-panel);
  border-radius: var(--radius-sm);
  margin: clamp(0.8rem, 2vh, 1.3rem) clamp(14px, 4vw, 22px) 0;
  padding: clamp(16px, 4vw, 26px) clamp(16px, 4vw, 22px);
}
.links__heading {
  font-family: var(--font-display);
  font-size: var(--fs-heading);
  color: var(--c-text);
  text-align: center;
  line-height: 1.25;
  margin-bottom: 1rem;
}
.links__heading--spaced { margin-top: clamp(1rem, 2.5vh, 1.8rem); }

.link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  background: var(--c-btn-fill);
  border: 3px solid var(--c-btn-border);
  border-radius: var(--radius);
  padding: 0.85rem 1.1rem;
  margin-top: 0.85rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-btn);
  color: var(--c-btn-text);
  cursor: pointer;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.25s ease, background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.link:first-of-type { margin-top: 0; }
.link__emoji { font-size: 1.15em; line-height: 1; }

/* ---- SLEEK HOVER: a small lift + soft drop shadow on ALL buttons ---- */
.link {
  transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.2s ease;
}
.link:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(120, 20, 45, 0.28);
  background: #fff4f4;
}
.link:active { transform: translateY(-1px) scale(0.99); }
.link:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ============================================================
   TRAVELLING SNAKE BORDER  (two main buttons only)
   ------------------------------------------------------------
   A neon line that flows continuously around the border. Smoother
   than the first version because:
     • the lit arc is LONG with soft fades on both ends (a "fuller"
       snake), so there's no harsh dark gap darting around — it
       reads as one continuous flowing band;
     • the spin is slow and perfectly LINEAR, so the eye never
       catches an acceleration or a hard edge.
   It REPLACES the dark-red border on these two buttons (their own
   border is made transparent and the snake ring sits in its place).
   Built on ::before, so the button's own transform + box-shadow stay
   free for the hover lift & shadow.
   Colour per button via [data-brand]:
     • Fansly   -> green  (#22C55E)
     • OnlyFans -> cyan   (#00AFF0)
============================================================ */

/* Per-brand colour tokens -------------------------------------------------- */
.link--snake[data-brand="fansly"]   { --snake: 0,175,240; }   /* cyan */
.link--snake[data-brand="onlyfans"] { --snake: 75,135,250; }   /* blue  */

/* Animatable gradient angle so the conic spin is buttery-smooth.
   Browsers without @property still show a static-but-glowing ring. */
@property --snake-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* The two main buttons hand their border over to the snake. */
.link--snake {
  isolation: isolate;
  border-color: transparent;   /* snake ring takes the border's place */
}

/* The snake ring: a conic gradient with ONE long, soft-edged lit arc
   that fades gently in and out (no hard start/stop), masked to just
   the border ring, glowing via drop-shadow. */
.link--snake::before {
  content: "";
  position: absolute;
  inset: -3px;                 /* line up with where the 3px border was */
  border-radius: inherit;
  padding: 3px;                /* ring thickness (matches old border) */
  background: conic-gradient(
      from var(--snake-angle),
      rgba(var(--snake), 0.12)  0deg,
      rgba(var(--snake), 0.12)  120deg,  /* long dim base keeps it "full" */
      rgba(var(--snake), 0.55)  200deg,  /* arc fades up gently ...        */
      rgba(var(--snake), 1)     270deg,  /* ... to a bright crest ...      */
      rgba(var(--snake), 0.55)  340deg,  /* ... and back down gently       */
      rgba(var(--snake), 0.12)  360deg);
  /* show only the ring, not the filled centre */
  -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
          mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  filter: drop-shadow(0 0 4px rgba(var(--snake), 0.55));
  animation: snake-spin 5s linear infinite;   /* slow + constant speed */
  pointer-events: none;
}
.link--snake[data-brand="onlyfans"]::before { animation-delay: 1.2s; } /* trail Fansly */

@keyframes snake-spin {
  to { --snake-angle: 360deg; }
}

/* On hover, settle the snake to a steady full-brightness ring while
   the button lifts (keeps things calm once the user is engaging). */
.link--snake:hover::before { animation-play-state: paused; }

/* ---- SHAKE (Fansly button only) ----
   Fires IMMEDIATELY when the class is applied (the burst sits at the
   very start of the loop), then repeats every cycle. Present and
   noticeable but not frantic. Paused on hover so the lift can happen. */
.link--attention {
  animation: shake 4.5s cubic-bezier(.36,.07,.19,.97) infinite;
  transform-origin: center;
}
.link--attention:hover { animation: none; }

@keyframes shake {
  /* burst happens 0% -> ~14%, so it's visible the instant it starts */
  0%   { transform: translate3d(0,0,0) rotate(0); }
  2%   { transform: translate3d(-3px,0,0) rotate(-2deg); }
  4%   { transform: translate3d(4px,0,0)  rotate(2deg); }
  6%   { transform: translate3d(-4px,0,0) rotate(-2deg); }
  8%   { transform: translate3d(4px,0,0)  rotate(1.6deg); }
  10%  { transform: translate3d(-3px,0,0) rotate(-1.2deg); }
  12%  { transform: translate3d(2px,0,0)  rotate(0.8deg); }
  14%  { transform: translate3d(-1px,0,0) rotate(0); }
  16%, 100% { transform: translate3d(0,0,0) rotate(0); }
}

/* ============================================================
   iOS ESCAPE OVERLAY
============================================================ */
.escape {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(3px);
}
.escape.is-open { display: flex; }
.escape__box {
  max-width: 22rem;
  width: 100%;
  background: #fff;
  border-radius: 22px;
  padding: 1.6rem 1.4rem;
  text-align: center;
  font-family: var(--font-body);
  color: #1a1a1a;
}
.escape__title {
  font-weight: 700;
  font-size: 1.3rem;
  margin-bottom: 0.6rem;
}
.escape__text {
  font-size: 0.98rem;
  line-height: 1.5;
  color: #444;
  margin-bottom: 1rem;
}
.escape__url {
  font-size: 0.85rem;
  word-break: break-all;
  background: #f3f3f3;
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
  color: #333;
  margin-bottom: 1rem;
}
.escape__copy {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  background: #B24660;
  border: none;
  border-radius: 999px;
  padding: 0.7rem 1.8rem;
  cursor: pointer;
}
.escape__copy:active { transform: scale(0.97); }
.escape__close {
  display: block;
  margin: 0.9rem auto 0;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: #888;
  cursor: pointer;
}

/* ============================================================
   SMALL SCREENS
============================================================ */
@media (max-width: 380px) {
  .card { border-radius: 30px; }
  .links { margin-left: 12px; margin-right: 12px; }
}

/* Very short screens (small phones, landscape) — tighten to avoid scroll */
@media (max-height: 680px) {
  body { padding: 6px; }
  /* keep the square framing but cap it harder so buttons stay in view */
  .hero { max-height: min(54vh, 300px); }
  .profile { margin-top: -0.4rem; }
  .links { margin-top: 0.7rem; }
  .link { padding: 0.72rem 1.1rem; }
}