/*
 * LittleLink — Gen-Z Premium UI Upgrade
 * 2026 Creator / Link-in-bio aesthetic
 * Keeps existing LittleLink class names
 */

/* =========================================================
   DESIGN TOKENS
   ========================================================= */

:root {
  font-size: 16px;

  --scale-0: 1rem;
  --scale-1: 1.125rem;
  --scale-2: 1.5rem;
  --scale-3: 2rem;
  --scale-4: 2.75rem;
  --scale-5: clamp(2.5rem, 8vw, 4.25rem);

  --spacing-xs: 0.5rem;
  --spacing-s: 0.875rem;
  --spacing-m: 1.25rem;
  --spacing-l: 1.75rem;
  --spacing-xl: 3rem;
  --spacing-xxl: 5rem;

  --bg: #f7f7f8;
  --text: #111111;
  --muted: #707070;

  --card-bg: rgba(255, 255, 255, 0.78);
  --card-border: rgba(0, 0, 0, 0.07);

  --accent: #7c3cff;
  --accent-2: #ff3cac;

  --shadow:
    0 10px 30px rgba(0, 0, 0, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.04);

  --shadow-hover:
    0 18px 45px rgba(0, 0, 0, 0.12),
    0 5px 15px rgba(0, 0, 0, 0.06);

  --radius: 1.25rem;
  --pill: 999px;
}


/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;

  background:
    radial-gradient(
      circle at 15% 10%,
      rgba(124, 60, 255, 0.08),
      transparent 28%
    ),
    radial-gradient(
      circle at 85% 20%,
      rgba(255, 60, 172, 0.07),
      transparent 25%
    ),
    var(--bg);

  color: var(--text);

  font-family:
    "Open Sans",
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-weight: 400;
  line-height: 1.5;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  overflow-x: hidden;
}


/* =========================================================
   AMBIENT BACKGROUND
   ========================================================= */

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;

  width: 22rem;
  height: 22rem;

  border-radius: 50%;

  filter: blur(80px);

  opacity: 0.18;

  animation: ambientFloat 12s ease-in-out infinite alternate;
}

body::before {
  top: -8rem;
  left: -8rem;

  background: #7c3cff;
}

body::after {
  right: -8rem;
  bottom: -8rem;

  background: #ff3cac;

  animation-delay: -5s;
}

@keyframes ambientFloat {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(30px, 20px, 0) scale(1.15);
  }
}


/* =========================================================
   CONTAINERS
   ========================================================= */

.container {
  position: relative;

  width: 100%;
  max-width: 40rem;

  margin: 0 auto;

  padding:
    clamp(2rem, 6vw, 4rem)
    clamp(1rem, 4vw, 1.5rem)
    1rem;

  text-align: center;
}

.container-left {
  position: relative;

  width: 100%;
  max-width: 40rem;

  margin: 0 auto;

  padding:
    0
    clamp(1rem, 4vw, 1.5rem);

  box-sizing: border-box;
}

.container-left p {
  margin-bottom: 1rem;
}

.column {
  width: 100%;
}


/* =========================================================
   PROFILE / AVATAR
   ========================================================= */

.avatar {
  position: relative;

  width: clamp(5.75rem, 24vw, 8rem);
  height: clamp(5.75rem, 24vw, 8rem);

  margin:
    0 auto
    clamp(1.25rem, 4vw, 1.75rem);

  display: block;

  object-fit: cover;
  object-position: center;

  border-radius: 50%;

  background: #fff;

  border: 4px solid rgba(255, 255, 255, 0.9);

  box-shadow:
    0 0 0 2px rgba(124, 60, 255, 0.15),
    0 12px 35px rgba(0, 0, 0, 0.12);

  transition:
    transform 0.45s cubic-bezier(.2,.8,.2,1),
    box-shadow 0.45s ease;
}

