/* ============================================================
 * CUTTLY AURORA · enhance layer (optional "wow")
 * ------------------------------------------------------------
 * Layers Aurora visual effects (glassmorphism, glow, animated
 * gradients, hero sheen, aurora blob backdrop) on top of your
 * EXISTING markup — uses real cutt.ly class names from style.css
 * so no DOM changes are required.
 *
 * USAGE
 * -----
 *   <link rel="stylesheet" href="/css/style.css">
 *   <link rel="stylesheet" href="/css/cuttly-aurora-tokens.css">
 *   <link rel="stylesheet" href="/css/cuttly-aurora-enhance.css">
 *
 * If anything in this file fights with your existing rules,
 * comment out the offending block — nothing here is structural.
 *
 * Sections:
 *   §1  Type — sharper display headings, balanced wrapping
 *   §2  Navbar — frosted glass + sharper logo opacity
 *   §3  Hero — aurora-blob backdrop + sheen animation
 *   §4  Shortener input — luminous, glow on focus
 *   §5  CTA buttons — gradient, glow shadow, hover lift
 *   §6  Cards (.url_options, .grid_item, .cutt_card_item)
 *   §7  Pricing cards
 *   §8  FAQ, SMS bubbles, link-in-bio polish
 *   §9  Footer subtleties
 *   §10 Keyframes + reduced-motion
 * ============================================================ */


/* ─── §1 · Type ─────────────────────────────────────────────── */

body                  { font-feature-settings: "ss01","cv11","liga"; }
h1, h2, h3, .h1, .h2, .h2_index_2, .h1_of {
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.h1, .dv_main h1     { letter-spacing: -0.035em; line-height: 1.02; }
.h2_index            { letter-spacing: 0; }

/* Hero sheen — animated colour-bleed on the main headline.
 * Works because .dv_main h1 is the hero h1 (style.css L≈45).      */
.is_index_lout .dv_main h1 {
  background: linear-gradient(90deg,
    var(--col_txt) 0%,
    var(--col_cyan) 30%,
    var(--col_main) 55%,
    var(--col_lime) 78%,
    var(--col_txt) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent !important;
  text-shadow: none !important;
  animation: aurora-sheen 10s linear infinite;
}


/* ─── §2 · Navbar — frosted ─────────────────────────────────── */

.navbar-cuttly {
  background: var(--col_nav_bg) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--col_border);
  transition: background 0.3s linear, backdrop-filter 0.3s linear;
}
.head_grey .navbar-cuttly { background: var(--col_nav_bg) !important; }


/* ─── §3 · Hero — aurora blob backdrop ──────────────────────── */
/* Painted on the dark hero (.bg_cuttly_main) and the lighter
 * (.top_h_2_c). Pure CSS, no extra markup needed. */

.bg_cuttly_main,
.top_h_2_c,
.short_cuttly,
.top_shorten {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.bg_cuttly_main::before,
.top_h_2_c::before,
.short_cuttly::before,
.top_shorten::before {
  content: "";
  position: absolute; inset: -10%;
  pointer-events: none;
  background:
    radial-gradient(40% 35% at 12% 18%, var(--col_main)  0%, transparent 60%),
    radial-gradient(38% 32% at 88% 22%, var(--col_cyan)  0%, transparent 60%),
    radial-gradient(50% 35% at 50% 95%, var(--col_pink)  0%, transparent 60%);
  filter: blur(70px);
  opacity: var(--col_blob_1);
  z-index: 0;
  animation: aurora-drift 26s ease-in-out infinite;
}
.bg_cuttly_main > *,
.top_h_2_c > *,
.short_cuttly > *,
.top_shorten > * { position: relative; z-index: 1; }

/* Optional grain overlay on the dark hero only */
.bg_cuttly_main::after,
.short_cuttly::after,
.top_shorten::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: var(--col_noise_blend);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  z-index: 0;
}
:root .bg_cuttly_main::after,
:root .short_cuttly::after,
:root .top_shorten::after { display: none; }


/* ─── §4 · Shortener input — luminous ───────────────────────── */

.cutt_main_inp input,
.bor_der_c {
  background: var(--col_white) !important;
  border: 1px solid var(--col_border) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 20px 60px -20px rgba(30,90,249,0.30);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.cutt_main_inp input:hover,
.cutt_main_inp input:focus {
  border-color: var(--col_main) !important;
  box-shadow:
    0 0 0 4px color-mix(in oklab, var(--col_main) 18%, transparent),
    0 20px 60px -18px rgba(30,90,249,0.45);
  transform: translateY(-1px);
}

/* The green "Shorten" button sitting inside the input */
.btn_cutt {
  background: linear-gradient(180deg, var(--col_lime), var(--col_green_dark)) !important;
  color: var(--col_txt) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.04) inset,
    0 8px 24px -8px rgba(201,255,58,0.6);
  transition: transform .15s, box-shadow .2s;
}
.btn_cutt:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.05) inset,
    0 12px 32px -8px rgba(201,255,58,0.75);
}


/* ─── §5 · Primary CTA — .cutt_link / .page_cuttly a ────────── */

.cutt_link,
.page_cuttly a,
.team_list input[type="submit"] {
  background: linear-gradient(180deg, var(--col_blue_glow) 0%, var(--col_main) 100%) !important;
  background-size: 100% 100% !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  box-shadow:
    0 0 0 1px rgba(110,164,255,0.4) inset,
    0 14px 38px -10px rgba(30,90,249,0.55),
    0 2px 0 rgba(255,255,255,0.15) inset;
  transition: transform .15s, box-shadow .2s, background .2s !important;
}
.cutt_link:hover,
.page_cuttly a:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(110,164,255,0.6) inset,
    0 18px 50px -10px rgba(30,90,249,0.75),
    0 2px 0 rgba(255,255,255,0.2) inset;
}

