/* ============================================================================
   SUMIKIRI — MENU FX: THE LIVING PAPER (update 2.1)
   Entrance choreography, hover ink, layered light — every screen in the game
   gets the same treatment: content arrives like brush strokes (staggered,
   settling), headers draw a vermilion line, cards breathe, locks shimmer,
   buttons sweep. Loaded after the base stylesheet; selectors are additive.

   #mfx (menufx.js) is the particle canvas above all of this.
   ============================================================================ */

/* ---- the canvas the weather lives on ---------------------------------------- */
#mfx{position:fixed;inset:0;pointer-events:none;z-index:99}

/* ---- screens: layered light on the translucent paper ------------------------- */
.screen{
  background-image:
    radial-gradient(1100px 480px at 50% -12%,rgba(179,55,42,.055),transparent 62%),
    radial-gradient(860px 420px at 50% 114%,rgba(120,96,60,.075),transparent 62%),
    linear-gradient(180deg,rgba(251,247,236,.42),rgba(226,216,193,.4));
  background-repeat:no-repeat;background-attachment:local;}
#s-bless{
  background-image:
    radial-gradient(1100px 480px at 50% -12%,rgba(214,178,90,.07),transparent 62%),
    radial-gradient(900px 420px at 50% 114%,rgba(60,16,10,.16),transparent 60%)}

/* every page arrives as one settling stroke */
.screen.on .page{animation:pageIn .42s cubic-bezier(.16,.84,.3,1) both}
@keyframes pageIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}

/* the header: rises, then a vermilion brush-line draws itself under it */
.page-head{position:relative}
.screen.on .page-head{animation:headIn .45s .04s cubic-bezier(.2,.8,.3,1) both}
@keyframes headIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.screen.on .page-head::after{
  content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;
  background:linear-gradient(90deg,var(--red) 65%,rgba(179,55,42,0));
  transform-origin:left;animation:lineDraw .6s .1s cubic-bezier(.25,.85,.3,1) both}
@keyframes lineDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---- rows stagger in like a list being written ------------------------------- */
.screen.on .row,.screen.on .setrow,.screen.on .hrow,.screen.on .brow,
.screen.on .rec-r,.screen.on .ashline,.screen.on .recs-tabs,.screen.on .rec-note,
.screen.on .helpcol,.screen.on .besti,.screen.on .btnrow{
  animation:rowIn .36s cubic-bezier(.2,.8,.3,1) both}
@keyframes rowIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.screen.on .row:nth-child(1),.screen.on .setrow:nth-child(1){animation-delay:.09s}
.screen.on .row:nth-child(2),.screen.on .setrow:nth-child(2){animation-delay:.14s}
.screen.on .row:nth-child(3),.screen.on .setrow:nth-child(3){animation-delay:.19s}
.screen.on .row:nth-child(4),.screen.on .setrow:nth-child(4){animation-delay:.24s}
.screen.on .row:nth-child(5),.screen.on .setrow:nth-child(5){animation-delay:.29s}
.screen.on .row:nth-child(6),.screen.on .setrow:nth-child(6){animation-delay:.34s}
.screen.on .row:nth-child(7),.screen.on .setrow:nth-child(7){animation-delay:.39s}
.screen.on .row:nth-child(8),.screen.on .setrow:nth-child(8){animation-delay:.44s}
.screen.on .row:nth-child(n+9),.screen.on .setrow:nth-child(n+9){animation-delay:.48s}

/* ---- buttons: brush underlines, sheen sweeps, honest presses ----------------- */
.mbtn{position:relative}
.mbtn::after{
  content:"";position:absolute;left:-4px;bottom:-1px;height:2px;width:calc(100% + 8px);
  background:linear-gradient(90deg,var(--red),rgba(179,55,42,0));
  transform:scaleX(0);transform-origin:left;
  transition:transform .22s cubic-bezier(.2,.8,.3,1)}
.mbtn:hover::after{transform:scaleX(1)}
.mbtn:active{transform:translateX(8px) scale(.97)}
.screen.on nav.menu .mbtn{animation:btnIn .5s cubic-bezier(.2,.9,.3,1) both}
@keyframes btnIn{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
.screen.on nav.menu .mbtn:nth-child(1){animation-delay:.42s}
.screen.on nav.menu .mbtn:nth-child(2){animation-delay:.5s}
.screen.on nav.menu .mbtn:nth-child(3){animation-delay:.58s}
.screen.on nav.menu .mbtn:nth-child(4){animation-delay:.66s}
.screen.on nav.menu .mbtn:nth-child(5){animation-delay:.74s}
.screen.on nav.menu .mbtn:nth-child(6){animation-delay:.82s}
.screen.on nav.menu .mbtn:nth-child(7){animation-delay:.9s}
.screen.on nav.menu .mbtn:nth-child(n+8){animation-delay:.96s}

.buy{position:relative;overflow:hidden}
.buy::after{
  content:"";position:absolute;top:0;left:0;width:52%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(251,247,236,.55),transparent);
  transform:translateX(-170%) skewX(-18deg);
  transition:transform .5s ease}
