/* Opening splash: a gate (sound on/off), then a ~3.6s motion sequence that hands off to the landing. */
.splash {--pink:#ed297e;--lime:#ecfc94;--silver:#d9dade;position:fixed;inset:0;z-index:1000;display:grid;place-items:center;overflow:hidden;background:#0d0d10;color:#f4f4f6;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;-webkit-font-smoothing:antialiased}
.splash[hidden] {display:none}
html.splash-lock,html.splash-lock body {overflow:hidden}
/* Hold the hero entrance until the splash hands off, so it plays as the pink wipe clears. */
html.splash-lock .lp3-hero * {animation-play-state:paused!important}
.splash::after {content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,#ffffff14 0 .9px,transparent 1.3px);background-size:4px 4px;z-index:6}

/* Gate */
.splash-gate {position:relative;z-index:8;display:grid;justify-items:center;gap:22px;text-align:center;padding:0 16px;transition:opacity .35s ease,transform .35s ease}
.splash-gate-halo {width:132px;height:132px;color:var(--silver);animation:splash-spin 18s linear infinite}
.splash-gate-halo circle,.splash-gate-halo path {fill:none;stroke:currentColor;stroke-width:1.2}
.splash-gate-title {margin:0;font-size:12px;font-weight:700;letter-spacing:.42em;color:#a9a9b2}
.splash-gate-title b {display:block;margin-top:10px;font:900 italic clamp(34px,7vw,56px)/1 Arial,sans-serif;letter-spacing:-.06em;color:#fff}
.splash-gate-actions {display:grid;gap:12px;width:min(300px,100%);margin-top:8px}
.splash-enter,.splash-mute {appearance:none;border:1px solid #f4f4f6;border-radius:0;min-height:54px;font:800 14px/1 inherit;font-family:inherit;letter-spacing:.06em;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.splash-enter {background:#f4f4f6;color:#0d0d10;box-shadow:4px 4px 0 var(--pink)}
.splash-enter:hover {background:var(--lime)}
.splash-enter:active {transform:translate(2px,2px);box-shadow:2px 2px 0 var(--pink)}
.splash-mute {background:transparent;color:#d6d6dc;border-color:#55555e;min-height:44px;font-size:12px}
.splash-mute:hover {border-color:#f4f4f6;color:#fff}
.splash-enter:focus-visible,.splash-mute:focus-visible,.splash-skip:focus-visible {outline:2px solid var(--lime);outline-offset:3px}
.splash-gate-note {margin:0;font-size:10px;color:#77777f;letter-spacing:.08em}
.splash.is-playing .splash-gate {opacity:0;transform:scale(.96);pointer-events:none}

/* Sequence layers */
.splash-stage {position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.splash-portrait {position:absolute;inset:0;background:#d4d4d8 url("amaterasu-chrome-v1-720.webp") 50% 22%/cover no-repeat;clip-path:circle(0 at 50% 40%);filter:grayscale(1) brightness(1.6) contrast(.9);transform:scale(1.15)}
.splash-portrait::after {content:"";position:absolute;inset:0;background-image:radial-gradient(circle,#16161a33 0 .9px,transparent 1.3px);background-size:4px 4px}
.splash-halo {position:absolute;left:50%;top:40%;width:min(64vmin,460px);aspect-ratio:1;translate:-50% -50%;color:#fff;opacity:0;z-index:3}
.splash-halo circle {fill:none;stroke:currentColor;stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1}
.splash-halo path {stroke:currentColor;stroke-width:1.4;opacity:0;transform-box:view-box;transform-origin:50% 50%}
.splash-flash {position:absolute;inset:0;background:#fff;opacity:0;z-index:4}
.splash-type {position:absolute;left:clamp(16px,6vw,72px);bottom:clamp(64px,14vh,140px);z-index:5;display:grid;gap:2px;text-align:left}
.splash-type span {display:block;overflow:hidden}
.splash-type b {display:block;font:900 italic clamp(44px,11vw,120px)/.98 Arial,sans-serif;letter-spacing:-.07em;color:#fff;text-shadow:4px 4px 0 #151515;transform:translateY(110%)}
.splash-type span:nth-child(2) b {color:var(--pink)}
.splash-name {position:absolute;right:clamp(16px,6vw,72px);top:clamp(20px,6vh,56px);z-index:5;margin:0;text-align:right;font-size:11px;font-weight:700;letter-spacing:.3em;color:#151515;opacity:0}
.splash-name strong {display:block;margin-top:6px;font-size:clamp(22px,4vw,34px);letter-spacing:.08em;color:#151515}
.splash-sticker {position:absolute;right:clamp(16px,8vw,110px);bottom:clamp(150px,30vh,300px);z-index:5;padding:12px 18px;background:var(--lime);color:#151515;border:1px solid #151515;box-shadow:4px 4px 0 #151515;font:900 clamp(15px,2.4vw,22px)/1.3 inherit;font-family:inherit;transform:rotate(9deg) scale(0);letter-spacing:-.04em}
.splash-ticker {position:absolute;left:-10%;right:-10%;top:44%;z-index:5;overflow:hidden;background:var(--pink);border-block:1px solid #151515;rotate:-6deg;transform:translateX(-110%)}
.splash-ticker-track {display:flex;width:max-content}
.splash-ticker-track span {flex:none;padding:10px 24px 10px 0;white-space:nowrap;font:900 italic clamp(24px,3.6vw,44px)/1 Arial,sans-serif;letter-spacing:-.05em;color:#151515}
.splash-copy {position:absolute;left:clamp(16px,6vw,72px);top:clamp(24px,8vh,80px);z-index:6;display:grid;justify-items:start;gap:6px;margin:0}
.splash-copy span {display:block;padding:6px 12px 8px;background:#151515;color:#fff;font-size:clamp(18px,2.8vw,32px);font-weight:900;letter-spacing:-.04em;line-height:1.2;clip-path:inset(0 100% 0 0)}
.splash-copy span:nth-child(2) {background:#fff;color:#151515}
.splash-logo {position:absolute;left:50%;top:50%;z-index:6;display:grid;justify-items:center;gap:6px;width:min(78vw,400px);padding:28px 20px 24px;background:#151515;color:#fff;border:1px solid #151515;box-shadow:8px 8px 0 var(--pink);translate:-50% -50%;transform:scale(.4) rotate(-8deg);opacity:0}
.splash-logo svg {width:72px;height:72px;color:var(--lime)}
.splash-logo svg circle,.splash-logo svg path {fill:none;stroke:currentColor;stroke-width:3}
.splash-logo strong {font-size:clamp(34px,6vw,52px);font-weight:900;letter-spacing:.04em;line-height:1.1}
.splash-logo small {font:700 12px/1 Arial,sans-serif;letter-spacing:.45em;color:#bdbdc6}
.splash-logo em {margin-top:10px;padding:6px 12px;background:var(--lime);color:#151515;font:900 italic clamp(18px,3vw,24px)/1 Arial,sans-serif;letter-spacing:-.04em;clip-path:inset(0 100% 0 0)}
.splash-wipe {position:absolute;inset:-10% -60%;z-index:7;background:linear-gradient(100deg,transparent 0 18%,var(--pink) 18% 82%,transparent 82%);transform:translateX(-120%)}
.splash-skip {position:absolute;right:16px;bottom:16px;z-index:9;appearance:none;background:transparent;border:1px solid #ffffff66;color:#fff;border-radius:0;padding:8px 14px;font:700 11px/1 inherit;font-family:inherit;letter-spacing:.14em;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s}
.splash.is-playing .splash-skip {opacity:.8;pointer-events:auto}

/* Timeline (driven by .is-playing; ≈10.9s at 120 BPM, cued to the jingle in splash.js).
   0–2 halo intro / 2.0 reveal / 2.5–3.0 type / 4.0 full bleed / 4.5–5.0 name & sticker / 5–6 build / 6.0 drop: ticker / 7.0–7.5 copy / 8.0 logo / 9.0 tagline / 10.0 wipe */
.splash.is-playing .splash-halo {animation:splash-halo-move 4.6s cubic-bezier(.6,0,.3,1) forwards}
.splash.is-playing .splash-halo circle {animation:splash-draw 1.5s cubic-bezier(.5,0,.2,1) .05s forwards}
.splash.is-playing .splash-halo path {animation:splash-ray .45s cubic-bezier(.2,.9,.3,1.4) forwards;animation-delay:calc(1.45s + var(--i) * 14ms)}
.splash.is-playing .splash-flash {animation:splash-flash .5s ease-out 2s,splash-flash .45s ease-out 8s}
.splash.is-playing .splash-portrait {animation:splash-reveal 2.6s cubic-bezier(.6,0,.25,1) 2s forwards,splash-tone .9s ease-out 4s forwards,splash-zoom 8.5s cubic-bezier(.3,0,.2,1) 2s forwards}
.splash.is-playing .splash-type span:nth-child(1) b {animation:splash-type-in .42s cubic-bezier(.2,.9,.2,1) 2.5s forwards}
.splash.is-playing .splash-type span:nth-child(2) b {animation:splash-type-in .42s cubic-bezier(.2,.9,.2,1) 3s forwards}
.splash.is-playing .splash-name {animation:splash-fade-in .3s ease-out 4.5s forwards}
.splash.is-playing .splash-sticker {animation:splash-pop .4s cubic-bezier(.2,1.6,.4,1) 5s forwards}
.splash.is-playing .splash-ticker {animation:splash-ticker-in .45s cubic-bezier(.2,.9,.2,1) 6s forwards}
.splash.is-playing .splash-ticker-track {animation:splash-marquee 5s linear 6s infinite}
.splash.is-playing .splash-copy span:nth-child(1) {animation:splash-label .35s cubic-bezier(.6,0,.2,1) 7s forwards}
.splash.is-playing .splash-copy span:nth-child(2) {animation:splash-label .35s cubic-bezier(.6,0,.2,1) 7.5s forwards}
.splash.is-playing .splash-logo {animation:splash-logo-in .5s cubic-bezier(.2,1.4,.4,1) 8s forwards}
.splash.is-playing .splash-logo svg {animation:splash-spin 6s linear 8s infinite}
.splash.is-playing .splash-logo em {animation:splash-label .35s cubic-bezier(.6,0,.2,1) 9s forwards}
.splash.is-playing .splash-wipe {animation:splash-wipe .85s cubic-bezier(.75,0,.25,1) 10s forwards}
.splash.is-leaving {background:transparent}
.splash.is-leaving :is(.splash-stage>*:not(.splash-wipe),.splash-skip) {opacity:0!important;transition:none}
.splash.is-leaving::after {opacity:0}

@keyframes splash-spin {to {rotate:360deg}}
@keyframes splash-fade-in {to {opacity:1}}
@keyframes splash-draw {to {stroke-dashoffset:0}}
@keyframes splash-ray {from {opacity:0;scale:.6}to {opacity:1;scale:1}}
/* The ring holds through the circle reveal, then flies outward and clears the face as the portrait goes full bleed. */
@keyframes splash-halo-move {0% {opacity:1;rotate:0deg;scale:1}80% {opacity:1;rotate:18deg;scale:1.08}100% {opacity:0;rotate:50deg;scale:2.6}}
@keyframes splash-flash {0% {opacity:.85}100% {opacity:0}}
@keyframes splash-reveal {0% {clip-path:circle(0 at 50% 40%)}15% {clip-path:circle(24vmax at 50% 40%)}77% {clip-path:circle(27vmax at 50% 40%)}100% {clip-path:circle(150vmax at 50% 40%)}}
@keyframes splash-tone {to {filter:none}}
@keyframes splash-zoom {to {transform:scale(1)}}
@keyframes splash-type-in {to {transform:translateY(0)}}
@keyframes splash-pop {to {transform:rotate(9deg) scale(1)}}
@keyframes splash-ticker-in {to {transform:translateX(0)}}
@keyframes splash-marquee {to {translate:-50% 0}}
@keyframes splash-label {to {clip-path:inset(0 0 0 0)}}
@keyframes splash-logo-in {to {transform:scale(1) rotate(-3deg);opacity:1}}
@keyframes splash-wipe {0% {transform:translateX(-120%)}100% {transform:translateX(120%)}}

@media (max-width:640px) {
  .splash-portrait {background-position:50% 18%}
  .splash-halo {top:34%}
  .splash-copy {top:clamp(64px,10vh,96px)}
  @keyframes splash-reveal {0% {clip-path:circle(0 at 50% 34%)}15% {clip-path:circle(30vmax at 50% 34%)}77% {clip-path:circle(33vmax at 50% 34%)}100% {clip-path:circle(150vmax at 50% 34%)}}
}
@media (prefers-reduced-motion:reduce) {
  .splash-gate-halo {animation:none}
  .splash.is-playing :is(.splash-halo,.splash-halo circle,.splash-halo path,.splash-flash,.splash-portrait,.splash-type b,.splash-name,.splash-sticker,.splash-ticker,.splash-ticker-track,.splash-copy span,.splash-logo,.splash-logo svg,.splash-logo em,.splash-wipe) {animation:none}
  .splash.is-playing .splash-portrait {clip-path:none;filter:none;transform:none}
  .splash.is-playing :is(.splash-type b,.splash-ticker) {transform:none}
  .splash.is-playing :is(.splash-copy span,.splash-logo em) {clip-path:none}
  .splash.is-playing .splash-logo {display:none}
  .splash.is-playing :is(.splash-name,.splash-halo) {opacity:1}
  .splash.is-playing .splash-halo {opacity:0}
  .splash.is-playing .splash-sticker {transform:rotate(9deg)}
  .splash.is-leaving {transition:opacity .3s;opacity:0}
}
.splash-gate-skip {appearance:none;background:none;border:0;margin-top:-6px;min-height:44px;padding:8px 12px;color:#d6d6dc;font:700 13px/1.4 inherit;font-family:inherit;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.splash-gate-skip:hover {color:#fff}.splash-gate-skip:focus-visible {outline:2px solid var(--lime);outline-offset:3px}