/* Canonical FV and section rhythm. Loaded last on every lesson page. */

/* Section backgrounds: adjacent sections always change tone. */
.page-home main > section:nth-of-type(1) { background-color: #020b16 !important; color: #f7fbff; }
.page-home main > section:nth-of-type(2) { background-color: #eaf7ff !important; color: #03101a; }
.page-home main > section:nth-of-type(3) { background-color: #071525 !important; color: #f7fbff; }
.page-home main > section:nth-of-type(4) { background-color: #020b16 !important; color: #f7fbff; }

.page-snow main > section:nth-of-type(2) { background-color: #eaf7ff !important; color: #03101a; }
.page-snow main > section:nth-of-type(3) { background-color: #020b16 !important; color: #f7fbff; }
.page-snow main > section:nth-of-type(4) { background-color: #071525 !important; color: #f7fbff; }
.page-snow main > section:nth-of-type(5) { background-color: #000812 !important; color: #f7fbff; }
.page-snow main > section:nth-of-type(7) { background-color: #071525 !important; color: #f7fbff; }
.page-snow main > section:nth-of-type(8) { background-color: #000812 !important; color: #f7fbff; }
.page-snow main > section:nth-of-type(9) { background-color: #eaf7ff !important; color: #03101a; }
.page-snow main > section:nth-of-type(10) { background-color: #071525 !important; color: #f7fbff; }
.page-snow main > section:nth-of-type(11) { background-color: #000812 !important; color: #f7fbff; }
.page-snow main > section:nth-of-type(12) { background-color: #071525 !important; color: #f7fbff; }
.page-snow main > section:nth-of-type(13) { background-color: #020b16 !important; color: #f7fbff; }

.page-trampoline main > section:nth-of-type(2) { background-color: #eaf7ff !important; color: #06111c; }
.page-trampoline main > section:nth-of-type(3) { background-color: #020b16 !important; color: #f7fbff; }
.page-trampoline main > section:nth-of-type(4) { background-color: #071525 !important; color: #f7fbff; }
.page-trampoline main > section:nth-of-type(5) { background-color: #eaf7ff !important; color: #06111c; }
.page-trampoline main > section:nth-of-type(6) { background-color: #020b16 !important; color: #f7fbff; }
.page-trampoline main > section:nth-of-type(7) { background-color: #eaf7ff !important; color: #06111c; }
.page-trampoline main > section:nth-of-type(8) { background-color: #071525 !important; color: #f7fbff; }
.page-trampoline main > section:nth-of-type(9) { background-color: #020b16 !important; color: #f7fbff; }
.page-trampoline main > section:nth-of-type(10) { background-color: #eaf7ff !important; color: #06111c; }

.page-indoor main > section:nth-of-type(2) { background-color: #071525 !important; color: #f7fbff; }
.page-indoor main > section:nth-of-type(3) { background-color: #eaf7ff !important; color: #06111c; }
.page-indoor main > section:nth-of-type(4) { background-color: #020b16 !important; color: #f7fbff; }
.page-indoor main > section:nth-of-type(5) { background-color: #eaf7ff !important; color: #06111c; }
.page-indoor main > section:nth-of-type(6) { background-color: #071525 !important; color: #f7fbff; }
.page-indoor main > section:nth-of-type(7) { background-color: #eaf7ff !important; color: #06111c; }
.page-indoor main > section:nth-of-type(8) { background-color: #020b16 !important; color: #f7fbff; }
.page-indoor main > section:nth-of-type(9) { background-color: #071525 !important; color: #f7fbff; }

.page-online main > section:nth-of-type(2) { background-color: #eaf7ff !important; color: #03101a; }
.page-online main > section:nth-of-type(3) { background-color: #020b16 !important; color: #f7fbff; }
.page-online main > section:nth-of-type(4) { background-color: #071525 !important; color: #f7fbff; }
.page-online main > section:nth-of-type(5) { background-color: #000812 !important; color: #f7fbff; }
.page-online main > section:nth-of-type(6) { background-color: #071525 !important; color: #f7fbff; }
.page-online main > section:nth-of-type(7) { background-color: #eaf7ff !important; color: #03101a; }
.page-online main > section:nth-of-type(8) { background-color: #020b16 !important; color: #f7fbff; }
.page-online main > section:nth-of-type(9) { background: linear-gradient(145deg, #071525, #020b16) !important; color: #f7fbff; }
.page-online main > section:nth-of-type(10) { background-color: #020b16 !important; color: #f7fbff; }

/* Compact coach identity on the lesson entrance page. */
.page-home .profile {
  display: block !important;
}
.page-home .profile-copy {
  width: 100%;
}
.page-home .profile-name {
  display: flex;
  align-items: flex-end;
  gap: .25em;
}
.page-home .profile-name img {
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
  border-radius: 50%;
  object-fit: cover;
}

.page-snow main > section.guarantee {
  background: linear-gradient(120deg, rgba(49,216,243,.18), rgba(2,11,22,.58));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Seam-free FV imagery. The photograph itself fades into the black canvas. */
.page-home .hero-shell,
.page-snow .hero,
.page-online .hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #020b16 !important;
}
.page-home .hero-shell::before,
.page-snow .hero::before,
.page-online .hero::before {
  content: "" !important;
  display: block !important;
  opacity: 1 !important;
  position: absolute !important;
  inset: 0 0 0 42% !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background-position: right top !important;
  background-size: auto 100% !important;
  background-repeat: no-repeat !important;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.12) 12%, #000 43%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.12) 12%, #000 43%, #000 100%);
  z-index: 0 !important;
  pointer-events: none;
}
.page-home .hero-shell::before { background-image: url("home-hero-gradient-v7.webp") !important; }
.page-snow .hero::before { background-image: url("snow-hero-gradient-v1.webp") !important; }
.page-online .hero::before { background-image: url("online-hero-gradient-v1.webp") !important; }
.page-home .hero-shell::after,
.page-snow .hero::after,
.page-online .hero::after {
  content: "" !important;
  display: block !important;
  opacity: 1 !important;
  position: absolute !important;
  inset: 0 !important;
  background-color: transparent !important;
  background-image: linear-gradient(90deg, #020b16 0%, rgba(2,11,22,.97) 35%, rgba(2,11,22,.58) 63%, rgba(2,11,22,.02) 92%) !important;
  z-index: 1 !important;
  pointer-events: none;
}
.page-home .hero-shell > .hero,
.page-snow .hero > .wrap,
.page-online .hero > .hero-grid {
  position: relative;
  z-index: 2;
}
.page-trampoline .hero,
.page-indoor .hero {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  background-color: #020b16 !important;
}
.page-trampoline .hero > img,
.page-indoor .hero > img { z-index: 0 !important; }
.page-trampoline .hero::after,
.page-indoor .hero::after {
  content: "" !important;
  display: block !important;
  opacity: 1 !important;
  position: absolute !important;
  inset: 0 !important;
  background-color: transparent !important;
  background-image: linear-gradient(90deg, #020b16 0%, rgba(2,11,22,.98) 32%, rgba(2,11,22,.62) 59%, rgba(2,11,22,.05) 84%) !important;
  z-index: 1 !important;
  pointer-events: none;
}
.page-trampoline .hero > .hero-copy,
.page-indoor .hero > .hero-copy { position: relative; z-index: 2; }

@media (min-width: 761px) {
  .page-home .hero-shell,
  .page-snow .hero,
  .page-trampoline .hero,
  .page-indoor .hero,
  .page-online .hero { min-height: clamp(640px, calc(100svh - 68px), 820px) !important; }

  .page-snow .hero { align-items: flex-start !important; }
  .page-trampoline .hero > img,
  .page-indoor .hero > img {
    inset: 0 0 0 auto !important;
    width: auto !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: right top !important;
    background: #020b16 !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.12) 14%, #000 45%, #000 100%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.12) 14%, #000 45%, #000 100%);
  }
  .page-trampoline .hero:after,
  .page-indoor .hero:after {
    background-color: transparent !important;
    background-image: linear-gradient(90deg, #020b16 0%, rgba(2,11,22,.98) 32%, rgba(2,11,22,.62) 59%, rgba(2,11,22,.05) 84%) !important;
  }
  .page-home .hero-copy,
  .page-snow .hero-copy,
  .page-online .online-hero-copy { padding-top: 24px !important; align-self: start !important; }
  .page-trampoline .hero-copy,
  .page-indoor .hero-copy {
    width: min(56%, 680px) !important;
    max-width: 680px !important;
    margin-left: max(20px, calc((100vw - 1100px) / 2)) !important;
    margin-right: 0 !important;
    padding-top: 24px !important;
    padding-bottom: 28px !important;
    align-self: start !important;
  }
  .page-online .hero-grid { align-items: start !important; }
}

@media (max-width: 760px) {
  .page-trampoline .trampoline-hero .hero-copy {
    min-width: 0;
    max-width: 100%;
  }
  .page-trampoline .trampoline-hero h1 {
    max-width: 100%;
    font-size: clamp(2.2rem, 10vw, 3.5rem);
    overflow-wrap: anywhere;
    word-break: normal;
    text-wrap: balance;
  }
  .page-home .profile {
    display: block !important;
  }
  .page-home .profile-name {
    gap: .25em;
  }
  .page-home .profile-name img {
    width: 84px;
    height: 84px;
    flex-basis: 84px;
  }
  .page-home .hero-shell,
  .page-snow .hero,
  .page-trampoline .hero,
  .page-indoor .hero,
  .page-online .hero { min-height: 620px !important; height: auto !important; }

  .page-home .hero-shell::before,
  .page-snow .hero::before,
  .page-online .hero::before {
    inset: 0 !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.08) 15%, #000 48%, #000 100%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.08) 15%, #000 48%, #000 100%);
  }
  .page-home .hero-shell::after,
  .page-snow .hero::after,
  .page-online .hero::after {
    background-color: transparent !important;
    background-image: linear-gradient(90deg, #020b16 0%, rgba(2,11,22,.96) 36%, rgba(2,11,22,.60) 66%, rgba(2,11,22,.03) 96%) !important;
  }
  .page-trampoline .hero > img,
  .page-indoor .hero > img {
    inset: 0 0 0 auto !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: right top !important;
    background: #020b16 !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.08) 15%, #000 48%, #000 100%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.08) 15%, #000 48%, #000 100%);
  }
  .page-trampoline .hero:after,
  .page-indoor .hero:after {
    background-color: transparent !important;
    background-image: linear-gradient(90deg, rgba(2,11,22,.97) 0%, rgba(2,11,22,.72) 50%, rgba(2,11,22,.09) 91%) !important;
  }
  .page-home .hero,
  .page-snow .hero-copy,
  .page-trampoline .hero-copy,
  .page-indoor .hero-copy,
  .page-online .hero-grid {
    padding-top: 14px !important;
    padding-bottom: 22px !important;
    align-self: start !important;
  }
  .page-trampoline .hero-copy,
  .page-indoor .hero-copy {
    width: min(100% - 28px, 1100px) !important;
    max-width: none !important;
    margin: 0 auto !important;
  }
  .page-online .online-hero-copy { padding-top: 0 !important; }
}

/* Wide-screen FV fix. The source photos are portrait-oriented, so the image
   layer is capped at the right edge and faded where the actual photo begins. */
@media (min-width: 761px) {
  .page-home .hero-shell::before,
  .page-snow .hero::before,
  .page-online .hero::before {
    inset: 0 0 0 auto !important;
    width: clamp(560px, 48vw, 820px) !important;
    background-position: right top !important;
    background-size: auto 100% !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.08) 25%, rgba(0,0,0,.72) 58%, #000 78%, #000 100%) !important;
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.08) 25%, rgba(0,0,0,.72) 58%, #000 78%, #000 100%) !important;
  }
  .page-home .hero-shell::after,
  .page-snow .hero::after,
  .page-online .hero::after,
  .page-trampoline .hero::after,
  .page-indoor .hero::after {
    inset: 0 !important;
    width: 100% !important;
    background: linear-gradient(90deg, #020b16 0%, rgba(2,11,22,.94) 25%, rgba(2,11,22,.70) 43%, rgba(2,11,22,.34) 61%, rgba(2,11,22,.08) 79%, rgba(2,11,22,0) 100%) !important;
  }
}

/* Entrance FV test: the fade is baked into the photograph itself so the
   photo stays bright while its left edge always meets the black canvas. */
.page-home .hero-shell::before {
  background-image: url("home-hero-gradient-v7.webp") !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.page-home .hero-shell::after {
  background: none !important;
}

/* The native English entrance now uses the exact same prepared hero image and
   crop as the Japanese entrance instead of its former centre-cropped photo. */
html[lang="en"] .page-home main > .hero {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  background: #020b16 url("home-hero-gradient-v7.webp") right top / auto 100% no-repeat !important;
}
html[lang="en"] .page-home main > .hero::after { background: none !important; }
html[lang="en"] .page-home main > .hero .hero-copy {
  max-width: 620px;
  padding-top: 24px !important;
  padding-bottom: 38px !important;
}
@media (max-width:760px) {
  html[lang="en"] .page-home main > .hero {
    min-height:620px !important;
    background-position:right top !important;
    background-size:auto 100% !important;
  }
}

/* All service FVs use the same quadratic fade baked into each WebP. */
.page-snow .hero::before,
.page-online .hero::before,
.page-trampoline .hero > img,
.page-indoor .hero > img {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.page-snow .hero::after,
.page-online .hero::after,
.page-trampoline .hero::after,
.page-indoor .hero::after {
  background: none !important;
}