﻿/* Design motion layer: restrained but memorable interactions for client demo */
:root{
  --motion-x:50vw;
  --motion-y:50vh;
  --motion-scroll:0;
  --motion-red:#f04423;
  --motion-ash:rgba(18,18,17,.18);
  --motion-paper:rgba(239,238,233,.72);
}

body::after{
  content:"";
  position:fixed;
  right:18px;
  top:18vh;
  width:1px;
  height:64vh;
  z-index:95;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(18,18,17,.18),rgba(18,18,17,.18)) left top/1px 100% no-repeat;
  opacity:.55;
}

body::before{
  content:"";
  position:fixed;
  right:16px;
  top:18vh;
  width:5px;
  height:calc(64vh * var(--motion-scroll));
  max-height:64vh;
  z-index:96;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(240,68,35,.88),rgba(18,18,17,.42));
  border-radius:999px;
  box-shadow:0 0 22px rgba(240,68,35,.25);
  opacity:.8;
}

.motion-surface{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:1;
  opacity:.92;
}

.motion-surface::before,
.motion-surface::after{
  content:"";
  position:absolute;
  border-radius:999px;
  will-change:transform,opacity;
}

.motion-surface::before{
  width:46vw;
  height:46vw;
  left:calc(var(--motion-x) - 23vw);
  top:calc(var(--motion-y) - 23vw);
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.32) 0 8%,rgba(18,18,17,.11) 22%,rgba(18,18,17,.045) 38%,transparent 67%);
  filter:blur(22px);
  mix-blend-mode:multiply;
  transform:scale(.88);
  transition:left .65s cubic-bezier(.2,.7,.2,1),top .65s cubic-bezier(.2,.7,.2,1);
  opacity:.5;
}

.motion-surface::after{
  right:-10vw;
  top:18%;
  width:38vw;
  height:20vw;
  background:
    radial-gradient(ellipse at 42% 50%,rgba(240,68,35,.08),transparent 55%),
    radial-gradient(ellipse at 60% 45%,rgba(18,18,17,.14),transparent 62%);
  filter:blur(35px);
  animation:motionMistDrift 12s ease-in-out infinite alternate;
}

.motion-glyphs{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  opacity:.38;
}

.motion-glyphs i{
  position:absolute;
  width:clamp(58px,8vw,132px);
  height:clamp(58px,8vw,132px);
  border:1px solid rgba(18,18,17,.1);
  border-radius:50%;
  transform:translate3d(var(--gx,0px),var(--gy,0px),0) rotate(var(--r,0deg));
  animation:motionGlyphFloat var(--d,10s) ease-in-out infinite alternate;
}

.motion-glyphs i::before,
.motion-glyphs i::after{
  content:"";
  position:absolute;
  inset:18%;
  border:1px solid rgba(18,18,17,.08);
  border-radius:50%;
}

.motion-glyphs i::after{
  inset:38%;
  background:rgba(240,68,35,.12);
  border-color:rgba(240,68,35,.18);
  box-shadow:0 0 32px rgba(240,68,35,.14);
}

.motion-phrase{
  position:absolute;
  right:var(--side);
  bottom:9vh;
  z-index:4;
  display:flex;
  align-items:center;
  gap:13px;
  color:rgba(18,18,17,.58);
  font-size:10px;
  letter-spacing:.22em;
  writing-mode:vertical-rl;
  pointer-events:none;
}

.dark-section .motion-phrase,
.team-hero .motion-phrase{
  color:rgba(239,238,233,.58);
}

.motion-phrase::after{
  content:"";
  width:1px;
  height:72px;
  background:currentColor;
  transform-origin:top;
  animation:motionThread 2.8s ease-in-out infinite;
}

.motion-compass{
  position:absolute;
  right:clamp(32px,8vw,120px);
  bottom:clamp(54px,10vh,120px);
  width:86px;
  height:86px;
  z-index:5;
  display:grid;
  place-items:center;
  pointer-events:auto;
  color:rgba(18,18,17,.72);
  font-size:9px;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.motion-compass::before,
.motion-compass::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid currentColor;
  border-radius:50%;
  opacity:.38;
  animation:motionCompass 4.8s ease-in-out infinite;
}

