/* ROYAL ACE STUDIO — launch sequence, password gate and motion layer (23.10.2026)
   One orchestrated moment when the studio opens; afterwards quiet, pointer-driven motion only. */

/* ------------------------------------------------------------------------------------------- launch overlay */
.ra-launch { position: fixed; inset: 0; z-index: 1000; background: #05070b url("img/launch_bg.webp") center / cover no-repeat; overflow: hidden; display: grid; place-items: center; color: var(--ra-text); font-family: var(--ra-font-display); }
.ra-launch canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ra-launch .ra-l-line { position: absolute; left: 50%; top: 50%; width: min(70vw, 900px); height: 1px; transform: translate(-50%, -50%) scaleX(0); background: linear-gradient(90deg, transparent, var(--ra-gold), transparent); opacity: .9; transform-origin: center; }
/* size as the owner approved it (23.10.): ~3/4 of the viewport height, standing on the floor, left of the spade */
.ra-launch .ra-l-wizard { position: absolute; left: 5%; bottom: 0; height: 70vh; max-height: 740px; opacity: 0; transform: translateY(40px) scale(.98); filter: drop-shadow(0 30px 60px rgba(0,0,0,.7)); pointer-events: none; }
/* the living wizard: still picture + transparent Spine iframe on top, same box */
.ra-wiz-wrap { aspect-ratio: 720 / 1400; }
.ra-wiz-wrap .still, .ra-wiz-wrap .live { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; pointer-events: none; }
.ra-wiz-wrap .still { object-fit: contain; object-position: center bottom; }
.ra-launch .ra-l-spade { position: absolute; left: 50%; top: 46%; width: min(34vw, 320px); transform: translate(-50%, -50%) scale(.6); opacity: 0; filter: drop-shadow(0 20px 50px rgba(255, 200, 61, .25)); }
.ra-launch .ra-l-word { position: absolute; left: 50%; top: 69%; transform: translateX(-50%); text-align: center; white-space: nowrap; }
.ra-launch .ra-l-word h1 { font-size: clamp(28px, 5vw, 56px); letter-spacing: .22em; font-weight: 700; margin: 0; display: flex; justify-content: center; gap: .02em; }
.ra-launch .ra-l-word h1 span { opacity: 0; transform: translateY(14px); display: inline-block; }
.ra-launch .ra-l-word h1 span.gold { color: var(--ra-gold); }
.ra-launch .ra-l-word h1 span.sp { width: .5em; }
.ra-launch .ra-l-word p { margin: 10px 0 0; color: var(--ra-muted); font-size: clamp(12px, 1.3vw, 15px); letter-spacing: .12em; opacity: 0; font-family: var(--ra-font); }
.ra-launch .ra-l-status { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); width: min(520px, 86vw); font-family: var(--ra-mono); font-size: 12px; color: var(--ra-muted); opacity: 0; }
.ra-launch .ra-l-status div { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.05); opacity: 0; transform: translateX(-8px); }
.ra-launch .ra-l-status b { color: var(--ra-text-2); font-weight: 500; }
.ra-launch .ra-l-status .ok { color: var(--ra-green); }
.ra-launch .ra-l-skip { position: absolute; right: 22px; bottom: 18px; color: var(--ra-dim); font: 500 12px var(--ra-font); background: transparent; border: 1px solid var(--ra-line); border-radius: 999px; padding: 6px 12px; cursor: pointer; opacity: 0; }
.ra-launch .ra-l-skip:hover { color: var(--ra-text); border-color: var(--ra-line-2); }
.ra-launch .ra-l-sheen { position: absolute; inset: 0; background: url("img/light_sweep.png") center / 70% auto no-repeat; opacity: .85; mix-blend-mode: screen; transform: translateX(-120%); pointer-events: none; }
/* charge 3: the spade is drawn as a gold outline while the particles gather, then flashes once before the wipe */
.ra-launch .ra-l-outline { position: absolute; left: 50%; top: 46%; width: min(34vw, 320px); transform: translate(-50%, -50%) scale(.92); opacity: 0; pointer-events: none; }
.ra-launch .ra-l-flash { position: absolute; left: 50%; top: 46%; width: min(46vw, 440px); transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none; mix-blend-mode: screen; }
/* sparks at the staff tip of the living wizard */
.ra-wiz-wrap .spark { position: absolute; left: 62%; top: 14%; width: 36%; transform: translate(-50%, -50%); pointer-events: none; mix-blend-mode: screen; animation: ra-spark 2.4s ease-in-out infinite; }
@keyframes ra-spark { 0%, 100% { opacity: .5; transform: translate(-50%, -50%) scale(.92) rotate(-3deg); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06) rotate(3deg); } }
.ra-launch.out { animation: ra-l-out .9s var(--ra-ease) forwards; }
@keyframes ra-l-out { 0% { clip-path: circle(150% at 50% 46%); opacity: 1; } 100% { clip-path: circle(0% at 50% 46%); opacity: 1; } }
.ra-launch.instant { display: none; }

