/* ==========================================================================
   effects.css — motion & surface effects
   Ported to dependency-free CSS/JS from the React + Motion patterns on
   21st.dev (Aceternity UI, Magic UI, Motion Primitives).
   Every effect degrades to static under prefers-reduced-motion.
   ========================================================================== */

@property --beam-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@property --sheen { syntax: '<percentage>'; initial-value: -60%; inherits: false; }

/* ---------------------------------------------------------------
   1. SCROLL PROGRESS BAR
   --------------------------------------------------------------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 120;
  width: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hi), var(--accent));
  will-change: transform; pointer-events: none;
}

/* ---------------------------------------------------------------
   2. AURORA — drifting colour fields behind the hero
   (Aceternity "Aurora Background" / "Background Gradient Animation")
   --------------------------------------------------------------- */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.aurora span {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(100px); opacity: .2; mix-blend-mode: screen;
  will-change: transform;
}
.aurora span:nth-child(1) {
  width: 46vw; height: 46vw; left: -8vw; top: -12vw;
  background: radial-gradient(circle, #EA0303 0%, transparent 68%);
  animation: aurora-a 22s ease-in-out infinite alternate;
}
.aurora span:nth-child(2) {
  width: 40vw; height: 40vw; right: -6vw; top: 8vh;
  background: radial-gradient(circle, #8E1D4A 0%, transparent 68%);
  animation: aurora-b 27s ease-in-out infinite alternate;
  opacity: .16;
}
.aurora span:nth-child(3) {
  width: 52vw; height: 52vw; left: 24vw; bottom: -26vw;
  background: radial-gradient(circle, #FF7A8F 0%, transparent 70%);
  animation: aurora-c 19s ease-in-out infinite alternate;
  opacity: .12;
}
@keyframes aurora-a { to { transform: translate3d(14vw, 8vh, 0) scale(1.25); } }
@keyframes aurora-b { to { transform: translate3d(-12vw, 14vh, 0) scale(1.15); } }
@keyframes aurora-c { to { transform: translate3d(8vw, -12vh, 0) scale(.85); } }

/* ---------------------------------------------------------------
   3. SPOTLIGHT — cursor-tracked glow (Aceternity "Spotlight")
   --------------------------------------------------------------- */
.spotlight-host { position: relative; }
.spotlight-host .spotlight {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0; transition: opacity .45s var(--ease);
  background: radial-gradient(
    520px circle at var(--mx, 50%) var(--my, 40%),
    rgba(234, 3, 3, .18), transparent 60%);
}
.spotlight-host:hover .spotlight { opacity: 1; }

/* ---------------------------------------------------------------
   4. CARD SPOTLIGHT + hover lift (Aceternity "Card Spotlight")
   --------------------------------------------------------------- */
.card { position: relative; }
.card::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit; opacity: 0; transition: opacity .35s var(--ease);
  background: radial-gradient(
    360px circle at var(--mx, 50%) var(--my, 50%),
    rgba(234, 3, 3, .14), transparent 62%);
}
.card:hover::before { opacity: 1; }
.card {
  transition: border-color .25s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.card:hover { transform: translateY(-4px); }
.svc__body, .svc__media { position: relative; z-index: 2; }

/* ---------------------------------------------------------------
   5. BORDER BEAM — light travelling the border (Magic UI "Border Beam")
   --------------------------------------------------------------- */
.beam { position: relative; isolation: isolate; }
.beam::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--beam-angle) at 50% 50%,
    transparent 0deg, transparent 250deg,
    var(--accent) 320deg, var(--brand) 350deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: beam-spin 6s linear infinite;
}
.beam--slow::after { animation-duration: 11s; }
@keyframes beam-spin { to { --beam-angle: 360deg; } }

/* ---------------------------------------------------------------
   6. SHIMMER BUTTON (21st.dev "Shimmer Button")
   --------------------------------------------------------------- */
.btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg,
    transparent 35%, rgba(255,255,255,.62) 50%, transparent 65%);
  transform: translateX(var(--sheen));
  animation: sheen 5s var(--ease) infinite;
}
@keyframes sheen { 0%, 62% { --sheen: -60%; } 88%, 100% { --sheen: 160%; } }
.btn--primary > * { position: relative; z-index: 1; }

/* magnetic pull */
.magnetic { transition: transform .28s var(--ease); will-change: transform; }

/* ---------------------------------------------------------------
   7. MARQUEE (Magic UI "Marquee")
   --------------------------------------------------------------- */
