/* ========================================================================
   HL2MP — Homepage intro slice
   Sections covered:
   - Cinematic banner title (.cine-title …)
   - Video hero (caption chip)
   - Intro copy card (.intro-card …)
   - Play Styles “Neon Glass” two-up (.ng-…)
   ===================================================================== */

/* Local palette for cinematic headings used across this slice */
:root{
  --cine-primary:#00e5ff;
  --cine-accent:#ff00ea;
}

/* ===============================
   Cinematic titles (image-backed)
   =============================== */

.cine-title{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin:8px 0 10px;
  min-height:clamp(68px,10vw,140px);
  background:none;
  border-radius:12px;
}

/* banner image sits behind the gradient text — revealed on hover/focus */
.cine-title__media{
  position:absolute; top:50%; left:50%;
  width:100%; height:100%;
  min-width:100%; min-height:100%;
  transform: translate(-50%,-50%) scale(1.05);
  object-fit:cover;
  pointer-events:none;
  opacity:0;                                    /* hidden by default */
  filter:saturate(1.05) contrast(1.05) brightness(.9);
  transition: opacity .6s ease, transform .6s ease;
}

.cine-title:hover .cine-title__media,
.cine-title:focus-within .cine-title__media{
  opacity:1;
  transform: translate(-50%,-50%) scale(1);
}

.cine-title__text{
  position:relative; z-index:1; margin:0;
  font-family:"Orbitron", system-ui, sans-serif;
  font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(22px,5.2vw,44px);
  line-height:1.05;

  background:linear-gradient(90deg,var(--cine-primary),var(--cine-accent));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;

  text-shadow:0 0 10px rgba(0,229,255,.35);
  transform:translate(var(--cx,0px),var(--cy,0px)); /* JS sets --cx/--cy */
  transition:transform .12s ease-out;
}

.cine-title:hover .cine-title__text,
.cine-title:focus-within .cine-title__text{
  text-shadow:0 0 8px rgba(0,229,255,.25),
              0 0 20px rgba(255,0,234,.18);
}

@media (prefers-reduced-motion: reduce){
  .cine-title__text{ transition:none; }
}

/* ===============================
   Video hero (figure + caption chip)
   =============================== */

.hero{                      /* positioning context for the chip */
  position: relative;
  margin-bottom: 46px;      /* room for the chip that sits below */
}

.hero .media-frame{
  position: relative;       /* keeps current layout; no clipping of the chip */
}

.hero > figcaption{
  position: absolute;
  left: clamp(10px, 1.2vw, 16px);
  bottom: -16px;            /* places chip just under the video card */
  padding: 8px 12px;
  white-space: nowrap;

  /* site-themed glass */
  background: rgba(7,16,24,.92);
  border: 1px solid rgba(26,42,64,.6);
  border-radius: 10px;
  box-shadow:
    0 6px 18px rgba(0,0,0,.5),
    0 0 18px rgba(0,184,212,.10) inset;

  /* Orbitron look */
  font-family: "Orbitron", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(12px, .8rem, 14px);
  letter-spacing: .03em;
  color: #cfe2ff;
  text-shadow: 0 0 1px rgba(0,0,0,.55);
}

/* small connector tab that visually “attaches” the chip to the card */
.hero > figcaption::before{
  content: "";
  position: absolute;
  top: -8px; left: 18px;
  width: 18px; height: 8px;
  background: rgba(7,16,24,.92);
  border-top: 1px solid rgba(26,42,64,.6);
  border-left: 1px solid rgba(26,42,64,.6);
  border-right: 1px solid rgba(26,42,64,.6);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
}

/* Tighter on small screens */
@media (max-width: 520px){
  .hero{ margin-bottom: 38px; }
  .hero > figcaption{
    bottom: -12px;
    left: 10px;
    padding: 6px 10px;
    font-size: 12px;
  }
  .hero > figcaption::before{
    top: -6px; left: 14px; width: 14px; height: 6px;
  }
}

/* ===============================
   Intro card — site-branded look
   =============================== */

.hero--intro-card .media-frame{
  aspect-ratio: auto;
  overflow: visible;
  padding: 0;
}

/* Panel */
.intro-card{
  position: relative;
  display: block;
  min-height: clamp(260px, 26vw, 380px);
  padding: clamp(22px, 3.2vw, 40px) clamp(24px, 4vw, 56px);
  border-radius: 18px;

  /* darker glass to match site */
  background: linear-gradient(180deg, rgba(7,16,24,.94), rgba(7,16,24,.88));
  border: 1px solid rgba(26,42,64,.65);

  /* subtle cyan/amber bloom */
  box-shadow:
    0 0 0 1px rgba(26,42,64,.35) inset,
    0 0 30px rgba(0,184,212,.10),
    0 18px 40px rgba(0,0,0,.60);
  isolation: isolate;
}

