/**
 * The Black Turn — Modern + Interactive Login (standalone)
 * Brand red+black+white. Animated brand panel, equalizer, store marquee,
 * rotating text, 3D tilt card, entrance + micro-interactions.
 * Mobile: compact single-screen (no scroll).
 */
:root{
  --red:#E8161E; --red-700:#A20E15; --red-soft:#FFECEC;
  --black:#14161C; --ink:#1C2027; --muted:#6A7180; --faint:#99A0AE;
  --line:#E9EBF0; --bg:#F3F4F8; --surface:#FFFFFF;
  --btn:linear-gradient(135deg,#2C313B 0%,#111317 100%);
  --btn-hover:linear-gradient(120deg,#F0232B 0%,#B40D14 100%);
  --radius:14px;
  --font:'Poppins','Inter',system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body.tbt-auth{
  font-family:var(--font);
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  color:var(--ink);
  overflow:hidden;
  perspective:1400px;
  background:
    radial-gradient(620px 380px at 12% 18%, rgba(232,22,30,.08), transparent 60%),
    radial-gradient(520px 320px at 92% 88%, rgba(17,19,23,.06), transparent 60%),
    var(--bg);
}
body.tbt-auth::before{
  content:""; position:fixed; inset:-20%;
  background:
    radial-gradient(380px 380px at 20% 30%, rgba(232,22,30,.06), transparent 60%),
    radial-gradient(420px 420px at 80% 70%, rgba(40,44,54,.05), transparent 60%);
  animation:drift 18s ease-in-out infinite alternate; z-index:0;
}
@keyframes drift{ from{transform:translate(-3%,-2%) rotate(0deg);} to{transform:translate(3%,2%) rotate(4deg);} }

/* ===== Card ===== */
.auth-card{
  position:relative; z-index:1;
  display:flex; width:100%; max-width:960px; min-height:560px;
  background:var(--surface); border-radius:22px; overflow:hidden;
  box-shadow:0 30px 70px -28px rgba(17,19,23,.45), 0 1px 2px rgba(17,19,23,.05);
  border:1px solid var(--line);
  animation:cardIn .7s cubic-bezier(.2,.8,.2,1) both;
  transition:transform .18s ease;
  transform-style:preserve-3d; will-change:transform;
}
@keyframes cardIn{ from{opacity:0; transform:translateY(24px) scale(.985);} to{opacity:1; transform:none;} }

/* ===== Left brand panel ===== */
.auth-brand{
  flex:0 0 44%; position:relative; color:#fff; overflow:hidden;
  background:linear-gradient(135deg,#23272F 0%,#141820 45%,#0C0D11 100%);
  background-size:200% 200%; animation:aurora 14s ease infinite;
}
@keyframes aurora{ 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }

.auth-brand .blob{position:absolute; border-radius:50%; filter:blur(38px); opacity:.55; z-index:0;}
.auth-brand .blob-1{width:240px; height:240px; right:-70px; top:-50px; background:radial-gradient(circle,#F0232B,transparent 70%); animation:float1 11s ease-in-out infinite;}
.auth-brand .blob-2{width:200px; height:200px; left:-60px; bottom:-40px; background:radial-gradient(circle,#4a0d10,transparent 70%); animation:float2 13s ease-in-out infinite;}
@keyframes float1{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-26px,30px) scale(1.12);} }
@keyframes float2{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(24px,-24px) scale(1.1);} }

.auth-brand-content{
  position:relative; z-index:1; height:100%;
  padding:40px 36px; display:flex; flex-direction:column; justify-content:space-between;
}
.auth-wordmark{font-weight:800; font-size:23px; letter-spacing:1px; animation:fadeUp .7s .15s both;}
.auth-wordmark span{color:var(--red);}
.auth-tagline{color:#9AA0AE; font-size:13px; margin-top:4px; animation:fadeUp .7s .25s both;}

.equalizer{display:flex; align-items:flex-end; gap:5px; height:40px; margin-bottom:18px;}
.equalizer i{width:5px; border-radius:4px; height:100%; background:linear-gradient(180deg,#F0232B,#7a0a0e); transform-origin:bottom; animation:eq 1.1s ease-in-out infinite;}
.equalizer i:nth-child(1){animation-delay:0s;}  .equalizer i:nth-child(2){animation-delay:.18s;}
.equalizer i:nth-child(3){animation-delay:.36s;} .equalizer i:nth-child(4){animation-delay:.10s;}
.equalizer i:nth-child(5){animation-delay:.50s;} .equalizer i:nth-child(6){animation-delay:.28s;}
.equalizer i:nth-child(7){animation-delay:.42s;} .equalizer i:nth-child(8){animation-delay:.07s;}
.equalizer i:nth-child(9){animation-delay:.33s;}
@keyframes eq{ 0%,100%{transform:scaleY(.28);} 50%{transform:scaleY(1);} }

.auth-brand-mid h3{font-size:24px; line-height:1.25; font-weight:700; margin:0 0 12px; animation:fadeUp .7s .35s both;}
.auth-brand-mid p{color:#C2C7D2; font-size:13.5px; line-height:1.6; margin:0; animation:fadeUp .7s .45s both;}
.rotate{display:inline-block; color:var(--red); font-weight:800; transition:opacity .35s ease, transform .35s ease;}
.rotate.swap{opacity:0; transform:translateY(8px);}

/* store marquee */
.store-marquee{
  margin-top:22px; overflow:hidden; animation:fadeUp .7s .55s both;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.store-track{display:flex; gap:12px; width:max-content; animation:marquee 26s linear infinite;}
.store-marquee:hover .store-track{animation-play-state:paused;}
.store-track .chip{
  flex:0 0 auto; width:46px; height:46px; border-radius:13px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.09);
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease, background .2s ease;
}
.store-track .chip:hover{transform:translateY(-4px) scale(1.08); background:rgba(255,255,255,.16);}
.store-track .chip img{width:26px; height:26px;}
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

.auth-brand-foot{color:#6A7180; font-size:12px; animation:fadeUp .7s .65s both;}

/* ===== Right form panel ===== */
.auth-form{flex:1 1 56%; padding:46px 46px; display:flex; flex-direction:column; justify-content:center;}
.auth-form > *{animation:fadeUp .6s both;}
.auth-form > *:nth-child(1){animation-delay:.20s;} .auth-form > *:nth-child(2){animation-delay:.27s;}
.auth-form > *:nth-child(3){animation-delay:.34s;} .auth-form > *:nth-child(4){animation-delay:.41s;}
.auth-form > *:nth-child(5){animation-delay:.48s;} .auth-form > *:nth-child(6){animation-delay:.55s;}
.auth-form > *:nth-child(7){animation-delay:.62s;}

.auth-logo{align-self:flex-start; height:38px; width:auto; max-width:200px; object-fit:contain; margin-bottom:20px;}
.auth-form h1{font-size:26px; font-weight:700; color:var(--black); margin:0 0 4px;}
.auth-sub{color:var(--muted); font-size:14px; margin:0 0 24px;}

.auth-alert{background:var(--red-soft); color:var(--red-700); border:1px solid rgba(232,22,30,.18); border-radius:12px; padding:11px 14px; font-size:13.5px; margin-bottom:18px; animation:shake .45s ease;}
.auth-alert a{color:var(--red-700); font-weight:600;}
@keyframes shake{ 0%,100%{transform:translateX(0);} 20%{transform:translateX(-7px);} 40%{transform:translateX(6px);} 60%{transform:translateX(-4px);} 80%{transform:translateX(3px);} }

/* ---------------------------------------------------------------------------
   Phones: never let a field be under 16px
   ---------------------------------------------------------------------------
   iOS Safari zooms the whole page in when a field smaller than 16px is focused,
   and does not zoom back — every field after the first is then typed into a
   page scrolled sideways.

   The panel is already covered: assets/css/mobile-fixes.css does this for every
   page that includes includes/footer.php. login.php and register.php do not —
   they sit outside the panel and load only this file — so the very first field
   a new artist ever touches was the one page still doing it.
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px){
  .auth-input input,
  .auth-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .auth-form select,
  .auth-form textarea{
    font-size: 16px;
  }
}

/* ---------------------------------------------------------------------------
   A deactivated account
   ---------------------------------------------------------------------------
   Not .auth-alert: that shakes, and shaking at somebody whose account has been
   suspended is the wrong tone for a message they can do nothing about. This is
   a calm block that explains, rather than an error that scolds — and it holds
   several lines (what, why, until when, who to ask), which a one-line alert
   cannot.
   --------------------------------------------------------------------------- */
.auth-block{
  text-align:left; border-radius:14px; padding:14px 16px; margin-bottom:18px;
  background:#FFF7E8; border:1px solid #F0DFB6;
}
.auth-block--closed{ background:var(--red-soft); border-color:rgba(232,22,30,.22); }

.auth-block-head{ display:flex; gap:10px; align-items:flex-start; min-width:0; }
.auth-block-head .bi{ flex:none; font-size:1.15rem; color:#A97400; line-height:1.35; }
.auth-block--closed .auth-block-head .bi{ color:var(--red-700); }
.auth-block-head strong{
  min-width:0; font-size:14.5px; font-weight:700; color:#6B4A00; line-height:1.4;
  overflow-wrap:anywhere;
}
.auth-block--closed .auth-block-head strong{ color:var(--red-700); }

.auth-block-reason{
  margin:11px 0 0; padding:10px 12px; border-radius:10px;
  background:rgba(255,255,255,.72); border:1px solid rgba(0,0,0,.06);
  font-size:13.5px; line-height:1.6; color:#5A4300; overflow-wrap:anywhere;
}
.auth-block--closed .auth-block-reason{ color:var(--red-700); }
.auth-block-reason span{
  display:block; font-size:12px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; opacity:.65; margin-bottom:3px;
}

.auth-block-timer{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:11px 0 0; padding:10px 12px; border-radius:10px;
  background:#1C2027; color:#fff;
  font-size:14.5px; font-weight:700; font-variant-numeric:tabular-nums;
}
.auth-block-timer .bi{ flex:none; color:#FFC531; }

.auth-block-note{
  margin:9px 0 0; font-size:12.5px; line-height:1.6; color:#7A5A16;
  overflow-wrap:anywhere;
}
.auth-block-note strong{ color:#5A4300; }

.auth-block-help{
  margin:11px 0 0; padding-top:10px; border-top:1px solid rgba(0,0,0,.08);
  font-size:12.5px; line-height:1.55; color:#7A5A16;
}
.auth-block--closed .auth-block-help{ color:var(--red-700); }
/* 44px, because on a phone this is the only thing left to tap. */
.auth-block-help a{
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--red-700); font-weight:700; text-decoration:underline;
}

.auth-label{display:block; font-size:13px; font-weight:600; color:var(--ink); margin:0 0 7px;}
.auth-input{position:relative; margin-bottom:16px;}
.auth-ico{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--faint); pointer-events:none; transition:color .18s ease;}
.auth-input input{width:100%; height:48px; padding:0 44px; border:1px solid var(--line); border-radius:var(--radius); background:#FAFBFD; font-size:14.5px; font-family:var(--font); color:var(--ink); transition:border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;}
.auth-input input:focus{outline:none; border-color:var(--red); background:#fff; box-shadow:0 0 0 .22rem rgba(232,22,30,.16); transform:translateY(-1px);}
.auth-input:focus-within .auth-ico{color:var(--red);}
.auth-eye{position:absolute; right:8px; top:50%; transform:translateY(-50%); width:34px; height:34px; border:none; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--faint); border-radius:8px; transition:color .15s ease, background .15s ease;}
.auth-eye:hover{color:var(--red); background:var(--red-soft);}
.auth-eye svg{width:18px; height:18px;}

.auth-row{display:flex; align-items:center; justify-content:space-between; margin:2px 0 22px;}
.auth-check{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); cursor:pointer;}
.auth-check input{width:16px; height:16px; accent-color:var(--red);}
.auth-link{color:var(--red); font-size:13px; font-weight:500; text-decoration:none;}
.auth-link:hover{color:var(--red-700); text-decoration:underline;}

.auth-btn{position:relative; overflow:hidden; width:100%; height:50px; border:none; border-radius:var(--radius); background:var(--btn); color:#fff; font-family:var(--font); font-weight:600; font-size:15px; cursor:pointer; box-shadow:0 9px 20px -7px rgba(17,19,23,.5); transition:all .2s ease;}
.auth-btn::after{content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(110deg, transparent, rgba(255,255,255,.32), transparent); transform:skewX(-20deg);}
.auth-btn:hover{background:var(--btn-hover); transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(232,22,30,.6);}
.auth-btn:hover::after{animation:sweep .8s ease;}
.auth-btn:active{transform:translateY(0);}
@keyframes sweep{ to{left:130%;} }

.auth-divider{display:flex; align-items:center; text-align:center; color:var(--faint); font-size:12px; margin:22px 0;}
.auth-divider::before,.auth-divider::after{content:""; flex:1; height:1px; background:var(--line);}
.auth-divider span{padding:0 14px; text-transform:uppercase; letter-spacing:.1em;}

.auth-google{width:100%; height:48px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; color:var(--ink); font-family:var(--font); font-weight:500; font-size:14.5px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; transition:all .15s ease;}
.auth-google:hover{background:#F6F7FB; border-color:#D9DCE4; transform:translateY(-1px); box-shadow:0 8px 18px -10px rgba(17,19,23,.3);}
.auth-google img{width:20px; height:20px;}

.auth-foot{text-align:center; color:var(--muted); font-size:13.5px; margin:22px 0 0;}
.auth-foot a{color:var(--red); font-weight:600; text-decoration:none;}
.auth-foot a:hover{text-decoration:underline;}

@keyframes fadeUp{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }

/* ===== Mobile: compact, single screen ===== */
@media (max-width:860px){
  body.tbt-auth{padding:12px; overflow:auto; perspective:none;}
  .auth-card{flex-direction:column; max-width:430px; min-height:0; transform:none !important; animation-duration:.5s;}
  .auth-brand{flex:none;}
  .auth-brand-content{flex-direction:row; align-items:center; justify-content:space-between; padding:14px 22px;}
  .equalizer,.auth-brand-mid,.store-marquee,.auth-brand-foot{display:none;}
  .auth-tagline{display:none;}
  .auth-wordmark{font-size:18px;}
  .auth-form{padding:22px 26px 26px;}
  .auth-logo{height:30px; margin-bottom:12px;}
  .auth-form h1{font-size:21px;}
  .auth-sub{font-size:13px; margin-bottom:16px;}
  .auth-input{margin-bottom:12px;}
  .auth-input input{height:44px;}
  .auth-row{margin:0 0 14px;}
  .auth-btn{height:46px;}
  .auth-divider{margin:13px 0;}
  .auth-google{height:44px;}
  .auth-foot{margin-top:14px;}
}
@media (max-width:420px){
  .auth-form{padding:18px 20px 22px;}
  .auth-brand-content{padding:12px 18px;}
}

@media (prefers-reduced-motion:reduce){ *{animation:none !important;} }