/* ============================================================
   Black Bulb Media — Client Upload Portal
   Shared styles for the pop-out TransferNow uploader pages.
   Brand system mirrors blackbulb.com.
   ============================================================ */

:root{
  --bg:#0b0a0f;
  --bg-soft:#100e16;
  --ink:#f5f3f9;
  --muted:#b3adc4;
  --faint:#817b9a;
  --violet:#8239fd;
  --fuchsia:#ca0ffb;
  --blue:#4d4df8;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.16);
  --grad:linear-gradient(120deg,#ca0ffb 0%,#8239fd 58%,#6a2ee0 100%);
  --grad-soft:linear-gradient(120deg,rgba(202,15,251,.18),rgba(130,57,253,.18));
  --card:rgba(17,14,24,.62);
  --shadow:0 40px 90px rgba(0,0,0,.55);
  --ease:cubic-bezier(.16,1,.3,1);
  --ff:'Hanken Grotesk',"Helvetica Neue",Helvetica,Arial,sans-serif;
  --ff-display:'Bricolage Grotesque',"Helvetica Neue",Helvetica,Arial,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-tap-highlight-color:transparent}
body{
  font-family:var(--ff);
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  min-height:100vh;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
a{color:inherit;text-decoration:none}
img,svg{display:block}
::selection{background:rgba(202,15,251,.34);color:#fff}
:focus-visible{outline:2px solid var(--fuchsia);outline-offset:3px;border-radius:10px}

/* ---------- Background scene (client-supplied art) ---------- */
.scene{
  position:fixed;inset:0;z-index:-3;
  background:
    var(--bg)
    url('background.png') center bottom / cover no-repeat;
  transform:scale(1.04);
  animation:breathe 26s var(--ease) infinite alternate;
  will-change:transform;
}
@keyframes breathe{
  from{transform:scale(1.04) translateY(0)}
  to{transform:scale(1.09) translateY(-1.2%)}
}

/* Aurora fallback glow — gives depth even before/without the art */
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.aurora span{
  position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;
  mix-blend-mode:screen;will-change:transform;
}
.aurora .a1{width:52vw;height:52vw;left:-10vw;top:-14vw;
  background:radial-gradient(circle,rgba(202,15,251,.55),transparent 68%);
  animation:drift1 30s var(--ease) infinite alternate}
.aurora .a2{width:46vw;height:46vw;right:-12vw;top:8vh;
  background:radial-gradient(circle,rgba(77,77,248,.5),transparent 68%);
  animation:drift2 34s var(--ease) infinite alternate}
.aurora .a3{width:40vw;height:40vw;left:30vw;bottom:-16vw;
  background:radial-gradient(circle,rgba(130,57,253,.45),transparent 70%);
  animation:drift3 38s var(--ease) infinite alternate}
@keyframes drift1{to{transform:translate(6vw,5vh) scale(1.12)}}
@keyframes drift2{to{transform:translate(-5vw,4vh) scale(1.1)}}
@keyframes drift3{to{transform:translate(4vw,-5vh) scale(1.15)}}

/* Legibility scrim over the scene */
.scrim{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 90% 60% at 50% 26%, transparent 42%, rgba(11,10,15,.5) 100%),
    linear-gradient(180deg, rgba(11,10,15,.72) 0%, rgba(11,10,15,.18) 22%, transparent 46%, rgba(11,10,15,.35) 100%);
}

/* Fine grain, matches main site atmosphere */
body::after{
  content:"";position:fixed;inset:0;z-index:100;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Page frame ---------- */
.wrap{
  position:relative;z-index:5;
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  padding:clamp(18px,3.2vw,34px);
}

/* ---------- Top bar ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  opacity:0;animation:fadeDown .8s var(--ease) .1s both;
}
.brand{display:inline-flex;align-items:center;gap:12px}
.brand .logo-mark{width:clamp(132px,17vw,168px);height:auto;filter:drop-shadow(0 4px 18px rgba(0,0,0,.4))}
.brand .logo-mark image{width:1300px;height:900px}
.topbar .lock{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.82rem;letter-spacing:.02em;color:var(--muted);
  padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.topbar .lock svg{width:14px;height:14px;stroke:var(--fuchsia)}

/* ---------- Center stage ---------- */
.stage{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(20px,3vw,30px);
  padding:clamp(24px,5vh,60px) 0 clamp(20px,4vh,40px);
  text-align:center;
}

.intro{max-width:640px;display:flex;flex-direction:column;align-items:center;gap:14px}
.eyebrow{
  opacity:0;animation:rise .8s var(--ease) .24s both;
  display:inline-flex;align-items:center;gap:9px;
  font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
  padding:7px 15px;border-radius:999px;
  background:var(--grad-soft);border:1px solid var(--line);
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--fuchsia);box-shadow:0 0 12px 2px rgba(202,15,251,.8);
  animation:pulse 2.4s ease-in-out infinite}
h1{
  opacity:0;animation:rise .85s var(--ease) .32s both;
  font-family:var(--ff-display);font-weight:700;
  font-size:clamp(2.1rem,5.4vw,3.5rem);line-height:1.04;letter-spacing:-.02em;
}
h1 .grad{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  background-size:220% 100%;animation:hue 8s ease-in-out infinite;
}
.lede{
  opacity:0;animation:rise .85s var(--ease) .42s both;
  max-width:52ch;color:var(--muted);font-size:clamp(1rem,1.6vw,1.12rem);
}

/* ---------- Steps ---------- */
.steps{
  opacity:0;animation:rise .85s var(--ease) .5s both;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;
  color:var(--faint);font-size:.82rem;
}
.steps b{color:var(--ink);font-weight:600}
.steps .dot{width:5px;height:5px;border-radius:50%;background:var(--line-2)}
.steps .step{display:inline-flex;align-items:center;gap:7px}
.steps .num{
  display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  font-size:.7rem;font-weight:700;color:#fff;background:var(--grad);
}

/* ---------- Uploader card ---------- */
.card{
  position:relative;width:100%;max-width:620px;
  opacity:0;animation:cardIn 1s var(--ease) .58s both;
  border-radius:26px;
  background:var(--card);
  border:1px solid var(--line-2);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(22px) saturate(1.4);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);
  padding:clamp(16px,2.4vw,24px);
  overflow:hidden;
}
/* gradient hairline halo */
.card::before{
  content:"";position:absolute;inset:0;border-radius:26px;padding:1px;
  background:linear-gradient(135deg,rgba(202,15,251,.6),rgba(130,57,253,.15) 40%,transparent 65%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}
.card-head{
  display:flex;align-items:center;gap:10px;
  padding:2px 4px 14px;margin-bottom:4px;
  border-bottom:1px solid var(--line);
  color:var(--muted);font-size:.85rem;
}
.card-head .win{display:flex;gap:6px}
.card-head .win i{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.card-head .win i:first-child{background:rgba(202,15,251,.6)}
.card-head .title{margin-left:2px;font-weight:600;color:var(--ink);letter-spacing:.01em}
.card-head .badge{margin-left:auto;font-size:.72rem;color:var(--faint)}

.frame{position:relative;min-height:360px;border-radius:14px}
/* TransferNow widget */
#tnow-widget-wrapper{
  display:block;margin:auto;width:100%;height:360px;border:0;overflow:hidden;
  border-radius:12px;background:transparent;
  opacity:0;transition:opacity .6s var(--ease),height .35s var(--ease);
}
body.widget-ready #tnow-widget-wrapper{opacity:1}

/* widget skeleton loader (hidden once widget paints) */
.frame .skeleton{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;
  color:var(--faint);font-size:.9rem;pointer-events:none;
  transition:opacity .5s ease;
}
body.widget-ready .frame .skeleton{opacity:0}
.spinner{
  width:38px;height:38px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 25%,var(--fuchsia),var(--violet) 75%,transparent);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0);
          mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0);
  animation:spin 1s linear infinite;
}