.buy:hover:not(:disabled)::after{transform:translateX(320%) skewX(-18deg)}
.buy:active:not(:disabled){transform:translate(0,1px);box-shadow:1px 1px 0 rgba(29,26,22,.28)}

.tgl{transition:background .15s ease,border-color .15s ease,transform .1s ease}
.tgl:active{transform:scale(.96)}
.seg button{transition:background .15s ease}
.seg button:active{background:rgba(29,26,22,.12)}
.recs-tabs button{transition:background .15s ease,color .15s ease,transform .1s ease}
.recs-tabs button:active{transform:scale(.96)}

/* ---- the roads: sections arrive, nodes cascade, locks shimmer ---------------- */
.screen.on .story-head{animation:headIn .4s both}
#roads-body .story-head:nth-child(1){animation-delay:.05s}
#roads-body .story-head:nth-child(2){animation-delay:.26s}
#roads-body .story-head:nth-child(3){animation-delay:.46s}
.screen.on .act-strip{animation:rowIn .4s both}
#roads-body .act-strip:nth-child(2){animation-delay:.12s}
#roads-body .act-strip:nth-child(4){animation-delay:.33s}
#roads-body .act-strip:nth-child(6){animation-delay:.53s}

.screen.on .act-node{animation:nodeIn .38s cubic-bezier(.2,.9,.3,1) both}
@keyframes nodeIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.act-strip .act-node:nth-child(1){animation-delay:.16s}
.act-strip .act-node:nth-child(2){animation-delay:.21s}
.act-strip .act-node:nth-child(3){animation-delay:.26s}
.act-strip .act-node:nth-child(4){animation-delay:.31s}
.act-strip .act-node:nth-child(5){animation-delay:.36s}
.act-strip .act-node:nth-child(6){animation-delay:.41s}
.act-strip .act-node:nth-child(7){animation-delay:.46s}
.act-strip .act-node:nth-child(n+8){animation-delay:.5s}

.act-node .a-kan{transition:transform .16s cubic-bezier(.2,.9,.3,1),color .16s ease}
.act-node:hover:not(.locked) .a-kan{transform:translateY(-3px) scale(1.07);color:var(--red)}
.act-node:active:not(.locked){transform:translate(0,1px);box-shadow:2px 2px 0 rgba(179,55,42,.32)}

/* the node you're standing on breathes a vermilion ring */
.act-node.cur{position:relative}
.act-node.cur::after{
  content:"";position:absolute;inset:-6px;border:2px solid var(--red);
  opacity:0;animation:curPulse 2.6s ease-in-out .8s infinite;pointer-events:none}
@keyframes curPulse{0%,100%{opacity:0;transform:scale(.98)}45%{opacity:.55;transform:scale(1)}}

/* a sealed road does not sit still: the lock sways and sulks */
.act-node .lock span{animation:lockSway 3.4s ease-in-out infinite}
@keyframes lockSway{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(-11deg) translateY(-1px)}}

/* the story-head kanji carries a red underline for the second road */
.story-head.s2::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:38%;
  background:var(--red);transform-origin:left;animation:lineDraw .7s .3s cubic-bezier(.25,.85,.3,1) both}
.story-head{position:relative}

/* ---- the title: ink reveal, stamped seal, settling menu ---------------------- */
.screen.on .t-kanji span{animation:kanReveal .62s cubic-bezier(.2,1.1,.3,1) both}
.screen.on .t-kanji span:nth-child(2){animation-delay:.1s}
@keyframes kanReveal{from{opacity:0;transform:scale(1.55);filter:blur(9px)}to{opacity:1;transform:none;filter:none}}
.screen.on .t-kanji span:last-child{animation:sealStamp .5s .42s cubic-bezier(.25,1.5,.4,1) both}
@keyframes sealStamp{from{opacity:0;transform:rotate(16deg) scale(2.5)}to{opacity:1;transform:rotate(-1.2deg) translateX(-.04em)}}
.t-kanji{animation:inkBreath 7s ease-in-out 1.4s infinite}
@keyframes inkBreath{0%,100%{filter:drop-shadow(0 0 0 rgba(29,26,22,0))}50%{filter:drop-shadow(0 3px 16px rgba(29,26,22,.22))}}

