/* Homepage-only layer on top of the site-wide retro CRT theme in /styles.css. */

/* Hero: a CRT screen showing the 3D scene */
.hero{
  position:relative;isolation:isolate;overflow:hidden;min-height:min(100svh,60rem);display:flex;align-items:center;
  padding:6.5rem 0 5.5rem;
  background:
    radial-gradient(ellipse 60% 40% at 50% 100%,hsl(var(--t-accent) / .5),transparent 70%),
    linear-gradient(180deg,hsl(var(--t-sky-top)),hsl(var(--t-sky-mid)) 70%,hsl(var(--t-sky-horizon)));
  box-shadow:inset 0 0 140px hsl(var(--t-shade) / .85);
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:radial-gradient(hsl(var(--t-ink)) 1px,transparent 1.7px);background-size:6px 6px;
}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;z-index:1;background:var(--t-stripes)}
.hero-canvas{position:absolute;inset:0;z-index:-2;pointer-events:none;display:block}
.hero .wrap{width:100%;position:relative}
.hero-inner{position:relative;z-index:1}
.hero-inner::before{
  content:"";position:absolute;inset:-3rem -2rem;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,hsl(var(--t-shade) / .72),hsl(var(--t-shade) / .4) 55%,transparent 75%);
}
.hero .eyebrow{margin-bottom:1.6rem}
.hero h1{
  font-size:clamp(2.6rem,7.4vw,5.6rem);line-height:1.02;
  text-shadow:4px 4px 0 hsl(var(--t-accent)),8px 8px 0 hsl(var(--t-ink));
  animation:crt-glitch 6s steps(1,end) infinite;
}
.hero-lead{font-size:1.15rem;color:hsl(var(--t-fg) / .88);max-width:660px}

/* Stat panels: tilted stickers */
.stat-row{border-top:0;padding-top:0;gap:1.2rem;margin-top:.5rem;counter-reset:stat}
.stat-row li{
  position:relative;min-width:13rem;padding:1.2rem 1.5rem 1.1rem;text-align:center;counter-increment:stat;
  background:hsl(var(--t-surface) / .92);border:var(--t-stroke) solid hsl(var(--t-outline));border-radius:var(--t-radius);
  box-shadow:5px 5px 0 hsl(var(--t-primary));transition:transform .15s ease,box-shadow .15s ease;
}
.stat-row li:nth-child(odd){transform:rotate(-1.6deg)}
.stat-row li:nth-child(even){transform:rotate(1.4deg);box-shadow:5px 5px 0 hsl(var(--t-info))}
.stat-row li::before{
  content:"0" counter(stat);position:absolute;top:-.8rem;left:.9rem;font-family:var(--mono);font-weight:700;font-size:.7rem;letter-spacing:.14em;
  background:hsl(var(--t-warn));color:hsl(var(--t-ink));border:2px solid hsl(var(--t-outline));border-radius:6px;padding:.05rem .45rem;
}
.stat-row li:hover{transform:rotate(0) translate(-2px,-2px);box-shadow:8px 8px 0 hsl(var(--t-accent));animation:crt-pop .3s ease-out}
.stat-row strong{font-family:var(--display);font-weight:400;font-size:1.45rem;letter-spacing:.03em;color:hsl(var(--t-warn));text-shadow:2px 2px 0 hsl(var(--t-ink))}
.stat-row span{font-size:.82rem}

/* Services: bento */
@media (min-width:981px){
  #services .grid-4 > :nth-child(1),
  #services .grid-4 > :nth-child(2),
  #services .grid-4 > :nth-child(7),
  #services .grid-4 > :nth-child(8){grid-column:span 2}
  #services .grid-4 > :nth-child(-n+2) .card{padding:2.2rem}
  #services .grid-4 > :nth-child(-n+2) .card h3{font-size:1.5rem}
}
.service-card-link .card h3::after{content:" ►";opacity:0;transition:opacity .2s ease;color:hsl(var(--t-accent))}
.service-card-link:hover .card h3::after{opacity:1}

/* Tech marquee (home-fx.js clones the chips for a seamless loop) */
.tech-row.is-marquee{
  flex-wrap:nowrap;overflow:hidden;gap:0;padding:.6rem 0 .9rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.tech-track{display:flex;gap:1rem;padding-right:1rem;flex:none;animation:fx-marquee 40s linear infinite}
.tech-row.is-marquee:hover .tech-track{animation-play-state:paused}
.tech-row.is-marquee span{white-space:nowrap}
@keyframes fx-marquee{to{transform:translateX(-100%)}}

/* Scroll reveal: only hidden while JS runs, so the page reads fine without it */
.fx-js .reveal{opacity:0;transform:translateY(1.6rem);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.fx-js .reveal.in{opacity:1;transform:none}
.fx-js .stat-row li.reveal.in:nth-child(odd){transform:rotate(-1.6deg)}
.fx-js .stat-row li.reveal.in:nth-child(even){transform:rotate(1.4deg)}

@media (max-width:700px){
  .hero{padding:5rem 0 3.5rem;min-height:auto}
  .stat-row li{min-width:100%}
}
@media (prefers-reduced-motion:reduce){
  .fx-js .reveal{opacity:1}
  .tech-row.is-marquee{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none}
}