/* ==========================================================================
   stz.floating.story.2col.css
   Two-column Floating Card + Storytelling
   Keeps same form layout + scoped form CSS
   ========================================================================== */

/* ---------- THEME VARIABLES (LIGHT DEFAULT) ---------- */
:root{
  --stz-bg: #f6f7fb;
  --stz-fg: #0b0d12;
  --stz-muted: rgba(11,13,18,.62);

  --stz-card: rgba(255,255,255,.78);
  --stz-card-border: rgba(11,13,18,.10);
  --stz-card-shadow: 0 20px 60px rgba(0,0,0,.12);

  --stz-line: rgba(11,13,18,.12);
  --stz-input-bg: rgba(255,255,255,.72);
  --stz-input-border: rgba(11,13,18,.18);

  --stz-link: rgba(11,13,18,.92);
  --stz-link-hover: rgba(11,13,18,1);

  --stz-accent: rgba(11,13,18,1);

  --stz-story-opacity: .12;
  --stz-radius: 18px;
}

/* ---------- NIGHT MODE OVERRIDES ---------- */
body.night-mode,
body.night_mode,
body.dark-mode,
body.dark_mode,
html[data-theme="dark"] body,
body[data-theme="dark"]{
  --stz-bg: #07080c;
  --stz-fg: #f3f5ff;
  --stz-muted: rgba(243,245,255,.62);

  --stz-card: rgba(16,18,26,.66);
  --stz-card-border: rgba(255,255,255,.12);
  --stz-card-shadow: 0 30px 90px rgba(0,0,0,.55);

  --stz-line: rgba(255,255,255,.12);
  --stz-input-bg: rgba(10,12,18,.55);
  --stz-input-border: rgba(255,255,255,.16);

  --stz-link: rgba(243,245,255,.92);
  --stz-link-hover: rgba(243,245,255,1);

  --stz-accent: rgba(243,245,255,1);

  --stz-story-opacity: .10;
}

/* ---------- PAGE CANVAS ---------- */
.stz-white-wrap{
  min-height: 100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  padding: 36px 16px 26px;
  background: var(--stz-bg);
  color: var(--stz-fg);

  position: relative;
  overflow: hidden;
}

/* Story lines in background (still works) */
.stz-white-wrap::before,
.stz-white-wrap::after{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:min(1100px, 94vw);
  pointer-events:none;
  white-space:nowrap;
  font-weight:900;
  letter-spacing:.02em;
  text-transform:uppercase;
  opacity:0;
}

.stz-white-wrap::before{
  content:"OWN YOUR IDENTITY";
  top:18%;
  font-size:clamp(34px, 6.5vw, 86px);
  color:var(--stz-fg);
  opacity:var(--stz-story-opacity);
  animation: stzStoryA 10s ease-in-out infinite;
}

.stz-white-wrap::after{
  content:"EARN FOR ENGAGEMENT";
  top:31%;
  font-size:clamp(26px, 5.2vw, 68px);
  color:var(--stz-fg);
  opacity:var(--stz-story-opacity);
  animation: stzStoryB 10s ease-in-out infinite;
}

@keyframes stzStoryA{
  0%{opacity:0; transform:translateX(-50%) translateY(12px);}
  10%{opacity:var(--stz-story-opacity); transform:translateX(-50%) translateY(0);}
  45%{opacity:var(--stz-story-opacity); transform:translateX(-50%) translateY(0);}
  55%{opacity:0; transform:translateX(-50%) translateY(-10px);}
  100%{opacity:0; transform:translateX(-50%) translateY(-10px);}
}
@keyframes stzStoryB{
  0%{opacity:0; transform:translateX(-50%) translateY(12px);}
  40%{opacity:0; transform:translateX(-50%) translateY(12px);}
  55%{opacity:var(--stz-story-opacity); transform:translateX(-50%) translateY(0);}
  85%{opacity:var(--stz-story-opacity); transform:translateX(-50%) translateY(0);}
  95%{opacity:0; transform:translateX(-50%) translateY(-10px);}
  100%{opacity:0; transform:translateX(-50%) translateY(-10px);}
}

/* ---------- BRAND ---------- */
.stz-white-brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  position:relative;
  z-index:2;
}

.stz-white-logo{
  width:52px;height:52px;
  object-fit:contain;
  border-radius:14px;
}

.stz-white-name{
  font-weight:900;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-size:14px;
  opacity:.95;
}

/* members line */
.stz-countline{
  margin:0 0 16px;
  font-size:13px;
  color:var(--stz-muted);
  position:relative;
  z-index:2;
}
.stz-countline-value{ color:var(--stz-fg); font-weight:800; margin:0 6px; }
.stz-countline-sub{ opacity:.75; }

