/* =====================================================
   SOTEK STUDIO · hero stage (motion loop)
   ===================================================== */
.stage{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100svh - 280px);min-height:380px;border-radius:18px;overflow:hidden;container-type:size;
  background:#020a2e;color:#fff;margin-top:clamp(18px,3vh,32px);
  box-shadow:0 30px 80px -40px rgba(2,10,46,.6)}
.stage .light{position:absolute;inset:-30%;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(60,120,255,.55) 45%,rgba(140,190,255,.35) 50%,rgba(60,120,255,.4) 55%,transparent 70%);
  filter:blur(40px);animation:streak 9s ease-in-out infinite alternate}
.stage .glow{position:absolute;width:70cqw;height:70cqw;right:-20cqw;bottom:-40cqw;border-radius:50%;
  background:radial-gradient(circle,rgba(40,90,255,.45),transparent 65%);filter:blur(30px);animation:glow 12s ease-in-out infinite alternate}
@keyframes streak{from{transform:translate(-12%,-6%) rotate(0deg)}to{transform:translate(10%,6%) rotate(6deg)}}
@keyframes glow{to{transform:translate(-14cqw,-10cqw) scale(1.15)}}

.scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s}
.scene.on{opacity:1;visibility:visible}

/* 1 · typed phrase */
.s-type p{font-size:4.6cqw;font-weight:400;letter-spacing:-.02em;display:flex;gap:.28em;flex-wrap:wrap;justify-content:center;max-width:80cqw}
.s-type .w{opacity:0;filter:blur(8px);transform:translateY(.45em) scale(.85);transition:opacity .35s,filter .35s,transform .5s cubic-bezier(.34,1.56,.64,1),color .4s}
.s-type .w.in{opacity:1;filter:none;transform:none}
.s-type .w.blue{color:#6f9bff}

/* 2 · wheel of services */
.s-wheel{justify-content:flex-start}
.s-wheel .fixed{position:absolute;left:24cqw;top:50%;transform:translateY(-50%);font-size:3.6cqw;letter-spacing:-.02em;white-space:nowrap}
.s-wheel .wheel{position:absolute;left:42cqw;top:50%;width:52cqw;height:0;}
.s-wheel .wheel li{list-style:none;position:absolute;left:0;top:0;white-space:nowrap;font-size:3.6cqw;letter-spacing:-.02em;line-height:1;
  transform-origin:left center;transition:transform .38s cubic-bezier(.34,1.56,.64,1),opacity .3s,color .25s;color:rgba(160,185,255,.45)}
.s-wheel .wheel li.act{color:#fff}
.s-wheel .wheel li.act::before{content:'';position:absolute;left:-2.2cqw;top:50%;width:.9cqw;height:.9cqw;border-radius:50%;background:#fff;transform:translateY(-50%)}

/* 3 · 3D carousel of work */
.s-carousel{perspective:120cqw}
.s-carousel .ring{position:relative;width:15cqw;height:21cqw;transform-style:preserve-3d;animation:spin 4.6s cubic-bezier(.45,.05,.55,.95) infinite}
.s-carousel .card{position:absolute;inset:0;border-radius:1.4cqw;overflow:hidden;background:#0b1a55;backface-visibility:hidden;box-shadow:0 2cqw 4cqw rgba(0,0,0,.35)}
.s-carousel .card img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes spin{from{transform:rotateX(-6deg) rotateY(0)}to{transform:rotateX(-6deg) rotateY(-360deg)}}

/* 4 · logo resolve */
.s-logo .lg{font-size:9cqw;font-weight:300;letter-spacing:-.06em;display:flex}
.s-logo .lg span{display:inline-block;opacity:0;transform:translateY(.5em) scale(.6);filter:blur(10px);transition:opacity .35s,filter .35s,transform .55s cubic-bezier(.34,1.7,.64,1)}
.s-logo .lg span.in{opacity:1;transform:none;filter:none}
.s-logo .lg .sp{width:.25em}
.s-logo .lg sup{font-size:.14em;align-self:flex-start;margin:.6em 0 0 .1em;opacity:0;transition:opacity .6s .6s}
.s-logo.on .lg sup{opacity:1}

@media(max-width:760px){
  .stage{aspect-ratio:4/5;border-radius:14px;max-height:none}
  .s-type p{font-size:8.4cqw}
  .s-wheel .fixed{left:8cqw;font-size:6.4cqw}
  .s-wheel .wheel{left:34cqw;width:62cqw;}
  .s-wheel .wheel li{font-size:5.6cqw}
  .s-wheel .wheel li.act::before{left:-3.4cqw;width:1.6cqw;height:1.6cqw}
  .s-carousel .ring{width:22cqw;height:31cqw}
  .s-logo .lg{font-size:15cqw;flex-wrap:wrap;justify-content:center}
  .s-logo .lg .sp{width:100%;height:0}
}
@media(prefers-reduced-motion:reduce){
  .stage .light,.stage .glow,.s-carousel .ring{animation:none}
}

/* dopamine details */
.s-wheel .wheel.land li.act{animation:land .55s cubic-bezier(.34,1.56,.64,1)}
@keyframes land{0%{text-shadow:0 0 0 rgba(120,170,255,0)}35%{text-shadow:0 0 2.4cqw rgba(140,185,255,.9)}100%{text-shadow:0 0 0 rgba(120,170,255,0)}}
.stage::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(150,195,255,.45),transparent 60%);opacity:0;transition:opacity .5s}
.stage.flash::after{opacity:1;transition:opacity .12s}