/* =========================================================
   Learning Rewired Lab — Field Guides (redesign)
   Page-specific styles. Pairs with global.css + field-guides.js.
   Layout is inline on the elements; this file holds only what
   inline styles can't express (keyframes, media queries,
   hover states, marquee).
   ========================================================= */

.fg-home { box-sizing: border-box; }
.fg-home *, .fg-home *::before, .fg-home *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
.fg-home main { overflow: hidden; }
.fg-home ::selection { background: rgba(20,184,166,.22); }

/* ---- keyframes ---- */
@keyframes fg-pulse   { 0%,100% { opacity:.4; } 50% { opacity:1; } }
@keyframes fg-sheen   { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
@keyframes fg-float   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes fg-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.fg-marquee-track { animation: fg-marquee 40s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .fg-marquee-track { animation: none; }
  .fg-float { animation: none !important; }
}

/* ---- form input placeholder ---- */
.fg-email::placeholder { color: rgba(226,242,247,.5); }

/* ---- hover states ---- */
.h-teal:hover   { background:#0f9e8e !important; }
.h-mint:hover   { background:#ffffff !important; }
.h-ink:hover    { background:rgba(255,255,255,.14) !important; }
.h-ghost:hover  { border-color:#14b8a6 !important; color:#0f766e !important; }
.h-link:hover   { color:#07111f !important; }
.h-bright:hover { filter:brightness(1.08); }
.fg-opt:hover   { border-color:rgba(110,231,216,.6) !important; }

.h-guide { transition:transform .2s, box-shadow .2s, border-color .2s; }
.h-guide:hover { transform:translateY(-3px); box-shadow:0 18px 40px rgba(15,23,42,.1) !important; border-color:var(--ga) !important; }
.h-guide:hover .h-guide-cta { gap:10px !important; }

.h-cat { transition:border-color .2s, background .2s; }
.h-cat:hover { border-color:rgba(20,184,166,.4) !important; background:#fafdfc !important; }

/* ---- responsive ---- */
@media (max-width: 980px) {
  [data-r="hero"], [data-r="method"], [data-r="tk"], [data-r="ev"], [data-r="dx"], [data-r="ask"] { grid-template-columns: 1fr !important; gap: 0 !important; }
  [data-r="hero"] { gap: 40px !important; }
  [data-r="dx"] > div:first-child { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; }
  [data-r="h1"] { font-size: 48px !important; }
  [data-r="tk"] { border-radius: 24px !important; }
  [data-r="tk-media"] { min-height: 300px !important; }
  [data-r="layer3"], [data-r="cats"] { grid-template-columns: 1fr 1fr !important; }
  [data-r="guides2"] { grid-template-columns: 1fr !important; }
  [data-r="ev-levels"] { grid-template-columns: 1fr 1fr !important; }
  [data-r="ask"] { gap: 26px !important; }
}
@media (max-width: 600px) {
  [data-r="h1"] { font-size: 38px !important; }
  [data-r="dx-opts"], [data-r="layer3"], [data-r="cats"], [data-r="ev-levels"] { grid-template-columns: 1fr !important; }
  [data-r="sec-h"] { font-size: 30px !important; }
  [data-r="tk-body"] { padding: 36px 26px !important; }
}
/* =========================================================
   Toolkit hero image background blend fix
   Matches the Course-to-System Toolkit card and media image
   so the image edge disappears.
   ========================================================= */

[data-r="tk"] {
  background:
    radial-gradient(circle at 18% 32%, rgba(20,184,166,.18), transparent 34%),
    radial-gradient(circle at 78% 48%, rgba(20,184,166,.10), transparent 30%),
    linear-gradient(135deg, #061426 0%, #030817 48%, #020617 100%) !important;
  border-color: rgba(110, 231, 216, .18) !important;
  overflow: hidden !important;
}

[data-r="tk-media"] {
  position: relative !important;
  background:
    radial-gradient(circle at 42% 48%, rgba(20,184,166,.12), transparent 36%),
    linear-gradient(135deg, #061426 0%, #030817 48%, #020617 100%) !important;
  overflow: hidden !important;
}

/* Softens the edge of the image rectangle against the card */
[data-r="tk-media"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3,8,23,.95) 0%, rgba(3,8,23,.62) 8%, transparent 22%),
    linear-gradient(180deg, rgba(3,8,23,.88) 0%, transparent 16%, transparent 82%, rgba(3,8,23,.72) 100%);
}

/* Targets the toolkit character image */
[data-r="tk-media"] img {
  mix-blend-mode: normal;
  background: transparent !important;
  filter: drop-shadow(0 28px 70px rgba(0,0,0,.38));
}

/* Optional: if the image itself is still showing a hard rectangle,
   this fades the image edges without touching the character much. */
[data-r="tk-media"] picture,
[data-r="tk-media"] img {
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 10%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 7%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 10%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 7%, #000 94%, transparent 100%);
  mask-composite: intersect;
}

@media (max-width: 980px) {
  [data-r="tk-media"]::before {
    background:
      linear-gradient(180deg, rgba(3,8,23,.85) 0%, transparent 18%, transparent 82%, rgba(3,8,23,.78) 100%);
  }

  [data-r="tk-media"] picture,
  [data-r="tk-media"] img {
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%),
      linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
    mask-image:
      linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%),
      linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  }
}