/* ===== BALLSY.TV · THE MIDNIGHT HOUR · ballsy-midnight-sep20 ===== */
/* Add-only campaign page. Purple ground, black bold type, gold foil, real 3D depth. */

:root{
  --orchid:#7a2fb5;
  --orchid-deep:#2a0a4a;
  --orchid-night:#12041f;
  --orchid-hot:#b04ce8;
  --gold:#f4c95d;
  --gold-deep:#c9962a;
  --peach:#ffb37a;
  --pink:#ff6fae;
  --ink:#0b0410;
  --paper:#ffffff;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0;min-height:100%;overflow-x:clip}
body{
  background:var(--orchid-night);
  color:var(--paper);
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:500;
  overflow-x:hidden;
  line-height:1.5;
}
body::selection,body ::selection{background:var(--gold);color:var(--ink)}
a{color:inherit}
img{max-width:100%;display:block}

/* ---------- sky (WebGL) + fallback ---------- */
#mhSky{
  position:fixed;inset:0;width:100%;height:100%;z-index:0;
  background:
    radial-gradient(120% 80% at 50% 110%, #ff9a5c 0%, rgba(255,154,92,0) 55%),
    radial-gradient(60% 40% at 78% 22%, rgba(244,201,93,.55) 0%, rgba(244,201,93,0) 60%),
    linear-gradient(180deg, #12041f 0%, #3a1266 42%, #7a2fb5 72%, #b04ce8 100%);
}
#mhSky canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#mhGrain{
  position:fixed;inset:-20%;width:140%;height:140%;z-index:2;pointer-events:none;
  opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:mhGrain 1.2s steps(6) infinite;
}
@keyframes mhGrain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-1%,3%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}}
#mhVignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0) 45%, rgba(11,4,16,.72) 100%)}

/* ---------- letterbox bars (cinema) ---------- */
.mh-bar{position:fixed;left:0;right:0;height:clamp(18px,4vh,46px);background:var(--ink);z-index:40;transition:transform 1.4s var(--ease)}
.mh-bar.top{top:0}.mh-bar.bottom{bottom:0}
body.mh-open .mh-bar.top{transform:translateY(-100%)}
body.mh-open .mh-bar.bottom{transform:translateY(100%)}

