/* Lype first-section port: the same perspective stage and cyclic three poses.
   Scoped to this entry so the existing Reila website keeps its own system. */
.showcase-container{height:100svh;min-height:500px;position:relative;display:flex;justify-content:center;align-items:center;perspective:1000px;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 50% 0%,#16282a 0%,#050d10 70%)}
.showcase-spotlight-wrapper{position:absolute;top:-10svh;left:50%;transform:translateX(-50%);width:800px;height:80svh;pointer-events:none;z-index:-1;filter:blur(90px)}
.showcase-spotlight{position:absolute;inset:0;clip-path:polygon(45% 0,55% 0,90% 100%,10% 100%);mask-image:linear-gradient(180deg,#000 5%,transparent 85%);opacity:0;transition:opacity 1.5s ease}
.showcase-spotlight[data-light=reila]{background:linear-gradient(180deg,rgba(254,146,16,.3),transparent)}
.showcase-spotlight[data-light=presentation]{background:linear-gradient(180deg,rgba(198,217,206,.3),transparent)}
.showcase-spotlight[data-light=video]{background:linear-gradient(180deg,rgba(244,241,234,.28),transparent)}
.showcase-container[data-selected=reila] [data-light=reila],.showcase-container[data-selected=presentation] [data-light=presentation],.showcase-container[data-selected=video] [data-light=video]{opacity:1}
.showcase-dust{position:absolute;top:8%;left:50%;width:min(640px,70vw);height:70%;transform:translateX(-50%);pointer-events:none;z-index:0;clip-path:polygon(42% 0,58% 0,100% 100%,0 100%)}
.showcase-dust i{position:absolute;left:var(--x);top:var(--y);width:2px;height:2px;background:var(--paper);border-radius:50%;opacity:0;animation:showcase-drift var(--duration) var(--delay) linear infinite;animation-play-state:paused}
.showcase-dust i:nth-child(3n){width:1.5px;height:1.5px;background:var(--warm)}
.showcase-dust[data-running=true] i{animation-play-state:running}
@keyframes showcase-drift{0%{transform:translate3d(0,14px,0);opacity:0}20%,70%{opacity:.28}100%{transform:translate3d(var(--drift),-30px,0);opacity:0}}
.showcase-track{width:100%;max-width:1000px;height:280px;position:relative;z-index:1;display:flex;justify-content:center;align-items:center;transform-style:preserve-3d;pointer-events:none}
.showcase-track>.showcase-panel{pointer-events:auto}
.showcase-panel{position:absolute;width:300px;height:210px;display:flex;flex-direction:column;gap:22px;justify-content:center;align-items:center;background:transparent;color:var(--paper);border:0;padding:20px;cursor:pointer;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.25,1,.5,1),opacity .8s cubic-bezier(.25,1,.5,1);border-radius:4px}
.showcase-panel .showcase-symbol{height:156px;width:auto;max-width:80%;object-fit:contain;pointer-events:none}
.showcase-panel .showcase-icon{width:82px;height:82px;stroke-width:1;pointer-events:none}
.showcase-panel .showcase-label{font-family:Outfit,sans-serif;font-size:16px;letter-spacing:.15em;text-transform:uppercase;font-weight:300}
.showcase-panel:is(.pos-left,.pos-right) :is(.showcase-symbol,.showcase-icon){filter:blur(1px)}
.showcase-panel.pos-center :is(.showcase-symbol,.showcase-icon),.showcase-panel:focus-visible :is(.showcase-symbol,.showcase-icon){filter:none}
@media(hover:hover){.showcase-panel:hover :is(.showcase-symbol,.showcase-icon){filter:none}}
.showcase-panel.pos-center{transform:translateX(0) translateZ(50px) scale(1.3);z-index:10;opacity:1;cursor:default}
.showcase-panel.pos-left{transform:translateX(-140%) translateZ(-50px) rotateY(15deg) scale(.85);z-index:5;opacity:.45}
.showcase-panel.pos-right{transform:translateX(140%) translateZ(-50px) rotateY(-15deg) scale(.85);z-index:5;opacity:.45}
@media(hover:hover){.showcase-panel.pos-left:hover{opacity:.8;transform:translateX(-140%) translateZ(-30px) rotateY(10deg) scale(.9)}.showcase-panel.pos-right:hover{opacity:.8;transform:translateX(140%) translateZ(-30px) rotateY(-10deg) scale(.9)}}
.showcase-panel:focus-visible{opacity:1;outline:none}
.showcase-panel:focus-visible:after{content:'';position:absolute;bottom:0;width:48px;height:3px;background:var(--warm);border-radius:2px}
.showcase-panel:disabled{cursor:default}
.showcase-motion-control{position:absolute;top:24px;right:var(--gutter);width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.showcase-motion-control:focus-within{z-index:20;width:auto;height:auto;clip-path:none;overflow:visible;display:flex;align-items:center;gap:10px;padding:12px 16px;background:#0b1b1c;color:var(--paper);border:1px solid var(--warm);font-size:14px}
.showcase-motion-control input{accent-color:var(--warm)}
.world-panel{position:relative;outline:none}
.world-panel .hero{min-height:0}
.world-panel .hero-content{padding-block:160px 130px}
.world-panel .hero h1{font-size:clamp(52px,5.5vw,86px)}
.world-panel .hero-identity{margin-bottom:26px}
.world-panel .hero-lead{font-size:clamp(26px,2.7vw,40px)}
.world-panel[hidden]{display:none!important}
.world-panel.world-empty{min-height:65svh;background:radial-gradient(ellipse at 50% 0,rgba(198,217,206,.025),transparent 60%),#050d10}
.world-panel.world-empty:after{content:'';display:block;width:80px;height:1px;background:var(--line);margin:auto}
.showcase-container [hidden]{display:none!important}
.showcase-panel.pos-left,.showcase-panel.pos-right{opacity:.55}
@media(max-width:1100px) and (min-width:701px){.showcase-panel{width:260px}.showcase-panel.pos-left{transform:translateX(-118%) translateZ(-50px) rotateY(15deg) scale(.78)}.showcase-panel.pos-right{transform:translateX(118%) translateZ(-50px) rotateY(-15deg) scale(.78)}}
@media(hover:hover) and (min-width:701px) and (max-width:1100px){.showcase-panel.pos-left:hover{transform:translateX(-118%) translateZ(-30px) rotateY(10deg) scale(.82)}.showcase-panel.pos-right:hover{transform:translateX(118%) translateZ(-30px) rotateY(-10deg) scale(.82)}}
@media(max-width:700px){.showcase-container{min-height:530px}.showcase-track{height:220px}.showcase-panel{width:138px;height:170px;padding:12px;gap:20px}.showcase-panel .showcase-symbol{height:106px;max-width:95%}.showcase-panel .showcase-icon{width:60px;height:60px}.showcase-panel .showcase-label{font-size:11px;letter-spacing:.07em}.showcase-panel.pos-center{transform:translateX(0) translateZ(35px) scale(1.15)}.showcase-panel.pos-left{transform:translateX(-88%) translateZ(-55px) rotateY(15deg) scale(.67);opacity:.58}.showcase-panel.pos-right{transform:translateX(88%) translateZ(-55px) rotateY(-15deg) scale(.67);opacity:.58}.showcase-spotlight-wrapper{width:640px;filter:blur(65px)}.showcase-dust{width:80vw}.showcase-dust i:nth-child(n+7){display:none;animation:none}}
@media(max-width:700px){.world-panel .hero-content{padding-block:130px 135px}.world-panel .hero h1{font-size:clamp(44px,10vw,62px)}.world-panel .hero-identity{margin-bottom:30px}}
@media(max-width:700px){.showcase-panel .showcase-label{font-size:18px;letter-spacing:.02em}.showcase-panel.pos-left,.showcase-panel.pos-right{opacity:.68}}
@media(hover:hover) and (max-width:700px){.showcase-panel.pos-left:hover{transform:translateX(-88%) translateZ(-55px) rotateY(15deg) scale(.67)}.showcase-panel.pos-right:hover{transform:translateX(88%) translateZ(-55px) rotateY(-15deg) scale(.67)}}
html[data-reduced-motion=true] .showcase-panel,html[data-reduced-motion=true] .showcase-spotlight{transition:none}
html[data-reduced-motion=true] .showcase-dust{display:none}
@media(prefers-reduced-motion:reduce){.showcase-panel,.showcase-spotlight{transition:none}.showcase-dust{display:none}}