/* A storyboard connects the opening interaction to voice, vision and creation. */
.story-back,.story-front{top:0;left:0}
.hero{min-height:790px}.hero h1{position:absolute;left:5%;top:26%;width:55%;padding:0;z-index:2}.hero .knight{font-size:clamp(105px,13.3vw,210px);margin-left:0}.hero .sanjin{font-size:clamp(85px,10.7vw,172px);margin-top:36px;letter-spacing:-.075em}.hero-red{width:32%;right:11%;height:91%;transform:skew(calc(-13deg + var(--hero-scroll)*10deg)) translateY(calc(var(--hero-scroll)*75px));background:linear-gradient(165deg,#9b2943,#671e31 70%,#33171f)}.hero-bottom{margin-top:auto}.hero-side{top:33%;left:2.5%;font-size:7px}.hero-explore{border-bottom:1px solid #e3e0d85c;padding:12px 0;display:flex;gap:45px;align-items:center}.hero-explore span{font-size:22px;color:var(--paper)}.hero-actions>.hero-explore{font-size:12px;color:var(--paper)}.story-stage{position:absolute;z-index:4;right:8%;top:16%;width:min(36%,530px);height:520px;padding:0;background:none;text-align:left;isolation:isolate;transform:perspective(1100px) rotateY(calc(var(--mx)*-6deg)) rotateX(calc(var(--my)*5deg)) translateY(calc(var(--hero-scroll)*110px));transition:transform .25s ease-out;cursor:pointer}.story-back,.story-front{display:block;position:absolute;width:100%;height:440px;border:1px solid #e0e4ef80;transform-origin:50% 75%;box-shadow:0 28px 50px #0007}.story-back{overflow:hidden;padding:22px;background:linear-gradient(135deg,#dfe2e5,#72727d 37%,#25242d 80%);transition:transform .65s cubic-bezier(.2,.8,.2,1)}.back-expression{transform:translate(-35px,-40px) rotate(calc(-13deg - var(--hero-scroll)*16deg));color:#16181c}.back-vision{transform:translate(17px,-17px) rotate(calc(8deg + var(--hero-scroll)*12deg));background:linear-gradient(135deg,#4e2a36,#211e25 75%);color:#cec8be}.frame-index,.frame-time{display:block;font-size:9px;letter-spacing:2px}.frame-name{display:block;font-size:66px;letter-spacing:-3px;font-weight:500;margin-top:40px}.frame-time{position:absolute;bottom:20px;left:22px;font-size:10px}.story-front{background:linear-gradient(140deg,#202128 5%,#111114 70%);transform:rotate(-3deg);padding:22px;transition:transform .65s cubic-bezier(.2,.8,.2,1);border-color:#dce0eaaf}.story-front:before,.story-front:after{content:'';position:absolute;width:17px;height:17px;border-color:var(--acid);border-style:solid;pointer-events:none}.story-front:before{top:-1px;left:-1px;border-width:2px 0 0 2px}.story-front:after{bottom:-1px;right:-1px;border-width:0 2px 2px 0}.frame-top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:9px;letter-spacing:1.5px}.live-label{display:flex;align-items:center;gap:7px;letter-spacing:1px;color:var(--acid)}.live-label i{height:5px;width:5px;background:var(--acid);border-radius:50%}.game-preview{position:relative;display:block;height:220px;margin-top:20px;overflow:hidden;background:repeating-linear-gradient(0deg,transparent 0 25px,#ffffff05 26px)}.preview-word{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(76px,7vw,112px);font-weight:500;letter-spacing:-7px;background:linear-gradient(150deg,#ebedef 20%,#777986 46%,#f9f8f5 55%,#9896a2);background-clip:text;color:transparent;transition:transform .45s}.word-top{clip-path:polygon(0 0,100% 0,100% 28%,0 73%);transform:translate(-5px,-3px)}.word-bottom{clip-path:polygon(0 76%,100% 31%,100% 100%,0 100%);transform:translate(5px,3px)}.preview-cut{position:absolute;top:50%;left:-5%;width:110%;height:2px;background:linear-gradient(90deg,transparent,var(--acid) 25%,#fff 65%,transparent);transform:rotate(-16deg);box-shadow:0 0 22px #d8efad55;animation:cut-glow 3s ease-in-out infinite}.preview-caption{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:7px;letter-spacing:1.5px;color:#aaa69e}.story-invite{display:flex;justify-content:space-between;align-items:center;margin-top:12px}.story-invite small{display:block;font-size:9px;color:var(--muted);letter-spacing:1.5px}.story-invite strong{display:block;font-size:43px;font-weight:400;letter-spacing:-2px;line-height:1.4}.story-invite strong>span{font-family:Arial,sans-serif;font-size:27px;margin-left:18px;color:var(--acid)}.play-disc{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--acid);color:#24291b;font-size:14px;padding-left:3px;transition:transform .4s}.story-cta{position:absolute;left:22px;right:22px;bottom:17px;display:flex;justify-content:space-between;border-top:1px solid #ffffff29;padding-top:12px;font-size:10px;color:#e9e7df}.story-cta>span{font-size:14px}.story-caption{position:absolute;top:475px;left:0;right:0;display:flex;justify-content:space-between;gap:10px;font-size:9px;letter-spacing:1px;color:#ccc8c1}.story-caption>span{font-size:7px;color:#9f9a93}.story-stage:hover .back-expression,.story-stage:focus-visible .back-expression{transform:translate(-58px,-48px) rotate(-19deg)}.story-stage:hover .back-vision,.story-stage:focus-visible .back-vision{transform:translate(34px,-25px) rotate(13deg)}.story-stage:hover .story-front,.story-stage:focus-visible .story-front{transform:rotate(0) translateY(-5px)}.story-stage:hover .word-top,.story-stage:focus-visible .word-top{transform:translate(-15px,-9px)}.story-stage:hover .word-bottom,.story-stage:focus-visible .word-bottom{transform:translate(15px,9px)}.story-stage:hover .play-disc{transform:scale(1.1)}.playing .story-stage{visibility:hidden}.ticker i{font-size:19px;letter-spacing:0}.award-symbol{font-family:Georgia,serif;font-size:48px;font-style:italic;transform:none!important;letter-spacing:-3px}.small-symbol{font-size:48px}@keyframes cut-glow{0%,100%{opacity:.45}50%{opacity:1}}
@media(min-width:1600px){.story-stage{top:19%;right:10%}.hero h1{top:30%}}
@media(min-width:701px) and (max-width:1100px){.hero h1{top:31%;left:6%}.hero .knight{font-size:13.3vw}.hero .sanjin{font-size:10.8vw}.story-stage{right:7%;width:36%;top:22%;height:440px}.story-back,.story-front{height:365px}.story-front{padding:17px}.game-preview{height:163px;margin-top:14px}.preview-word{font-size:8vw}.story-invite strong{font-size:35px}.story-caption{top:400px;font-size:8px}.story-caption>span{font-size:6px}.story-cta{left:17px;right:17px;font-size:9px}.play-disc{width:38px;height:38px;font-size:12px}.frame-top{font-size:7px;letter-spacing:1px}.frame-name{font-size:48px}.back-expression{transform:translate(-24px,-33px) rotate(-13deg)}.hero-red{width:35%;right:9%}}
@media(max-width:700px){.hero{min-height:750px;max-height:920px}.hero h1{left:6%;top:72px;width:88%;z-index:2}.hero .knight{font-size:23vw}.hero .sanjin{font-size:17.5vw;line-height:.9;margin:15px 0 0 10%;letter-spacing:-.06em}.hero-red{width:55%;right:8%;height:89%}.story-stage{top:300px;width:71%;right:12%;height:340px;transform:translateY(calc(var(--hero-scroll)*65px))}.story-back,.story-front{height:285px}.story-front{padding:15px}.frame-top{font-size:7px;letter-spacing:1px}.live-label{gap:5px}.game-preview{height:125px;margin-top:9px}.preview-word{font-size:69px;letter-spacing:-4px}.preview-caption{font-size:5px;letter-spacing:1px;bottom:0}.story-invite{margin-top:8px}.story-invite small{font-size:8px;letter-spacing:1px}.story-invite strong{font-size:32px;line-height:1.45}.story-invite strong>span{font-size:21px;margin-left:13px}.play-disc{width:38px;height:38px;font-size:11px}.story-cta{left:15px;right:15px;bottom:13px;font-size:9px;padding-top:8px}.story-caption{top:310px;font-size:8px;letter-spacing:0}.story-caption>span{font-size:6px}.back-expression{transform:translate(-17px,-19px) rotate(calc(-11deg - var(--hero-scroll)*10deg))}.back-vision{transform:translate(12px,-11px) rotate(calc(7deg + var(--hero-scroll)*10deg))}.story-back{padding:15px}.frame-index{font-size:7px}.frame-name{font-size:43px}.frame-time{font-size:8px}.hero-bottom p{font-size:11px}.hero-actions>.hero-explore{font-size:10px;gap:15px}.hero-explore span{font-size:18px}.hero-bottom{padding-bottom:0}.award-symbol,.small-symbol{font-size:33px;letter-spacing:-2px}.story-stage:hover .back-expression,.story-stage:focus-visible .back-expression{transform:translate(-21px,-23px) rotate(-14deg)}.story-stage:hover .back-vision,.story-stage:focus-visible .back-vision{transform:translate(16px,-13px) rotate(10deg)}}
@media(max-width:360px){.hero{min-height:720px}.story-stage{top:265px;width:73%}.hero h1{top:76px}.story-caption{font-size:7px}.story-caption>span{font-size:5px}.story-invite strong{font-size:30px}.game-preview{height:127px}.hero-actions>.hero-explore{font-size:9px;gap:9px}}
@media(prefers-reduced-motion:reduce){.story-stage,.story-back,.story-front,.preview-word{transition:none!important}.story-stage{transform:none!important}.back-expression{transform:translate(-25px,-25px) rotate(-10deg)!important}.back-vision{transform:translate(12px,-12px) rotate(7deg)!important}.preview-cut{animation:none!important;opacity:1}}