/* =========================================================
   home.css — homepage-only visual layer
   Loaded ONLY on index.html. Everything here is additive to
   /universal/css/stylesheet.css (shared across the whole site)
   so navbar/footer/other pages are completely unaffected.
   Theme: "Build Console" — leans into the existing brand
   (deep navy #04081b, neon cyan #00e5ff) with a dev-tool /
   engine-viewport identity: monospace eyebrows, circuit grid,
   live "compiling" console.
   ========================================================= */

:root{
  --hc-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --hc-cyan: #00e5ff;
  --hc-blue: #3b82f6;
  --hc-panel: rgba(15, 23, 42, .55);
  --hc-border: rgba(0, 229, 255, .16);
}

@media (prefers-reduced-motion: reduce){
  .hc-anim, .hc-grid, .hc-caret, .hc-orbit{ animation: none !important; }
}

/* ---------- Eyebrow / mono labels ---------- */
.hc-eyebrow{
  font-family: var(--hc-mono);
  font-size: .75rem;
  letter-spacing: .12em;
  color: var(--hc-cyan);
  display: inline-flex;
  align-items: center;
  gap: .6em;
  text-transform: uppercase;
}
.hc-eyebrow::before{
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--hc-cyan);
  box-shadow: 0 0 8px 2px rgba(0,229,255,.7);
  animation: hc-blink 1.8s ease-in-out infinite;
}
@keyframes hc-blink{ 0%,100%{opacity:1} 50%{opacity:.25} }

/* ---------- Hero grid backdrop ---------- */
.hc-hero-stage{
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.hc-grid{
  position: absolute;
  inset: -20% -10%;
  z-index: -1;
  background-image:
    linear-gradient(rgba(0,229,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.07) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 30%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 30%, #000 0%, transparent 72%);
  animation: hc-grid-drift 18s linear infinite;
}
@keyframes hc-grid-drift{
  0%{ background-position: 0 0, 0 0; }
  100%{ background-position: 46px 46px, 46px 46px; }
}

/* ---------- Hero layout ---------- */
.hc-hero-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
  text-align: center;
}
@media (min-width: 1024px){
  .hc-hero-grid{
    grid-template-columns: 1.15fr .85fr;
    text-align: left;
    gap: 3rem;
  }
}

.hc-headline{
  letter-spacing: -.02em;
}
.hc-gradient-text{
  background: linear-gradient(100deg, var(--hc-cyan) 10%, #7dd3fc 45%, var(--hc-blue) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Console card (signature element) ---------- */
.hc-console{
  background: linear-gradient(180deg, rgba(17,24,39,.85), rgba(4,8,27,.9));
  border: 1px solid var(--hc-border);
  border-radius: 16px;
  box-shadow: 0 20px 60px -20px rgba(0,229,255,.15), 0 0 0 1px rgba(255,255,255,.02) inset;
  overflow: hidden;
  text-align: left;
  backdrop-filter: blur(6px);
}
.hc-console-bar{
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem .9rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}
.hc-dot{ width: 10px; height: 10px; border-radius: 50%; }
.hc-dot.red{ background:#ff5f57 } .hc-dot.yellow{ background:#febc2e } .hc-dot.green{ background:#28c840 }
.hc-console-title{
  font-family: var(--hc-mono);
  font-size: .7rem;
  color: #94a3b8;
  margin-left: .4rem;
}
.hc-console-body{
  padding: 1.1rem 1.25rem 1.3rem;
  font-family: var(--hc-mono);
  font-size: .82rem;
  line-height: 1.9;
  color: #cbd5e1;
  min-height: 168px;
}
.hc-console-line{ display: block; white-space: pre; }
.hc-console-line .hc-prompt{ color: #64748b; }
.hc-console-line .hc-ok{ color: #4ade80; }
.hc-caret{
  display: inline-block;
  width: 8px; height: 1em;
  background: var(--hc-cyan);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: hc-caret-blink 1s step-end infinite;
}
@keyframes hc-caret-blink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* ---------- HUD stat chips under the console ---------- */
.hc-stat-row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255,255,255,.06);
}
.hc-stat{
  padding: .85rem .5rem;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.06);
}
.hc-stat:last-child{ border-right: none; }
.hc-stat-num{
  font-family: var(--hc-mono);
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
}
.hc-stat-label{
  font-size: .65rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #64748b;
}

/* ---------- Section chrome ---------- */
.hc-section-head{ text-align: center; margin-bottom: 2.5rem; }

/* ---------- Reveal-on-scroll ---------- */
.hc-reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
}
.hc-reveal.hc-in{ opacity: 1; transform: translateY(0); }

/* ---------- Toolkit cards v2 ---------- */
.hc-tool-card{
  position: relative;
  background: linear-gradient(160deg, rgba(15,23,42,.9), rgba(8,13,28,.9));
  border: 1px solid rgba(255,255,255,.06);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
  overflow: hidden;
}
.hc-tool-card::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--hc-cyan), var(--hc-blue), transparent);
  opacity: .55;
  transition: opacity .35s ease;
}
.hc-tool-card:hover{
  border-color: var(--hc-border);
  box-shadow: 0 25px 50px -25px rgba(0,229,255,.25);
  transform: translateY(-4px);
}
.hc-tool-card:hover::before{ opacity: 1; }
.hc-tool-icon{
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(0,229,255,.15), rgba(59,130,246,.15));
  border: 1px solid var(--hc-border);
  color: var(--hc-cyan);
  font-size: 1.15rem;
  transition: transform .35s ease;
}
.hc-tool-card:hover .hc-tool-icon{ transform: scale(1.08) rotate(-4deg); }