.avatar:hover {
  transform: translateY(-5px) scale(1.035);

  box-shadow:
    0 0 0 4px rgba(124, 60, 255, 0.12),
    0 20px 50px rgba(0, 0, 0, 0.16);
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

h1 {
  margin:
    0
    0
    0.75rem;

  font-size: var(--scale-5);

  font-weight: 800;

  line-height: 0.98;

  letter-spacing: -0.055em;

  word-wrap: break-word;
  overflow-wrap: break-word;

  color: var(--text);
}

.container > p {
  max-width: 34rem;

  margin:
    0
    auto
    2rem;

  color: var(--muted);

  font-size:
    clamp(0.95rem, 2.5vw, 1.1rem);

  line-height: 1.55;
}


/* =========================================================
   LINKS
   ========================================================= */

a {
  color: var(--accent);

  text-decoration: none;

  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}

a:hover {
  color: #5b21d4;
}


/* =========================================================
   PREMIUM LINK BUTTONS
   ========================================================= */

.button,
button {
  position: relative;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 100%;

  min-height: 4rem;

  margin:
    0
    0
    0.85rem;

  padding:
    1rem
    1.25rem;

  border:
    1px solid var(
      --button-border,
      rgba(0, 0, 0, 0.07)
    );

  border-radius: var(
    --button-radius,
    var(--radius)
  );

  background:
    var(
      --button-background,
      var(--card-bg)
    );

  color:
    var(
      --button-text,
      #111
    );

  box-shadow:
    var(--shadow);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  font-family: inherit;

  font-size:
    clamp(0.95rem, 2.5vw, 1.05rem);

  font-weight: 700;

  letter-spacing: -0.015em;

  line-height: 1.25;

  text-align: center;

  cursor: pointer;

  overflow: hidden;

  transform: translateY(0);

  transition:
    transform 0.3s cubic-bezier(.2,.8,.2,1),
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease;
}


/* Shine */

.button::before,
button::before {
  content: "";

  position: absolute;

  top: 0;
  left: -120%;

  width: 70%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0.25),
      transparent
    );

  transform: skewX(-20deg);

  transition: left 0.65s ease;

  pointer-events: none;
}


/* Hover */

