/* SyizzStudio hero motion — styles
   All classes are prefixed "ss-" so they do not clash with the site's own CSS.
   Colours and sizes are CSS variables: override them on .ss-hero if the site's design changes. */
.ss-hero{
  --ss-bg:#161A22; --ss-accent:#F4B04A; --ss-text:#FFFFFF; --ss-muted:#B9BEC8; --ss-line:#3A404C;
  --ss-radius:32px; --ss-min-h:600px;
  position:relative; overflow:hidden; isolation:isolate;
  display:grid; place-items:center;
  min-height:var(--ss-min-h);
  background:var(--ss-bg); color:var(--ss-text); border-radius:var(--ss-radius);
  font-family:inherit;
}
@media (max-width:640px){
  /* phone: the hero fills most of the first screen */
  .ss-hero{--ss-radius:24px; --ss-min-h:min(760px, calc(100svh - 96px))}
}
.ss-dust,.ss-stage,.ss-fx{position:absolute; inset:0; pointer-events:none}
.ss-dust{width:100%; height:100%; z-index:0}
.ss-stage{z-index:1}
.ss-fx{z-index:3}
.ss-stage img,.ss-fx img{display:block; user-select:none; -webkit-user-drag:none}
.ss-stage>img{position:absolute}

.ss-copy{position:relative; z-index:2; text-align:center; padding:clamp(56px,7vw,88px) 20px; max-width:900px}
@media (max-width:640px){.ss-copy{padding:64px 18px}}
.ss-brand{display:grid; justify-items:center; gap:12px}
.ss-lslot{position:relative; display:inline-block}
.ss-logo{width:clamp(190px,26vw,310px); height:auto; display:block}
.ss-ghost{position:absolute; inset:-6px -8px; border-radius:12px; border:2px dashed rgba(244,176,74,.6);
  background:repeating-linear-gradient(-45deg,rgba(244,176,74,.13) 0 10px,transparent 10px 20px); opacity:0}
.ss-tag{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:.14em; color:var(--ss-accent)}
.ss-tag::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--ss-accent); box-shadow:0 0 0 4px rgba(244,176,74,.2)}
.ss-h{font-size:clamp(2.2rem,6.4vw,5.2rem); line-height:1.04; letter-spacing:-.045em; font-weight:700; margin:22px 0 0; text-wrap:balance; color:var(--ss-text)}
.ss-h .ss-or{color:var(--ss-accent)}
/* each word sits in a clipping box so it can slide up; the extra bottom room keeps g, j, p, y descenders visible */
.ss-w{display:inline-block; overflow:hidden; vertical-align:top; padding:.06em .02em .28em; margin:-.06em -.02em -.28em}
.ss-w>span{display:inline-block}
.ss-sub{color:var(--ss-muted); font-size:clamp(1rem,1.6vw,1.2rem); line-height:1.6; margin:22px auto 0; max-width:40ch}

.ss-ctas{display:grid; grid-template-columns:minmax(0,300px); justify-content:center; margin-top:30px}
@media (max-width:640px){.ss-ctas{grid-template-columns:minmax(0,320px)}}
.ss-cta{position:relative; box-sizing:border-box; width:100%; height:58px; display:flex; align-items:center; justify-content:center; gap:10px;
  font-weight:800; font-size:15.5px; line-height:1; font-family:inherit; padding:0 18px; border-radius:16px; white-space:nowrap; text-decoration:none; overflow:hidden;
  background:var(--ss-accent); color:#141414;
  box-shadow:0 10px 30px -8px rgba(244,176,74,.55), inset 0 -3px 0 rgba(0,0,0,.12);
  transition:transform .2s ease, box-shadow .2s ease}
.ss-cta::after{content:""; position:absolute; inset:0; background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform:translateX(-120%); animation:ss-shine 3.6s ease-in-out 1.2s infinite}
@keyframes ss-shine{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.ss-cta .ss-arr{transition:transform .2s ease}
.ss-cta:hover{transform:translateY(-2px); box-shadow:0 16px 36px -8px rgba(244,176,74,.7), inset 0 -3px 0 rgba(0,0,0,.12)}
.ss-cta:hover .ss-arr{transform:translateX(4px)}
.ss-cta:focus-visible{outline:2px solid #fff; outline-offset:3px}

.ss-pause{position:absolute; top:22px; right:22px; z-index:4; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--ss-line); background:transparent; color:#fff; cursor:pointer; font-weight:700; font-size:14px; line-height:1; font-family:inherit}
.ss-pause:focus-visible{outline:2px solid var(--ss-accent); outline-offset:2px}
@media (max-width:640px){.ss-pause{top:14px; right:14px; width:40px; height:40px}}

.ss-rocket{position:absolute; width:100px; height:160px}
.ss-rocket svg{overflow:visible; display:block}
.ss-rocket .ss-pilot{position:absolute; left:32px; top:44px; width:36px; height:36px; border-radius:50%}
.ss-flame{transform-box:fill-box; transform-origin:50% 0; animation:ss-flick .12s ease-in-out infinite alternate}
@keyframes ss-flick{from{transform:scaleY(.8)}to{transform:scaleY(1.15)}}
.ss-worker{position:absolute}
.ss-tok{position:absolute; font-weight:800; font-size:13px; line-height:1; font-family:inherit; color:var(--ss-accent); letter-spacing:.05em}

/* Hide the copy until the script takes over, so it does not flash before the intro.
   If the script never runs, the copy fades in by itself after 2.5 s. */
.ss-hero:not(.ss-ready) .ss-copy{opacity:0; animation:ss-reveal .4s 2.5s forwards}
@keyframes ss-reveal{to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .ss-cta::after,.ss-flame{animation:none}
}