/*
  Harmony proposals and quiet motion study.
  ?design=a  静かな連なり
  ?design=b  余白の章扉（default）
  ?design=c  一景ずつ読む
*/

:root{
  --ease-quiet:cubic-bezier(.18,.72,.22,1);
  --ease-image:cubic-bezier(.16,.76,.2,1);
}

/* Global motion: small distance, long deceleration, no decorative bounce. */
.reveal-ready{
  opacity:1;
  transform:translate3d(0,0,0);
  transition:
    opacity 1.15s var(--ease-quiet) var(--reveal-delay,0ms),
    transform 1.45s var(--ease-quiet) var(--reveal-delay,0ms),
    clip-path 1.55s var(--ease-image) var(--reveal-delay,0ms);
  will-change:opacity,transform;
}
.reveal-ready:not(.is-visible){opacity:0;transform:translate3d(0,28px,0)}
[data-reveal="image"].reveal-ready:not(.is-visible),
[data-reveal="scene"].reveal-ready:not(.is-visible){clip-path:inset(0 0 9% 0)}
.media-frame{overflow:hidden}
[data-drift]{--drift-y:0px;--media-scale:1.025}
[data-drift].reveal-ready:not(.is-visible){--media-scale:1.065}
[data-drift]>.media-frame>img,
.water-chapter[data-drift]>img{
  transform:translate3d(0,var(--drift-y),0) scale(var(--media-scale));
  transition:transform 1.6s var(--ease-image);
  will-change:transform;
}
.water-chapter[data-drift]>img{inset:-4%;width:108%;height:108%}
.hero-image{animation-duration:1.8s;animation-timing-function:var(--ease-image)}
.hero-identity{animation-duration:1.3s;animation-delay:.28s;animation-timing-function:var(--ease-quiet)}
.header{transition-duration:.6s}
.header.is-scrolled{animation-duration:.72s;animation-timing-function:var(--ease-quiet)}
.menu{animation-duration:.72s;animation-timing-function:var(--ease-quiet)}
.line-link::after{transition-duration:.72s;transition-timing-function:var(--ease-quiet)}
.line-link img{transition-duration:.55s;transition-timing-function:var(--ease-quiet)}