.motion-compass::after{
  inset:19px;
  border-color:rgba(240,68,35,.5);
  animation-delay:-1.8s;
  box-shadow:0 0 28px rgba(240,68,35,.12);
}

.motion-compass span{
  transform:rotate(-10deg);
  color:var(--motion-red);
}

.motion-compass:hover::before{
  opacity:.85;
  transform:scale(1.16);
}

.motion-ready .site-nav a{
  transition:color .25s ease,transform .25s ease,opacity .25s ease;
}

.motion-ready .site-nav a:hover{
  transform:translateY(-2px);
}

.motion-ready .site-nav a::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:34px;
  height:34px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(240,68,35,.26),rgba(240,68,35,.04) 45%,transparent 70%);
  transform:translate(-50%,-50%) scale(.6);
  opacity:0;
  transition:.35s ease;
  z-index:-1;
}

.motion-ready .site-nav a:hover::before,
.motion-ready .site-nav a.active::before{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

.motion-ready .brand-roof{
  animation:motionRoofBreath 4.8s ease-in-out infinite;
}

.motion-ready .hero-seal,
.motion-ready .archive-stamp{
  isolation:isolate;
  animation:motionSealBreath 3.8s ease-in-out infinite;
}

.motion-ready .hero-seal::after,
.motion-ready .archive-stamp::after{
  content:"";
  position:absolute;
  inset:-22px;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(240,68,35,.2),rgba(240,68,35,.05) 45%,transparent 70%);
  filter:blur(8px);
  animation:motionRedHalo 3.8s ease-in-out infinite;
}

.motion-ready .inner-hero,
.motion-ready .hero{
  isolation:isolate;
}

.motion-ready .inner-hero .inner-title,
.motion-ready .inner-hero .inner-title{
  --hero-shift:-50%;
}

.motion-ready .hero .hero-copy{
  will-change:transform;
  transform:translate3d(var(--motion-shift-x,0px),var(--motion-shift-y,0px),0) translateY(var(--hero-shift,0));
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}

.motion-ready .hero .hero-copy{
  --hero-shift:-46%;
}

.motion-ready .inner-hero h1,
.motion-ready .hero h1{
  text-shadow:0 0 0 rgba(18,18,17,0);
  transition:text-shadow .5s ease,color .5s ease;
}

.motion-ready .inner-hero:hover h1,
.motion-ready .hero:hover h1{
  text-shadow:0 16px 45px rgba(18,18,17,.12);
}

.motion-ready .section-label{
  position:relative;
  overflow:visible;
}

.motion-ready .section-label::before{
  content:"";
  position:absolute;
  left:-10px;
  top:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--motion-red);
  box-shadow:0 0 26px rgba(240,68,35,.42);
  transform:translate(-100%,-50%) scale(.7);
  opacity:0;
  transition:opacity .45s,transform .45s;
}

.motion-ready .section-label.motion-seen::before{
  opacity:1;
  transform:translate(-100%,-50%) scale(1);
}

.motion-card{
  position:relative;
  --tilt-rotate-x:0deg;
  --tilt-rotate-y:0deg;
  --local-x:50%;
  --local-y:50%;
  --lift:0px;
  --motion-scale:1;
  transform:perspective(900px) rotateX(var(--tilt-rotate-x)) rotateY(var(--tilt-rotate-y)) translate3d(0,var(--lift),0) scale(var(--motion-scale));
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease,filter .45s ease;
  will-change:auto;
  transform-style:preserve-3d;
  backface-visibility:hidden;
}

.motion-card::after{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:radial-gradient(circle at var(--local-x) var(--local-y),rgba(255,255,255,.44),rgba(240,68,35,.08) 23%,transparent 48%);
  opacity:0;
  transition:opacity .35s ease;
  mix-blend-mode:soft-light;
}

.motion-card:hover,
.motion-card.is-motion-active,
.motion-card:focus-within{
  --lift:-5px;
  --motion-scale:1.006;
  box-shadow:0 24px 58px rgba(18,18,17,.09),0 0 0 1px rgba(18,18,17,.045);
  filter:saturate(1.025) contrast(1.015);
  will-change:transform;
}

