/* A small story for each business. All movement stays inside the existing composition. */
.play-bloom{position:absolute;right:2.5%;top:48%;width:88px;height:88px;color:#8cba59;opacity:.65;rotate:-12deg;pointer-events:none}
.play-bloom>svg{width:100%;height:100%;overflow:visible}
.play-bloom use{transform-box:fill-box;transform-origin:center;animation:bloom-turn 10s ease-in-out infinite;animation-play-state:paused}
.play-bloom use:nth-child(2){animation-delay:-3.3s;color:#c4d6b1}
.play-bloom use:nth-child(3){animation-delay:-6.6s;color:#547243}
.playfield--about .play-bloom,.playfield--reuse .play-bloom,.playfield--shops .play-bloom,.playfield--contact .play-bloom{right:auto;left:1%;top:61%;rotate:15deg}
.playfield--hero .play-bloom{top:63%;right:2%}
.playfield--company .play-bloom{top:18%;right:6%}
.playfield--footer .play-bloom{top:40%;right:20%;opacity:.35}
.story-visible .play-bloom use{animation-play-state:running}
.story-arriving .play-bloom>svg{animation:bloom-open 1.4s cubic-bezier(.18,.72,.22,1.2) both}
.story-arriving h2{animation:heading-hello 1s var(--ease) both}
.story-arriving .approach-item,.story-arriving .company-table>div{animation:story-step .8s var(--ease) var(--story-delay,0ms) both}
.story-arriving .big-yu{animation:yu-hello 1.3s var(--ease) both;transform-origin:55% 80%}
.story-arriving .value-plus{animation:value-turn 1.1s var(--ease) var(--story-delay,0ms) both}
.story-greeting .illustration{animation:art-hello 1.1s var(--ease) both}
.story-greeting .big-yu{animation:yu-hello 1.1s var(--ease) both;transform-origin:55% 80%}
.story-greeting .value-plus{animation:value-turn 1s var(--ease) both}
.story-greeting .shop-art{filter:drop-shadow(0 5px 7px #80b94518)}
.shop details[open] .shop-details{animation:details-hello .45s var(--ease) both}
.button:active,.nav-contact:active{scale:.975;transition:scale .12s}
.button:focus-visible .plus-disc,.nav-contact:focus-visible .plus-disc{rotate:90deg}
.plus-spark--yu{font:600 var(--spark-size)/1.1 "Noto Sans JP",sans-serif;color:#507638!important;width:auto;height:auto}

/* Hero: a little + lights up inside the phone. */
.screen-play{stroke:none}
.screen-play .screen-tile{fill:#edf5e3}
.screen-play .screen-tile:nth-child(2){fill:#f5f8ef}
.screen-play .screen-mark{stroke:#82b944;stroke-width:7;stroke-linecap:round;transform-origin:0px 0px}
.story-visible .screen-play .screen-mark{animation:screen-plus 7s var(--ease) infinite}
.story-visible .screen-play .screen-dot{animation:screen-dot 7s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.screen-dot{fill:#98c56c}

/* Repair: the crack gives way to a green screen and a check. */
.repair-lit{fill:#eff7e6;stroke:none}
.repair-check{stroke:#6ba139;stroke-width:6;fill:none;stroke-dasharray:1;stroke-dashoffset:0}
.scene.story-visible .repair-crack{animation:repair-story-crack 9s ease-in-out infinite;stroke-dasharray:none;stroke-dashoffset:0}
.scene:not(.story-visible) .repair-crack{animation:none;opacity:0}
.story-visible .repair-lit{animation:repair-story-light 9s ease-in-out infinite}
.story-visible .repair-check{animation:repair-story-check 9s var(--ease) infinite}
.story-visible .wrench-motion{animation:repair-tool 9s ease-in-out infinite}
.repair-status{pointer-events:none}

/* Reuse: leaves open while the familiar arrows carry the phone forward. */
.reuse-seed-bed{fill:#f2f7e9;stroke:none}
.reuse-stem{stroke:#698c4c;stroke-width:3.5;fill:none}
.reuse-leaf{fill:#9ac86a;stroke:#698c4c;stroke-width:2.5;transform-box:fill-box;transform-origin:100% 100%}
.reuse-leaf--right{fill:#d8e8c6;transform-origin:0% 100%}
.story-visible .reuse-leaf{animation:leaf-grow 9s var(--ease) infinite}
.story-visible .reuse-leaf--right{animation-delay:.25s}
.story-visible .reuse-stem{animation:stem-grow 9s var(--ease) infinite;transform-origin:0px 53px}

/* Advertising: the green picture develops on the paper, followed by a small idea spark. */
.story-visible .paper-picture{animation:picture-develop 9s var(--ease) infinite}
.ad-spark{stroke:#86b74d;stroke-width:4;transform-box:fill-box;transform-origin:center}
.ad-spark--small{stroke:#b9d39b;stroke-width:3}
.story-visible .ad-spark{animation:idea-spark 9s var(--ease) infinite}
.story-visible .ad-spark--small{animation-delay:.3s}
.city-window{stroke:none;fill:#d6e7be}
.story-visible .city-window{animation:window-welcome 8s ease-in-out infinite;animation-delay:var(--window-delay,0s)}
.shop:nth-child(2) .city-window{animation-delay:calc(var(--window-delay,0s) + 1s)}
.shop:nth-child(3) .city-window{animation-delay:calc(var(--window-delay,0s) + 2s)}
.story-greeting .city-window{fill:#91bf58}

/* Finale surrounds the untouched official logo; no stretching or drawing over it. */
.splash-finale{position:absolute;inset:50% auto auto 50%;width:1px;height:1px;pointer-events:none;z-index:2;color:#8abf53}
.splash-finale>svg{position:absolute;width:24px;height:24px;opacity:0}
.show-intro .splash-finale>svg{animation:finale-pop 1.2s var(--ease) calc(1.8s + var(--finale-delay)) both}
.splash-track{display:none}

@keyframes bloom-turn{0%,14%,100%{transform:rotate(0) scale(1)}38%,54%{transform:rotate(90deg) scale(.72)}75%{transform:rotate(180deg) scale(1.08)}}
@keyframes bloom-open{0%{opacity:0;scale:.2;rotate:-75deg}65%{opacity:1;scale:1.08;rotate:8deg}100%{opacity:1;scale:1;rotate:0deg}}
@keyframes heading-hello{from{translate:0 9px;opacity:.5}to{translate:0 0;opacity:1}}
@keyframes story-step{from{translate:0 12px;opacity:0}to{translate:0 0;opacity:1}}
@keyframes yu-hello{0%{rotate:-7deg;translate:0 5px}38%{rotate:5deg;translate:0 -9px}66%{rotate:-2deg;translate:0 0}100%{rotate:0deg;translate:0 0}}
@keyframes value-turn{0%{rotate:-90deg;scale:.6}65%{rotate:12deg;scale:1.12}100%{rotate:0deg;scale:1}}
@keyframes art-hello{0%,100%{translate:0 0;rotate:0deg}35%{translate:0 -7px;rotate:-1.5deg}68%{translate:0 2px;rotate:.6deg}}
@keyframes details-hello{from{opacity:0;translate:0 -5px}to{opacity:1;translate:0 0}}
@keyframes screen-plus{0%,20%,100%{rotate:0deg;scale:1}42%{rotate:90deg;scale:1.13}60%,83%{rotate:90deg;scale:1}}
@keyframes screen-dot{0%,30%,100%{scale:1;opacity:.5}48%,75%{scale:1.35;opacity:1}}
@keyframes repair-story-crack{0%,18%,100%{opacity:.8}34%,92%{opacity:0}}
@keyframes repair-story-light{0%,18%,100%{opacity:0}35%,90%{opacity:1}}
@keyframes repair-story-check{0%,27%,100%{opacity:0;stroke-dashoffset:1}42%,88%{opacity:1;stroke-dashoffset:0}95%{opacity:0;stroke-dashoffset:0}}
@keyframes repair-tool{0%,100%{rotate:0deg}12%{rotate:-9deg}24%{rotate:4deg}36%,90%{rotate:0deg}}
@keyframes leaf-grow{0%,10%,100%{scale:.45;rotate:-18deg;opacity:.35}38%,80%{scale:1;rotate:0deg;opacity:1}90%{scale:.95;rotate:4deg;opacity:.8}}
@keyframes stem-grow{0%,10%,100%{scale:1 .7}38%,80%{scale:1 1}}
@keyframes picture-develop{0%,14%,100%{clip-path:inset(100% 0 0);opacity:.2}42%,91%{clip-path:inset(0);opacity:1}}
@keyframes idea-spark{0%,38%,100%{opacity:0;scale:.3;rotate:-25deg}49%{opacity:1;scale:1.15;rotate:10deg}64%,82%{opacity:1;scale:1;rotate:0deg}94%{opacity:0;scale:.8;rotate:20deg}}
@keyframes window-welcome{0%,15%,100%{fill:#eef5e6}38%,72%{fill:#a4cc78}}
@keyframes finale-pop{0%{opacity:0;translate:-50% -50%;scale:.2;rotate:-35deg}35%{opacity:.85;translate:var(--finale-x) var(--finale-y);scale:1;rotate:10deg}100%{opacity:0;translate:var(--finale-x) calc(var(--finale-y) - 24px);scale:.65;rotate:70deg}}

@media(max-width:900px){
  .play-bloom{width:52px;height:52px;opacity:.45;right:-8px;top:55%}
  .playfield--about .play-bloom,.playfield--reuse .play-bloom,.playfield--shops .play-bloom,.playfield--contact .play-bloom{left:-12px;top:76%}
  .playfield--hero .play-bloom{top:54%;right:-8px}
  .playfield--company .play-bloom{right:-10px;top:6%}
  .playfield--footer .play-bloom{right:5%;top:36%}
  .js .site-nav.is-open>a{animation:menu-item-in .4s var(--ease) both}
  .js .site-nav.is-open>a:nth-child(2){animation-delay:.04s}
  .js .site-nav.is-open>a:nth-child(3){animation-delay:.08s}
  .js .site-nav.is-open>a:nth-child(4){animation-delay:.12s}
  .js .site-nav.is-open>a:nth-child(5){animation-delay:.16s}
  .js .site-nav.is-open>a:nth-child(6){animation-delay:.2s}
  .splash-finale{scale:.72}
}
@keyframes menu-item-in{from{opacity:.25;translate:0 7px}to{opacity:1;translate:0 0}}
.motion-off .repair-crack{opacity:0!important}
.motion-off .repair-lit,.motion-off .repair-check{opacity:1!important;stroke-dashoffset:0!important}
.motion-off .ad-spark{opacity:.7}
.motion-off .story-arriving h2,.motion-off .story-arriving .approach-item,.motion-off .story-arriving .company-table>div{opacity:1;translate:none}
.page-hidden .page-story *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){
  .repair-crack{opacity:0!important}.repair-lit,.repair-check{opacity:1!important;stroke-dashoffset:0!important}
  .story-arriving h2,.story-arriving .approach-item,.story-arriving .company-table>div{opacity:1;translate:none}
}
@media print{.play-bloom,.splash-finale{display:none}}