/* =========================================
   Imperial Alfa — Coming Soon (PNG only)
   Centered card + precise CTA hotspot
   ========================================= */

/* Micro-nudge for desktop if PNG has uneven padding */
:root{
  --desktop-nudge-x: 1.2vw;      /* + moves right, - moves left */

  /* ===== DESKTOP CTA (over the pill) ===== */
  --cta-left: 79%;             /* pill center X (as % of card) */
  --cta-top: 80%;                /* pill center Y (smaller = higher) */
  --cta-w: 19.5%;                /* pill width */
  --cta-h: 12%;                  /* pill height */
  --cta-radius: 9999px;          /* pill rounding */

  /* ===== MOBILE CTA ===== */
  --cta-m-left: 50%;
  --cta-m-top: 69%;
  --cta-m-w: 52%;
  --cta-m-h: 15%;
}

/* Base */
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{ background:#000; font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.page{ position:relative; width:100%; height:100vh; overflow:hidden; }

/* Background video */
.bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:brightness(.55);
  z-index:0;
}

/* ---------- OVERLAY (card wrapper) ---------- */
/* Desktop: perfectly centered (equal top & bottom) */
.overlay{
  position:absolute;
  left:calc(50% + var(--desktop-nudge-x));
  top:50%;
  transform:translate(-50%, -50%);
  width:min(78vw, 1497px);
  aspect-ratio:1497 / 842;
  z-index:1;
  pointer-events:auto;   /* allow clicks inside */
}

/* PNG cards fill the wrapper but do not capture clicks */
.card{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  pointer-events:none;
  z-index:1;
}

/* Show only desktop card by default */
.card--mobile{ display:none; }

/* ---------- CTA HOTSPOT (DESKTOP) ----------
   Centered on the pill; clipped to pill shape to avoid spillover. */
.cta{
  position:absolute;
  left:var(--cta-left);
  top:var(--cta-top);
  width:var(--cta-w);
  height:var(--cta-h);
  transform:translate(-50%, -50%);
  pointer-events:auto;
  display:block;
  z-index:2;
  cursor:pointer;

  border-radius:var(--cta-radius);
  -webkit-clip-path: inset(0 round var(--cta-radius));
          clip-path: inset(0 round var(--cta-radius));
}

/* ---------- MOBILE LAYOUT ---------- */
@media (max-width: 900px){
  /* 8% top + 8% bottom spacing (approved) */
  .overlay{
    left:50%;
    top:8vh;
    transform:translateX(-50%);
    width:auto;
    height:84vh;               /* 100 - 8 - 8 */
    aspect-ratio:1497 / 842;
  }

  .card--desktop{ display:none; }
  .card--mobile { display:block; }

  /* Mobile CTA */
  .cta{
    left:var(--cta-m-left);
    top:var(--cta-m-top);
    width:var(--cta-m-w);
    height:var(--cta-m-h);
    transform:translate(-50%, -50%);
    border-radius:var(--cta-radius);
    -webkit-clip-path: inset(0 round var(--cta-radius));
            clip-path: inset(0 round var(--cta-radius));
  }
}

/* Autoplay hint */
.playHint{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%, -50%);
  padding:10px 14px; font-size:14px; border-radius:8px;
  border:1px solid #fff; background:rgba(0,0,0,.5); color:#fff;
  z-index:3;
}

/* Debug (uncomment to see the clickable box while tuning) */
/* .cta{ outline:2px dashed #00ffa8; background:rgba(0,255,168,.1); } */