/* Progressive motion: every content element remains complete without this file or JS. */
:root {
  /* 1 = 設計値。全モーションの速さをここ1か所で調整する（JSも読む） */
  --motion-tempo:2.4;
  --motion-ease-breeze:cubic-bezier(.22,.61,.36,1);
  --motion-ease-trace:cubic-bezier(.4,0,.2,1);
  --motion-ease-touch:cubic-bezier(.2,.8,.2,1);
  --motion-duration-touch:calc(160ms * var(--motion-tempo));
  --motion-duration-small:calc(360ms * var(--motion-tempo));
  --motion-duration-medium:calc(640ms * var(--motion-tempo));
  --motion-duration-long:calc(960ms * var(--motion-tempo));
  --motion-duration-marquee:40s;
  --motion-stagger-short:calc(70ms * var(--motion-tempo));
  --motion-distance-touch:4px;
  --motion-distance-breeze:8px;
  --motion-distance-wave:12px;
  --motion-angle-icon:6deg;
  --motion-scale-photo:1.012;
  --motion-scale-node:1.025;
  --motion-duration-cloud:75s;
  --motion-duration-drift:14s;
  --motion-duration-blob:8s;
  --motion-relation-color:#58b99e;
  --motion-card-color-2:#99b632;
  --motion-card-color-3:#34a9dc;
}

html:not(.has-intro) .intro {
  display:none;
}

/* イントロの幕が透けるあいだ、ヒーローの文字と署名画像を伏せておく。
   このクラスは JS が付けて play() の直前に外すので、JS 無しでは何も起きない。 */
.motion-armed .hero-copy h1,
.motion-armed .hero-copy p,
.motion-armed .hero-copy .button,
.motion-armed .hero-message,
.motion-armed .motion-signature img {
  opacity:0;
}

.intro {
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  background:var(--white);
}

.intro-copy {
  font-family:var(--hand);
  color:var(--ink);
  font-size:clamp(22px,3vw,40px);
  letter-spacing:.12em;
  line-height:1.8;
  text-align:center;
  opacity:0;
}

.motion-underline {
  display:block;
  width:180px;
  max-width:100%;
  height:12px;
  margin-top:2px;
  fill:none;
  pointer-events:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-width:2;
}

.motion-underline path {
  stroke-dasharray:220;
  stroke-dashoffset:220;
}

.is-motion-running .motion-underline path {
  animation:motion-ink var(--motion-duration-medium) var(--motion-ease-trace) forwards;
}

@keyframes motion-ink {
  to {
    stroke-dashoffset:0;
  }
}

/* settle 後にクラスが外れても描き切った線を残す */
[data-motion-state="settled"] .motion-underline path {
  stroke-dashoffset:0;
}

