/* Scroll motion and decoration. Loaded after style.css.
   Hidden-until-revealed states exist only when the script has added
   .reveal, so the page stays readable without JavaScript. */

/* ---------- reveal on scroll ---------- */
.reveal{
  opacity:0;transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d,0s);will-change:opacity,transform
}
.reveal.is-in{opacity:1;transform:none}
.reveal-left{transform:translateX(-32px)}
.reveal-right{transform:translateX(32px)}
.reveal-pop{transform:scale(.94) translateY(16px)}
/* cards keep their hover lift after they appear */
.course.is-in:hover,.courses>.is-in:hover{transform:translateY(-3px);transition-delay:0s}

/* ---------- hero entrance ---------- */
@keyframes rise{from{opacity:.01;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes arch{from{clip-path:inset(18% 8% 0 8% round 14rem 14rem 0 0)}to{clip-path:inset(0 round 14rem 14rem 0 0)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes spin-in{from{opacity:0;transform:scale(.4) rotate(-40deg)}to{opacity:1;transform:none}}
.hero-copy>*{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.hero-copy>*:nth-child(2){animation-delay:.08s}
.hero-copy>*:nth-child(3){animation-delay:.16s}
.hero-copy>*:nth-child(4){animation-delay:.24s}
.hero-copy>*:nth-child(5){animation-delay:.34s}
.hero-copy>*:nth-child(6){animation-delay:.44s}
.hero-photo figure{animation:arch .8s cubic-bezier(.2,.7,.2,1) both}
.seal{animation:spin-in .9s cubic-bezier(.2,.9,.3,1.2) .9s both}
.hero-photo img{will-change:transform}

/* ---------- decoration ---------- */
.hero::before{
  content:"";position:absolute;z-index:0;width:34rem;height:34rem;border-radius:50%;
  left:-12rem;top:-14rem;background:radial-gradient(circle,rgba(194,87,51,.16),rgba(194,87,51,0) 68%)
}
.hero::after{
  content:"";position:absolute;z-index:0;width:11rem;height:11rem;left:42%;bottom:1.5rem;
  background:url(../img/pattern-dots.svg);opacity:.35;pointer-events:none
}
.hero .wrap{position:relative;z-index:1}

/* wavy top edge on coloured bands */
.band-2,.areas,.tuition,.founder,.cta{position:relative}
.band-2::before,.areas::before,.tuition::before,.founder::before,.cta::before{
  content:"";position:absolute;left:0;right:0;top:1px;height:clamp(24px,4vw,56px);
  transform:translateY(-100%);background:var(--cream-2);
  -webkit-mask:url(../img/wave.svg) center/100% 100% no-repeat;mask:url(../img/wave.svg) center/100% 100% no-repeat;
  pointer-events:none
}
.founder::before{background:var(--ink)}
.cta::before{background:var(--terra)}
/* a coloured band that follows another coloured band keeps a straight edge */
.band-2+.band-2::before,.price-strip+.band-2::before{display:none}
.price-strip+section::before{display:none}

/* illustrations sit in the empty space beside the section heading */
.tuition::after,.areas::after,.band-2:has(.checks)::after{
  content:"";position:absolute;z-index:0;pointer-events:none;background:center/contain no-repeat;
  top:4.5rem;right:max(1.5rem,calc((100% - 64rem)/2 + 1.5rem));
  width:clamp(8rem,17vw,15rem);aspect-ratio:1.2;animation:bob 6s ease-in-out infinite
}
.tuition::after{background-image:url(../img/illus-bubbles.svg)}
.areas::after{background-image:url(../img/illus-globe.svg);aspect-ratio:1}
.band-2:has(.checks)::after{background-image:url(../img/illus-castle.svg);aspect-ratio:1.23}
.band-2 .wrap,.areas .wrap,.tuition .wrap{position:relative;z-index:1}

/* founder: dotted pattern behind the photo */
.founder .wrap{position:relative}
.founder .wrap::before{
  content:"";position:absolute;left:-1.5rem;top:-2.5rem;width:9rem;height:9rem;
  background:url(../img/pattern-dots.svg);opacity:.3;pointer-events:none
}
.founder .wrap>*{position:relative}
.founder img{box-shadow:0 24px 48px rgba(0,0,0,.35)}

/* cta: slow soft circles */
.cta{overflow:visible}
.cta::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 12% 20%,rgba(255,255,255,.14),transparent 22rem),
             radial-gradient(circle at 90% 85%,rgba(255,255,255,.12),transparent 20rem);
  /* fade in from the top so the glow never meets the wave edge */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9rem);
  mask-image:linear-gradient(180deg,transparent 0,#000 9rem)
}
.cta .wrap{position:relative;z-index:1}

/* cards and rows */
.course,.courses>*,.price-card,.voice,.duo>*{transition:transform .25s,box-shadow .25s,border-color .25s}
.price-card:hover,.voice:hover,.duo>*:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(46,40,34,.1)}
.courses>*{position:relative;overflow:hidden}
.courses>*::before{
  content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--terra);
  transform:scaleX(0);transform-origin:left;transition:transform .4s
}
.courses>*:hover::before{transform:scaleX(1)}
.why-list li{transition:padding-left .25s}
.why-list li:hover{padding-left:.6rem}
.checks li::before{transition:transform .3s}
.checks li:hover::before{transform:scale(1.35)}
.area-tags li{transition:background .2s,transform .2s,color .2s}
.area-tags li:hover{background:var(--sage);color:#fff;transform:translateY(-2px)}
.eyebrow::before{
  content:"";display:inline-block;width:1.6rem;height:2px;background:currentColor;
  vertical-align:middle;margin-right:.7rem;transform-origin:left;transition:transform .6s .2s
}
.reveal .eyebrow::before,.eyebrow.reveal::before{transform:scaleX(0)}
.is-in .eyebrow::before,.eyebrow.is-in::before{transform:scaleX(1)}
.btn,.wp-block-button__link{position:relative;overflow:hidden}
.btn::after,.wp-block-button__link::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s
}
.btn:hover::after,.wp-block-button__link:hover::after{transform:translateX(120%)}
@keyframes pulse{0%,100%{box-shadow:0 6px 18px rgba(194,87,51,.28)}50%{box-shadow:0 6px 30px rgba(194,87,51,.55)}}
.hero-actions .wp-block-button__link{animation:pulse 3s ease-in-out 2s infinite}

/* thin progress bar under the header */
.scroll-bar{
  position:fixed;left:0;top:0;height:3px;width:100%;z-index:60;background:var(--terra);
  transform:scaleX(var(--p,0));transform-origin:left;pointer-events:none
}
.admin-bar .scroll-bar{top:32px}

@media (max-width:900px){
  .tuition::after,.areas::after,.band-2:has(.checks)::after,.hero::after,.founder .wrap::before{display:none}
  .reveal-left,.reveal-right{transform:translateY(28px)}
  .admin-bar .scroll-bar{top:46px}
}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-copy>*,.hero-photo figure,.seal,.tuition::after,.areas::after,.band-2:has(.checks)::after,
  .hero-actions .wp-block-button__link{animation:none}
  .btn::after,.wp-block-button__link::after{display:none}
}

