/* Boostonic fx layer: launch intro, interactive project cards, magnetic buttons.
   Loaded in <head> so the intro covers the page from the first paint. */

/* ---------- launch intro ---------- */
.launch-intro { display: none; }
html.intro-pending .launch-intro {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; overflow: hidden;
  background: #0b0e11 radial-gradient(ellipse at 50% 70%, rgba(68,93,255,.22), transparent 60%);
  transition: transform .95s cubic-bezier(.7,0,.2,1);
}
html.intro-pending body { overflow: hidden; }
.launch-intro.out { transform: translateY(-100%); }
.intro-logo { position: absolute; left: var(--gutter, 5vw); top: 34px; width: 132px; height: auto; opacity: .9; }
.intro-rocket {
  position: relative; width: 74px; height: 74px; margin-bottom: 6vh;
  transition: transform .85s cubic-bezier(.55,0,1,.55), opacity .4s ease .5s;
}
.intro-rocket img { display: block; width: 100%; height: 100%; transform: rotate(-45deg); animation: intro-shake .14s linear infinite; filter: drop-shadow(0 0 22px rgba(201,243,29,.55)); }
.intro-rocket::after {
  content: ''; position: absolute; left: 50%; top: 100%; width: 12px; height: 26px; margin-left: -6px; border-radius: 0 0 12px 12px;
  background: linear-gradient(#c9f31d, rgba(201,243,29,0)); filter: blur(1.5px); transform-origin: top; animation: intro-flame .18s ease-in-out infinite alternate;
  transition: height .6s ease, width .6s ease, margin .6s ease;
}
.launch-intro.launch .intro-rocket { transform: translateY(-120vh); opacity: 0; }
.launch-intro.launch .intro-rocket::after { height: 150px; width: 18px; margin-left: -9px; }
@keyframes intro-shake { 0%,100% { translate: 0 0; } 25% { translate: .7px -.6px; } 75% { translate: -.7px .6px; } }
@keyframes intro-flame { from { transform: scaleY(.8); } to { transform: scaleY(1.15); } }
.intro-count {
  position: absolute; left: var(--gutter, 5vw); bottom: 5vh; display: flex; align-items: baseline; gap: 4px;
  color: #f7f9f4; font-size: clamp(64px, 14vw, 190px); font-weight: 600; letter-spacing: -.08em; line-height: .85; font-variant-numeric: tabular-nums;
}
.intro-count small { color: #c9f31d; font-size: .28em; letter-spacing: 0; }
.intro-bar { position: absolute; left: 0; bottom: 0; height: 4px; width: calc(var(--p, 0) * 1%); background: #c9f31d; box-shadow: 0 0 18px rgba(201,243,29,.8); }

/* ---------- project cards: tilt, depth, glare ---------- */
.js-motion .project-grid { perspective: 1400px; }
.js-motion .project-card.visible {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  transform-style: preserve-3d;
  transition: transform .18s ease-out, box-shadow .35s ease, opacity .75s ease, filter .75s ease;
}
.js-motion .project-card.visible:hover { --lift: -6px; }
.js-motion .project-card.visible.is-resting { transition: transform .7s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
.js-motion .project-card .device-stage::after {
  content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.28), transparent 45%);
}
.js-motion .project-card:hover .device-stage::after { opacity: 1; }
.js-motion .project-card .site-screenshot { translate: calc(var(--px, 0) * -14px) calc(var(--py2, 0) * -8px); }
.js-motion .project-card .phone-mock { right: calc(5% - var(--px, 0) * 12px); bottom: calc(9% - var(--py2, 0) * 8px); }

/* ---------- magnetic buttons ---------- */
.is-magnetic { transition: translate .25s cubic-bezier(.2,.8,.2,1), transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease; }
.is-magnetic.is-pulling { transition: translate .08s linear, transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease; }

@media (prefers-reduced-motion: reduce) {
  .launch-intro { display: none !important; }
}