/* Green variant CTA (.cutt_l_green) */
.cutt_link.cutt_l_green {
  background: linear-gradient(180deg, var(--col_lime) 0%, var(--col_green_dark) 100%) !important;
  color: var(--col_txt) !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.04) inset,
    0 12px 32px -10px rgba(201,255,58,0.55);
}

/* Ghost / outline variants (.buy_subs, a.main_ahref, a.green_ahref) */
.buy_subs {
  background: var(--col_white) !important;
  border: 1px solid var(--col_main) !important;
  color: var(--col_main) !important;
  border-radius: 999px !important;
  transition: background .15s, color .15s, transform .15s;
}
.buy_subs:hover {
  background: linear-gradient(180deg, var(--col_blue_glow), var(--col_main)) !important;
  color: var(--col_white) !important;
  transform: translateY(-1px);
}


/* ─── §6 · Cards — .url_options / .grid_item / .cutt_card_item  */

.url_options {
  background: var(--col_glass_grad) !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--col_glass_edge) !important;
  border-radius: 16px !important;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.url_options:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--col_main) 35%, var(--col_glass_edge));
  box-shadow: 0 22px 48px -22px rgba(30,90,249,0.30);
}

.grid_item {
  background: var(--col_glass_grad) !important;
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  border: 1px solid var(--col_glass_edge) !important;
  border-radius: 16px !important;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.grid_item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--col_main) 35%, var(--col_glass_edge)) !important;
  box-shadow:
    var(--col_main) 0 0 0 1px inset,
    0 22px 48px -22px rgba(30,90,249,0.30) !important;
}
.grid_item .figure {
  background: linear-gradient(135deg, var(--col_lime), var(--col_green_dark)) !important;
  box-shadow: 0 8px 22px -8px rgba(201,255,58,0.55);
}

.cutt_card_cuttly .cutt_card_item {
  border: 1px solid var(--col_glass_edge) !important;
  border-radius: 16px !important;
  background: var(--col_glass_grad) !important;
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  transition: transform .25s ease-out, box-shadow .25s, border-color .25s;
}
.cutt_card_cuttly .cutt_card_item:hover {
  transform: translateY(-3px) scale(1.005);
  border-color: color-mix(in oklab, var(--col_main) 40%, var(--col_glass_edge)) !important;
  box-shadow: 0 30px 60px -25px rgba(30,90,249,0.35);
}

/* AI Hub grid (.cont_ai .box) */
.cont_ai .box {
  background: var(--col_glass_grad) !important;
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  border: 1px solid var(--col_glass_edge);
  transition: transform .2s, box-shadow .25s, border-color .25s;
}
.cont_ai .box:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--col_main) 35%, var(--col_glass_edge));
  box-shadow:
    0 0 0 1px rgba(14,63,126,0.05),
    0 22px 48px -22px rgba(30,90,249,0.35) !important;
}


/* ─── §7 · Pricing — punch ──────────────────────────────────── */

.pricing-table .buy_subs { box-shadow: 0 14px 38px -16px rgba(30,90,249,0.40); }

.pricing-table { position: relative; }
.pricing-table.popular,
.pricing-table[data-popular="true"],
.pricing-table.is-popular {
  outline: 1px solid color-mix(in oklab, var(--col_main) 35%, transparent);
  box-shadow: 0 30px 80px -30px rgba(30,90,249,0.45);
}


/* ─── §8 · FAQ + SMS bubbles + Link-in-bio ──────────────────── */

.faq > ul > li {
  background: var(--col_glass_grad) !important;
  border: 1px solid var(--col_glass_edge);
  border-radius: 14px;
  margin-bottom: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color .2s;
}
.faq > ul > li.is-active {
  border-color: color-mix(in oklab, var(--col_main) 40%, var(--col_glass_edge));
}

.sms li.in {
  background: var(--col_glass_grad) !important;
  border: 1px solid var(--col_glass_edge);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 16px -8px rgba(10,14,35,0.20);
}
.sms li.out {
  background: linear-gradient(180deg, var(--col_blue_glow), var(--col_main)) !important;
  box-shadow: 0 8px 22px -8px rgba(30,90,249,0.55);
}

.phone-screen.link-in-bio_bg .lib-link {
  background: var(--col_glass_grad) !important;
  border-color: var(--col_glass_edge) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}


/* ─── §9 · Footer + misc ────────────────────────────────────── */

footer, .site-footer { border-top: 1px solid var(--col_border); }

::selection { background: color-mix(in oklab, var(--col_main) 25%, transparent); }

/* Custom scrollbar a touch more refined */
::-webkit-scrollbar-thumb:vertical,
::-webkit-scrollbar-thumb:horizontal {
  background-color: color-mix(in oklab, var(--col_grey) 80%, transparent);
}


/* ─── §10 · Keyframes + reduced-motion ──────────────────────── */

@keyframes aurora-sheen {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes aurora-drift {
  0%   { transform: translate3d(-3%, -2%, 0) rotate(0deg); }
  50%  { transform: translate3d( 3%,  3%, 0) rotate(6deg); }
  100% { transform: translate3d(-3%, -2%, 0) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .is_index_lout .dv_main h1,
  .bg_cuttly_main::before,
  .top_h_2_c::before,
  .short_cuttly::before,
  .top_shorten::before { animation: none !important; }
}