.motion-card:hover::after,
.motion-card.is-motion-active::after,
.motion-card:focus-within::after{
  opacity:.9;
}

.motion-card.is-motion-pressed{
  --lift:-1px;
  --motion-scale:.996;
}

.dark-section .motion-card:hover,
.dark-section .motion-card.is-motion-active,
.dark-section .motion-card:focus-within{
  box-shadow:0 26px 62px rgba(0,0,0,.24),0 0 0 1px rgba(239,238,233,.11);
}

.motion-ready .media-slot img{
  filter:saturate(.88) contrast(.92) brightness(.96);
  transform:scale(1.012);
}

.motion-ready .media-slot.has-image::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at var(--local-x) var(--local-y),rgba(239,238,233,.34),transparent 24%),
    linear-gradient(115deg,rgba(239,238,233,.16),transparent 48%,rgba(18,18,17,.12));
  opacity:.62;
  mix-blend-mode:screen;
  transition:opacity .45s ease;
}

.motion-ready .media-slot.has-image:hover::after{
  opacity:.3;
}

.motion-ready .media-slot.has-image:hover img{
  filter:saturate(1) contrast(.98) brightness(1);
  transform:scale(1.035);
}

.motion-ready .research-item,
.motion-ready .news-row,
.motion-ready .join-paths a,
.motion-ready .team-categories a,
.motion-ready .field-summary{
  position:relative;
  overflow:hidden;
}

.motion-ready .research-item::before,
.motion-ready .news-row::before,
.motion-ready .join-paths a::before,
.motion-ready .team-categories a::before,
.motion-ready .field-summary::before{
  content:"";
  position:absolute;
  left:-28%;
  top:0;
  width:24%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),rgba(240,68,35,.08),transparent);
  transform:skewX(-18deg);
  transition:left .8s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}

.motion-ready .research-item:hover::before,
.motion-ready .news-row:hover::before,
.motion-ready .join-paths a:hover::before,
.motion-ready .team-categories a:hover::before,
.motion-ready .field-summary:hover::before{
  left:110%;
}

.motion-pulse{
  position:fixed;
  left:0;
  top:0;
  width:14px;
  height:14px;
  border-radius:50%;
  pointer-events:none;
  z-index:1090;
  border:1px solid rgba(240,68,35,.45);
  background:radial-gradient(circle,rgba(240,68,35,.18),rgba(18,18,17,.08) 42%,transparent 72%);
  transform:translate(-50%,-50%) scale(.2);
  animation:motionPulse .75s ease-out forwards;
}

.motion-page-transition{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2000;
  background:radial-gradient(circle at var(--motion-x) var(--motion-y),rgba(240,68,35,.22),rgba(18,18,17,.2) 18%,rgba(239,238,233,.82) 55%,rgba(239,238,233,0) 72%);
  opacity:0;
  transform:scale(.92);
  transition:opacity .32s ease,transform .32s ease;
}

.motion-page-transition.active{
  opacity:1;
  transform:scale(1);
}

@keyframes motionMistDrift{
  0%{transform:translate3d(0,0,0) rotate(-5deg);opacity:.55}
  100%{transform:translate3d(-10vw,8vh,0) rotate(8deg);opacity:.34}
}

@keyframes motionGlyphFloat{
  0%{transform:translate3d(var(--gx,0px),var(--gy,0px),0) rotate(var(--r,0deg)) scale(.94)}
  100%{transform:translate3d(calc(var(--gx,0px) + 18px),calc(var(--gy,0px) - 14px),0) rotate(calc(var(--r,0deg) + 9deg)) scale(1.04)}
}

@keyframes motionThread{
  0%,100%{transform:scaleY(.3);opacity:.55}
  50%{transform:scaleY(1);opacity:.9}
}

@keyframes motionCompass{
  0%,100%{transform:scale(.86) rotate(0deg);opacity:.22}
  50%{transform:scale(1.08) rotate(18deg);opacity:.6}
}

@keyframes motionRoofBreath{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
}

