/* ============================================================
   SECTION SCENES — 各節の演出
   Each section gets its own canvas field, watermark,
   edge label and entrance choreography.
   ============================================================ */

.section{position:relative;isolation:isolate;overflow:hidden}

.sec-inner{position:relative;z-index:3}

/* particle canvas that lives inside a section */
.sec-canvas{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  max-height:1100px;
  z-index:1;
  pointer-events:none;
}

/* big translucent kanji behind a section */
.sec-watermark,
.hero-watermark{
  position:absolute;
  font-family:var(--serif);
  font-weight:700;
  color:var(--ink);
  opacity:.038;
  pointer-events:none;
  user-select:none;
  line-height:.8;
  z-index:0;
}
.hero-watermark{
  font-size:clamp(280px,42vw,620px);
  right:-4%;top:42%;
  transform:translateY(-50%);
  opacity:.03;
  color:var(--shu);
}
.sec-watermark{
  font-size:clamp(150px,20vw,380px);
  right:1%;top:50%;
  transform:translateY(-50%) rotate(-4deg);
  color:var(--ai);
  opacity:.05;
}

/* vertical japanese label hugging the section edge */
.sec-edge{
  position:absolute;
  left:14px;top:50%;
  transform:translateY(-50%);
  font-size:.78rem;
  color:var(--muted-2);
  opacity:.5;
  z-index:2;
  display:none;
}
@media (min-width:1320px){.sec-edge{display:block}}

/* ---------- per-section washes ---------- */

.sec-menu{background:var(--paper)}

.sec-sets{
  background:
    linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 12%,var(--paper-2) 88%,var(--paper) 100%);
}

.sec-about{
  background:var(--paper);
}

.sec-how{
  background:
    radial-gradient(70% 60% at 50% 0%,rgba(47,74,98,.055),transparent 70%),
    var(--paper);
}

.sec-cta{padding-top:clamp(40px,5vw,70px);padding-bottom:clamp(40px,5vw,70px)}

/* ---------- section head aside ---------- */

.head-aside{
  text-align:right;padding-bottom:5px;
  border-right:1px solid var(--line);
  padding-right:16px;
}
.ha-label{
  font-size:.64rem;color:var(--muted-2);font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;
}
.ha-value{
  font-family:var(--serif);font-size:1rem;font-weight:700;
  margin-top:5px;color:var(--ink);
}
@media (max-width:700px){
  .head-aside{text-align:left;border-right:0;padding-right:0;border-left:1px solid var(--line);padding-left:14px}
}

/* ============================================================
   WAVE DIVIDERS
   ============================================================ */

.wave{
  position:absolute;left:0;right:0;bottom:-1px;
  z-index:2;pointer-events:none;
  color:var(--paper);
  line-height:0;
}
.wave svg{display:block;width:100%;height:clamp(50px,7vw,110px)}
.wave-path{opacity:1}

.wave-line{
  fill:none;
  stroke:var(--line-2);
  stroke-width:1.2;
  stroke-linecap:round;
  stroke-dasharray:40 2200;
  stroke-dashoffset:2200;
  animation:waveDraw 3.4s var(--ease-out) forwards;
}
@keyframes waveDraw{to{stroke-dashoffset:0}}

.hero .wave{color:var(--paper)}

.footer-wave{
  position:absolute;left:0;right:0;top:-1px;
  color:var(--paper);
  line-height:0;pointer-events:none;
}
.footer-wave svg{display:block;width:100%;height:clamp(40px,5vw,80px)}

/* ============================================================
   HERO — orbit ingredient seals
   ============================================================ */

.orbit{
  position:absolute;
  inset:-4%;
  pointer-events:none;
  z-index:4;
  display:none;
}
@media (min-width:940px){.orbit{display:block}}

.orb{
  position:absolute;
  display:grid;place-items:center;
  width:58px;height:58px;
  border-radius:50%;
  background:rgba(255,253,248,.92);
  border:1px solid var(--line-2);
  box-shadow:0 10px 26px -14px rgba(34,29,25,.5);
  backdrop-filter:blur(8px);
  animation:orbFloat 9s ease-in-out infinite;
}
.orb b{
  font-family:var(--serif);font-size:1.02rem;font-weight:700;
  color:var(--shu);line-height:1;letter-spacing:0;
}
.orb i{
  position:absolute;bottom:-19px;
  font-style:normal;font-size:.56rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);
  white-space:nowrap;
}
.orb-1{top:6%;left:-7%;animation-delay:0s}
.orb-2{top:26%;right:-8%;animation-delay:1.6s}
.orb-3{bottom:30%;left:-9%;animation-delay:3.1s}
.orb-4{bottom:8%;right:-6%;animation-delay:4.4s}

@keyframes orbFloat{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-13px) rotate(2deg)}
}

/* taller arch so the hero is not top-heavy */
@media (min-width:940px){
  .arch{aspect-ratio:4/5.1}
}

/* ============================================================
   BAMBOO (about section edge)
   ============================================================ */

