.release-trial-bar{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0 30px;border-top:1px solid var(--rule);margin-bottom:28px}.trial-label{font-size:12px;color:var(--red);font-weight:700}.release-trial-bar p{font-family:var(--font-heading);font-size:23px;margin:7px 0}.release-trial-bar a{font-size:12px;text-decoration:underline;text-underline-offset:4px;color:#756859}.release-all{background:transparent;border:1px solid var(--red);color:var(--red);padding:12px 22px;border-radius:3px;font:700 14px var(--font-ui);cursor:pointer;min-height:48px;white-space:nowrap}.release-card{position:relative}.release-stage{width:100%;margin:0 0 20px}.release-state{height:30px;margin-bottom:14px}.release-state img{display:block;width:100px;height:30px}.release-frame{position:relative;aspect-ratio:1;width:100%;isolation:isolate;overflow:hidden;background:transparent;box-shadow:0 8px 18px #674a1818}.release-art{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;transition:opacity 240ms ease 100ms,transform 560ms cubic-bezier(.2,.7,.2,1)}.release-art.released{position:absolute;inset:0;opacity:0;transform:scale(1.035)}.is-released .release-art.normal{opacity:0}.is-released .release-art.released{opacity:1;transform:scale(1)}.release-frame:after{content:"";position:absolute;inset:-35%;background:linear-gradient(110deg,transparent 27%,#fff5a400 35%,#fbffd5dd 45%,#fff 49%,#c9f3ffcc 53%,#ffceeaa0 60%,transparent 70%);mix-blend-mode:screen;opacity:0;pointer-events:none;transform:translateX(-110%) rotate(-8deg);z-index:3}.is-changing .release-frame:after{animation:release-sweep 560ms ease-out both}.release-button{display:block;margin:20px 0 0;width:100%;max-width:250px;min-height:48px;padding:12px 20px;border:1px solid #c7001b;background:#dc001b;color:#fffdf7;border-radius:3px;box-shadow:0 3px 0 #a50015;font:700 15px var(--font-ui);letter-spacing:.06em;cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s}.release-button:hover{background:#bc0019;transform:translateY(-1px);box-shadow:0 4px 0 #8d0013}.release-button:active{transform:translateY(2px);box-shadow:none}.is-released .release-button{background:transparent;color:#7e2349;border-color:#cb99ad;box-shadow:none;font-size:13px}.release-button:focus-visible,.release-all:focus-visible{outline:3px solid #ffbe00;outline-offset:5px}.trial-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.release-card .card-more{display:none}.head-grid .release-card .release-stage{max-width:370px;align-self:center;margin-bottom:24px}.head-grid .release-card .release-button{max-width:370px;margin-left:auto;margin-right:auto}.head-grid .release-card h3{margin-bottom:22px}.motif-row .release-card .release-stage{max-width:300px;margin-left:auto;margin-right:auto}.motif-row .release-card .release-button{max-width:300px;margin-left:auto;margin-right:auto}.release-card .card-link{display:flex;flex-direction:column}.release-card .card-class{align-self:flex-start}.release-card .card-link p{margin-bottom:0}.release-catalog-active .head-grid{gap:80px}.release-catalog-active .motif-row{gap:42px}
@keyframes release-sweep{0%{opacity:0;transform:translateX(-105%) rotate(-8deg)}15%{opacity:1}75%{opacity:.95}100%{opacity:0;transform:translateX(105%) rotate(-8deg)}}
@media(max-width:760px){.release-trial-bar{align-items:flex-start;flex-direction:column;gap:18px;padding:20px 0 24px}.release-trial-bar p{font-size:20px;line-height:1.7}.release-all{width:100%}.head-grid .release-card .release-stage{max-width:290px}.head-grid .release-card .release-button{max-width:290px}.release-catalog-active .head-grid{gap:40px}.release-catalog-active .motif-row{gap:32px}.motif-row .release-card .release-stage{max-width:260px}.motif-row .release-card .release-button{max-width:260px}.release-card .release-button{margin-top:18px}.release-state{margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){.release-art{transition:none}.is-changing .release-frame:after{animation:none}}
/* Three separate reveal directions for comparison. */
.effect-choices{margin:0 0 40px}.effect-option-title{font-size:13px;color:#756859;margin-bottom:14px}.effect-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.effect-options button{font-family:var(--font-ui);text-align:left;padding:18px 20px;border:1px solid #ded5c7;border-radius:5px;background:#fffdf7;cursor:pointer;color:var(--ink);box-shadow:0 3px 0 #e9e1d4}.effect-options b{display:block;font-size:16px;margin-bottom:7px}.effect-options span{font-size:12px;line-height:1.7;color:#77675e}.effect-options button[aria-pressed=true]{border:2px solid #dc001b;padding:17px 19px;background:#fff2d1;box-shadow:0 3px 0 #dc001b}.effect-options button:focus-visible{outline:3px solid #efb900;outline-offset:3px}.release-button:disabled{cursor:wait;opacity:.85}.release-all:disabled{opacity:.5;cursor:wait}.release-art{transition:opacity 300ms ease,transform 600ms ease}.release-frame{overflow:visible}.release-frame:after{display:none}.release-fx{position:absolute;inset:0;pointer-events:none;z-index:4}.release-fx>span,.fx-particle{position:absolute;opacity:0}.fx-aura{inset:-9%;border-radius:50%;background:radial-gradient(circle,#fffbd9 0,#ffc94388 30%,#ff8adc44 49%,transparent 70%);mix-blend-mode:screen}.fx-flash{inset:-1%;background:radial-gradient(circle,#fff 15%,#fffde7 65%,#ffe674 100%);mix-blend-mode:screen}.fx-ring{inset:5%;border-radius:50%;border:2px solid #ffe6a4;box-shadow:0 0 12px #ffc955,inset 0 0 12px #fff4bc}.ring-two{inset:14%;border-style:dashed;border-width:2px}.fx-rays{inset:-16%;border-radius:50%;background:repeating-conic-gradient(from 0deg,transparent 0deg 10deg,#fff3b8dd 11deg 12deg,transparent 14deg 30deg);mask-image:radial-gradient(circle,transparent 0 18%,#000 38%,transparent 70%);mix-blend-mode:screen}.fx-particle{width:12px;height:12px;left:50%;top:50%;background:#fff6b3;clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);filter:drop-shadow(0 0 4px #ffdd78)}
.is-changing[data-effect=prism] .fx-aura{animation:prism-charge var(--fx-duration) ease both}.is-changing[data-effect=prism] .fx-flash{animation:prism-flash var(--fx-duration) ease both}.is-changing[data-effect=prism] .fx-rays{animation:prism-rays var(--fx-duration) ease both}.is-changing[data-effect=prism] .fx-particle{animation:prism-particle var(--fx-duration) cubic-bezier(.2,.7,.25,1) both}.is-changing[data-effect=prism] .release-frame{animation:prism-lift var(--fx-duration) ease both}
@keyframes prism-charge{0%{opacity:0;transform:scale(.4)}35%{opacity:.7;transform:scale(.9)}48%{opacity:1;transform:scale(1.13)}75%{opacity:.35;transform:scale(1.3)}100%{opacity:0;transform:scale(1.5)}}
@keyframes prism-flash{0%,35%{opacity:0}46%,54%{opacity:1}80%,100%{opacity:0}}
@keyframes prism-rays{0%,35%{opacity:0;transform:rotate(-25deg) scale(.4)}50%{opacity:1}100%{opacity:0;transform:rotate(25deg) scale(1.35)}}
@keyframes prism-particle{0%{opacity:0;transform:rotate(var(--angle)) translateX(130px) scale(.3)}30%{opacity:.8}44%{opacity:1;transform:rotate(var(--angle)) translateX(10px) scale(.6)}57%{opacity:1}100%{opacity:0;transform:rotate(var(--angle)) translateX(210px) scale(1.2)}}
@keyframes prism-lift{0%,100%{transform:translateY(0)}42%{transform:translateY(-7px) scale(.98)}60%{transform:translateY(-5px) scale(1.02)}}
.fx-seal{inset:23%;border:2px solid #ffe79b;transform:rotate(45deg);box-shadow:0 0 15px #ffbd4188,inset 0 0 15px #ffbd4188}.fx-seal:before,.fx-seal:after{content:"";position:absolute;inset:12%;border:1px solid #fff2b9;transform:rotate(30deg)}.fx-seal:after{transform:rotate(60deg)}.is-changing[data-effect=seal] .fx-ring.ring-one{animation:seal-outer var(--fx-duration) ease-in-out both}.is-changing[data-effect=seal] .fx-ring.ring-two{animation:seal-inner var(--fx-duration) ease-in-out both}.is-changing[data-effect=seal] .fx-seal{animation:seal-center var(--fx-duration) ease-in-out both}.is-changing[data-effect=seal] .fx-aura{animation:seal-aura var(--fx-duration) ease both}.is-changing[data-effect=seal] .fx-flash{animation:seal-flash var(--fx-duration) ease both}
@keyframes seal-outer{0%{opacity:0;transform:scale(1.3) rotate(-50deg)}20%,47%{opacity:1;transform:scale(.98) rotate(30deg)}56%{opacity:1;transform:scale(.95) rotate(75deg)}85%,100%{opacity:0;transform:scale(1.6) rotate(115deg)}}
@keyframes seal-inner{0%{opacity:0;transform:rotate(100deg) scale(.7)}25%,50%{opacity:1}60%{opacity:1;transform:rotate(-45deg) scale(1.1)}100%{opacity:0;transform:rotate(-100deg) scale(1.6)}}
@keyframes seal-center{0%{opacity:0;transform:rotate(-45deg) scale(.6)}25%,47%{opacity:1;transform:rotate(45deg) scale(1)}60%{opacity:1;transform:rotate(70deg) scale(1.15)}100%{opacity:0;transform:rotate(100deg) scale(1.8)}}
@keyframes seal-aura{0%{opacity:0}35%{opacity:.3}55%{opacity:.9}100%{opacity:0}}
@keyframes seal-flash{0%,47%{opacity:0}54%,61%{opacity:1}83%,100%{opacity:0}}
.fx-curtain{top:-2%;bottom:-2%;width:52%;background:repeating-linear-gradient(90deg,#fff8df 0,#fff 10%,#f2d57f 19%,#fff8d8 30%);box-shadow:0 0 25px #fff5c3}.curtain-left{left:-1%;transform-origin:left center}.curtain-right{right:-1%;transform-origin:right center}.is-changing[data-effect=curtain] .curtain-left{animation:curtain-left var(--fx-duration) cubic-bezier(.45,0,.15,1) both}.is-changing[data-effect=curtain] .curtain-right{animation:curtain-right var(--fx-duration) cubic-bezier(.45,0,.15,1) both}.is-changing[data-effect=curtain] .fx-aura{animation:curtain-aura var(--fx-duration) ease both}.is-changing[data-effect=curtain] .fx-particle{animation:curtain-particle var(--fx-duration) ease both}.is-changing[data-effect=curtain] .release-frame{animation:curtain-lift var(--fx-duration) ease both}
@keyframes curtain-left{0%{opacity:0;transform:scaleX(.02)}30%,53%{opacity:1;transform:scaleX(1.02)}60%{opacity:1;transform:scaleX(1.02)}100%{opacity:0;transform:scaleX(.01)}}
@keyframes curtain-right{0%{opacity:0;transform:scaleX(.02)}30%,53%{opacity:1;transform:scaleX(1.02)}60%{opacity:1;transform:scaleX(1.02)}100%{opacity:0;transform:scaleX(.01)}}
@keyframes curtain-aura{0%{opacity:0;transform:scale(.8)}45%,65%{opacity:.8}100%{opacity:0;transform:scale(1.2)}}
@keyframes curtain-particle{0%,60%{opacity:0;transform:rotate(var(--angle)) translateX(90px) scale(.4)}75%{opacity:1}100%{opacity:0;transform:rotate(var(--angle)) translateX(170px) scale(1)}}
@keyframes curtain-lift{0%,100%{transform:translateY(0)}50%,70%{transform:translateY(-8px)}}
.is-returning .release-fx{display:none}.is-returning .release-frame{animation:none!important}
@media(max-width:760px){.effect-options{grid-template-columns:1fr;gap:10px}.effect-options button{padding:13px 16px}.effect-options button[aria-pressed=true]{padding:12px 15px}.effect-options b{font-size:15px;margin-bottom:3px}.effect-choices{margin-bottom:28px}.release-fx{overflow:hidden;inset:-12%;padding:12%}.release-fx>span{max-width:100%}}
@media(prefers-reduced-motion:reduce){.release-fx{display:none}.is-changing .release-frame{animation:none!important}.release-art{transition:none}}
/* Contain decorative layers so hidden particles never widen a small screen. */
.release-fx{overflow:clip}
@media(max-width:760px){.release-fx{inset:0;padding:0}}

/* Adopted sizing: PC head 340px, regular 260px; retain existing mobile sizes. */
.release-catalog-bar{display:flex;justify-content:flex-end;margin:0 0 22px}.release-catalog-active .head-grid .release-stage,.release-catalog-active .head-grid .release-button{max-width:340px}.release-catalog-active .motif-row .release-stage,.release-catalog-active .motif-row .release-button{max-width:260px}
@media(max-width:760px){.release-catalog-active .head-grid .release-stage,.release-catalog-active .head-grid .release-button{max-width:290px}.release-catalog-bar{margin-bottom:20px}.release-catalog-bar .release-all{width:auto}}