@charset "utf-8";
/* CSS Document */

    /* ─── HOMEPAGE-SPECIFIC OVERRIDES & EXTENSIONS ───────────────────
       All base tokens (--bg, --green, fonts, etc.) come from
       dragonlings.css. This block adds only what is unique to the
       homepage — body class, hero variant, CTA cards, etc.
    ──────────────────────────────────────────────────────────────── */

    body.homepage {
      background: var(--bg);
      color: var(--text-primary);
      font-family: var(--font-body);
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
    }

    /* Scanline overlay — identical to Dragonlings / Arcade */
    body.homepage::before {
      content: '';
      position: fixed;
      inset: 0;
      background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.06) 2px,
        rgba(0,0,0,0.06) 4px
      );
      pointer-events: none;
      z-index: 9999;
    }

    /* ─── HERO ───────────────────────────────────────────────────────── */
    .hp-hero {
      position: relative;
      text-align: center;
      padding: 5rem 2rem 4rem;
      margin-top: 63px;
      margin-bottom: 3rem;
    }

    .hp-hero__eyebrow {
      font-family: var(--font-body);
      font-size: 0.7rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--green-dim);
      margin-bottom: 1.2rem;
      opacity: 0;
      animation: fadeUp 0.6s 0.1s forwards;
    }

    .hp-hero__title {
      font-family: var(--font-display);
      font-size: clamp(2.8rem, 7vw, 6rem);
      font-weight: 900;
      line-height: 1;
      letter-spacing: -0.02em;
      color: var(--green);
      text-shadow:
        0 0 30px rgba(34,255,110,0.55),
        0 0 80px rgba(34,255,110,0.2);
      opacity: 0;
      animation: fadeUp 0.7s 0.2s forwards;
    }

    .hp-hero__sub {
      margin-top: 1.2rem;
      font-size: 0.85rem;
      color: var(--text-secondary);
      letter-spacing: 0.04em;
      opacity: 0;
      animation: fadeUp 0.7s 0.35s forwards;
    }

    .hp-hero__divider {
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--green-muted), transparent);
      margin: 3.5rem 0;
      opacity: 0;
      animation: fadeIn 0.8s 0.5s forwards;
    }

    /* ─── SECTION HEADING ────────────────────────────────────────────── */
    .hp-section-eyebrow {
      font-family: var(--font-body);
      font-size: 0.68rem;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--green-dim);
      margin-bottom: 0.5rem;
    }

    .hp-section-title {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 3.5vw, 2.2rem);
      font-weight: 900;
      color: var(--green);
      text-shadow: 0 0 20px rgba(34,255,110,0.3);
      margin-bottom: 2rem;
      letter-spacing: -0.01em;
    }

    /* ─── CTA CARD GRID ─────────────────────────────────────────────── */
    .hp-cta-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      margin-bottom: 5rem;
    }

    @media (max-width: 900px) {
      .hp-cta-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 560px) {
      .hp-cta-grid { grid-template-columns: 1fr; }
    }

    /* ─── CTA CARD ──────────────────────────────────────────────────── */
    .hp-card {
      position: relative;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      text-decoration: none;
      display: flex;
      flex-direction: column;
      cursor: pointer;
      transition:
        border-color var(--transition),
        background var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
      opacity: 0;
      animation: cardReveal 0.55s both;
    }

    .hp-card:nth-child(1) { animation-delay: 0.55s; }
    .hp-card:nth-child(2) { animation-delay: 0.65s; }
    .hp-card:nth-child(3) { animation-delay: 0.75s; }

    .hp-card::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: var(--radius);
      box-shadow: inset 0 0 0 1px transparent;
      transition: box-shadow var(--transition);
      pointer-events: none;
    }

    .hp-card:hover,
    .hp-card:focus-visible {
      border-color: var(--border-h);
      background: var(--bg-card-h);
      transform: translateY(-4px) scale(1.012);
      box-shadow:
        0 0 0 1px var(--border-h),
        0 8px 32px rgba(0,0,0,0.6),
        0 0 40px var(--green-glow),
        0 0 80px rgba(34,255,110,0.08);
      outline: none;
      text-decoration: none;
    }

    .hp-card:hover::after,
    .hp-card:focus-visible::after {
      box-shadow: inset 0 0 20px rgba(34,255,110,0.06);
    }

    .hp-card:active {
      transform: translateY(-2px) scale(1.006);
    }

    /* ─── CARD THUMBNAIL ─────────────────────────────────────────────── */
    .hp-card__thumb {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      background: var(--bg-surface);
      flex-shrink: 0;
    }

    .hp-card__thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.3s;
      filter: brightness(0.85) saturate(0.9);
    }

    .hp-card:hover .hp-card__thumb img {
      transform: scale(1.04);
      filter: brightness(1) saturate(1.1);
    }

    /* Placeholder when no image */
    .hp-card__thumb--placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hp-card__thumb--placeholder::before {
      content: attr(data-initials);
      font-family: var(--font-display);
      font-size: 2.4rem;
      font-weight: 900;
      color: var(--green-muted);
      letter-spacing: -0.05em;
      opacity: 0.6;
      transition: opacity var(--transition), color var(--transition);
    }

    .hp-card:hover .hp-card__thumb--placeholder::before {
      opacity: 1;
      color: var(--green-dim);
    }

    /* Gradient fade at base of thumbnail */
    .hp-card__thumb::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        180deg,
        transparent 60%,
        rgba(10,13,10,0.7) 100%
      );
      pointer-events: none;
    }

    /* Badge chip */
    .hp-card__badge {
      position: absolute;
      top: 10px;
      right: 10px;
      background: rgba(10,13,10,0.75);
      border: 1px solid var(--border);
      border-radius: 3px;
      font-size: 0.77rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--green-dim);
      padding: 3px 7px;
      backdrop-filter: blur(6px);
      z-index: 1;
    }

    /* ─── CARD BODY ──────────────────────────────────────────────────── */
    .hp-card__body {
      padding: 1.1rem 1.2rem 1.4rem;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      flex: 1;
    }

    .hp-card__name {
      font-family: var(--font-display);
      font-size: 0.95rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      color: var(--green);
      text-shadow: 0 0 12px rgba(34,255,110,0.3);
      line-height: 1.2;
      transition: text-shadow var(--transition);
    }

    .hp-card:hover .hp-card__name {
      text-shadow: 0 0 20px rgba(34,255,110,0.65);
    }

    .hp-card__hook {
      font-size: 0.78rem;
      line-height: 1.55;
      color: var(--text-secondary);
      letter-spacing: 0.01em;
    }

    .hp-card__cta {
      margin-top: auto;
      padding-top: 0.9rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.68rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text-muted);
      transition: color var(--transition);
    }

    .hp-card__cta::before {
      content: '';
      display: block;
      width: 18px;
      height: 1px;
      background: currentColor;
      transition: width var(--transition), color var(--transition);
    }

    .hp-card:hover .hp-card__cta {
      color: var(--green-dim);
    }

    .hp-card:hover .hp-card__cta::before {
      width: 28px;
    }

    /* ─── FEATURE ROW — wide promo strip ────────────────────────────── */
    .hp-feature {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      align-items: center;
      margin-bottom: 4rem;
      opacity: 0;
      animation: cardReveal 0.6s both;
    }

    .hp-feature:nth-child(1) { animation-delay: 0.9s; }
    .hp-feature:nth-child(2) { animation-delay: 1.05s; }

    .hp-feature--reverse .hp-feature__img { order: 2; }
    .hp-feature--reverse .hp-feature__text { order: 1; }

    .hp-feature__img {
      position: relative;
      border-radius: var(--radius);
      overflow: hidden;
      border: 1px solid var(--border);
      box-shadow: 0 0 30px rgba(0,0,0,0.5);
    }

    .hp-feature__img img {
      width: 100%;
      display: block;
      filter: brightness(0.9) saturate(1.05);
      transition: filter var(--transition), transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .hp-feature__img:hover img {
      filter: brightness(1) saturate(1.15);
      transform: scale(1.02);
    }

    .hp-feature__img::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 55%, rgba(10,13,10,0.65) 100%);
      pointer-events: none;
    }

    .hp-feature__text .hp-section-eyebrow { margin-bottom: 0.5rem; }

    .hp-feature__text p {
      font-size: 0.88rem;
      line-height: 1.75;
      color: var(--text-secondary);
      letter-spacing: 0.01em;
      margin-bottom: 1.2rem;
    }

    /* ─── BUTTONS ────────────────────────────────────────────────────── */
    .hp-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-family: var(--font-display);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      text-decoration: none;
      padding: 0.75rem 1.6rem;
      border-radius: var(--radius);
      transition: all var(--transition);
      cursor: pointer;
      border: none;
	  margin: 2px;
    }

    .hp-btn--primary {
      background: var(--green);
      color: #0a0d0a;
      box-shadow: 0 0 20px rgba(34,255,110,0.35);
    }

    .hp-btn--primary:hover {
      background: #4fff8a;
      box-shadow: 0 0 36px rgba(34,255,110,0.65), 0 0 70px rgba(34,255,110,0.2);
      transform: translateY(-2px);
      color: #0a0d0a;
      text-decoration: none;
    }

    .hp-btn--outline {
      background: transparent;
      color: var(--green);
      border: 1px solid var(--border-h);
      box-shadow: 0 0 12px rgba(34,255,110,0.1);
    }

    .hp-btn--outline:hover {
      background: var(--green-glow);
      box-shadow: 0 0 24px rgba(34,255,110,0.3);
      transform: translateY(-2px);
      color: var(--green);
      text-decoration: none;
    }

    /* ─── DIVIDER ────────────────────────────────────────────────────── */
    .hp-divider {
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--green-muted), transparent);
      margin: 3.5rem 0;
    }

    /* ─── FOOTER ─────────────────────────────────────────────────────── */
    .hp-footer {
      text-align: center;
      padding: 2rem 2rem 4rem;
      font-size: 0.68rem;
      letter-spacing: 0.12em;
      color: var(--text-muted);
      text-transform: uppercase;
      border-top: 1px solid var(--border);
    }

    /* ─── KEYFRAMES ──────────────────────────────────────────────────── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    @keyframes cardReveal {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ─── FOCUS / ACCESSIBILITY ──────────────────────────────────────── */
    .hp-card:focus-visible {
      outline: 2px solid var(--green);
      outline-offset: 3px;
    }

    /* ─── DISABLED / COMING SOON STATES ─────────────────────────────── */

    /* Card — grayed out, no hover interaction */
    .hp-card--disabled {
      opacity: 0.45;
      cursor: default;
      pointer-events: none;
      filter: saturate(0.2);
    }

    .hp-card--disabled:hover {
      transform: none;
      box-shadow: none;
      border-color: var(--border);
      background: var(--bg-card);
    }

    .hp-card__badge--muted {
      color: var(--text-muted);
      border-color: rgba(255,255,255,0.08);
    }

    .hp-card__name--muted {
      color: var(--text-muted);
      text-shadow: none;
    }

    .hp-card__cta--muted {
      color: var(--text-muted);
    }

    .hp-card__cta--muted::before {
      background: var(--text-muted);
    }

    /* Feature row — muted / coming soon */
    .hp-feature--disabled {
      opacity: 0.45;
      filter: saturate(0.2);
      pointer-events: none;
    }

    .hp-eyebrow--muted {
      color: var(--text-muted);
    }

    .hp-section-title--muted {
      color: var(--text-muted);
      text-shadow: none;
    }

    .hp-text--muted {
      color: var(--text-muted) !important;
    }

    .hp-btn--disabled {
      display: inline-flex;
      align-items: center;
      font-family: var(--font-display);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      padding: 0.75rem 1.6rem;
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,0.08);
      background: transparent;
      color: var(--text-muted);
      cursor: default;
    }

    /* Feature row image placeholder (for FGR) */
    .hp-feature__img--placeholder {
      aspect-ratio: 16 / 9;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg-card);
    }

    .hp-feature__img--placeholder::before {
      content: attr(data-initials);
      font-family: var(--font-display);
      font-size: 3.5rem;
      font-weight: 900;
      color: var(--green-muted);
      letter-spacing: -0.05em;
      opacity: 0.5;
    }

    /* Remove the gradient overlay on placeholder feature images */
    .hp-feature__img--placeholder::after {
      display: none;
    }

    /* ─── RESPONSIVE ─────────────────────────────────────────────────── */
    @media (max-width: 820px) {
      .hp-feature,
      .hp-feature--reverse .hp-feature__img,
      .hp-feature--reverse .hp-feature__text {
        grid-template-columns: 1fr;
        order: unset !important;
      }

      .hp-hero {
        padding: 3.5rem 1rem 2.5rem;
      }
    }

    @media (max-width: 560px) {
      .dl-wrap { padding: 0 1rem; }
    }
    /* ─── HERO BACKGROUND SLIDER ─────────────────────────────────────
       Three images crossfade behind the hero text. Slides share an
       overlapping opacity window so the outgoing and incoming images
       are both visible simultaneously — creating a true dissolve with
       no black gap between them.

       Timing (per 18s cycle — 3 slides × 6s each):
         Each slide is fully visible for 4s, then spends 1s fading out
         while the next slide spends 1s fading in (the overlap window).
         A final 1s is held at opacity:0 before the cycle repeats.

       Keyframe percentages for an 18s cycle:
         0%        →  0   (start, invisible)
         5.56%     →  1   (fade in complete  — 1s / 18s)
         27.78%    →  1   (hold visible      — 4s window ends at 5s)
         33.33%    →  0   (fade out complete — 1s fade = 6s mark)
         100%      →  0   (invisible for remaining two slots)

       Slide offsets: slide-1 = 0s, slide-2 = 6s, slide-3 = 12s
    ──────────────────────────────────────────────────────────────── */

    /* Slider container fills the hero absolutely */
    .hp-hero__slider {
      position: absolute;
      /* Align with .dl-wrap gutters: same max-width and auto margins */
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      /*max-width: 1100px;*/
      top: 0;
      bottom: 0;
      z-index: 0;
      /* Clip the Ken Burns zoom inside the gutter boundary */
      overflow: hidden;
      border-radius: 4px;
    }

    /* Dark overlay — sits above images, below text */
    .hp-hero__overlay {
      position: absolute;
      inset: 0;
      background: rgba(10, 13, 10, 0.75);
      z-index: 2;
      pointer-events: none;
    }

    /* Foreground text — above overlay */
    .hp-hero__content {
      position: relative;
      z-index: 3;
    }

    /* Each slide stacked in place */
    .hp-hero__slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      z-index: 1;
      overflow: hidden;
    }

    .hp-hero__slide img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      will-change: transform, opacity;
    }

    /* ── Slide animations ── */
    .hp-hero__slide--1 { animation: heroFade 18s ease-in-out infinite 0s; }
    .hp-hero__slide--2 { animation: heroFade 18s ease-in-out infinite 6s; }
    .hp-hero__slide--3 { animation: heroFade 18s ease-in-out infinite 12s; }

    .hp-hero__slide--1 img { animation: heroZoom 18s ease-in-out infinite 0s; }
    .hp-hero__slide--2 img { animation: heroZoom 18s ease-in-out infinite 6s; }
    .hp-hero__slide--3 img { animation: heroZoom 18s ease-in-out infinite 12s; }

    /* Crossfade — overlap at transition so both slides are visible together */
    @keyframes heroFade {
      0%      { opacity: 0; }        /* invisible at start of slot        */
      5.56%   { opacity: 1; }        /* fully in after ~1s                */
      27.78%  { opacity: 1; }        /* hold — visible window ends at ~5s */
      33.33%  { opacity: 0; }        /* fully out at 6s mark (next is in) */
      100%    { opacity: 0; }        /* invisible for remaining two slots  */
    }

    /* Ken Burns — slow 4s zoom over the visible window */
    @keyframes heroZoom {
      0%      { transform: scale(1.00); }
      27.78%  { transform: scale(1.06); }
      100%    { transform: scale(1.06); }
    }