/* ---------- top strap ---------- */
.mh-strap{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px clamp(16px,3vw,40px);
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;
  color:var(--paper);
  background:linear-gradient(180deg, rgba(11,4,16,.75), rgba(11,4,16,0));
  pointer-events:none;
}
.mh-strap a,.mh-strap button{pointer-events:auto}
.mh-strap .wm{font-family:"Anton",Impact,sans-serif;font-size:20px;letter-spacing:.02em;text-transform:none;color:var(--paper);text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.mh-strap .wm .dot{width:7px;height:7px;background:var(--paper);display:inline-block;margin:0 1px 2px}
.mh-strap .rec{display:inline-flex;align-items:center;gap:8px}
.mh-strap .rec i{width:9px;height:9px;border-radius:50%;background:#ff3d5a;box-shadow:0 0 12px #ff3d5a;animation:mhBlink 1.1s infinite}
@keyframes mhBlink{50%{opacity:.15}}
.mh-strap .tc{font-variant-numeric:tabular-nums;color:var(--gold)}
.mh-lang{display:inline-flex;gap:0;border:1px solid rgba(255,255,255,.35);border-radius:999px;overflow:hidden}
.mh-lang a{padding:6px 12px;text-decoration:none;color:var(--paper);background:transparent}
.mh-lang a.on{background:var(--paper);color:var(--ink)}
@media (max-width:640px){.mh-strap .hide-sm{display:none}}

/* ---------- 3D stage ---------- */
.mh{position:relative;z-index:3;overflow-x:clip}
.mh-ch .inner{max-width:100%}
.mh-big,.mh-wm,.mh-num{overflow-wrap:anywhere}
.mh-stage{perspective:1400px;perspective-origin:50% 40%}
.mh-ch{
  position:relative;min-height:100svh;display:grid;place-items:center;
  padding:clamp(90px,14vh,160px) clamp(18px,5vw,72px);
  transform-style:preserve-3d;
}
.mh-ch .inner{width:min(1180px,100%);transform-style:preserve-3d;position:relative}
.mh-layer{transform-style:preserve-3d;will-change:transform;transition:transform .9s var(--ease)}

/* chapter slate (kicker) */
.mh-slate{
  display:inline-flex;align-items:center;gap:10px;
  font-family:"Anton",Impact,sans-serif;font-size:clamp(12px,1.1vw,14px);letter-spacing:.32em;text-transform:uppercase;
  color:var(--ink);background:var(--gold);padding:8px 14px 7px;
  box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 -2px 0 rgba(0,0,0,.18);
  transform:translateZ(60px);
}
.mh-slate b{background:var(--ink);color:var(--gold);padding:2px 7px;font-weight:400}
.mh-tc{font-family:"Anton",Impact,sans-serif;font-size:clamp(44px,9vw,120px);line-height:.9;color:var(--paper);letter-spacing:.02em;margin:18px 0 0;
  text-shadow:0 0 40px rgba(244,201,93,.35);font-variant-numeric:tabular-nums}

/* big black condensed uppercase, stacked left — the locked brand slate */
.mh-big{
  font-family:"Anton",Impact,"Arial Narrow",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(52px,10.5vw,168px);line-height:.86;letter-spacing:.005em;
  color:var(--ink);margin:.35em 0 .2em;
  transform:translateZ(90px);
}
.mh-big .w{color:var(--paper)}
.mh-big .g{
  background:linear-gradient(100deg,#fff2c2 0%,var(--gold) 30%,#8a5a12 50%,var(--gold) 70%,#fff2c2 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:mhFoil 6s linear infinite;
}
@keyframes mhFoil{to{background-position:220% 0}}
.mh-big .sq{display:inline-block;width:.16em;height:.16em;background:var(--paper);margin-left:.06em;vertical-align:baseline;box-shadow:0 0 30px rgba(255,255,255,.7)}
/* extruded 3D type on the title only */
.mh-3d{
  color:var(--ink);
  text-shadow:
    1px 1px 0 #2a0a4a, 2px 2px 0 #2a0a4a, 3px 3px 0 #2a0a4a, 4px 4px 0 #2a0a4a,
    5px 5px 0 #2a0a4a, 6px 6px 0 #2a0a4a, 7px 7px 0 #2a0a4a, 8px 8px 0 #2a0a4a,
    9px 9px 0 #2a0a4a,10px 10px 0 #2a0a4a,11px 11px 0 #2a0a4a,12px 12px 0 #2a0a4a,
    22px 26px 60px rgba(0,0,0,.55);
}
.mh-3d .g{background:none;color:var(--gold);-webkit-text-fill-color:var(--gold);animation:none}
/* orchid halo so black type stays bold on the darker sea */
.mh-ch .inner::before{content:"";position:absolute;inset:-12% -10%;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 55% at 35% 45%,rgba(176,76,232,.55),rgba(122,47,181,.25) 45%,rgba(122,47,181,0) 75%);filter:blur(10px)}
.mh-sub{
  font-size:clamp(17px,1.9vw,24px);line-height:1.45;font-weight:600;max-width:34ch;
  color:var(--paper);margin:0;transform:translateZ(40px);
  text-shadow:0 2px 20px rgba(0,0,0,.45);
}
.mh-sub em{font-style:normal;color:var(--gold)}
.mh-copy{font-size:clamp(16px,1.35vw,19px);line-height:1.6;max-width:56ch;color:rgba(255,255,255,.92);margin:22px 0 0;transform:translateZ(30px)}
.mh-copy strong{color:var(--gold);font-weight:700}
.mh-rule{width:120px;height:2px;background:linear-gradient(90deg,var(--gold),rgba(244,201,93,0));margin:26px 0;transform:translateZ(30px)}

/* ---------- CTAs ---------- */
.mh-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;transform:translateZ(70px)}
.mh-btn{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-family:"Anton",Impact,sans-serif;text-transform:uppercase;letter-spacing:.08em;
  font-size:clamp(16px,1.5vw,20px);padding:18px 30px 16px;border-radius:999px;
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.mh-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform 1.1s var(--ease);z-index:-1}
.mh-btn:hover::after{transform:translateX(120%)}
.mh-btn:hover{transform:translateY(-3px) scale(1.02)}
.mh-btn.gold{background:var(--gold);color:var(--ink);box-shadow:0 18px 50px rgba(244,201,93,.35),0 0 0 1px rgba(255,255,255,.15) inset}
.mh-btn.black{background:var(--ink);color:var(--paper);box-shadow:0 18px 50px rgba(0,0,0,.45)}
.mh-btn.ghost{background:transparent;color:var(--paper);box-shadow:0 0 0 2px rgba(255,255,255,.7) inset}
.mh-btn .sq{width:.5em;height:.5em;background:currentColor;display:inline-block}

/* ---------- scroll reveal (3D) ---------- */
.mh-rv{opacity:0;transform:translate3d(0,50px,-120px) rotateX(10deg);transition:opacity 1.1s var(--ease),transform 1.3s var(--ease)}
.mh-rv.in{opacity:1;transform:translate3d(0,0,0) rotateX(0)}
.mh-rv.d1{transition-delay:.12s}.mh-rv.d2{transition-delay:.24s}.mh-rv.d3{transition-delay:.36s}.mh-rv.d4{transition-delay:.48s}

/* ---------- THE CALL: phone slab ---------- */
.mh-phone{
  margin-top:40px;width:min(420px,100%);
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.28);border-radius:26px;padding:20px 22px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 40px 90px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.45);
  transform:translateZ(120px) rotateY(-8deg) rotateX(4deg);
  font-size:15px;line-height:1.45;
}
.mh-phone .hd{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.mh-phone .msg{background:rgba(11,4,16,.55);border-radius:16px 16px 16px 4px;padding:12px 14px;margin:8px 0;max-width:92%}
.mh-phone .msg.me{background:var(--gold);color:var(--ink);border-radius:16px 16px 4px 16px;margin-left:auto;font-weight:600}
.mh-phone .t{display:block;font-size:10px;opacity:.7;margin-top:4px;letter-spacing:.1em}
.mh-phone .typing{display:inline-flex;gap:4px;padding:6px 0 0}
.mh-phone .typing i{width:6px;height:6px;border-radius:50%;background:var(--paper);animation:mhTyp 1s infinite}
.mh-phone .typing i:nth-child(2){animation-delay:.2s}.mh-phone .typing i:nth-child(3){animation-delay:.4s}
@keyframes mhTyp{50%{opacity:.2;transform:translateY(-2px)}}

/* ---------- LOCATIONS: 3D card field ---------- */
.mh-grid{
  display:grid;gap:clamp(14px,2vw,26px);margin-top:40px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
  transform-style:preserve-3d;
}
.mh-card{
  position:relative;aspect-ratio:3/4;border-radius:18px;overflow:hidden;
  background:var(--orchid-deep);
  box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.12) inset;
  transform-style:preserve-3d;transform:translateZ(0);
  transition:transform .8s var(--ease),box-shadow .8s var(--ease);
  text-decoration:none;color:var(--paper);display:block;
}
.mh-card.tilt{transition:transform .12s linear,box-shadow .8s var(--ease)}
.mh-card:hover{box-shadow:0 60px 120px rgba(0,0,0,.65),0 0 0 1px rgba(244,201,93,.55) inset,0 0 60px rgba(244,201,93,.18)}
.mh-card .ph{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.08);transition:transform 1.6s var(--ease);filter:saturate(1.15) contrast(1.08)}
.mh-card:hover .ph{transform:scale(1.16)}
.mh-card .grade{position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(18,4,31,.1) 0%,rgba(18,4,31,0) 30%,rgba(42,10,74,.55) 65%,rgba(11,4,16,.96) 100%),
    linear-gradient(120deg,rgba(122,47,181,.45),rgba(255,154,92,.18));
  mix-blend-mode:normal}