.bamboo{
  position:absolute;
  right:-16px;top:0;bottom:0;
  width:120px;
  color:var(--matcha);
  opacity:.16;
  pointer-events:none;
  z-index:0;
  display:none;
}
.bamboo svg{width:100%;height:100%;object-fit:cover}
@media (min-width:1100px){.bamboo{display:block}}

/* ============================================================
   ENSO (how section)
   ============================================================ */

.enso{
  position:absolute;
  right:clamp(-60px,2vw,60px);
  top:50%;
  transform:translateY(-50%);
  width:clamp(280px,34vw,460px);
  height:clamp(280px,34vw,460px);
  color:var(--shu);
  opacity:.09;
  pointer-events:none;
  z-index:0;
}
.enso svg{width:100%;height:100%}
.enso-path{
  stroke-dasharray:520;
  stroke-dashoffset:520;
  transform-origin:center;
  transform:rotate(-90deg);
}
.enso.drawn .enso-path{
  animation:ensoDraw 2.6s var(--ease-out) forwards;
}
.enso.drawn .enso-path:nth-child(2){
  animation-delay:.5s;
  stroke-dasharray:420;
  stroke-dashoffset:420;
}
@keyframes ensoDraw{to{stroke-dashoffset:0}}

/* ============================================================
   CTA LANTERN
   ============================================================ */

.cta-lantern{
  position:absolute;
  right:clamp(18px,7vw,110px);
  top:clamp(18px,4vw,44px);
  width:clamp(64px,8vw,96px);
  color:#F3E4C8;
  z-index:2;
  pointer-events:none;
  animation:lanternSway 7s ease-in-out infinite;
  transform-origin:50% 0%;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.3));
}
.cta-lantern svg{width:100%;height:auto}
@keyframes lanternSway{
  0%,100%{transform:rotate(-3.5deg)}
  50%{transform:rotate(3.5deg)}
}

.cta .cta-hanko{z-index:1}
.cta .sec-canvas{z-index:0;border-radius:inherit}

/* ============================================================
   REVEAL CHOREOGRAPHY VARIANTS
   ============================================================ */

.reveal.left{transform:translateX(-38px)}
.reveal.right{transform:translateX(38px)}
.reveal.up{transform:translateY(30px)}

/* side entrances push content past the viewport on phones — use vertical only */
@media (max-width:819px){
  .reveal.left,.reveal.right{transform:translateY(24px)}
}
.reveal.scale{transform:scale(.965);opacity:0}

.reveal.left.in,
.reveal.right.in,
.reveal.up.in{transform:none}
.reveal.scale.in{transform:none;opacity:1}

/* steps cascade individually */
.steps .step:nth-child(1).in{transition-delay:.05s}
.steps .step:nth-child(2).in{transition-delay:.17s}
.steps .step:nth-child(3).in{transition-delay:.29s}

/* feature list staggers on its own reveal */
.feature-list li{
  opacity:0;transform:translateX(16px);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
}
.reveal.in .feature-list li{opacity:1;transform:none}
.reveal.in .feature-list li:nth-child(1){transition-delay:.1s}
.reveal.in .feature-list li:nth-child(2){transition-delay:.22s}
.reveal.in .feature-list li:nth-child(3){transition-delay:.34s}

/* section number rule grows in */
.section-num .line{
  transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--ease-out) .1s;
}
.section-num.in .line,
.sec-inner.in .section-num .line{transform:scaleX(1)}

/* chips rise in one by one */
.chip{
  opacity:0;transform:translateY(10px);
  animation:chipIn .5s var(--ease-out) forwards;
}
.chip:nth-child(1){animation-delay:.04s}
.chip:nth-child(2){animation-delay:.08s}
.chip:nth-child(3){animation-delay:.12s}
.chip:nth-child(4){animation-delay:.16s}
.chip:nth-child(5){animation-delay:.20s}
.chip:nth-child(6){animation-delay:.24s}
.chip:nth-child(7){animation-delay:.28s}
.chip:nth-child(8){animation-delay:.32s}
.chip:nth-child(9){animation-delay:.36s}
.chip:nth-child(10){animation-delay:.40s}
.chip:nth-child(11){animation-delay:.44s}
@keyframes chipIn{to{opacity:1;transform:none}}

/* set card caption slides up */
.set-body h3,
.set-body p,
.set-foot{
  transform:translateY(8px);opacity:0;
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
}
.set-card.in .set-body h3{opacity:1;transform:none;transition-delay:.08s}
.set-card.in .set-body p{opacity:1;transform:none;transition-delay:.16s}
.set-card.in .set-foot{opacity:1;transform:none;transition-delay:.24s}

/* quote card lifts */
.quote-card{
  transform:translateY(12px);opacity:0;
  transition:opacity .7s var(--ease-out) .35s,transform .7s var(--ease-out) .35s;
}
.split-media.in .quote-card{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal.left,.reveal.right,.reveal.up,.reveal.scale{transform:none;opacity:1}
  .chip{opacity:1;transform:none;animation:none}
  .feature-list li,.set-body h3,.set-body p,.set-foot,.quote-card{opacity:1;transform:none}
  .section-num .line{transform:scaleX(1)}
  .enso-path{stroke-dashoffset:0}
  .wave-line{stroke-dashoffset:0;animation:none}
}