/* =====================================================================
   BRAVIXA MEDIA — FRONT PAGE ONLY
   The intro gate and the homepage hero, lifted verbatim from the approved
   bravixa-media-home-v3.html. Everything else on the front page (marquee,
   service stack, stats, work, process, why, CTA, footer) already lives in
   theme.css, so it is deliberately not repeated here.
   Enqueued only on the front page.
   ===================================================================== */

body.locked{overflow:hidden;height:100vh}

/* ================= INTRO GATE ================= */
#gate{
  position:fixed;inset:0;z-index:9999;background:var(--black);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  transition:clip-path 1.1s cubic-bezier(.77,0,.18,1);
  clip-path:inset(0 0 0 0);overflow:hidden;
}
#gate.open{clip-path:inset(0 0 100% 0)}
.gate-grid{
  position:absolute;inset:0;opacity:.35;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000 20%,transparent 75%);
  animation:gridPan 20s linear infinite;
}
@keyframes gridPan{to{background-position:80px 80px}}
.gate-orb{position:absolute;width:640px;height:640px;border-radius:50%;filter:blur(110px);opacity:.45;
  background:radial-gradient(circle,#0067e2,transparent 70%);animation:gateBreathe 6s ease-in-out infinite alternate}
@keyframes gateBreathe{from{transform:scale(.9)}to{transform:scale(1.15)}}
.gate-mark{
  position:relative;width:120px;height:120px;border-radius:28px;margin-bottom:38px;
  background:linear-gradient(150deg,#0d1a2e,#06070b);border:1px solid rgba(0,103,226,.5);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:2.6rem;color:var(--white);
  box-shadow:0 0 80px var(--blue-glow),inset 0 0 34px rgba(0,103,226,.18);
  opacity:0;transform:scale(.6) rotate(-8deg);
  animation:markIn 1s cubic-bezier(.2,.9,.25,1.2) .3s forwards;
}
.gate-mark::after{
  content:"";position:absolute;inset:-10px;border-radius:34px;border:1px solid rgba(0,103,226,.35);
  animation:gateRing 2.6s ease-in-out infinite;
}
@keyframes markIn{to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes gateRing{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.09);opacity:.2}}
.gate-mark b{color:var(--blue)}
.gate-name{
  font-family:var(--display);font-size:clamp(1.7rem,5.5vw,3.1rem);letter-spacing:.14em;
  display:flex;overflow:hidden;position:relative;
}
.gate-name span{display:inline-block;transform:translateY(120%);animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
.gate-name .blue{color:var(--blue)}
@keyframes rise{to{transform:translateY(0)}}
.gate-tag{
  margin-top:20px;font-size:.8rem;letter-spacing:.42em;text-transform:uppercase;color:var(--muted);
  opacity:0;animation:fadeUp .9s ease 1.5s forwards;position:relative;
}
.gate-line{width:0;height:1px;background:linear-gradient(90deg,transparent,var(--blue),transparent);
  margin:34px 0;animation:lineGrow 1s ease 1.8s forwards}
@keyframes lineGrow{to{width:min(340px,70vw)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.gate-cta{
  position:relative;opacity:0;animation:fadeUp .9s ease 2.1s forwards;
  display:inline-flex;align-items:center;gap:14px;padding:20px 52px;border-radius:100px;
  background:var(--blue);color:#fff;font-family:var(--display);font-size:.95rem;letter-spacing:.18em;
  text-transform:uppercase;cursor:pointer;border:0;overflow:hidden;
  transition:transform .35s,box-shadow .35s;
}
.gate-cta::before{
  content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-120%);animation:shine 3s ease 2.6s infinite;
}
@keyframes shine{20%{transform:translateX(120%)}100%{transform:translateX(120%)}}
.gate-cta:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 20px 55px var(--blue-glow)}
.gate-cta svg{transition:transform .3s}
.gate-cta:hover svg{transform:translateX(6px)}
.gate-hint{margin-top:26px;font-size:.72rem;letter-spacing:.3em;color:var(--muted);text-transform:uppercase;
  opacity:0;animation:fadeUp .9s ease 2.5s forwards}

/* ================= HERO ================= */
.hero{min-height:100svh;display:flex;align-items:center;position:relative;overflow:hidden;padding:140px 0 80px}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.22;filter:saturate(.4) brightness(.8)}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,5,7,.6),rgba(5,5,7,.85) 55%,var(--black)),
             radial-gradient(700px 500px at 78% 30%,rgba(0,103,226,.28),transparent 65%)}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center;width:min(1240px,92%);margin-inline:auto}
.hero h1{font-size:clamp(2rem,5vw,3.9rem);line-height:1.14;margin:30px 0 26px}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line span{display:inline-block;transform:translateY(115%);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
body.entered .hero h1 .line span{transform:translateY(0)}
.hero h1 .line:nth-child(2) span{transition-delay:.12s}
.hero h1 .line:nth-child(3) span{transition-delay:.24s}
.hero-sub{max-width:50ch;color:var(--muted);font-size:1.02rem;line-height:1.8;opacity:0;transform:translateY(20px);transition:.8s .45s}
body.entered .hero-sub{opacity:1;transform:translateY(0)}
.hero-ctas{display:flex;gap:18px;margin-top:38px;flex-wrap:wrap;opacity:0;transform:translateY(20px);transition:.8s .6s}
body.entered .hero-ctas{opacity:1;transform:translateY(0)}
/* hero visual: floating image stack */
.hero-visual{position:relative;height:520px;opacity:0;transform:translateY(30px);transition:1s .5s}
body.entered .hero-visual{opacity:1;transform:translateY(0)}
.hv-card{position:absolute;border-radius:20px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(0,0,0,.55);background:var(--surface)}
.hv-card img{width:100%;height:100%;object-fit:cover}
.hv-1{width:66%;height:74%;top:0;right:0;animation:float1 7s ease-in-out infinite alternate}
.hv-2{width:46%;height:48%;bottom:0;left:0;z-index:2;animation:float2 6s ease-in-out infinite alternate;border-color:rgba(0,103,226,.4)}
.hv-badge{position:absolute;z-index:3;left:34%;top:14%;background:rgba(8,10,14,.85);backdrop-filter:blur(10px);
  border:1px solid rgba(0,103,226,.5);border-radius:16px;padding:16px 22px;
  animation:float2 5s ease-in-out infinite alternate;box-shadow:0 14px 40px rgba(0,0,0,.5)}
.hv-badge b{font-family:var(--display);font-size:1.3rem;color:var(--blue);display:block}
.hv-badge span{font-size:.72rem;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.hv-badge2{left:auto;right:-4%;top:auto;bottom:18%;animation-delay:-2s}
@media(max-width:1000px){.hero-inner{grid-template-columns:1fr}.hero-visual{height:400px;max-width:520px}}
@media(max-width:640px){.hero{padding:120px 0 70px}.hero-visual{height:330px}.hv-badge{padding:13px 17px}.hv-badge b{font-size:1.1rem}}
.scroll-hint{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--muted);
  font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;font-weight:600}
.scroll-hint i{width:1px;height:44px;background:linear-gradient(var(--blue),transparent);animation:dropline 1.6s infinite}
@keyframes dropline{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}