.mh-card .moon{position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff8e0,#f4c95d 60%,#c9962a);box-shadow:0 0 30px rgba(244,201,93,.8);transform:translateZ(30px)}
.mh-card .sc{position:absolute;top:18px;left:18px;font-family:"Anton",Impact,sans-serif;font-size:11px;letter-spacing:.28em;color:var(--ink);background:var(--gold);padding:6px 9px 5px;transform:translateZ(30px)}
.mh-card .name{position:absolute;left:18px;right:18px;bottom:18px;transform:translateZ(50px)}
.mh-card .name h3{font-family:"Anton",Impact,sans-serif;font-size:clamp(30px,3.2vw,44px);line-height:.92;margin:0 0 8px;text-transform:uppercase;letter-spacing:.01em;text-shadow:0 6px 30px rgba(0,0,0,.6)}
.mh-card .name p{margin:0;font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.9);font-weight:500}
.mh-card .name p b{color:var(--gold)}
.mh-card .sheen{position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-130%);transition:transform 1.3s var(--ease);pointer-events:none}
.mh-card:hover .sheen{transform:translateX(130%)}
.mh-card .bars{position:absolute;left:0;right:0;height:7%;background:var(--ink)}
.mh-card .bars.t{top:0}.mh-card .bars.b{bottom:0}
.mh-card .name{bottom:calc(7% + 14px)}

