/* File: styles.css */
/* Why: Keep the UI simple, responsive, and Netflix-inspired without copying assets. */
:root{
  --bg:#0f172a;
  --panel:#141826;
  --muted:#c4cbd6;
  --text:#ffffff;
  --accent:#38bdf8;
  --accent-press:#60a5fa;
  --focus:#bae6fd;
  --glass: rgba(16,20,38,.82);
  --radius: 8px;
  --brand-1:#38bdf8;
  --brand-2:#22c55e;
  --brand-3:#f59e0b;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background-color: #0b1020;
  background-image:
    linear-gradient(180deg, rgba(5,8,18,.72), rgba(8,12,24,.78)),
    url("./bcvipx-backgroup_2-pc.b8097c1f.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page{min-height:100%; position:relative; display:grid; grid-template-rows:auto 1fr auto}
.brand{position:absolute; inset:0 0 auto 0; z-index:2; padding:24px}
.brand-inner{max-width:1200px; margin:0 auto}
.logo{
  font-weight:800;
  letter-spacing:.5px;
  font-size:28px;
  background: linear-gradient(120deg, var(--brand-1), var(--brand-2), var(--brand-3));
  background-size: 200% 200%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 18px rgba(56,189,248,.35);
  animation: logo-rise 700ms ease both, logo-shift 7s ease-in-out infinite;
}

.billboard{
  position:fixed; inset:0;
  background: none;
  pointer-events:none;
  z-index:0;
}
.billboard::after{display:none}

/* Panel */
.panel{display:grid; place-items:center; padding:120px 16px 40px; z-index:2; position:relative; overflow:hidden; pointer-events:auto}
.panel-glow,
.panel-orbits{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  display:none;
}
.panel-glow::before{
  content:'';
  position:absolute;
  width:520px; height:520px;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  background: radial-gradient(circle, rgba(125,211,252,.22), transparent 60%);
  filter: blur(20px);
  animation: glow-pulse 6s ease-in-out infinite;
}
.panel-orbits::before,
.panel-orbits::after{
  content:'';
  position:absolute;
  width:520px; height:520px;
  left:50%; top:50%;
  border-radius:50%;
  border:1px solid rgba(96,165,250,.25);
  transform:translate(-50%,-50%);
  animation: orbit 18s linear infinite, orbit-color 6s ease-in-out infinite;
}
.panel-orbits::after{
  width:420px; height:420px;
  border-color: rgba(167,139,250,.20);
  animation-duration: 28s, 8s;
  animation-direction: reverse;
}
.card{
  width:100%; max-width:420px;
  background: var(--glass);
  border-radius: var(--radius);
  padding: 40px 32px 28px;
  box-shadow: 0 20px 40px rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
  position: relative;
  overflow: hidden;
  z-index: 3;
  pointer-events:auto;
}

.title{margin:0 0 20px; font-size:32px; font-weight:700; animation: title-rise 700ms ease 120ms both}

/* Inputs */
.input-group{margin-bottom:14px}
.input-group label{display:block; font-size:14px; color:var(--muted); margin:0 0 6px}
.input-group input{
  width:100%; border:1px solid #2e2e2e; background:#111; color:#fff; border-radius:4px;
  padding:14px 12px; font-size:16px; outline:none;
}
.input-group input:focus{border-color:var(--focus); box-shadow:0 0 0 3px rgba(61,169,255,.25)}
.password-wrap{position:relative; display:flex}
.password-wrap input{flex:1; padding-right:70px}
.toggle{
  position:absolute; right:6px; top:6px; height:36px; padding:0 10px;
  border:1px solid #2e2e2e; background:#1a1a1a; color:#fff; border-radius:4px; cursor:pointer;
}
.toggle:focus{outline:2px solid var(--focus)}
.hint{margin:.25rem 0 0; color:#9aa3af; font-size:12px}
.error{min-height:18px; margin:.25rem 0 0; color:#ff6b6b; font-size:12px}

/* Buttons */
.primary, .secondary{
  width:100%; border:none; border-radius:4px; padding:14px 12px; font-size:16px; cursor:pointer; font-weight:700;
}
.primary{
  background: linear-gradient(120deg, var(--brand-1), var(--brand-2), var(--brand-3));
  background-size: 200% 200%;
  color:#0b1020;
  margin-top:8px;
  transition: transform 180ms ease, box-shadow 220ms ease, background 200ms ease;
  animation: cta-float 3.2s ease-in-out infinite, button-shift 7s ease-in-out infinite;
  position: relative;
  z-index: 3;
  pointer-events: auto;
}
.primary:hover{
  background-position: 100% 50%;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(96,165,250,.35);
}
.primary:active{
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(96,165,250,.22);
}
.secondary{background:#2a2a2a; color:#fff; margin-top:10px}
.secondary:hover{background:#333}

/* Rows */
.row{display:flex; gap:12px; align-items:center; justify-content:space-between; margin:6px 0 6px}
.checkbox{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted)}
.checkbox input{width:18px; height:18px}

/* Or divider */
.or{display:flex; align-items:center; justify-content:center; gap:12px; margin:14px 0 6px; color:#9aa3af}
.or::before,.or::after{content:""; flex:1; height:1px; background:#2e2e2e}

/* Meta */
.meta{color:#cfcfcf; font-size:14px; margin:18px 0 0}
.meta a{color:#fff}
.captcha-note{color:#9aa3af; font-size:12px; margin-top:12px; line-height:1.4}

/* Staggered form reveal */
.card .input-group,
.card .row,
.card .primary,
.card .meta,
.card .captcha-note{
  opacity: 0;
  transform: translateY(10px);
  animation: field-in 520ms ease forwards;
  animation-delay: var(--delay, 0ms);
}

@keyframes field-in{
  from{opacity:0; transform: translateY(12px)}
  to{opacity:1; transform: translateY(0)}
}

/* Footer */
.site-footer{position:relative; z-index:1; color:#a1a1a1; padding:40px 24px}
.footer-inner{max-width:1200px; margin:0 auto}
.site-footer nav{display:flex; flex-wrap:wrap; gap:14px 24px; margin-bottom:10px}
.site-footer a{color:#a1a1a1; text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.copy{margin:0; font-size:14px}

@media (max-width:480px){
  .card{padding:28px 20px}
  .title{font-size:26px}
}
@media (max-width:900px){
  body{background-attachment: scroll;}
}

/* === Enhancements: animated background + entrance === */
:root {
  --grad-1: #0f172a;
  --grad-2: #111b2f;
  --grad-3: #0b1223;
  --accent: #38bdf8;
  --brand-1: #38bdf8;
  --brand-2: #22c55e;
  --brand-3: #f59e0b;
}

body { animation: none; }

@keyframes bg-pan {
  0%,100% { background-position: 0% 50%, 100% 50%, 0% 0%; }
  50%     { background-position: 100% 50%, 0% 50%, 100% 100%; }
}
@keyframes sun-sweep{
  0%,100%{transform: translateX(-18%) translateY(-4%) rotate(-6deg); opacity:.65}
  50%{transform: translateX(8%) translateY(2%) rotate(4deg); opacity:.95}
}

/* Billboard canvas covers section */
.billboard { position: relative; overflow: hidden; }
.bg-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }

/* Subtle float-in on the card */
.card { animation: float-in 600ms cubic-bezier(.2,.7,.2,1) 80ms both; }
.card::before{
  content:'';
  position:absolute; inset:-40%;
  background: linear-gradient(120deg, rgba(96,165,250,.18), transparent 45%, rgba(229,9,20,.12));
  animation: sheen 8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes float-in {
  from { transform: translateY(12px) scale(.985); opacity: 0; filter: blur(6px); }
  to   { transform: translateY(0) scale(1); opacity: 1; filter: blur(0); }
}


/* Pulse the CTA button very gently to hint interactivity */
.primary {
  position: relative;
  isolation: isolate;
}
.primary::after {
  content:'';
  position:absolute; inset: -2px;
  border-radius: inherit;
  animation: ring 2.6s ease-in-out infinite, shimmer 3.6s ease-in-out infinite;
  background: radial-gradient(circle at 50% 50%, rgba(125,211,252,.28), transparent 55%);
  z-index:-1;
  pointer-events:none;
}
@keyframes ring {
  0%, 100% { opacity: .45; transform: scale(1); }
  50%      { opacity: .10; transform: scale(1.05); }
}

@keyframes shimmer{
  0%,100%{opacity:.5}
  50%{opacity:.85}
}

@keyframes cta-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
}
@keyframes button-shift{
  0%,100%{background-position: 0% 50%}
  50%{background-position: 100% 50%}
}
@keyframes logo-shift{
  0%,100%{background-position: 0% 50%}
  50%{background-position: 100% 50%}
}
@keyframes sheen{
  0%,100%{transform: translateX(-20%) rotate(2deg); opacity:.35}
  50%{transform: translateX(20%) rotate(2deg); opacity:.6}
}

@keyframes glow-pulse{
  0%,100%{opacity:.55; transform:translate(-50%,-50%) scale(1)}
  50%{opacity:.85; transform:translate(-50%,-50%) scale(1.05)}
}

@keyframes orbit{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}

@keyframes logo-rise{
  from{opacity:0; transform:translateY(-8px)}
  to{opacity:1; transform:translateY(0)}
}
@keyframes orbit-color{
  0%,100%{border-color: rgba(56,189,248,.30)}
  50%{border-color: rgba(34,197,94,.30)}
}

@keyframes title-rise{
  from{opacity:0; transform:translateY(10px)}
  to{opacity:1; transform:translateY(0)}
}