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

.av-page { box-sizing: border-box; }
.av-page *, .av-page *::before, .av-page *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
.av-page main { overflow: hidden; }
.av-page ::selection { background: rgba(224,169,63,.24); }

/* ---- keyframes ---- */
@keyframes av-pulse { 0%,100% { opacity:.4; } 50% { opacity:1; } }
@keyframes av-sheen { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
@keyframes av-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes av-comet-move { from { left: -160px; } to { left: 100%; } }
@keyframes av-line-move { from { top: -60px; } to { top: 100%; } }
@media (prefers-reduced-motion: reduce) { .av-float { animation: none !important; } .av-comet i, .av-line-comet { animation: none !important; } }

.av-comet { position: relative; }
.av-comet i { position: absolute; top: 0; bottom: 0; left: -160px; width: 160px; background: linear-gradient(90deg, transparent, #e0a93f, #f4d58a, transparent); animation: av-comet-move 4.6s linear infinite; }
.av-line-comet { position: absolute; left: 0; right: 0; top: -60px; height: 60px; background: linear-gradient(180deg, transparent, #f4d58a, transparent); animation: av-line-move 3.2s linear infinite; }

/* ---- hover states ---- */
.h-gold:hover  { filter:brightness(1.06); }
.h-mint:hover  { background:#ffffff !important; }
.h-ink:hover   { background:rgba(255,255,255,.14) !important; }
.h-ghost:hover { border-color:#e0a93f !important; color:#9a6a04 !important; }
.h-link:hover  { color:#07111f !important; }
.av-opt:hover  { border-color:rgba(244,213,138,.6) !important; }

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

.h-chan { transition:border-color .2s, background .2s; }
.h-chan:hover { border-color:rgba(224,169,63,.4) !important; background:#fffdf8 !important; }

/* ---- responsive ---- */
@media (max-width: 980px) {
  [data-r="hero"], [data-r="dx"], [data-r="proof"], [data-r="gate"], [data-r="other"] { 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: 46px !important; }
  [data-r="gate"] { border-radius: 24px !important; }
  [data-r="gate-media"] { min-height: 280px !important; }
  [data-r="types"], [data-r="how"] { grid-template-columns: 1fr 1fr !important; }
  [data-r="other"] { gap: 18px !important; }
  [data-r="proof"] { gap: 30px !important; }
}
@media (max-width: 600px) {
  [data-r="h1"] { font-size: 37px !important; }
  [data-r="dx-opts"], [data-r="types"], [data-r="how"], [data-r="proof"], [data-r="other"] { grid-template-columns: 1fr !important; }
  [data-r="sec-h"] { font-size: 30px !important; }
  [data-r="gate-body"] { padding: 36px 26px !important; }
}
/* =========================================================
   Advisory fit check image background true color match
   Matches the card to the rendered Luma image background.
   ========================================================= */

[data-r="gate"] {
  background: #030a24 !important;
  border-color: rgba(244, 213, 138, .16) !important;
  overflow: hidden !important;
}

/* Remove the darker left/right split caused by the inline layout */
[data-r="gate"]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 78% 46%, rgba(22,184,217,.07), transparent 34%),
    radial-gradient(circle at 18% 42%, rgba(224,169,63,.08), transparent 36%),
    linear-gradient(180deg, #030a24 0%, #020a23 58%, #030a24 100%);
}

/* Keep all direct content above the blended background */
[data-r="gate"] > * {
  position: relative;
  z-index: 1;
}

/* Force the media panel to match the actual Luma image field */
[data-r="gate-media"] {
  position: relative !important;
  background: #030a24 !important;
  overflow: hidden !important;
}

/* Kill the visible vertical block edge */
[data-r="gate-media"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      #030a24 0%,
      rgba(3,10,36,.96) 5%,
      rgba(3,10,36,.62) 12%,
      transparent 24%
    ),
    linear-gradient(
      180deg,
      rgba(3,10,36,.82) 0%,
      transparent 16%,
      transparent 84%,
      rgba(3,10,36,.76) 100%
    );
}

/* Blend the baked image rectangle without washing out Luma */
[data-r="gate-media"] img {
  background: transparent !important;
  filter: drop-shadow(0 28px 70px rgba(0,0,0,.38));
}

/* Softer edge fade only at the outer image boundaries */
[data-r="gate-media"] picture,
[data-r="gate-media"] img {
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 6%, #000 96%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 6%, #000 96%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
  mask-composite: intersect;
}

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