/* ---------- THE FIXER / THE CEO: split with portrait slab ---------- */
.mh-split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,60px);align-items:center;transform-style:preserve-3d}
@media (max-width:860px){.mh-split{grid-template-columns:1fr}}
.mh-slab{
  position:relative;aspect-ratio:4/5;border-radius:22px;overflow:hidden;
  background:var(--orchid-deep);box-shadow:0 50px 110px rgba(0,0,0,.6);
  transform:translateZ(80px) rotateY(-10deg);transition:transform .9s var(--ease);transform-style:preserve-3d;
}
.mh-slab:hover{transform:translateZ(110px) rotateY(-4deg)}
.mh-slab .ph{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(1.1)}
.mh-slab .grade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,4,31,0) 40%,rgba(11,4,16,.92) 100%),linear-gradient(120deg,rgba(122,47,181,.35),rgba(244,201,93,.12))}
.mh-slab .tape{position:absolute;left:-8%;top:22px;width:116%;padding:8px 0;background:var(--gold);color:var(--ink);font-family:"Anton",Impact,sans-serif;font-size:12px;letter-spacing:.3em;text-align:center;transform:rotate(-4deg) translateZ(40px);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.mh-slab .cap{position:absolute;left:22px;right:22px;bottom:22px;transform:translateZ(50px)}
.mh-slab .cap h3{font-family:"Anton",Impact,sans-serif;font-size:clamp(34px,4vw,56px);line-height:.9;margin:0 0 8px;text-transform:uppercase}
.mh-slab .cap p{margin:0;font-size:14px;color:rgba(255,255,255,.9)}
.mh-slab .stamp{position:absolute;right:16px;top:64px;width:104px;height:104px;border-radius:50%;border:3px solid var(--gold);color:var(--gold);display:grid;place-items:center;text-align:center;font-family:"Anton",Impact,sans-serif;font-size:12px;letter-spacing:.14em;line-height:1.1;transform:rotate(12deg) translateZ(60px);text-transform:uppercase;box-shadow:0 0 30px rgba(244,201,93,.35)}

.mh-list{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px;transform:translateZ(40px)}
.mh-list li{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:start;font-size:clamp(16px,1.3vw,19px);line-height:1.45}
.mh-list li b{font-family:"Anton",Impact,sans-serif;color:var(--ink);background:var(--gold);padding:6px 0 4px;text-align:center;font-size:15px;letter-spacing:.1em}
.mh-list li span strong{color:var(--gold)}

/* ---------- THE NUMBER ---------- */
.mh-num{font-family:"Anton",Impact,sans-serif;font-size:clamp(68px,15vw,240px);line-height:.85;letter-spacing:.01em;margin:.15em 0 0;
  color:var(--paper);text-shadow:0 0 60px rgba(255,255,255,.5),0 0 120px rgba(244,201,93,.45);font-variant-numeric:tabular-nums;transform:translateZ(120px)}
.mh-num small{display:block;font-size:.22em;letter-spacing:.3em;color:var(--gold);text-shadow:none;margin-top:.3em}
.mh-zero{display:inline-block;font-family:"Anton",Impact,sans-serif;font-size:clamp(60px,10vw,160px);line-height:1;color:var(--ink);background:var(--gold);padding:.05em .25em 0;transform:rotate(-4deg) translateZ(140px);box-shadow:0 30px 80px rgba(0,0,0,.5);animation:mhWob 3.2s var(--ease) infinite}
@keyframes mhWob{0%,100%{transform:rotate(-4deg) translateZ(140px)}50%{transform:rotate(-1deg) translateZ(160px) scale(1.03)}}
.mh-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:40px;transform:translateZ(50px)}
.mh-stat{padding:18px 18px 16px;border:1px solid rgba(255,255,255,.25);border-radius:16px;background:rgba(11,4,16,.35);backdrop-filter:blur(10px)}
.mh-stat b{display:block;font-family:"Anton",Impact,sans-serif;font-size:clamp(28px,3vw,42px);line-height:1;color:var(--gold)}
.mh-stat span{font-size:12px;letter-spacing:.18em;text-transform:uppercase;opacity:.9}