.marquee {
  overflow: hidden; width: 100%; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track {
  display: flex; width: max-content; gap: var(--mq-gap, 20px);
  animation: marquee var(--mq-dur, 44s) linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee--rev .marquee__track { animation-direction: reverse; }
@keyframes marquee { to { transform: translateX(calc(-50% - (var(--mq-gap, 20px) / 2))); } }

.mq-chip {
  display: inline-flex; align-items: center; gap: 11px; flex: none;
  padding: 13px 22px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--line-dark); color: rgba(255,255,255,.82);
  font-size: .93rem; font-weight: 600; letter-spacing: -0.01em;
  background: rgba(255,255,255,.035);
  transition: border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.mq-chip:hover { border-color: rgba(234, 3, 3,.6); background: rgba(234, 3, 3,.11); color: #fff; }
.mq-chip svg { width: 16px; height: 16px; color: var(--brand); flex: none; }
.mq-chip b { color: var(--accent-hi); font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---------------------------------------------------------------
   8. SCROLL TEXT REVEAL (Magic UI "Text Reveal")
   --------------------------------------------------------------- */
.reveal-text { font-family: 'Tinos', 'Times New Roman', Georgia, serif; font-weight: 600; letter-spacing: -0.015em; line-height: 1.26; }
.reveal-text .w {
  display: inline-block; opacity: .13; filter: blur(3px);
  transition: opacity .28s linear, filter .28s linear;
  will-change: opacity, filter;
}
.reveal-text .w.on { opacity: 1; filter: blur(0); }
.reveal-text .w.accent.on { color: var(--accent-hi); }

/* ---------------------------------------------------------------
   9. WORD ROTATOR (21st.dev "Animated Hero")
   --------------------------------------------------------------- */
.rotator {
  display: inline-grid; vertical-align: bottom;
  overflow: hidden; color: var(--accent-hi);
  transition: width .5s var(--ease);
}
.rotator > span {
  grid-area: 1 / 1; justify-self: start; width: max-content;
  opacity: 0; transform: translateY(.65em);
  filter: blur(6px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), filter .5s var(--ease);
  white-space: nowrap;
}
.rotator > span.in  { opacity: 1; transform: none; filter: blur(0); }
.rotator > span.out { opacity: 0; transform: translateY(-.65em); filter: blur(6px); }

/* ---------------------------------------------------------------
   10. TILT (Aceternity "3D Card")
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   11. BLUR-UP REVEAL — upgrade of the base .reveal
   --------------------------------------------------------------- */
.reveal { filter: blur(6px); }
.reveal.is-in { filter: blur(0); }
.reveal { transition: opacity .75s var(--ease), transform .75s var(--ease), filter .75s var(--ease); }

/* ---------------------------------------------------------------
   12. BENTO GRID (21st.dev "Bento Grid Showcase")
   --------------------------------------------------------------- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bento > * {
  position: relative; overflow: hidden; border-radius: var(--r);
  padding: 30px 28px; background: rgba(255,255,255,.045);
  border: 1px solid var(--line-dark);
  transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.bento > *:hover { background: rgba(255,255,255,.075); border-color: rgba(255,255,255,.2); transform: translateY(-3px); }
.bento .b-wide { grid-column: span 2; }
.bento .b-tall { grid-row: span 2; }
@media (max-width: 900px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento .b-tall { grid-row: span 1; } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } .bento .b-wide { grid-column: span 1; } }

.bento__glow {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity .35s var(--ease);
  background: radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(234, 3, 3,.16), transparent 60%);
}
.bento > *:hover .bento__glow { opacity: 1; }

/* ---------------------------------------------------------------
   13. ANIMATED GRID / DOTS
   --------------------------------------------------------------- */
.dotfield {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 100%);
  animation: dot-drift 26s linear infinite;
}
@keyframes dot-drift { to { background-position: 26px 26px; } }


/* ---------------------------------------------------------------
   REDUCED MOTION — everything resolves to a static, legible state
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .aurora span,
  .btn--primary::before,
  .beam::after,
  .marquee__track,
  .dotfield { animation: none !important; }
  .marquee { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
  .marquee__track { width: auto; flex-wrap: wrap; }
  .reveal-text .w { opacity: 1 !important; filter: none !important; }
  .rotator > span { transition: none; }
  .rotator { transition: none; }
  .reveal { filter: none !important; }
  .scroll-progress { display: none; }
  .card:hover, .bento > *:hover { transform: none; }
  .proj::after { display: none; }
}