/*
Theme Name: BoostedHost Coming Soon
Theme URI: https://boostedhost.com
Author: BoostedHost
Author URI: https://boostedhost.com
Description: Center-locked, non-scrolling, interactive liquid-glass hero with BoostedHost orange banner.
Version: 1.7.1
License: GPLv2 or later
Text Domain: boostedhost-coming-soon
*/

/* ---------- Brand palette ---------- */
:root{
  --bh-orange:#FF6022;
  --bh-red:#DD0000;
  --bh-white:#ffffff;

  --bh-text:#f4f7fb;
  --bh-text-dim:#d6deea;

  /* GLASS (lighter than before, more transparent) */
  --bh-glass-dark-1: rgba(10,12,16,.64); /* was .78 */
  --bh-glass-dark-2: rgba(10,12,16,.46); /* was .60 */
  --bh-border: rgba(255,255,255,.22);
  --bh-border-strong: rgba(255,255,255,.34);
}

*{box-sizing:border-box}
html,body{height:100%}
html{overflow:hidden}     /* block any scroll */
body{
  margin:0; overflow:hidden;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, system-ui, sans-serif;
  color: var(--bh-text);
  background: #0b0e13; /* fallback if image fails */
}

/* ---------- Canvas ---------- */
.bh-viewport{
  position:relative; height:100vh; width:100vw;
  display:grid; grid-template-rows: 1fr auto; /* banner row */
  align-items:center; justify-items:center;
}

/* Background image (place your file at assets/image.img) */
.bh-bg{
  position:absolute; inset:0;
  background-image:url('assets/image.img');
  background-size:cover; background-position:center;
  transform:scale(1.03); z-index:-3;
  filter:saturate(1.05) contrast(1.05) brightness(1.03);
}

/* Brand glow + vignette */
.bh-vignette{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(65rem 40rem at 78% -10%, rgba(255,96,34,.16), transparent 60%),
    radial-gradient(60rem 36rem at 12% 92%, rgba(221,0,0,.12), transparent 70%),
    radial-gradient(220vw 160vh at 50% 60%, rgba(0,0,0,.16), rgba(0,0,0,.36));
}

/* ---------- Centered block ---------- */
.bh-center{ width:100%; display:grid; place-items:center; padding: clamp(12px, 2vw, 24px); margin-top:-2vh; }

/* ---------- Liquid Glass Card (lighter, premium) ---------- */
.bh-card{
  --mx:.5; --my:.5;

  width:min(880px, 92vw);
  padding: clamp(30px, 4.2vw, 46px);
  border-radius: 22px;

  background: linear-gradient(180deg, var(--bh-glass-dark-1), var(--bh-glass-dark-2));
  border: 1px solid var(--bh-border);
  box-shadow:
    0 36px 110px rgba(0,0,0,.45),
    0 16px 44px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 18px rgba(255, 96, 34, .10);
  backdrop-filter: blur(22px) saturate(1.18);   /* MORE blur to compensate for lighter tint */
  -webkit-backdrop-filter: blur(22px) saturate(1.18);

  position:relative; text-align:center; transform-style:preserve-3d;
  transition: transform .16s ease-out, box-shadow .16s ease-out;
}

/* Moving specular highlight */
.bh-card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(700px 500px at calc(var(--mx) * 100%) calc(var(--my) * 100%),
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.10) 28%,
      rgba(255,255,255,0) 60%);
  mix-blend-mode:screen;
}

/* Inner sheen + subtle orange hint */
.bh-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    linear-gradient(140deg,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,0) 35% 70%,
      rgba(255,96,34,.10) 100%);
}

/* ---------- Typography ---------- */
.bh-eyebrow{
  margin:0 0 8px; color: var(--bh-text-dim);
  font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  font-size: clamp(13px, 1.4vw, 15px); opacity:.95;
}
.bh-title{
  margin:0 0 12px; color: var(--bh-white);
  font-weight:900; font-size: clamp(38px, 5.6vw, 62px);
  line-height:1.06; letter-spacing:-.02em;
  text-shadow: 0 4px 16px rgba(0,0,0,.45);
}
.bh-powered{
  margin:0 0 18px; color: var(--bh-text-dim); font-weight:600;
}
.bh-powered a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35); }
.bh-powered a:hover{ border-bottom-color: rgba(255,255,255,.65); }

/* ---------- Stacked links (brand orange gradient) ---------- */
.bh-links{ margin-top: 10px; display:grid; gap:12px; justify-items:center; }
.bh-link{
  display:inline-block; max-width:50ch; padding:12px 16px; border-radius:12px;
  text-decoration:none; color:#fff;
  background: linear-gradient(135deg, var(--bh-orange), var(--bh-red));
  border: 1px solid var(--bh-border-strong);
  box-shadow: 0 12px 30px rgba(221,0,0,.25), 0 8px 22px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.bh-link:hover{ transform: translateY(-1px); filter: saturate(1.05) brightness(1.02);
  box-shadow: 0 16px 40px rgba(221,0,0,.30), 0 10px 28px rgba(0,0,0,.28); }

/* ---------- ORANGE BOTTOM BANNER (fixed; safe-area aware) ---------- */
.bh-bottom-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background: linear-gradient(90deg, var(--bh-orange) 0%, var(--bh-red) 100%);
  box-shadow: 0 -8px 24px rgba(0,0,0,.30);
  color:#fff;
}
.bh-bottom-inner{
  max-width: 1280px; margin: 0 auto;
  padding: calc(14px + env(safe-area-inset-bottom)) 22px 16px; /* extra bottom for iOS safe area */
  display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:center;
  line-height: 1.35;
}
.bh-bottom-text{ font-weight:150; letter-spacing:.02em; font-size:18px; }
.bh-bottom-actions{ opacity:.98; font-size:16px; }
.bh-bottom-banner a{
  color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.7);
}
.bh-bottom-banner a:hover{ border-bottom-color:#fff; }

/* Motion reduction */
@media (prefers-reduced-motion: reduce){
  .bh-card{ transition:none; }
  .bh-card::before{ display:none; }
}