/* ---------- ROLL CAMERAS: finale ---------- */
.mh-final{text-align:left}
.mh-final .mh-ctas{justify-content:flex-start}
.mh-wm{font-family:"Anton",Impact,sans-serif;font-size:clamp(64px,16vw,260px);line-height:.85;color:var(--ink);letter-spacing:.01em;margin:60px 0 0;transform:translateZ(60px)}
.mh-wm .sq{display:inline-block;width:.13em;height:.13em;background:var(--paper);margin:0 .02em;vertical-align:baseline}
.mh-handle{font-size:13px;letter-spacing:.28em;text-transform:uppercase;margin-top:16px;color:var(--gold)}
.mh-handle a{text-decoration:none}

/* ---------- ticker ---------- */
.mh-ticker{position:relative;z-index:3;overflow:hidden;background:var(--ink);color:var(--gold);font-family:"Anton",Impact,sans-serif;font-size:clamp(14px,1.4vw,20px);letter-spacing:.2em;text-transform:uppercase;padding:14px 0;white-space:nowrap}
.mh-ticker .track{display:inline-block;animation:mhTick 44s linear infinite}
.mh-ticker span{display:inline-block;padding:0 34px}
.mh-ticker span::after{content:"▪";color:var(--paper);margin-left:34px}
@keyframes mhTick{to{transform:translateX(-50%)}}

/* ---------- progress ---------- */
.mh-prog{position:fixed;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--gold),var(--pink));z-index:60;box-shadow:0 0 14px rgba(244,201,93,.8)}

/* ---------- footer note ---------- */
.mh-foot{position:relative;z-index:3;padding:30px clamp(18px,5vw,72px) 90px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75);display:flex;flex-wrap:wrap;gap:14px 30px;background:linear-gradient(180deg,rgba(11,4,16,0),rgba(11,4,16,.85))}
.mh-foot a{color:var(--gold);text-decoration:none}

/* ---------- phones ---------- */
@media (max-width:760px){
  .mh-ch{min-height:auto;padding:84px 18px 60px}
  .mh-stage{perspective:900px}
  .mh-phone{transform:translateZ(40px) rotateY(0) rotateX(0);margin-top:28px}
  .mh-slab{transform:translateZ(20px) rotateY(0)}
  .mh-3d{text-shadow:1px 1px 0 #2a0a4a,2px 2px 0 #2a0a4a,3px 3px 0 #2a0a4a,4px 4px 0 #2a0a4a,5px 5px 0 #2a0a4a,6px 6px 0 #2a0a4a,10px 12px 30px rgba(0,0,0,.5)}
  #mhGrain{animation:none;opacity:.1}
  .mh-card{aspect-ratio:4/5}
  .mh-big{font-size:clamp(40px,12.5vw,64px)}
  .mh-wm{font-size:clamp(48px,15vw,80px)}
  .mh-num{font-size:clamp(52px,13vw,76px)}
  .mh-slab .tape{left:0;width:100%;transform:rotate(0) translateZ(40px)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .mh-rv{opacity:1;transform:none}
  #mhGrain{display:none}
}