@keyframes motionSealBreath{
  0%,100%{transform:rotate(3deg) scale(1)}
  50%{transform:rotate(1deg) scale(1.055)}
}

@keyframes motionRedHalo{
  0%,100%{opacity:.35;transform:scale(.8)}
  50%{opacity:.75;transform:scale(1.16)}
}

@keyframes motionPulse{
  to{opacity:0;transform:translate(-50%,-50%) scale(9)}
}

@media(max-width:900px){
  body::before,body::after{display:none}
  .motion-surface::before{width:75vw;height:75vw;left:12vw;top:18vh}
  .motion-compass{display:none}
}

@media(prefers-reduced-motion:reduce){
  .motion-pulse,.motion-page-transition{display:none!important}
  .motion-surface{display:block!important;opacity:.58}
  .motion-glyphs{display:block!important;opacity:.3}
  .motion-phrase{display:flex!important;opacity:.68}
  .motion-compass{display:grid!important;opacity:.82}
  .motion-card{transform:translate3d(0,0,0)!important;will-change:auto}
  .motion-card:hover,.motion-card.is-motion-active,.motion-card:focus-within{box-shadow:0 0 0 1px rgba(240,68,35,.16),0 18px 42px rgba(18,18,17,.08);filter:saturate(1.03) contrast(1.02)}
  .motion-card:hover::after,.motion-card.is-motion-active::after,.motion-card:focus-within::after{opacity:.82}
  body::before,body::after{display:none!important}
}