.screen.on .t-side h1{animation:h1In .6s .16s cubic-bezier(.2,.9,.3,1) both}
@keyframes h1In{from{opacity:0;letter-spacing:.55em}to{opacity:1;letter-spacing:.32em}}
.screen.on .t-side .tag{animation:tagIn .55s .3s both}
@keyframes tagIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.screen.on .footline,.screen.on .corner-note{animation:fadeUp .6s .85s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- the chronicle: paper grain, a red ghost, entries unrolling ------------- */
.chrono-paper{
  background-image:
    radial-gradient(420px 160px at 82% 6%,rgba(179,55,42,.05),transparent 70%),
    radial-gradient(360px 150px at 12% 88%,rgba(120,96,60,.08),transparent 70%),
    radial-gradient(240px 120px at 40% 50%,rgba(120,96,60,.05),transparent 70%)}
.chrono-paper::before{
  content:"朱";position:absolute;right:14px;top:2px;font-size:128px;font-weight:800;
  color:rgba(179,55,42,.055);transform:rotate(9deg);pointer-events:none;line-height:1}
.screen.on .ch-ver{animation:rowIn .4s both}
.chrono-body .ch-ver:nth-child(1){animation-delay:.12s}
.chrono-body .ch-ver:nth-child(2){animation-delay:.2s}
.chrono-body .ch-ver:nth-child(3){animation-delay:.28s}
.chrono-body .ch-ver:nth-child(4){animation-delay:.36s}
.chrono-body .ch-ver:nth-child(5){animation-delay:.44s}
.chrono-body .ch-ver:nth-child(n+6){animation-delay:.5s}
.ch-ver:first-child .ch-kan{animation:sealPulse 3.2s ease-in-out 1s infinite}
@keyframes sealPulse{0%,100%{transform:rotate(-4deg) scale(1)}50%{transform:rotate(-4deg) scale(1.07)}}

/* ---- blessings: scrolls get a gold sheen when the hand hovers --------------- */
.sc-paper{position:relative;overflow:hidden}
.sc-paper::after{
  content:"";position:absolute;top:0;left:0;width:46%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(234,196,120,.3),transparent);
  transform:translateX(-170%) skewX(-16deg);
  transition:transform .6s ease}
.scroll:hover .sc-paper::after{transform:translateX(340%) skewX(-16deg)}
.b-kan{transition:transform .18s cubic-bezier(.2,.9,.3,1)}
.scroll:hover .b-kan{transform:translateY(-4px) scale(1.08)}

/* ---- records: your own row glows, the tabs answer ---------------------------- */
.rec-r.me{animation:meRow 3.4s ease-in-out infinite}
@keyframes meRow{0%,100%{box-shadow:0 0 0 0 rgba(214,178,90,0)}50%{box-shadow:0 0 0 3px rgba(214,178,90,.35)}}
.rec-h{position:relative}
.screen.on .rec-h{animation:rowIn .36s .1s both}

/* ---- settings: sliders and rows already stagger via .setrow above ----------- */

/* ---- deep breath: the big kanji screens (death/clear/pause/victory) --------- */
.screen.on .big-kan{animation:stamp .38s cubic-bezier(.25,1.6,.4,1) both}
.screen.on .death-line{animation:tagIn .5s .25s both}
.screen.on .stat-line{animation:tagIn .5s .4s both}
.screen .btnrow .mbtn{animation:btnIn .45s both}
.screen .btnrow .mbtn:nth-child(1){animation-delay:.5s}
.screen .btnrow .mbtn:nth-child(2){animation-delay:.6s}
.screen .btnrow .mbtn:nth-child(3){animation-delay:.7s}
.screen .btnrow .mbtn:nth-child(n+4){animation-delay:.78s}

/* ---- honest machines: reduced motion kills the theater ---------------------- */
@media (prefers-reduced-motion: reduce){
  .screen.on .page,.screen.on .page-head,.screen.on .page-head::after,
  .screen.on .row,.screen.on .setrow,.screen.on .hrow,.screen.on .brow,
  .screen.on .rec-r,.screen.on .ashline,.screen.on .recs-tabs,.screen.on .rec-note,
  .screen.on .helpcol,.screen.on .besti,.screen.on .btnrow,
  .screen.on nav.menu .mbtn,.screen.on .story-head,.screen.on .act-strip,
  .screen.on .act-node,.screen.on .t-kanji,.screen.on .t-kanji span,.t-kanji,
  .screen.on .t-side h1,.screen.on .t-side .tag,.screen.on .footline,.screen.on .corner-note,
  .screen.on .ch-ver,.screen.on .big-kan,.screen.on .death-line,.screen.on .stat-line,
  .screen .btnrow .mbtn,.act-node.cur::after,.act-node .lock span,
  .ch-ver:first-child .ch-kan,.rec-r.me,.story-head.s2::after{
    animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important}
  #mfx{display:none}}

/* ---- small screens: the same theater, quicker -------------------------------- */
@media (max-width:520px){
  .screen.on .row,.screen.on .setrow{animation-duration:.3s}
  .screen.on nav.menu .mbtn{animation-duration:.4s}
  .screen.on nav.menu .mbtn:nth-child(n+4){animation-delay:.62s}
  .screen.on nav.menu .mbtn:nth-child(n+6){animation-delay:.72s}}