/* ------------------------------------------------------------------
   THE UNVEILING — CSAT Cloud
   Concept: CSAT Cloud is not a launch. It is thirty-eight years of
   on-premise installations coming online at once. So the reveal is an
   ESTATE LIGHTING UP, not a product box opening: 4,500 isolated points
   scattered in the dark (one building each, alone) snap onto a single
   lattice and wire themselves together.
   Self-contained dark band — works unchanged inside the light design.
------------------------------------------------------------------ */
.reveal{
  --rv-bg:#04050A;
  --rv-fg:#F4F6FA;
  --rv-fg2:#B9C1CE;
  --rv-fg3:#98A1B3;
  --rv-blue:#4D7CFE;
  --rv-line:rgba(255,255,255,.10);
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--rv-bg);color:var(--rv-fg);
  border-top:1px solid var(--rv-line);border-bottom:1px solid var(--rv-line);
  padding:clamp(96px,15vh,180px) 0 clamp(88px,13vh,150px);
  min-height:clamp(620px,88dvh,980px);
  display:flex;align-items:center;
}

/* --- the field of installations --- */
.rv-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.rv-field{position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.14) 0%,rgba(0,0,0,.5) 34%,#000 68%);
          mask-image:linear-gradient(90deg,rgba(0,0,0,.14) 0%,rgba(0,0,0,.5) 34%,#000 68%)}

/* --- the moment the estate comes online --- */
.rv-horizon{position:absolute;left:0;right:0;top:50%;height:1px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--rv-blue) 22%,#DCE6FF 50%,var(--rv-blue) 78%,transparent);
  box-shadow:0 0 26px 2px rgba(77,124,254,.42);
  transform:scaleX(0);transform-origin:0 50%;opacity:0;
  transition:transform 1.05s var(--e-inout),opacity .5s var(--e-out) .95s}
.reveal.lit .rv-horizon{opacity:1}
.reveal.online .rv-horizon{transform:scaleX(1);opacity:0}
.rv-glow{position:absolute;left:-6%;top:12%;width:min(760px,72vw);height:min(620px,64vh);z-index:0;
  border-radius:50%;pointer-events:none;filter:blur(90px);opacity:0;
  background:radial-gradient(circle,rgba(77,124,254,.42),transparent 68%);
  transition:opacity 1.6s var(--e-out) .35s}
.reveal.online .rv-glow{opacity:.72;animation:rvBreathe 19s ease-in-out infinite alternate}
@keyframes rvBreathe{to{transform:translate3d(60px,-30px,0) scale(1.15)}}

/* --- the words --- */
.reveal::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(101deg,var(--rv-bg) 0%,rgba(4,5,10,.94) 26%,rgba(4,5,10,.62) 44%,rgba(4,5,10,.12) 60%,transparent 70%)}
.rv-in{position:relative;z-index:3}
.rv-kick{display:inline-flex;align-items:center;gap:11px;color:var(--rv-fg3);
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase}
.rv-kick::before{content:"";width:26px;height:1px;background:var(--rv-blue)}
.rv-mark{margin:clamp(22px,3vw,34px) 0 0}
.rv-mark .m1{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:clamp(13px,1.5vw,17px);letter-spacing:.42em;text-transform:uppercase;color:var(--rv-fg2);
  padding-left:.28em}
.rv-mark .m2{display:block;font-size:clamp(62px,12vw,176px);line-height:.86;font-weight:800;
  letter-spacing:-.045em;font-stretch:118%;margin-top:.06em}
.rv-rule{height:1px;background:var(--rv-line);margin:clamp(30px,4vw,46px) 0 clamp(24px,3vw,32px);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--e-inout) .25s}
.reveal.online .rv-rule{transform:scaleX(1)}
.rv-lede{max-width:56ch;font-size:clamp(15.5px,1.55vw,18.5px);line-height:1.66;color:var(--rv-fg2)}
.rv-lede b{color:var(--rv-fg);font-weight:600}
.rv-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(24px,3vw,32px);list-style:none;padding:0}
.rv-facts li{font-size:12.5px;color:var(--rv-fg2);border:1px solid var(--rv-line);
  background:rgba(255,255,255,.045);padding:7px 13px;border-radius:8px;white-space:nowrap}
.rv-facts li .lv{color:#5FE3A4;font-weight:700}
.rv-go{display:inline-flex;align-items:center;gap:11px;margin-top:clamp(28px,3.6vw,40px);
  color:var(--rv-fg);text-decoration:none;font-size:14.5px;font-weight:700;
  border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:7px;
  transition:border-color .2s var(--e-out),gap .2s var(--e-out)}
.rv-go:hover{border-color:var(--rv-blue);gap:16px}
.rv-go .dn{display:inline-block;transition:transform .22s var(--e-out)}
.rv-go:hover .dn{transform:translateY(3px)}
.rv-go:focus-visible{outline:2px solid var(--rv-blue);outline-offset:6px;border-radius:4px}

/* staged text entry, driven by the one .online class */
.reveal .st{opacity:0;transform:translate3d(0,22px,0);filter:blur(8px);
  transition:opacity .8s var(--e-out) var(--sd,0ms),transform .8s var(--e-out) var(--sd,0ms),filter .8s var(--e-out) var(--sd,0ms)}
.reveal.online .st{opacity:1;transform:none;filter:blur(0)}

@media (max-width:860px){
  .reveal{min-height:0;padding:clamp(76px,11vh,110px) 0}
  .rv-field{-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.25),#000 70%);
            mask-image:linear-gradient(180deg,rgba(0,0,0,.25),#000 70%);opacity:.6}
  .rv-mark .m2{letter-spacing:-.035em}
  /* the text column is full-width on a phone, so the scrim must run down, not across */
  .reveal::before{background:linear-gradient(180deg,rgba(4,5,10,.88) 0%,rgba(4,5,10,.74) 48%,rgba(4,5,10,.92) 100%)}
}
@media (prefers-reduced-motion:reduce){
  .rv-rule,.reveal .st,.rv-horizon,.rv-glow{transition:none!important;animation:none!important}
  .reveal .st{opacity:1;transform:none;filter:none}
  .rv-rule{transform:scaleX(1)}
  .rv-horizon{opacity:0}
  .reveal.online .rv-glow{opacity:.45;animation:none}
}