/* Original ink-painting micro scenes: flower-bird / bamboo-grove moments */
.ink-scene{position:absolute;z-index:3;width:clamp(190px,22vw,390px);aspect-ratio:1.28;pointer-events:auto;color:rgba(18,18,17,.72);opacity:.72;mix-blend-mode:multiply;filter:blur(.05px);transform:translate3d(0,0,0)}
.dark-section .ink-scene,.team-hero .ink-scene{color:rgba(239,238,233,.68);mix-blend-mode:screen;opacity:.55}.ink-scene svg{width:100%;height:100%;overflow:visible}.ink-scene path,.ink-scene line,.ink-scene circle,.ink-scene ellipse{vector-effect:non-scaling-stroke}.ink-scene .branch,.ink-scene .stem,.ink-scene .water{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.72;stroke-dasharray:520;stroke-dashoffset:520;animation:inkStrokeDraw 2.2s cubic-bezier(.2,.7,.2,1) forwards}.ink-scene .twig{fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;opacity:.42;stroke-dasharray:160;stroke-dashoffset:160;animation:inkStrokeDraw 1.8s cubic-bezier(.2,.7,.2,1) .45s forwards}.ink-scene .leaf{fill:currentColor;opacity:.18;transform-origin:center;animation:inkLeafBreathe 4.8s ease-in-out infinite}.ink-scene .mist{fill:rgba(18,18,17,.055);filter:blur(9px);animation:inkMistFloat 8s ease-in-out infinite alternate}.dark-section .ink-scene .mist,.team-hero .ink-scene .mist{fill:rgba(239,238,233,.08)}.ink-scene .bird{fill:currentColor;opacity:0;transform:translate3d(-8px,12px,0) scale(.82);transform-origin:center;transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}.ink-scene .bird-wing{transform-origin:66px 58px}.ink-scene:hover .bird,.ink-scene:focus-within .bird,.ink-scene.bird-awake .bird{opacity:.82;transform:translate3d(0,0,0) scale(1)}.ink-scene:hover .bird-wing,.ink-scene.bird-awake .bird-wing{animation:inkBirdWing 1.8s ease-in-out infinite}.ink-scene:hover .branch,.ink-scene.bird-awake .branch{animation:inkBranchSway 3.8s ease-in-out infinite}.ink-scene:hover .leaf,.ink-scene.bird-awake .leaf{opacity:.32}.ink-scene .red-berry{fill:var(--motion-red);opacity:.76;filter:drop-shadow(0 0 10px rgba(240,68,35,.24));transform-origin:center;animation:inkBerryPulse 3.4s ease-in-out infinite}.ink-scene--branch{right:clamp(24px,8vw,130px);top:20%}.ink-scene--bamboo-grove{left:clamp(22px,7vw,110px);bottom:12%;opacity:.52}.ink-scene--plum{right:clamp(30px,10vw,160px);bottom:9%}.manifesto .ink-scene--branch{top:23%}.projects .ink-scene--bamboo,.archive-list .ink-scene--bamboo{bottom:auto;top:6%;left:auto;right:8vw}.team .ink-scene--plum,.people .ink-scene--plum{right:auto;left:7vw}.partner-system .ink-scene--branch,.join-channels .ink-scene--branch{top:10%;right:6vw}@keyframes inkStrokeDraw{to{stroke-dashoffset:0}}@keyframes inkLeafBreathe{0%,100%{transform:scale(.94) rotate(-1deg);opacity:.14}50%{transform:scale(1.06) rotate(2deg);opacity:.28}}@keyframes inkMistFloat{0%{transform:translate3d(-8px,5px,0) scale(.94);opacity:.55}100%{transform:translate3d(12px,-7px,0) scale(1.08);opacity:.32}}@keyframes inkBirdWing{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-13deg)}}@keyframes inkBranchSway{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(2px,-1px,0) rotate(.8deg)}}@keyframes inkBerryPulse{0%,100%{transform:scale(.86);opacity:.52}50%{transform:scale(1.08);opacity:.88}}@media(max-width:900px){.ink-scene{width:clamp(150px,36vw,260px);opacity:.42}.ink-scene--branch,.ink-scene--plum{right:18px}}
/* Expanded geometric ink motifs: orchid / bamboo / chrysanthemum / cricket / flying bird */
.ink-scene--bamboo{left:clamp(20px,7vw,110px);top:15%;width:clamp(150px,17vw,280px);opacity:.55}.ink-scene--orchid{right:clamp(20px,7vw,120px);bottom:12%;width:clamp(160px,19vw,310px);opacity:.58}.ink-scene--chrysanthemum{right:clamp(28px,9vw,150px);top:10%;width:clamp(155px,18vw,300px);opacity:.55}.ink-scene--cricket{left:clamp(28px,8vw,130px);bottom:11%;width:clamp(145px,16vw,260px);opacity:.5}.ink-scene--flyingbird{right:clamp(40px,12vw,190px);top:13%;width:clamp(135px,15vw,240px);opacity:.48}.ink-scene--extra{z-index:2}.ink-scene .stem{fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;opacity:.66;stroke-dasharray:360;stroke-dashoffset:360;animation:inkStrokeDraw 2s cubic-bezier(.2,.7,.2,1) forwards}.ink-scene .petal{fill:currentColor;opacity:.14;transform-origin:center;animation:inkPetalFloat 5.6s ease-in-out infinite}.ink-scene .bamboo-leaf{fill:currentColor;opacity:.18;transform-origin:center;animation:inkBambooLeaf 4.6s ease-in-out infinite}.ink-scene .insect{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:translate3d(-8px,8px,0) scale(.86);transition:.65s cubic-bezier(.2,.7,.2,1)}.ink-scene:hover .insect,.ink-scene.bird-awake .insect{opacity:.78;transform:translate3d(0,0,0) scale(1)}.ink-scene:hover .petal,.ink-scene:hover .bamboo-leaf,.ink-scene.bird-awake .petal,.ink-scene.bird-awake .bamboo-leaf{opacity:.28}.ink-scene .flight{fill:currentColor;opacity:0;transform:translate3d(-16px,14px,0) scale(.88);transition:.75s cubic-bezier(.2,.7,.2,1)}.ink-scene:hover .flight,.ink-scene.bird-awake .flight{opacity:.78;transform:translate3d(0,0,0) scale(1);animation:inkFlight 2.3s ease-in-out infinite}.research-page .ink-scene--bamboo,.research .ink-scene--bamboo{top:auto;bottom:9%;left:8vw}.projects-page .ink-scene--chrysanthemum,.projects .ink-scene--chrysanthemum{right:6vw;top:11%}.cooperation-page .ink-scene--orchid,.cooperation .ink-scene--orchid{right:7vw;bottom:8%}.news-page .ink-scene--cricket,.news .ink-scene--cricket{left:7vw;bottom:9%}.join-page .ink-scene--flyingbird,.join .ink-scene--flyingbird{right:9vw;top:15%}@keyframes inkPetalFloat{0%,100%{transform:rotate(-2deg) scale(.92)}50%{transform:rotate(3deg) scale(1.07)}}@keyframes inkBambooLeaf{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(5deg) translateY(-3px)}}@keyframes inkFlight{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(8px,-7px,0) scale(1.05)}}@media(max-width:900px){.ink-scene--bamboo,.ink-scene--orchid,.ink-scene--chrysanthemum,.ink-scene--cricket,.ink-scene--flyingbird{width:clamp(120px,31vw,220px);opacity:.35}}

