/* ============================================================
   LINK PINK 🎀 — per-project theme
   Soft candy pink on warm plum-dark. Built on robexia.css —
   we remap the cyan brand tokens to pink so every shared
   primitive (buttons, badges, eyebrow, chrome) turns pink.
   ============================================================ */

:root {
  /* warm plum-dark backgrounds */
  --bg:          #100610;
  --bg-2:        #160a13;
  --surface:     #1d0e19;
  --surface-2:   #261320;
  --surface-3:   #301829;

  /* lines (warm) */
  --line:        rgba(255,180,210,0.09);
  --line-2:      rgba(255,180,210,0.16);
  --line-cyan:   rgba(255,120,185,0.32);   /* = accent line */

  /* warm text */
  --text:        #fdeef6;
  --text-dim:    #cba8bb;
  --text-mute:   #8d6c7e;

  /* PINK brand — remaps the cyan tokens robexia.css references */
  --cyan:        #ff4fa3;
  --cyan-bright: #ffa6d4;
  --cyan-deep:   #b21e69;
  --cyan-ink:    #3a0a23;
  --glow:        rgba(255,79,163,0.45);
  --glow-soft:   rgba(255,79,163,0.16);

  /* keep readable pink names as aliases */
  --pink:        #ff4fa3;
  --pink-bright: #ffa6d4;
  --pink-deep:   #b21e69;

  /* chrome → warm pink-white */
  --chrome-1:    #fff4fa;
  --chrome-2:    #ffc8e4;
  --chrome-3:    #d98ab4;

  /* platform brand colors */
  --c-youtube:    #ff3b4e;
  --c-instagram:  #e84393;
  --c-tiktok:     #25f4ee;
  --c-spotify:    #1ed760;
  --c-soundcloud: #ff7733;
  --c-apple:      #fc5c9c;
  --c-github:     #e8eef5;
  --c-direct:     #ff8fc4;
  --c-telegram:   #4cc3ff;
  --c-bale:       #4dd07a;
  --c-twitter:    #eef3f7;
  --c-torrent:    #54d68a;
  --c-googleplay: #4c8dff;
}

::selection { background: var(--pink); color: #2a0717; }

/* warm scrollbar accent */
::-webkit-scrollbar-thumb:hover { background: var(--pink-deep); }

/* static pink-white chrome — no moving shimmer sweep */
.chrome {
  background-image: linear-gradient(176deg,
    var(--chrome-1) 0%, var(--chrome-2) 48%, var(--chrome-3) 100%);
  background-size: 100% 100% !important;
  background-position: 0 0 !important;
  animation: none !important;
}

/* ============================================================
   shared atmospheric backdrop (both directions)
   ============================================================ */
.bg-layers { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.glow {
  position: absolute; border-radius: 50%;
  filter: blur(86px); opacity: .55; will-change: transform;
}
.glow.g1 { width: 58vw; height: 58vw; top: -16vw; right: -8vw;
  background: radial-gradient(circle, rgba(255,79,163,.34), transparent 64%); animation: drift1 17s ease-in-out infinite; }
.glow.g2 { width: 50vw; height: 50vw; bottom: -12vw; left: -12vw;
  background: radial-gradient(circle, rgba(255,140,196,.24), transparent 64%); animation: drift2 21s ease-in-out infinite; }
.glow.g3 { width: 40vw; height: 40vw; top: 40%; left: 50%;
  background: radial-gradient(circle, rgba(180,90,255,.16), transparent 66%); animation: drift1 24s ease-in-out infinite reverse; }

.grain { position: fixed; inset: -60%; z-index: 70; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .9s steps(2) infinite; will-change: transform; }
@keyframes grain { 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)} }

.vignette { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, transparent 52%, rgba(8,2,6,.72)); }

.scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 90;
  background: linear-gradient(90deg, var(--pink-bright), var(--pink));
  transform-origin: right center; transform: scaleX(0);
  box-shadow: 0 0 14px var(--glow);
}

/* ============================================================
   shared platform chip styling
   ============================================================ */
.pf-ic { display: grid; place-items: center; }
.pf-ic svg { width: 100%; height: 100%; }

/* ============================================================
   usage modes — power-feature cards (shared by both directions)
   ============================================================ */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 880px){ .modes { grid-template-columns: 1fr; max-width: 540px; margin-inline: auto; } }
.mode { position: relative; padding: 30px 28px; border-radius: 22px; overflow: hidden;
  border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface-2), var(--surface));
  transition: border-color .3s, transform .3s, box-shadow .3s; }
.mode:hover { border-color: var(--line-cyan); transform: translateY(-5px); box-shadow: 0 26px 60px -30px var(--glow); }
.mode::before { content:''; position:absolute; inset:0; border-radius:inherit; opacity:0; transition:opacity .4s; pointer-events:none;
  background: radial-gradient(360px circle at 50% -10%, rgba(255,79,163,.12), transparent 60%); }
.mode:hover::before { opacity:1; }
.mode-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.mode .mi { width: 60px; height: 60px; border-radius: 16px; flex:none; display:grid; place-items:center; color: var(--pink-bright);
  background: linear-gradient(160deg, rgba(255,79,163,.16), rgba(255,79,163,.02)); border: 1px solid var(--line-cyan); }
.mode .mi svg { width: 31px; height: 31px; }
.mode .mtag { display:inline-flex; align-items:center; gap:6px; font-family: var(--mono); font-size: 11px; letter-spacing:.03em;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-cyan); color: var(--pink-bright); white-space:nowrap; }
.mode h3 { font-size: 21px; margin-top: 22px; }
.mode p { color: var(--text-dim); font-size: 14.5px; line-height: 1.85; margin-top: 11px; }
.mode-eg { display: inline-block; margin-top: 10px; padding: 8px 12px; border-radius: 10px;
  background: rgba(255,79,163,.08); border: 1px solid var(--line-cyan); color: var(--pink-bright);
  font-size: 12px; direction: ltr; unicode-bidi: isolate; word-break: break-all; line-height: 1.6; }