/* vignette / soft glow */
.intro-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit; pointer-events:none;
  background:
    radial-gradient(110% 70% at 50% 0%,   rgba(0,184,212,.12), transparent 55%),
    radial-gradient(130% 80% at 50% 100%, rgba(255,174,66,.10), transparent 60%);
  mix-blend-mode: screen;
}

/* Title */
.intro-card__title{
  margin: 0 0 .6rem;
  font-family: "Orbitron", system-ui, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: clamp(20px, 1.1rem + 1.6vw, 36px);
  line-height: 1.1;

  /* amber ink, soft glow */
  background: linear-gradient(90deg, #ffdca0 0%, #ffae42 38%, #ffd28a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 10px rgba(255,174,66,.22),
    0 0 22px rgba(255,174,66,.14);
}

/* underline */
.intro-card__title::after{
  content:"";
  display:block; width: 96px; height: 2px; margin: .55rem 0 0;
  background: linear-gradient(90deg, transparent, #ffae42, transparent);
  opacity:.8;
}

/* Copy */
.intro-card__copy{
  margin: .9rem 0 0;
  max-width: 72ch;
  font-family: "Orbitron", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(14px, .9rem + .35vw, 18px);
  line-height: 1.8;
  letter-spacing: .015em;
  color: #d8e2ef;
  text-shadow: 0 0 1px rgba(0,0,0,.6);
}

/* Slightly dim the second block so the first line stays dominant */
.intro-card__copy--secondary{ color: #bfcadb; }

/* Mobile */
@media (max-width: 640px){
  .intro-card{
    min-height: unset;
    padding: 16px 14px;
  }
  .intro-card__title{ font-size: clamp(18px, 5.6vw, 28px); }
  .intro-card__copy{ line-height: 1.65; }
}

/* Emphasized mix line used under the Play Styles bullets */
.intro-mix{
  display: block;
  margin-top: .8rem;
  font: 800 clamp(12px, .82rem + .2vw, 14px)/1.65 "Orbitron", system-ui, sans-serif;
  letter-spacing: .05em;
  color: #cfe4ff;
  position: relative;
  text-shadow: 0 0 1px rgba(0,0,0,.55);
}
.intro-mix::before{
  content: "✦";
  margin-right: .55rem;
  opacity: .75;
  color: #7de6ff;
  filter: drop-shadow(0 0 6px rgba(0,229,255,.55));
}
.intro-mix::after{
  content: "";
  display: block;
  height: 2px;
  margin-top: .35rem;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(0,229,255,.45),
    rgba(157, 0, 255, .34),
    rgba(0,229,255,.45)
  );
  box-shadow:
    0 0 14px rgba(0,229,255,.18),
    0 0 16px rgba(157, 0, 255,.12);
  opacity: .9;
}

/* ===============================
   Play Styles — Neon Glass two-up
   =============================== */

.ng-row{
  position: relative;
  margin: 26px 0 32px;
  padding: 10px 0;
  isolation: isolate;
  display:grid;
  grid-template-columns: minmax(260px, 1fr) minmax(340px, 1.4fr);
  gap: 16px;
  align-items: stretch;
  /* local radius so we don't depend on global --radius */
  --ng-radius: 20px;
}
@media (max-width: 860px){
  .ng-row{ grid-template-columns: 1fr; }
}

.ng-card{ position:relative; }

.ng-plate{
  position:relative;
  border:1px solid var(--line);
  border-radius: calc(var(--ng-radius) + 6px);
  padding: clamp(12px, 3vw, 18px);
  background:
    linear-gradient(180deg, rgba(18,28,42,.78), rgba(13,20,32,.72) 80%),
    radial-gradient(1200px 500px at -20% -40%, rgba(71,199,255,.12), transparent 60%),
    radial-gradient(1200px 500px at 120% 140%, rgba(255,126,24,.10), transparent 60%);
  color: var(--ink);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  box-shadow:
    0 0 0 1px rgba(71,199,255,.08) inset,
    0 20px 60px rgba(0,0,0,.35);
}

/* inner chrome shine + outer glow */
.ng-shine, .ng-glow{ position:absolute; inset:0; pointer-events:none; border-radius:inherit; }
.ng-shine{
  --C1: hsl(var(--hue-combine) 90% 65% / .25);
  --C2: hsl(var(--hue-lambda) 95% 60% / .2);
  background:
    conic-gradient(from -35deg at 100% 0%, transparent 0 8%, var(--C1) 9% 12%, transparent 13% 40%) border-box,
    conic-gradient(from 145deg at 0% 100%, transparent 0 12%, var(--C2) 13% 18%, transparent 19% 40%) border-box;
  mask:
    linear-gradient(black, black) padding-box,
    linear-gradient(black, black) border-box;
  -webkit-mask-composite: xor; mask-composite: exclude;
  border:2px solid transparent;
  opacity:.8;
}
.ng-glow{
  box-shadow:
    0 0 30px 8px hsl(var(--hue-combine) 90% 55% / .08),
    0 0 48px 12px hsl(var(--hue-lambda) 95% 55% / .07);
  border:1px solid transparent;
}

/* left card: angled title */
.ng-card--title .ng-plate{
  display: grid;
  place-items: center;
  overflow: hidden;
  height: 100%;
  min-height: 0;
}
.ng-angle{
  --fx1: hsl(var(--hue-lambda) 100% 60%);
  --fx2: hsl(var(--hue-combine) 90% 58%);
  margin:0;
  font-weight:900; letter-spacing:.5px; text-transform:uppercase;
  line-height:1.05; text-align:center;
  font-size: clamp(24px, 4.3vw, 44px);
  transform: rotate(-8deg);
  text-shadow:
    0 0 18px color-mix(in oklab, var(--fx2) 40%, transparent),
    0 0 36px color-mix(in oklab, var(--fx1) 35%, transparent);
  color: color-mix(in oklab, var(--ink) 92%, var(--fx1));
  background: linear-gradient(90deg, var(--fx1), var(--fx2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color: transparent;
}
.ng-card--title .ng-plate::after{
  content:""; position:absolute; inset:-40% -10%;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 14px, transparent 14px 28px);
  pointer-events:none; mix-blend-mode: overlay; border-radius:inherit;
}

/* right card: bullets/content */
.ng-card--content .ng-plate{ padding: clamp(14px, 3.2vw, 22px); }
.ng-body{ max-width: 62ch; }
.ng-bullets{ margin:0 0 10px 0; padding:0; list-style:none; }
.ng-bullets li{
  position:relative;
  padding:10px 12px 10px 36px;
  margin: 6px 0;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00));
  border:1px solid rgba(120,150,185,.22);
}
.ng-bullets li::before{
  content:""; position:absolute; left:10px; top:12px;
  width:16px; height:16px; border-radius:50%;
  background:
    radial-gradient(circle at 40% 40%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 60% 60%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 50% 50%, hsl(var(--hue-combine) 95% 55%), hsl(var(--hue-lambda) 95% 55%));
  box-shadow:
    0 0 10px hsl(var(--hue-combine) 95% 55% / .35),
    0 0 16px hsl(var(--hue-lambda) 95% 55% / .25);
}
.ng-bullets strong{ color: hsl(var(--hue-combine) 90% 74%); }
.ng-note{ margin:6px 0 0; color:var(--muted); font-size:.95rem; }

/* subtle entrance animation */
@media (prefers-reduced-motion:no-preference){
  .ng-plate{ animation: ngIn .5s var(--ease) both; }
  .ng-card--content .ng-plate{ animation-delay:.05s; }
}
@keyframes ngIn{
  from{ transform: translateY(4px); opacity:0; }
  to  { transform: translateY(0);   opacity:1; }
}

/* ===============================
   Fonts used by this slice
   =============================== */

@font-face{
  font-family:"Orbitron";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src: url("/assets/fonts/orbitron/webfonts/orbitron-latin-400-normal.woff2") format("woff2"),
       url("/assets/fonts/orbitron/webfonts/orbitron-latin-400-normal.woff") format("woff"),
       url("/assets/fonts/orbitron/ttf/orbitron-latin-400-normal.ttf") format("truetype");
}
@font-face{
  font-family:"Orbitron";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src: url("/assets/fonts/orbitron/webfonts/orbitron-latin-700-normal.woff2") format("woff2"),
       url("/assets/fonts/orbitron/webfonts/orbitron-latin-700-normal.woff") format("woff"),
       url("/assets/fonts/orbitron/ttf/orbitron-latin-700-normal.ttf") format("truetype");
}
@font-face{
  font-family:"Orbitron";
  font-style:normal;
  font-weight:900;
  font-display:swap;
  src: url("/assets/fonts/orbitron/webfonts/orbitron-latin-900-normal.woff2") format("woff2"),
       url("/assets/fonts/orbitron/webfonts/orbitron-latin-900-normal.woff") format("woff"),
       url("/assets/fonts/orbitron/ttf/orbitron-latin-900-normal.ttf") format("truetype");
}