/* ---------- course icons ---------- */
.courses>*{padding-top:6.2rem}
.courses>*::after{
  content:"";position:absolute;left:1.8rem;top:1.6rem;width:3.6rem;height:3.6rem;
  background:center/contain no-repeat;border-radius:1.1rem;
  box-shadow:0 6px 14px rgba(194,87,51,.16);
  transition:transform .35s cubic-bezier(.3,1.6,.5,1),box-shadow .3s
}
.courses>*:hover::after{transform:translateY(-3px) rotate(-8deg) scale(1.1);box-shadow:0 12px 22px rgba(194,87,51,.26)}
.courses>:nth-child(1)::after{background-image:url(../img/icons/talk.svg)}
.courses>:nth-child(2)::after{background-image:url(../img/icons/business.svg)}
.courses>:nth-child(3)::after{background-image:url(../img/icons/toeic.svg)}
.courses>:nth-child(4)::after{background-image:url(../img/icons/eiken.svg)}
.courses>:nth-child(5)::after{background-image:url(../img/icons/medical.svg)}
.courses>:nth-child(6)::after{background-image:url(../img/icons/travel.svg)}
.courses>:nth-child(7)::after{background-image:url(../img/icons/service.svg)}
@media (prefers-reduced-motion:reduce){.courses>*::after{transition:none}}

/* ---------- about section illustration ---------- */
#page:not(.is-subpage) main>section:first-of-type{position:relative}
#page:not(.is-subpage) main>section:first-of-type::after{
  content:"";position:absolute;pointer-events:none;z-index:0;
  top:4.5rem;right:max(1.5rem,calc((100% - 64rem)/2 + 1.5rem));
  width:clamp(10rem,20vw,17.5rem);aspect-ratio:400/340;
  background:url(../img/illus-lesson.svg) center/contain no-repeat
}
#page:not(.is-subpage) main>section:first-of-type .wrap{position:relative;z-index:1}
@media (max-width:900px){
  #page:not(.is-subpage) main>section:first-of-type::after{
    position:static;display:block;margin:2rem auto 0;width:min(18rem,80%)
  }
}