.reassure{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;gap:9px;
  color:var(--muted);font-size:.84rem;text-align:center;
}
.reassure svg{width:15px;height:15px;stroke:var(--violet);flex:none}

/* ---------- Footer ---------- */
.foot{
  opacity:0;animation:fadeDown .9s var(--ease) .7s both;
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  color:var(--faint);font-size:.8rem;padding-top:6px;
}
.foot a{color:var(--muted);border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.foot a:hover{color:var(--ink);border-color:var(--line-2)}
.foot .sep{width:4px;height:4px;border-radius:50%;background:var(--line-2)}

/* ---------- Intro loader ---------- */
#loader{
  position:fixed;inset:0;z-index:200;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  background:radial-gradient(ellipse at 50% 45%,#15121d,#0b0a0f 70%);
  transition:opacity .6s var(--ease),visibility .6s;
}
body.ready #loader{opacity:0;visibility:hidden}
#loader .emblem{width:74px;height:auto;animation:float 3s ease-in-out infinite}
#loader .emblem svg{width:100%;height:auto}
#loader .bar{width:180px;height:3px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
#loader .bar i{display:block;height:100%;width:40%;border-radius:999px;background:var(--grad);
  animation:load 1.2s var(--ease) infinite}
#loader .tag{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}

/* ---------- Keyframes ---------- */
@keyframes spin{to{transform:rotate(1turn)}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
@keyframes hue{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes load{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes cardIn{from{opacity:0;transform:translateY(34px) scale(.985)}to{opacity:1;transform:none}}

/* ---------- Responsive ---------- */
@media (max-width:560px){
  .steps{display:none}
  .card-head .badge{display:none}
  .topbar .lock span{display:none}
  .topbar .lock{padding:9px}
}

/* ---------- Motion sensitivity ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .scene{transform:none}
  #tnow-widget-wrapper{opacity:1}
}