/* Core motion stays present in reduced-motion environments, but becomes slower and quieter. */
@media(prefers-reduced-motion:reduce){
  .motion-surface::before{
    transition:left 1.15s cubic-bezier(.2,.7,.2,1),top 1.15s cubic-bezier(.2,.7,.2,1)!important;
  }
  .motion-surface::after{
    animation:motionMistDrift 22s ease-in-out infinite alternate!important;
  }
  .motion-glyphs i{
    animation:motionGlyphFloat 18s ease-in-out infinite alternate!important;
  }
  .motion-phrase::after{
    animation:motionThread 5.6s ease-in-out infinite!important;
  }
  .motion-compass::before,
  .motion-compass::after{
    animation:motionCompass 8.6s ease-in-out infinite!important;
  }
  .motion-ready .brand-roof{
    animation:motionRoofBreath 7.6s ease-in-out infinite!important;
  }
  .motion-ready .hero-seal,
  .motion-ready .archive-stamp{
    animation:motionSealBreath 6.8s ease-in-out infinite!important;
  }
  .motion-ready .hero-seal::after,
  .motion-ready .archive-stamp::after{
    animation:motionRedHalo 6.8s ease-in-out infinite!important;
  }
  .motion-ready .inner-hero .inner-title,
  .motion-ready .hero .hero-copy{
    transition:transform .9s cubic-bezier(.2,.7,.2,1)!important;
  }
  .ink-scene .branch,
  .ink-scene .stem,
  .ink-scene .water{
    animation:inkStrokeDraw 3.2s cubic-bezier(.2,.7,.2,1) forwards!important;
  }
  .ink-scene .twig{
    animation:inkStrokeDraw 2.8s cubic-bezier(.2,.7,.2,1) .35s forwards!important;
  }
  .ink-scene .leaf{
    animation:inkLeafBreathe 8.8s ease-in-out infinite!important;
  }
  .ink-scene .mist{
    animation:inkMistFloat 14s ease-in-out infinite alternate!important;
  }
  .ink-scene .red-berry{
    animation:inkBerryPulse 6.8s ease-in-out infinite!important;
  }
  .ink-scene .petal{
    animation:inkPetalFloat 10.4s ease-in-out infinite!important;
  }
  .ink-scene .bamboo-leaf{
    animation:inkBambooLeaf 8.6s ease-in-out infinite!important;
  }
  .ink-scene .bird,
  .ink-scene .insect,
  .ink-scene .flight{
    transition:opacity .72s cubic-bezier(.2,.7,.2,1),transform .72s cubic-bezier(.2,.7,.2,1)!important;
  }
  .ink-scene:hover .bird-wing,
  .ink-scene.bird-awake .bird-wing{
    animation:inkBirdWing 3.2s ease-in-out infinite!important;
  }
  .ink-scene:hover .branch,
  .ink-scene.bird-awake .branch{
    animation:inkBranchSway 6.4s ease-in-out infinite!important;
  }
  .ink-scene:hover .flight,
  .ink-scene.bird-awake .flight{
    animation:inkFlight 4.2s ease-in-out infinite!important;
  }
}

@media(max-width:900px) and (prefers-reduced-motion:reduce){
  .motion-compass{display:none!important}
}

.motion-ready .ink-scene:not(.ink-scene-inview) *{
  animation-play-state:paused!important;
}