.button:hover,
button:hover {
  color: var(--button-text, #111);

  transform:
    translateY(-4px)
    scale(1.01);

  box-shadow:
    var(--shadow-hover);

  border-color:
    rgba(124, 60, 255, 0.18);
}

.button:hover::before,
button:hover::before {
  left: 140%;
}


/* Active */

.button:active,
button:active {
  transform:
    translateY(-1px)
    scale(0.985);

  transition-duration: 0.08s;
}


/* =========================================================
   BUTTON ICONS
   ========================================================= */

.icon {
  width: 1.3rem;
  height: 1.3rem;

  margin-right: 0.65rem;

  flex-shrink: 0;

  transition:
    transform 0.3s cubic-bezier(.2,.8,.2,1);
}

.button:hover .icon,
button:hover .icon {
  transform: scale(1.12) rotate(-3deg);
}


/* =========================================================
   BUTTON VARIANTS
   ========================================================= */

.button-primary {
  background:
    linear-gradient(
      135deg,
      #7c3cff,
      #a855f7 55%,
      #ff3cac
    );

  color: #fff;

  border-color: transparent;

  box-shadow:
    0 12px 30px rgba(124, 60, 255, 0.25);
}

.button-primary:hover {
  color: #fff;

  box-shadow:
    0 18px 45px rgba(124, 60, 255, 0.32);
}


/* =========================================================
   FOCUS STATES
   ========================================================= */

:focus-visible {
  outline: 3px solid rgba(124, 60, 255, 0.5);

  outline-offset: 4px;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer {
  margin:
    3.5rem
    0
    2rem;

  color: var(--muted);

  font-size: 0.8rem;

  letter-spacing: 0.01em;
}

footer a {
  color: inherit;

  opacity: 0.7;

  transition: opacity 0.2s ease;
}

footer a:hover {
  opacity: 1;
}


/* =========================================================
   PRIVACY / CONTENT PAGES
   ========================================================= */

.container-left nav {
  margin: var(--spacing-l) 0;

  text-align: left;
}

section {
  margin: var(--spacing-xl) 0;

  text-align: left;
}

h2 {
  margin:
    0
    0
    var(--spacing-m);

  font-size: var(--scale-3);

  font-weight: 800;

  line-height: 1.1;

  letter-spacing: -0.035em;
}

h3 {
  margin:
    var(--spacing-l)
    0
    var(--spacing-s);

  font-size: var(--scale-2);

  font-weight: 700;

  letter-spacing: -0.025em;
}

ul {
  list-style: none;

  padding: 0;

  margin:
    0
    0
    var(--spacing-m);
}

ul li {
  margin-bottom: var(--spacing-xs);
}


/* =========================================================
   AVATAR MODIFIERS
   ========================================================= */

.avatar--none {
  border-radius: 0;

  box-shadow: none;
}

.avatar--rounded {
  border-radius: 50%;
}

.avatar--soft {
  border-radius: 1rem;
}


/* =========================================================
   DARK THEME
   ========================================================= */

:root.theme-dark {
  color-scheme: dark;

  --bg: #08080b;

  --text: #ffffff;

  --muted: #a3a3aa;

  --card-bg:
    rgba(24, 24, 29, 0.68);

  --card-border:
    rgba(255, 255, 255, 0.08);

  --shadow:
    0 12px 35px rgba(0, 0, 0, 0.35);

  --shadow-hover:
    0 20px 55px rgba(0, 0, 0, 0.5);
}

:root.theme-dark body {
  background:
    radial-gradient(
      circle at 10% 5%,
      rgba(124, 60, 255, 0.16),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 15%,
      rgba(255, 60, 172, 0.12),
      transparent 28%
    ),
    #08080b;
}

:root.theme-dark .avatar {
  border-color:
    rgba(255, 255, 255, 0.12);

  box-shadow:
    0 0 0 2px rgba(124, 60, 255, 0.2),
    0 15px 45px rgba(0, 0, 0, 0.45);
}

:root.theme-dark .button,
:root.theme-dark button {
  border-color:
    rgba(255, 255, 255, 0.08);

  color:
    var(--button-text, #fff);
}

:root.theme-dark .button:hover,
:root.theme-dark button:hover {
  color:
    var(--button-text, #fff);

  border-color:
    rgba(255, 255, 255, 0.16);
}

:root.theme-dark a:not(.button) {
  color: #a78bfa;
}

:root.theme-dark a:not(.button):hover {
  color: #c4b5fd;
}


/* =========================================================
   AUTO THEME
   ========================================================= */

:root.theme-auto {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root.theme-auto {
    --bg: #08080b;
    --text: #ffffff;
    --muted: #a3a3aa;

    --card-bg:
      rgba(24, 24, 29, 0.68);

    --card-border:
      rgba(255, 255, 255, 0.08);

    --shadow:
      0 12px 35px rgba(0, 0, 0, 0.35);

    --shadow-hover:
      0 20px 55px rgba(0, 0, 0, 0.5);
  }

  :root.theme-auto body {
    background:
      radial-gradient(
        circle at 10% 5%,
        rgba(124, 60, 255, 0.16),
        transparent 30%
      ),
      radial-gradient(
        circle at 90% 15%,
        rgba(255, 60, 172, 0.12),
        transparent 28%
      ),
      #08080b;
  }

  :root.theme-auto .button,
  :root.theme-auto button {
    border-color:
      rgba(255, 255, 255, 0.08);

    color:
      var(--button-text, #fff);
  }

  :root.theme-auto .button:hover,
  :root.theme-auto button:hover {
    color:
      var(--button-text, #fff);
  }

  :root.theme-auto a:not(.button) {
    color: #a78bfa;
  }

  :root.theme-auto a:not(.button):hover {
    color: #c4b5fd;
  }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (min-width: 25rem) {
  .container {
    width: 92%;
  }
}

@media (min-width: 34.375rem) {
  .container {
    width: 88%;
  }
}

@media (max-width: 34.375rem) {

  .container {
    padding-top: 2rem;
  }

  h1 {
    font-size:
      clamp(2.25rem, 12vw, 3rem);

    letter-spacing: -0.06em;
  }

  .container > p {
    margin-bottom: 1.5rem;
  }

  .button,
  button {
    min-height: 3.75rem;

    padding:
      0.9rem
      1rem;

    border-radius: 1.05rem;
  }

  footer {
    margin:
      2.5rem
      0
      1.5rem;
  }

  h2 {
    font-size: var(--scale-2);
  }

  h3 {
    font-size: var(--scale-1);
  }

  section {
    margin: var(--spacing-l) 0;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* =========================================================
   FONT FACE
   ========================================================= */

@font-face {
  font-display: swap;

  font-family: "Open Sans";

  font-style: normal;

  font-weight: 400;

  src:
    url("../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff2")
    format("woff2");
}

@font-face {
  font-display: swap;

  font-family: "Open Sans";

  font-style: normal;

  font-weight: 600;

  src:
    url("../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.woff2")
    format("woff2");
}

@font-face {
  font-display: swap;

  font-family: "Open Sans";

  font-style: normal;

  font-weight: 700;

  src:
    url("../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.woff2")
    format("woff2");
}

@font-face {
  font-display: swap;

  font-family: "Open Sans";

  font-style: normal;

  font-weight: 800;

  src:
    url("../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_greek_cyrillic-800.woff2")
    format("woff2");
}