/* Home, computers (since 5 Nov 2026 the three collections share one entrance; before, each arrived its own way, 4 Nov 2026), once, as it comes into view (tomita-arrive-*.js adds .tm-in).
   Art Wall Legend II: the close-up develops out of the dark (its words and room already fade in: tomita-mobile-transitions-*.js).
   Washi: the room rises into view from its foot, the three squares follow one by one, then the words.
   Hana V: the words come first from the left, then the room opens from the middle like a sliding door.
   Timeless Designs: the title and button, then the close-ups slide into their frames from the right, one after another.
   Every entrance is an animation with a backwards fill, so the hover zooms work as before once it has played. */
@keyframes tm-ar-rise{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes tm-ar-drop{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes tm-ar-open{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}
@keyframes tm-ar-settle{from{scale:1.14}to{scale:1}}
@keyframes tm-ar-up{from{opacity:0;translate:0 18px}}
@keyframes tm-ar-left{from{opacity:0;translate:-32px 0}}
@keyframes tm-ar-in-right{from{opacity:0;translate:90px 0}}
@keyframes tm-ar-slide-in{from{translate:18% 0}}
@keyframes tm-ar-fade{from{opacity:0}}
@keyframes tm-ar-photo{from{opacity:0;scale:1.06}}
@keyframes tm-ar-develop{from{opacity:0;filter:brightness(.25) blur(10px)}}
@media (min-width:768px){
  /* The three collections arrive the same way (user, 5 Nov 2026: "consistent animation, right now it feels like a Shopify store"):
     the photographs fade in while settling into their frames, the main one first and the smaller ones just after; then the words
     rise a little, one after another. Same curve, same timing, in Art Wall Legend II, Washi and Hana V. */
  html.tm-arrive :is(#tm-desk-editorial,#tm-washi-d,#tm-hana-d):not(.tm-in) :is(.tm-d-room-frame,.tm-d-material-open,.tm-cd-main,.tm-cd-subs a) img,
  html.tm-arrive :is(#tm-desk-editorial,#tm-washi-d,#tm-hana-d):not(.tm-in) :is(.tm-d-intro>*,.tm-d-material figcaption,.tm-d-material .tm-d-btn,.tm-cd-text>*),
  html.tm-arrive #tm-matbook:not(.tm-in) .tm-mb-head>*,
  html.tm-arrive #tm-matbook:not(.tm-in) .tm-mb-card,
  html.tm-arrive #tm-matbook:not(.tm-in) .tm-mb-progress{opacity:0}
  html.tm-arrive :is(#tm-desk-editorial,#tm-washi-d,#tm-hana-d) :is(.tm-d-room-frame,.tm-d-material-open,.tm-cd-main,.tm-cd-subs a){overflow:hidden}
  html.tm-arrive :is(#tm-desk-editorial,#tm-washi-d,#tm-hana-d).tm-in :is(.tm-d-room-frame,.tm-cd-main) img{animation:tm-ar-photo 1.8s cubic-bezier(.25,0,.2,1) backwards}
  html.tm-arrive :is(#tm-desk-editorial,#tm-washi-d,#tm-hana-d).tm-in :is(.tm-d-material-open,.tm-cd-subs a) img{animation:tm-ar-photo 1.8s cubic-bezier(.25,0,.2,1) calc(.25s + var(--i,0)*.12s) backwards}
  html.tm-arrive :is(#tm-desk-editorial,#tm-washi-d,#tm-hana-d).tm-in :is(.tm-d-intro>*,.tm-d-material figcaption,.tm-d-material .tm-d-btn,.tm-cd-text>*){animation:tm-ar-up 1.2s cubic-bezier(.25,0,.2,1) calc(.45s + var(--w,0)*.12s) backwards}

  /* Timeless Designs */
  html.tm-arrive #tm-matbook.tm-in .tm-mb-head>*{animation:tm-ar-up .9s cubic-bezier(.25,0,.2,1) backwards}
  html.tm-arrive #tm-matbook.tm-in .tm-mb-head>:nth-child(2){animation-delay:.15s}
  /* the cards themselves stay put (the row snaps to them, and a moving card made it re-snap: the row jumped 90px when the entrance
     ended); each fades in while its photograph slides into its frame from the right */
  html.tm-arrive #tm-matbook.tm-in .tm-mb-card{animation:tm-ar-fade 1s ease calc(.2s + var(--i,0)*.12s) backwards}
  html.tm-arrive #tm-matbook.tm-in .tm-mb-ph{animation:tm-ar-slide-in 1.4s cubic-bezier(.2,.7,.2,1) calc(.2s + var(--i,0)*.12s) backwards}
  html.tm-arrive #tm-matbook.tm-in .tm-mb-progress{animation:tm-ar-fade 1s ease 1s backwards}
}