/* the page itself arrives: sidebar slides, hero settles, tiles rise in order (once, after the launch) */
.ra-arrive .ra-side { animation: ra-slide-x .7s var(--ra-ease) both; }
.ra-arrive .ra-hero { animation: ra-rise .7s .1s var(--ra-ease) both; }
.ra-arrive .ra-tile { animation: ra-rise .6s var(--ra-ease) both; }
.ra-arrive .ra-tile:nth-child(1) { animation-delay: .2s; } .ra-arrive .ra-tile:nth-child(2) { animation-delay: .28s; } .ra-arrive .ra-tile:nth-child(3) { animation-delay: .36s; } .ra-arrive .ra-tile:nth-child(4) { animation-delay: .44s; } .ra-arrive .ra-tile:nth-child(5) { animation-delay: .52s; }
.ra-arrive .ra-grid.c2 > .ra-card { animation: ra-rise .6s .55s var(--ra-ease) both; }
@keyframes ra-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ra-slide-x { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------------------------------- gate (password) */
.ra-gate { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; background: radial-gradient(900px 500px at 30% 100%, rgba(255, 200, 61, .06), transparent 60%), #05070b; }
.ra-gate .wiz { position: absolute; left: 2%; bottom: 0; height: 66vh; max-height: 700px; opacity: .7; filter: drop-shadow(0 20px 40px rgba(0,0,0,.6)); pointer-events: none; }
.ra-gate .card { position: relative; width: min(420px, 92vw); padding: 34px 30px 28px; border-radius: 22px; background: linear-gradient(180deg, rgba(18, 24, 35, .66), rgba(11, 15, 22, .86)), url("img/gate_card_bg.webp") center / cover no-repeat; border: 1px solid var(--ra-line-2); box-shadow: var(--ra-shadow), 0 0 0 1px rgba(255,200,61,.08); text-align: center; animation: ra-rise .6s var(--ra-ease) both; }
.ra-gate .card img.logo { width: 88px; height: 88px; margin-bottom: 10px; filter: drop-shadow(0 8px 18px rgba(255, 200, 61, .35)); }
.ra-gate .card h1 { font-size: 22px; letter-spacing: .12em; }
.ra-gate .card p { color: var(--ra-muted); font-size: 13px; margin: 8px 0 18px; }
.ra-gate .card .ra-input { text-align: center; letter-spacing: .3em; font-size: 18px; }
.ra-gate .card .ra-btn { width: 100%; margin-top: 12px; }
.ra-gate .card .err { color: var(--ra-red); font-size: 12.5px; margin-top: 10px; min-height: 16px; }
.ra-gate .card.shake { animation: ra-shake .4s; }
@keyframes ra-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }

/* ------------------------------------------------------------------------------------------- pointer-driven motion */
.ra-tile.tilt { transform-style: preserve-3d; transition: transform .25s var(--ra-ease), border-color .2s; will-change: transform; }
.ra-tile.tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s; background: url("img/cursor_orb.png") no-repeat; background-size: 320px 320px; background-position: calc(var(--mx, 50%) - 160px) calc(var(--my, 50%) - 160px); mix-blend-mode: screen; }
.ra-tile.tilt:hover::after { opacity: .55; }
.ra-tile.tilt { isolation: isolate; }
.ra-tile.tilt::before { content: ""; position: absolute; inset: -34%; background: url("img/tile_glow.png") center / contain no-repeat; opacity: 0; transition: opacity .35s; pointer-events: none; z-index: -1; }
.ra-tile.tilt:hover::before { opacity: .7; }
.ra-divider { height: 28px; margin: 4px 0; background: url("img/divider_gold.png") center / contain no-repeat; opacity: .9; }
.ra-nav img.ra-nav-img { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
.ra-toast img { width: 20px; height: 20px; vertical-align: middle; margin: -3px 8px -3px 0; }
.ra-tile.tilt:hover { border-color: rgba(255, 200, 61, .35); }
.ra-btn.primary { position: relative; overflow: hidden; }
.ra-btn.primary::after { content: ""; position: absolute; top: -40%; bottom: -40%; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg); transition: left .6s var(--ra-ease); pointer-events: none; }
.ra-btn.primary:hover::after { left: 130%; }
.ra-live { animation: ra-pulse 2.2s ease-in-out infinite; }
@keyframes ra-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(25, 211, 154, .16); } 50% { box-shadow: 0 0 0 6px rgba(25, 211, 154, .05); } }
.ra-nav { position: relative; }
.ra-nav .ra-ind { position: absolute; left: 0; width: 3px; border-radius: 3px; background: var(--ra-gold); transition: top .35s var(--ra-ease), height .35s var(--ra-ease); box-shadow: 0 0 12px rgba(255, 200, 61, .5); }
.ra-hero.has-img { background-position: center, calc(50% + var(--px, 0px)) calc(50% + var(--py, 0px)); transition: background-position .4s var(--ra-ease); }
.ra-page-swap { animation: ra-swap .35s var(--ra-ease) both; }
@keyframes ra-swap { from { opacity: 0; transform: translateY(10px) scale(.995); } to { opacity: 1; transform: none; } }
.ra-count { font-variant-numeric: tabular-nums; }
body.ra-textured { background-image: url("img/bg_night.webp"); background-size: cover; background-attachment: fixed; background-position: center; }
body.ra-textured::before { display: none; }
.ra-side.textured { background-image: linear-gradient(180deg, rgba(12,16,23,.92), rgba(9,12,18,.96)), url("img/texture_sidebar.webp"); background-size: cover; }

@media (prefers-reduced-motion: reduce) {
  .ra-launch, .ra-gate .card, .ra-arrive .ra-side, .ra-arrive .ra-hero, .ra-arrive .ra-tile, .ra-arrive .ra-grid.c2 > .ra-card, .ra-page-swap { animation: none !important; }
  .ra-tile.tilt { transform: none !important; }
  .ra-live { animation: none; }
}
/* narrow screens: no room next to the word mark (display, not opacity: the entrance animation would override opacity) */
@media (max-width: 860px) { .ra-launch .ra-l-wizard { display: none; } .ra-gate .wiz { display: none; } }