/* ---------- FLOATING TWO-COLUMN CARD ---------- */
.stz-white-card{
  width: min(980px, 94vw);
  border-radius: var(--stz-radius);
  background: var(--stz-card);
  border: 1px solid var(--stz-card-border);
  box-shadow: var(--stz-card-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  padding: 0; /* important: grid handles padding per column */
  position: relative;
  z-index: 3;

  overflow: hidden;

  animation: stzFloat 6.5s ease-in-out infinite;
  transform: translateZ(0);
}

@keyframes stzFloat{
  0%{ transform: translateY(0px); }
  50%{ transform: translateY(-10px); }
  100%{ transform: translateY(0px); }
}

.stz-card-grid{
  display:flex;
  min-height: 420px;
}

/* Left: story */
.stz-card-story{
  flex: 1.05;
  padding: 26px 26px 22px;
  border-right: 1px solid var(--stz-line);

  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 10px;

  position: relative;
}

/* subtle inner texture for story column */
.stz-card-story::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.55;
  background:
    radial-gradient(700px 380px at 30% 20%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(600px 360px at 70% 70%, rgba(0,0,0,.10), transparent 62%);
}

body.night-mode .stz-card-story::before,
body.night_mode .stz-card-story::before,
body.dark-mode .stz-card-story::before,
body.dark_mode .stz-card-story::before,
html[data-theme="dark"] body .stz-card-story::before,
body[data-theme="dark"] .stz-card-story::before{
  background:
    radial-gradient(700px 380px at 30% 20%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(600px 360px at 70% 70%, rgba(0,0,0,.35), transparent 62%);
  opacity:.65;
}

.stz-story-kicker{
  position:relative;
  font-weight:900;
  letter-spacing:.12em;
  font-size:12px;
  opacity:.85;
}

.stz-story-title{
  position:relative;
  font-weight: 950;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-size: clamp(22px, 2.4vw, 34px);
}

.stz-story-sub{
  position:relative;
  color: var(--stz-muted);
  font-size: 14px;
  line-height: 1.45;
  max-width: 34ch;
}

.stz-story-list{
  position:relative;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display:flex;
  flex-direction:column;
  gap: 8px;
  color: var(--stz-fg);
}
.stz-story-list li{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 14px;
  opacity: .92;
}
.stz-story-list li::before{
  content:"";
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--stz-fg);
  opacity: .22;
}

.stz-story-foot{
  position:relative;
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap: 10px;
  color: var(--stz-muted);
  font-size: 13px;
}
.stz-story-dot{
  width:10px;height:10px;
  border-radius:999px;
  border:1px solid var(--stz-line);
}

/* Right: form (your existing layout lives here) */
.stz-card-form{
  flex: .95;
  padding: 22px 20px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* keep your header + switch styling */
.stz-form-head{
  margin-bottom: 10px;
  padding: 4px 2px 8px;
  border-bottom: 1px solid var(--stz-line);
}
.stz-form-title{
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 18px;
  line-height: 1.2;
}

.stz-switch{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--stz-line);
  font-size: 13px;
  color: var(--stz-muted);
}
.stz-switch a{
  color: var(--stz-link);
  text-decoration: none;
  font-weight: 800;
}
.stz-switch a:hover{
  color: var(--stz-link-hover);
  text-decoration: underline;
}

/* footer */
.stz-white-footer{
  margin-top: 16px;
  font-size: 12px;
  color: var(--stz-muted);
  display:flex;
  gap:10px;
  align-items:center;
  position:relative;
  z-index:2;
}
.stz-white-footer a{
  color: var(--stz-muted);
  text-decoration:none;
}
.stz-white-footer a:hover{
  color: var(--stz-link-hover);
  text-decoration:underline;
}

/* ---------- FORM STYLING (SCOPED: KEEP SAME FORMAT) ---------- */
.stz-white-card input[type="text"],
.stz-white-card input[type="email"],
.stz-white-card input[type="password"],
.stz-white-card input[type="number"],
.stz-white-card select,
.stz-white-card textarea{
  background: var(--stz-input-bg) !important;
  border: 1px solid var(--stz-input-border) !important;
  color: var(--stz-fg) !important;

  border-radius: 12px !important;
  padding: 12px 12px !important;

  outline: none !important;
  box-shadow: none !important;
}
.stz-white-card input::placeholder,
.stz-white-card textarea::placeholder{
  color: var(--stz-muted) !important;
}
.stz-white-card input:focus,
.stz-white-card select:focus,
.stz-white-card textarea:focus{
  border-color: var(--stz-accent) !important;
}

/* buttons */
.stz-white-card button,
.stz-white-card .btn,
.stz-white-card input[type="submit"]{
  border-radius: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .02em;
}

.stz-white-card .btn-primary,
.stz-white-card button.btn-primary,
.stz-white-card input.btn-primary{
  background: var(--stz-accent) !important;
  border: 1px solid var(--stz-accent) !important;
  color: var(--stz-bg) !important;
}
.stz-white-card .btn-primary:hover,
.stz-white-card button.btn-primary:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.stz-white-card .btn-secondary,
.stz-white-card .btn-light{
  background: transparent !important;
  border: 1px solid var(--stz-line) !important;
  color: var(--stz-fg) !important;
}

.stz-white-card .form-group,
.stz-white-card .form-control{
  margin-bottom: 10px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px){
  .stz-white-card{ width: min(640px, 94vw); }
  .stz-card-grid{ flex-direction: column; min-height: auto; }
  .stz-card-story{
    border-right: 0;
    border-bottom: 1px solid var(--stz-line);
    padding: 20px 18px 18px;
  }
  .stz-card-form{
    padding: 18px 16px 16px;
  }
}