/* Intro sinematik — memakai token warna yang sama dengan style.css (#0c0a12 / #8b5cf6). */
#intro{position:fixed;inset:0;z-index:1000;overflow:hidden;perspective:900px;background:#0c0a12;color:#f6f3ff;font-family:Inter,ui-sans-serif,-apple-system,"Segoe UI",sans-serif;transition:opacity .9s ease,visibility .9s;animation:introFailsafe .01s 16s forwards}
#intro.done{opacity:0;visibility:hidden}
@keyframes introFailsafe{to{opacity:0;visibility:hidden}}
#intro .glow{position:absolute;inset:-20%;background:radial-gradient(60% 40% at 72% 38%,rgba(139,92,246,.38),transparent 70%),radial-gradient(50% 35% at 18% 78%,rgba(109,75,181,.28),transparent 70%)}
#intro .t{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);padding:0 24px;text-align:center;font-size:clamp(22px,5vw,40px);font-weight:700;letter-spacing:-.03em;z-index:3;pointer-events:none;transition:opacity .6s,filter .6s}
#intro .t.out{opacity:0;filter:blur(10px)}
#intro .t.acc{color:#a78bfa;text-shadow:0 0 24px rgba(139,92,246,.6)}
#intro .c{position:absolute;left:50%;top:50%;width:min(66vw,300px);height:min(28vw,125px);margin:calc(min(28vw,125px)/-2) 0 0 calc(min(66vw,300px)/-2);border-radius:12px;overflow:hidden;background:#150f20 center/cover no-repeat;box-shadow:0 0 0 1.5px #8b5cf6,0 0 28px 6px rgba(139,92,246,.5);opacity:0;transform:translate3d(0,0,-3000px);transition:transform 2.4s cubic-bezier(.2,.8,.2,1),opacity 1.1s,filter 1.1s}
#intro .c i{position:absolute;inset:auto 0 0;padding:22px 12px 9px;font:600 clamp(12px,3.2vw,15px)/1.2 Inter,sans-serif;font-style:normal;background:linear-gradient(transparent,rgba(12,10,18,.92))}
#intro .who{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:0 24px;text-align:center;opacity:0;transition:opacity 1.2s;z-index:4;pointer-events:none}
#intro .who.on{opacity:1}
#intro .who h2{margin:0;font-size:clamp(30px,8vw,60px);font-weight:800;letter-spacing:-.04em;text-shadow:0 0 30px rgba(139,92,246,.75)}
#intro .who h2::after{content:"";display:block;width:26px;height:2px;background:#8b5cf6;margin:10px auto 0}
#intro .who p{margin:0;color:#a78bfa;font-weight:600;font-size:clamp(13px,3.6vw,16px)}
#intro .who q{quotes:none;font:600 clamp(20px,5.5vw,28px)/1 Caveat,cursive;color:#d9d0f5}
#intro .skip{position:absolute;z-index:6;right:16px;top:calc(16px + env(safe-area-inset-top,0px));padding:8px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:transparent;color:#f6f3ff;font:500 12px Inter,sans-serif;cursor:pointer}
#intro .skip:hover{background:rgba(255,255,255,.1)}
#intro .skip:focus-visible{outline:2px solid #8b5cf6;outline-offset:3px}