.motion-signature {
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

.motion-signature img {
  position:absolute;
  display:block;
  width:auto;
  height:auto;
  max-width:none;
  pointer-events:none;
}

.motion-cloud-wide,.motion-cloud-round,.motion-seed-left,.motion-seed-right {
  mix-blend-mode:screen;
}

.motion-cloud-wide {
  top:16%;
  right:7%;
  width:min(29vw,390px)!important;
  opacity:.56;
  animation:motion-cloud var(--motion-duration-cloud) linear infinite alternate;
}

.motion-cloud-round {
  top:34%;
  right:31%;
  width:min(13vw,175px)!important;
  opacity:.38;
  animation:motion-cloud 90s linear infinite alternate-reverse;
}

.motion-seed-left {
  bottom:14%;
  left:45%;
  width:min(7vw,100px)!important;
  opacity:.55;
  animation:motion-drift 12s var(--motion-ease-breeze) infinite;
}

.motion-seed-right {
  top:19%;
  right:3%;
  width:min(6vw,86px)!important;
  opacity:.52;
  animation:motion-drift 17s var(--motion-ease-breeze) -5s infinite;
}

.motion-leaf {
  left:53%;
  bottom:17%;
  width:min(8vw,112px)!important;
  opacity:.48;
  animation:motion-drift 15s var(--motion-ease-breeze) -9s infinite;
}

.hero-copy {
  position:relative;
  z-index:1;
}

.hero-message,.wave {
  z-index:1;
}

.hero-message::after {
  position:absolute;
  inset:-18px;
  background:radial-gradient(circle,#fff 0 2px,transparent 3px) 5% 20%/42px 42px,radial-gradient(circle,#fff 0 1.5px,transparent 2.5px) 80% 10%/54px 54px;
  content:"";
  animation:motion-sparkle 10s ease-in-out infinite;
  pointer-events:none;
}

[data-motion-section] {
  position:relative;
}

.area-nav [data-motion-role="icon"] .icon {
  transform-box:fill-box;
  transform-origin:center bottom;
}

.cards article,.news-grid article,.activities article {
  position:relative;
}

.motion-accent {
  position:absolute;
  z-index:1;
  width:24px;
  height:2px;
  background:currentColor;
  transform:scaleX(1);
  transform-origin:left center;
  pointer-events:none;
}

.cards .motion-accent {
  top:52px;
  left:20px;
}

.cards article:nth-child(2) .motion-accent {
  color:var(--motion-card-color-2);
}

.cards article:nth-child(3) .motion-accent {
  color:var(--motion-card-color-3);
}

.cards article:nth-child(4) .motion-accent {
  color:var(--orange);
}

.news-grid .motion-accent {
  top:115px;
  left:0;
  color:var(--blue);
}

.activities .motion-accent {
  bottom:-5px;
  left:0;
  color:var(--blue);
}

.motion-wave-accent {
  pointer-events:none;
  opacity:0;
  fill:#c9edf9;
}

.motion-relation-ring {
  fill:none;
  stroke:var(--motion-relation-color);
  stroke-width:2;
  opacity:0;
  pointer-events:none;
  transform-box:fill-box;
  transform-origin:center;
}

.motion-relation-trace {
  fill:none;
  stroke:var(--motion-relation-color);
  stroke-width:3;
  opacity:0;
  pointer-events:none;
}

.organic::before {
  position:absolute;
  z-index:-1;
  top:7%;
  right:-3%;
  width:78%;
  height:82%;
  border-radius:47% 53% 52% 38%;
  background:var(--sky);
  content:"";
  animation:motion-blob var(--motion-duration-blob) var(--motion-ease-breeze) infinite alternate;
}

.community-art path {
  stroke-dasharray:900;
  stroke-dashoffset:900;
}

.community-art.is-art-drawn path {
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1.2s var(--motion-ease-trace);
}

@keyframes motion-cloud {
  to {
    transform:translateX(calc(var(--motion-distance-wave) * 8));
  }
}

@keyframes motion-drift {
  50% {
    transform:translate(7px,-18px) rotate(4deg);
  }
}

@keyframes motion-sparkle {
  50% {
    transform:translateY(-7px);
    opacity:.45;
  }
}

@keyframes motion-blob {
  to {
    transform:scale(1.02);
    border-radius:55% 45% 43% 57%;
  }
}

@media (hover:hover) and (pointer:fine) {
  .site-header nav a,footer nav a {
    position:relative;
  }
  .site-header nav a::after,footer nav a::after {
    position:absolute;
    right:0;
    bottom:-4px;
    left:0;
    height:1px;
    background:currentColor;
    content:"";
    transform:scaleX(0);
    transform-origin:left;
    transition:transform var(--motion-duration-touch) var(--motion-ease-touch);
  }
  .site-header nav a:hover::after,footer nav a:hover::after {
    transform:scaleX(1);
  }
  .area-nav a:hover .icon {
    animation:motion-icon var(--motion-duration-small) var(--motion-ease-touch) 1;
  }
}

.site-header nav a:focus-visible::after,footer nav a:focus-visible::after {
  transform:scaleX(1);
}

.card-arrow,.button {
  transition:transform var(--motion-duration-touch) var(--motion-ease-touch);
}

.card-arrow:hover,.card-arrow:focus-visible,.button:hover,.button:focus-visible {
  transform:translateX(var(--motion-distance-touch));
}

@keyframes motion-icon {
  50% {
    transform:rotate(var(--motion-angle-icon));
  }
}

@media (max-width:760px) {
  :root {
    --motion-duration-small:240ms;
    --motion-duration-medium:360ms;
    --motion-stagger-short:40ms;
    --motion-distance-touch:2px;
    --motion-angle-icon:3deg;
  }
  .motion-signature {
    display:none;
  }
  .cards .motion-accent,.news-grid .motion-accent {
    display:none;
  }
  .activities .motion-accent {
    bottom:-4px;
  }
}

@media (prefers-reduced-motion:reduce) {
  html,body {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    animation:none!important;
    animation-duration:0s!important;
    transition:none!important;
    transition-duration:0s!important;
  }
  .motion-signature,.motion-wave-accent,.motion-relation-ring,.motion-relation-trace,.motion-underline,.motion-accent,.intro {
    display:none!important;
  }
  .facilities-marquee {
    scroll-snap-type:x proximity;
  }
  .facility-card {
    scroll-snap-align:start;
  }
}