/* ═══════════════════════════════════════════════════════════════════
   PHOENIX HOME PAGE — premium motion layer
   Uses the site's own colours and fonts (style.css variables), light and dark.
   Works with assets/home/home.js; without the script the page looks as before.
═══════════════════════════════════════════════════════════════════ */

/* ── Scroll progress ── */
.hm-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 10002;
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
  background: linear-gradient(90deg, var(--royal), var(--cyan));
  box-shadow: 0 0 12px var(--cyan-glow);
}

/* ── Hero: backdrop ── */
#hero { isolation: isolate; }
#hero::before {
  content: ''; position: absolute; z-index: 0; inset: -25% -10% auto -10%; height: 85%; pointer-events: none;
  background:
    radial-gradient(38% 48% at 28% 32%, rgba(30,90,166,.42), transparent 70%),
    radial-gradient(34% 44% at 76% 22%, rgba(43,176,237,.20), transparent 70%);
  filter: blur(46px); animation: hmDrift 20s ease-in-out infinite alternate; will-change: transform;
}
[data-theme="light"] #hero::before {
  background:
    radial-gradient(38% 48% at 28% 32%, rgba(30,90,166,.20), transparent 70%),
    radial-gradient(34% 44% at 76% 22%, rgba(43,176,237,.18), transparent 70%);
}
@keyframes hmDrift { from { transform: translate3d(-2%, 0, 0) scale(1); } to { transform: translate3d(3%, 4%, 0) scale(1.08); } }
.hero-vanta {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.8s ease;
  /* the network shows at the edges and fades out behind the text and towards the bottom */
  -webkit-mask-image: radial-gradient(ellipse 50% 54% at 50% 46%, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 55%, #000 100%), linear-gradient(to bottom, #000 0%, #000 50%, transparent 94%);
  -webkit-mask-composite: source-in;
          mask-image: radial-gradient(ellipse 50% 54% at 50% 46%, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 55%, #000 100%), linear-gradient(to bottom, #000 0%, #000 50%, transparent 94%);
          mask-composite: intersect;
}
.hero-vanta.on { opacity: .45; }
[data-theme="light"] .hero-vanta.on { opacity: .32; }
#hero .grid-bg { z-index: 0; }
.hero-inner { z-index: 2; }

/* ── Hero: type ── */
.hero-h1 {
  font-size: clamp(2.3rem, 5.2vw, 4.5rem); line-height: 1.04; letter-spacing: -.036em; max-width: 1120px;
  margin-bottom: 1.75rem; text-wrap: balance;
}
.hero-h1 em {
  display: inline-block;
}
[data-theme="light"] .hero-h1 em { background-image: linear-gradient(110deg, var(--royal) 0%, #2a8fd4 40%, var(--royal) 60%, #1b4f94 100%); }
.hero-sub { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); max-width: 640px; }

/* ── Buttons: sheen ── */
.btn { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-120%); pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  transition: transform .9s var(--ease);
}
.btn-primary:hover::after { transform: translateX(120%); }
.btn-primary { box-shadow: 0 8px 30px -8px var(--cyan-glow), 0 0 0 1px rgba(43,176,237,.25) inset; }

/* ── Hero: stats ── */
.hero-stats { border-top-color: transparent; position: relative; }
.hero-stats::before {
  content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan-glow), transparent);
}
.hs-num { font-size: clamp(1.9rem, 3vw, 2.6rem); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* ── Hero: dashboard preview ── */
.hero-screen-wrap { perspective: 1600px; }
.hero-screen-glow { background: radial-gradient(ellipse 58% 50% at 50% 38%, rgba(43,176,237,.20), transparent 72%); inset: 0 -100px -40px; }
[data-theme="light"] .hero-screen-glow { background: radial-gradient(ellipse 58% 50% at 50% 38%, rgba(30,90,166,.14), transparent 72%); }
.hero-screen { transform-origin: 50% 0%; will-change: transform; }
.hero-screen .db-window { box-shadow: 0 0 0 1px rgba(43,176,237,.16), 0 50px 120px -40px rgba(30,90,166,.7); border-radius: 16px; }

/* ── Section rhythm and headings ── */
.sp { padding-top: clamp(4.5rem, 8vw, 7.5rem); padding-bottom: clamp(4.5rem, 8vw, 7.5rem); }
.sh2 { font-size: clamp(1.9rem, 3.7vw, 3.05rem); line-height: 1.06; letter-spacing: -.032em; text-wrap: balance; max-width: 780px !important; }
.section-label { letter-spacing: .14em; }

/* ── Scroll reveals are handed to GSAP (main.js still sets .in, harmless) ── */
.hm-on .reveal, .hm-on .reveal-l { opacity: 1; transform: none; transition: none; }

/* ── Cards: lift, hairline and a light that follows the pointer ── */
.hm-on .svc-card, .hm-on .project-card, .hm-on .testi-card, .hm-on .blog-card, .hm-on .tp-badge {
  transition: transform .5s var(--ease), border-color .35s, box-shadow .5s var(--ease);
}
.hm-on .svc-card:hover, .hm-on .project-card:hover, .hm-on .testi-card:hover, .hm-on .blog-card:hover, .hm-on .tp-badge:hover {
  background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(43,176,237,.11), transparent 62%);
  box-shadow: 0 30px 60px -30px rgba(30,90,166,.55);
}
[data-theme="light"] .hm-on .svc-card:hover, [data-theme="light"] .hm-on .project-card:hover,
[data-theme="light"] .hm-on .testi-card:hover, [data-theme="light"] .hm-on .blog-card:hover, [data-theme="light"] .hm-on .tp-badge:hover {
  background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(30,90,166,.09), transparent 62%);
  box-shadow: 0 30px 60px -34px rgba(12,31,63,.30);
}

/* phones and touch screens: nothing animates on its own and nothing needs a big blurred layer (keeps the mobile speed score) */
@media (max-width: 900px), (pointer: coarse) {
  #hero::before { animation: none; filter: none; will-change: auto; }
  .btn-primary::after { display: none; }
}
@media (max-width: 820px) {
  .hero-h1 { letter-spacing: -.03em; }
}
@media (forced-colors: active) {
  .hero-h1 em { -webkit-text-fill-color: currentColor; background: none; }
  .hm-progress { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #hero::before { animation: none; }
  .hm-progress { display: none; }
}