/*
  Global polish layer (keeps your existing content)
  - Scroll-reveal animations
  - Subtle animated gradients / glass
  - Page fade transitions
  - Cursor glow spotlight
*/

:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.2,.9,.2,1);
  --ring: rgba(255,47,179,.35);
}

/* Better taps + smooth type */
*{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* Subtle animated ambient gradient overlay (works on all pages) */
body::after{
  content:"";
  position:fixed;
  inset:-40vh -25vw;
  pointer-events:none;
  background:
    radial-gradient(1200px 800px at 15% 20%, rgba(255,47,179,.14), transparent 60%),
    radial-gradient(900px 700px at 85% 10%, rgba(176,0,120,.14), transparent 60%),
    radial-gradient(900px 700px at 40% 90%, rgba(255,47,179,.08), transparent 65%);
  filter: blur(18px);
  opacity:.9;
  transform: translate3d(0,0,0);
  animation: ambientFloat 16s var(--ease-out) infinite alternate;
  z-index:-1;
}
@keyframes ambientFloat{
  0%{ transform: translate3d(-1.5%, -1%, 0) scale(1); }
  100%{ transform: translate3d(1.5%, 1%, 0) scale(1.03); }
}

/* Page transitions */
html.is-exiting body{ opacity:0; transform: translateY(6px); }
body{ transition: opacity .28s var(--ease-out), transform .28s var(--ease-out); }

/* Scroll reveal */
.reveal{
  opacity:0;
  transform: translateY(18px) scale(.99);
  filter: blur(6px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), filter .7s var(--ease-out);
  will-change: opacity, transform, filter;
}
.reveal.in-view{
  opacity:1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
.reveal.delay-1{ transition-delay: .06s; }
.reveal.delay-2{ transition-delay: .12s; }
.reveal.delay-3{ transition-delay: .18s; }

/* Rich hover / focus ring */
a, button{ outline:none; }
a:focus-visible, button:focus-visible{
  box-shadow: 0 0 0 4px var(--ring);
  border-radius: 14px;
}

/* Cursor glow */
.cursor-glow{
  position:fixed;
  left:0; top:0;
  width:520px; height:520px;
  margin:-260px 0 0 -260px;
  pointer-events:none;
  background: radial-gradient(circle at center, rgba(255,47,179,.18), transparent 60%);
  filter: blur(10px);
  opacity:.9;
  transform: translate3d(-9999px,-9999px,0);
  z-index:0;
  transition: opacity .2s var(--ease-out);
}
@media (hover:none){
  .cursor-glow{ display:none; }
}

/* Micro-interactions */
.lift{ transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out); }
.lift:hover{ transform: translateY(-4px); }

/* Subtle glossy shine on interactive pills/cards */
.lift{ position:relative; }
.lift::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.12) 20%, transparent 40%);
  transform: translateX(-120%);
  opacity:.0;
  pointer-events:none;
}
.lift:hover::after{
  opacity:.9;
  animation: shine 900ms var(--ease-out) 1;
}
@keyframes shine{
  0%{ transform: translateX(-120%); }
  100%{ transform: translateX(120%); }
}

/* Nicer selection color */
::selection{ background: rgba(255,47,179,.32); }

/* Nav scrim (works with your existing menu toggle) */
.nav-scrim{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  /* IMPORTANT:
     Full-screen backdrop-filter can be buggy in some browsers
     ("ghost" blur that remains after closing the menu).
     We intentionally DO NOT apply any backdrop-filter here.
  */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  opacity:0;
  pointer-events:none;
  visibility:hidden;
  transition: opacity .35s var(--ease-out);
  z-index:48;
}
html.nav-open .nav-scrim{
  opacity:1;
  pointer-events:auto;
  visibility:visible;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Tiny depth when nav is open */
/* Reduce jank on some pages by not scaling the entire body when the nav opens */
html.nav-open body{ transform: none; }

/* -------------------------------
   Competitive analysis tables (review sub-pages)
   Fixes messy grid / awkward spacing
--------------------------------- */

/* Force the competitive grid to behave consistently */
.grid-5-3 {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: start !important;
}

/* Make each cell look like a clean card */
.grid-5-3 > .div-grid {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 22px;
  padding: 18px 18px 16px;
}

/* Make Strengths + Weaknesses headers span full width */
.grid-5-3 > .div-grid:nth-child(1),
.grid-5-3 > .div-grid:nth-child(6) {
  grid-column: 1 / -1;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.035);
}

/* Make lists tidy (prevents weird “skinny column” overflow look) */
.grid-5-3 ul {
  margin: 0;
  padding-left: 18px;
  column-count: 1 !important; /* stops broken multi-column layout */
}

/* Responsive */
@media (max-width: 1100px) {
  .grid-5-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .grid-5-3 > .div-grid:nth-child(1),
  .grid-5-3 > .div-grid:nth-child(6) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .grid-5-3 {
    grid-template-columns: 1fr !important;
  }
}