/* ============================================================
   HOMEPAGE · CINEMATIC LAYER
   Apple × OpenAI × Linear × Stripe vibe.
   - Animated conic-gradient glow border on .holo-card hover
   - Soft glassmorphism (inset shadow instead of border)
   - Card hierarchy: featured prompting card spans 2 cols on desktop
   - Section seam masks
   - Curriculum header neural background + glow pulse
   - Reduced-motion safe
   ============================================================ */

/* @property registration for smooth conic-gradient angle animation */
@property --hc-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ─────────────────────────────────────────────────────────────
   1. Animated glow border on holo-card hover
   ───────────────────────────────────────────────────────────── */
.holo-card {
  position: relative;
  isolation: isolate;
}

.holo-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--hc-angle, 0deg),
    transparent 0%,
    var(--gold, #e8a020) 25%,
    transparent 50%,
    var(--teal, #22d3ee) 75%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 400ms cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
  z-index: 0;
}

.holo-card:hover::before,
.holo-card:focus-within::before {
  opacity: 1;
  animation: hc-spin-angle 8s linear infinite;
}

@keyframes hc-spin-angle {
  to { --hc-angle: 360deg; }
}

/* Static fallback for browsers without @property support */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .holo-card::before {
    background: linear-gradient(135deg, var(--gold, #e8a020), var(--teal, #22d3ee));
    animation: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   2. Soft glassmorphism — inset border instead of harsh 1px
   ───────────────────────────────────────────────────────────── */
@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
  .holo-card,
  .bento-item,
  .testimonial-card {
    border-color: transparent !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.06),
      0 1px 0 rgba(255, 255, 255, 0.03) inset,
      0 24px 50px -28px rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(28px) saturate(140%);
            backdrop-filter: blur(28px) saturate(140%);
  }
}

/* ─────────────────────────────────────────────────────────────
   3. Magnetic targets — JS attaches; CSS provides smooth reset
   ───────────────────────────────────────────────────────────── */
[data-magnetic] {
  transition: transform 600ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

[data-magnetic][data-magnetic-active] {
  transition: transform 80ms linear;
}

/* ─────────────────────────────────────────────────────────────
   4. Featured card hierarchy — Prompting spans 2 cols on desktop
   ───────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .bento-grid > .bento-item.featured[data-course="prompting"] {
    grid-column: span 2;
    min-height: 380px;
  }
  .bento-grid > .bento-item.featured[data-course="prompting"] h3 {
    font-size: 1.75rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }
}

/* ─────────────────────────────────────────────────────────────
   5. Section seam softening — mask top/bottom edges
   ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  section.section-with-mark {
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      #000 4%,
      #000 96%,
      transparent 100%
    );
            mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      #000 4%,
      #000 96%,
      transparent 100%
    );
  }
}

/* ─────────────────────────────────────────────────────────────
   6. Hero CTA magnetic affordance
   ───────────────────────────────────────────────────────────── */
.hero-primary {
  will-change: transform, box-shadow;
}

@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero-primary:hover {
    box-shadow:
      0 24px 60px -10px rgba(232, 160, 32, 0.7),
      0 2px 0 rgba(255, 245, 220, 0.5) inset,
      0 -2px 0 rgba(90, 55, 5, 0.35) inset;
  }
}

/* ─────────────────────────────────────────────────────────────
   7. Particle canvas placement
   ───────────────────────────────────────────────────────────── */
.cinematic-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  mix-blend-mode: screen;
}

/* ─────────────────────────────────────────────────────────────
   8. Reduced motion — kill all decorative animation
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .holo-card::before,
  .holo-card:hover::before {
    animation: none !important;
    opacity: 0 !important;
  }
  [data-magnetic] {
    transition: none !important;
    transform: none !important;
  }
  .cinematic-particles {
    display: none !important;
  }
}