@keyframes hero-image-enter{
  from{opacity:0;transform:scale(1.075)}
  to{opacity:1;transform:scale(1)}
}
@keyframes hero-copy-enter{
  from{opacity:0;transform:translate3d(0,24px,0)}
  to{opacity:1;transform:translate3d(0,-1.5%,0)}
}
@keyframes header-enter{
  from{opacity:0;transform:translate3d(0,-100%,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

/* Shared correction: shorter copy and stronger reading hierarchy. */
.harmony{align-items:start}
.experience-grid{min-width:0}
.experience-panel{min-width:0;border:0!important;background:none!important;box-shadow:none!important}
.experience-term{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0;
  font-family:var(--sans);
  font-size:11px!important;
  line-height:1.6!important;
  letter-spacing:.18em;
  color:var(--muted);
  white-space:nowrap;
}
.experience-index{font-size:9px;letter-spacing:.15em;color:color-mix(in srgb,var(--muted) 66%,transparent)}
.experience-content h3{
  max-width:none;
  font-size:clamp(21px,1.65vw,25px);
  line-height:1.8;
  letter-spacing:.085em;
  text-wrap:balance;
}
.experience-content>p:last-child{
  max-width:31em;
  margin-top:17px;
  font-size:16px;
  line-height:2.12;
  letter-spacing:.04em;
  color:var(--muted);
  text-wrap:pretty;
}

/* A — staggered, like walking through separated rooms. */
html[data-harmony="a"] .harmony{
  grid-template-columns:minmax(280px,.62fr) minmax(0,1.38fr);
  column-gap:clamp(74px,9vw,148px);
  padding-top:176px;
  padding-bottom:196px;
}
html[data-harmony="a"] .harmony-intro{max-width:390px}
html[data-harmony="a"] .experience-grid{
  display:flex;
  flex-direction:column;
  gap:0;
  margin:0;
  padding:36px 0 0;
}
html[data-harmony="a"] .experience-panel{
  display:grid;
  grid-template-columns:104px minmax(0,1fr);
  grid-column:auto!important;
  align-items:start;
  width:min(88%,700px);
  margin:0;
  padding:0!important;
}
html[data-harmony="a"] .experience-panel+.experience-panel{margin-top:104px}
html[data-harmony="a"] .experience-panel:nth-child(2){margin-left:7%}
html[data-harmony="a"] .experience-panel:nth-child(3){margin-left:3%}
html[data-harmony="a"] .experience-panel:nth-child(4){margin-left:10%}
html[data-harmony="a"] .experience-term{padding-top:8px}

/* B — editorial chapter openings: label, title and one thought never compete. */
html[data-harmony="b"] .harmony{
  display:block;
  max-width:1460px;
  padding-top:170px;
  padding-bottom:198px;
}
html[data-harmony="b"] .harmony-intro{
  display:grid;
  grid-template-columns:minmax(280px,.7fr) minmax(420px,1.3fr);
  column-gap:clamp(80px,11vw,176px);
  max-width:none;
  padding:0;
}
html[data-harmony="b"] .harmony-intro>.eyebrow{grid-column:1/-1}
html[data-harmony="b"] .harmony-intro>h2{grid-column:1;margin-bottom:0}
html[data-harmony="b"] .harmony-copy{grid-column:2;padding-top:8px}
html[data-harmony="b"] .experience-grid{
  display:flex;
  flex-direction:column;
  gap:0;
  margin:0;
  padding:138px 0 0;
}
html[data-harmony="b"] .experience-panel{
  display:grid;
  grid-template-columns:112px minmax(260px,.72fr) minmax(340px,1fr);
  grid-column:auto!important;
  column-gap:clamp(34px,5vw,78px);
  align-items:start;
  width:100%;
  margin:0;
  padding:0!important;
}
html[data-harmony="b"] .experience-panel+.experience-panel{margin-top:92px}
html[data-harmony="b"] .experience-term{padding-top:8px}
html[data-harmony="b"] .experience-content{display:contents}
html[data-harmony="b"] .experience-content h3{grid-column:2}
html[data-harmony="b"] .experience-content>p:last-child{grid-column:3;margin-top:0}

/* C — a slower stay: one idea occupies each scroll beat. */
html[data-harmony="c"] .harmony{
  grid-template-columns:minmax(280px,.68fr) minmax(0,1.32fr);
  column-gap:clamp(82px,10vw,160px);
  padding-top:174px;
  padding-bottom:120px;
}
html[data-harmony="c"] .harmony-intro{position:sticky;top:134px;max-width:410px}
html[data-harmony="c"] .experience-grid{
  display:flex;
  flex-direction:column;
  gap:0;
  margin:0;
  padding:0;
}
html[data-harmony="c"] .experience-panel{
  display:grid;
  grid-template-columns:108px minmax(0,1fr);
  grid-column:auto!important;
  align-content:center;
  width:min(100%,720px);
  min-height:62svh;
  margin:0;
  padding:10vh 0!important;
}
html[data-harmony="c"] .experience-term{padding-top:8px}

@media(max-width:1000px){
  html[data-harmony] .harmony{display:block;max-width:900px;padding-top:144px;padding-bottom:160px}
  html[data-harmony] .harmony-intro{position:static;display:block;max-width:630px}
  html[data-harmony] .harmony-intro>h2{margin-bottom:34px}
  html[data-harmony] .harmony-copy{padding-top:0}
  html[data-harmony="b"] .experience-grid{padding-top:94px}
  html[data-harmony="b"] .experience-panel{grid-template-columns:104px minmax(230px,.8fr) minmax(280px,1fr);column-gap:32px}
  html[data-harmony="c"] .experience-grid{width:78%;margin-left:auto;padding-top:50px}
}

@media(max-width:700px){
  .reveal-ready:not(.is-visible){transform:translate3d(0,20px,0)}
  .hero-logo{animation:mobile-copy-enter 1.1s .15s var(--ease-quiet) both}
  h1{animation:mobile-copy-enter 1.25s .32s var(--ease-quiet) both}
  .hero-place{animation:mobile-copy-enter 1s .48s var(--ease-quiet) both}
  .experience-content h3{font-size:19px;line-height:1.85}
  .experience-content>p:last-child{font-size:15px;line-height:2.05;margin-top:13px}
  html[data-harmony] .harmony{display:block;max-width:520px;padding-top:112px;padding-bottom:124px}
  html[data-harmony] .harmony-intro{display:block;max-width:none}
  html[data-harmony] .experience-grid{display:flex;width:100%;margin:0;padding-top:62px}
  html[data-harmony] .experience-panel{
    display:block;
    width:calc(100% - 22px);
    min-height:0;
    margin:0!important;
    padding:0!important;
  }
  html[data-harmony] .experience-panel:nth-child(even){margin-left:22px!important}
  html[data-harmony] .experience-panel+.experience-panel{margin-top:78px!important}
  html[data-harmony] .experience-term{gap:11px;margin-bottom:20px;padding-top:0}
  html[data-harmony] .experience-index{font-size:9px}
  html[data-harmony] .experience-content{display:block}
  html[data-harmony] .experience-content h3,
  html[data-harmony] .experience-content>p:last-child{grid-column:auto}
  html[data-harmony] .experience-content h3{max-width:14em;font-size:20px;line-height:1.82;letter-spacing:.075em}
  html[data-harmony] .experience-content>p:last-child{max-width:21em;margin-top:15px;font-size:14px;line-height:2.08;letter-spacing:.045em}
  html[data-harmony="c"] .experience-panel{min-height:52svh;align-content:center}
  html[data-harmony="c"] .experience-panel+.experience-panel{margin-top:0!important}
}

@keyframes mobile-copy-enter{
  from{opacity:0;transform:translate3d(0,18px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

@media(prefers-reduced-motion:reduce){
  [data-drift]>.media-frame>img,
  .water-chapter[data-drift]>img{transform:none!important}
}