.hc-tool-tag{
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  font-family: var(--hc-mono);
  font-size: .62rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hc-cyan);
  background: rgba(0,229,255,.08);
  border: 1px solid var(--hc-border);
  padding: .25rem .55rem;
  border-radius: 999px;
}

.hc-skill-row{
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: .5rem;
  row-gap: .35rem;
}
.hc-skill-row > .w-full{ grid-column: 1 / -1; }
.hc-skill-percent{
  font-family: var(--hc-mono);
  font-size: .75rem;
  color: var(--hc-cyan);
  text-align: right;
}

.hc-chip-row{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.06);
}
.hc-chip{
  font-family: var(--hc-mono);
  font-size: .68rem;
  color: #94a3b8;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  padding: .3rem .6rem;
  border-radius: 999px;
}

/* ---------- Discord HUD card ---------- */
.hc-discord-card{
  background: linear-gradient(160deg, rgba(15,23,42,.9), rgba(8,13,28,.92));
  border: 1px solid rgba(255,255,255,.06);
}
.hc-live-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px 2px rgba(34,197,94,.7);
  display: inline-block;
  animation: hc-blink 1.6s ease-in-out infinite;
}

/* ---------- Carousel wrapper polish (structure untouched) ---------- */
.hc-carousel-wrap{
  background: var(--hc-panel);
  border: 1px solid var(--hc-border) !important;
  backdrop-filter: blur(8px);
}

/* Reviews carousel — cards built by reviews.js at runtime; these rules
   target its classes/IDs directly (with enough specificity to beat
   Tailwind's CDN runtime utilities) so no JS logic needs to change.
   Flat, single solid color on purpose: a per-card gradient/radial here
   causes a visible seam between slides while the track is transitioning
   (each slide's gradient lines up differently), so no gradient here. */
#carousel-track .hc-review-slide{
  background: #0f172a !important;
}
#carousel-track .hc-quote-mark{
  position: absolute;
  top: 1.1rem;
  left: 1.3rem;
  font-size: 2.2rem;
  color: rgba(0,229,255,.14);
  z-index: 0;
}
[dir="rtl"] #carousel-track .hc-quote-mark{ right: 1.3rem; left: auto; }

#carousel-track .hc-avatar-ring{
  padding: 3px;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--hc-cyan), var(--hc-blue));
}
#carousel-track .hc-avatar-ring img{
  display: block;
  border: 3px solid #0b1120 !important;
}

#carousel-track .hc-stars{ color: #facc15 !important; gap: 2px; }
#carousel-track .hc-stars i{ font-size: .85rem; }

/* Review carousel nav buttons — override the utility classes reviews.js
   adds at runtime (bg-gray-700/hover:bg-gray-600) via ID specificity. */
#prevBtn, #nextBtn{
  background: rgba(15,23,42,.8) !important;
  border: 1px solid var(--hc-border);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
#prevBtn:hover, #nextBtn:hover{
  background: rgba(0,229,255,.12) !important;
  border-color: var(--hc-cyan);
  transform: translateY(-2px);
}

#carousel-dots .dot{ transition: background-color .3s ease, transform .3s ease, opacity .3s ease; }

/* Tutorials carousel — cards built by youtube-video-carousel.js */
.hc-tutorial-card{
  background: linear-gradient(160deg, rgba(15,23,42,.95), rgba(8,13,28,.97));
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 20px 45px -25px rgba(0,0,0,.6);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.hc-tutorial-card:hover{
  transform: translateY(-6px);
  border-color: var(--hc-border);
  box-shadow: 0 30px 60px -25px rgba(0,229,255,.25);
}
.hc-tutorial-thumb{ transition: transform .5s ease; }
.hc-tutorial-card:hover .hc-tutorial-thumb{ transform: scale(1.06); }

.hc-tutorial-fade{
  background: linear-gradient(180deg, rgba(4,8,27,0) 40%, rgba(4,8,27,.85) 100%);
}
.hc-tutorial-badge{
  position: absolute;
  top: .75rem;
  left: .75rem;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-family: var(--hc-mono);
  font-size: .65rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(4,8,27,.65);
  border: 1px solid var(--hc-border);
  padding: .3rem .6rem;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.hc-tutorial-badge i{ color: #ff0033; }

.hc-play-btn{
  width: 4.2rem; height: 4.2rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--hc-cyan), var(--hc-blue));
  color: #04081b;
  font-size: 1.25rem;
  box-shadow: 0 0 0 6px rgba(0,229,255,.12), 0 10px 30px -8px rgba(0,229,255,.6);
  transition: transform .3s ease, box-shadow .3s ease;
}
.hc-tutorial-card:hover .hc-play-btn{
  transform: scale(1.1);
  box-shadow: 0 0 0 10px rgba(0,229,255,.16), 0 15px 35px -8px rgba(0,229,255,.7);
}

.hc-tutorial-title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

/* Featured (first) tutorial — wider aspect, bigger title, no clamp */
.hc-tutorial-card--featured .hc-tutorial-title{
  -webkit-line-clamp: unset;
  min-height: 0;
  font-size: 1.35rem;
}
.hc-tutorial-card--featured .aspect-video{ aspect-ratio: 21 / 9; }
@media (max-width: 640px){
  .hc-tutorial-card--featured .aspect-video{ aspect-ratio: 16 / 9; }
}
.hc-play-btn--lg{
  width: 5.5rem; height: 5.5rem;
  font-size: 1.6rem;
}

/* ---------- Buttons ---------- */
.hc-btn-ghost{
  border: 1px solid rgba(255,255,255,.14);
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.hc-btn-ghost:hover{
  border-color: var(--hc-cyan);
  background: rgba(0,229,255,.06);
}