/* Scroll-guided avatar used by the home-page narrative. */
.education-avatar-stage {
  --avatar-left: 84vw;
  --avatar-top: 52vh;
  --avatar-scale: 1;
  --avatar-rotate: 0deg;
  --avatar-facing: 1;
  --avatar-visibility: 1;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  width: clamp(180px, 15vw, 220px);
  aspect-ratio: 3 / 4;
  opacity: 0;
  pointer-events: none;
  isolation: isolate;
  transform:
    translate3d(var(--avatar-left), var(--avatar-top), 0)
    translate3d(-50%, -50%, 0)
    rotate(var(--avatar-rotate))
    scale(var(--avatar-scale));
  transform-origin: center;
  transition: opacity 320ms var(--ease);
  will-change: transform, opacity;
}

.has-education-avatar .education-avatar-stage { opacity: var(--avatar-visibility); }
.education-avatar-forced-static .education-avatar-stage {
  position: absolute;
  opacity: 1;
}
.education-avatar-stage.is-docked { opacity: 0.96; }

html:not(.js) .education-avatar-stage {
  --avatar-left: 84vw;
  --avatar-top: 520px;
  --avatar-scale: 2.4;
  position: absolute;
  opacity: 1;
}

[data-avatar-scene] > .shell,
[data-avatar-scene].shell {
  position: relative;
}

.home-avatar-anchor {
  display: block;
  width: auto;
  height: 300px;
  aspect-ratio: 3 / 4;
  pointer-events: none;
}

.home-avatar-anchor--hero {
  height: min(76vh, 760px);
}

.home-avatar-anchor:not(.home-avatar-anchor--hero) {
  position: absolute;
  top: 0;
  z-index: 0;
}

.home-avatar-anchor--left:not(.home-avatar-anchor--hero) {
  right: auto;
  left: calc(50% - 50vw + 24px);
}

.home-avatar-anchor--right:not(.home-avatar-anchor--hero) {
  right: calc(50% - 50vw + 120px);
  left: auto;
}

[data-avatar-scene="insight"] .home-avatar-anchor,
[data-avatar-scene="final"] .home-avatar-anchor {
  top: 50%;
  transform: translateY(-50%);
}

[data-avatar-scene="method"] .home-avatar-anchor {
  height: clamp(300px, 38vh, 400px);
}

@media (min-width: 921px) {
  html.js body:not(.education-avatar-forced-static) [data-avatar-scene="method"] .method-head {
    min-height: clamp(300px, 38vh, 400px);
  }

  html.js body:not(.education-avatar-forced-static) [data-avatar-scene="benefits"] .section-head {
    min-height: 300px;
    padding-left: 240px;
    display: flex;
    align-items: center;
  }

  html.js body:not(.education-avatar-forced-static) [data-avatar-scene="shop"] .section-head--split,
  html.js body:not(.education-avatar-forced-static) [data-avatar-scene="latest"] .section-head--split {
    min-height: 260px;
    align-items: center;
  }

  html.js body:not(.education-avatar-forced-static) [data-avatar-scene="shop"] .section-head--split {
    padding-right: 300px;
  }

  html.js body:not(.education-avatar-forced-static) [data-avatar-scene="latest"] .section-head--split {
    padding-left: 210px;
  }

  html.js body:not(.education-avatar-forced-static) [data-avatar-scene="faq"] .split {
    min-height: 260px;
    padding-right: 300px;
  }
}

[data-avatar-scene="shop"] .home-avatar-anchor,
[data-avatar-scene="latest"] .home-avatar-anchor,
[data-avatar-scene="faq"] .home-avatar-anchor {
  height: 260px;
}

[data-avatar-scene="hero"] .avatar-figure {
  display: block;
}

.education-avatar-media {
  position: absolute;
  inset: 0;
  transform: scaleX(var(--avatar-facing));
  transform-origin: center;
}

.education-avatar-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  visibility: hidden;
  image-rendering: auto;
  transform: scale(var(--avatar-content-scale, 1));
  transform-origin: center;
  transition:
    opacity 120ms ease,
    visibility 0s linear 120ms,
    transform 180ms var(--ease);
}

.education-avatar-layer.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
  will-change: opacity;
}

.education-avatar-stage.is-instant-handoff .education-avatar-layer {
  transition: none !important;
}

.education-avatar-control {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 41;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  cursor: pointer;
  isolation: isolate;
  transition: opacity 180ms ease;
}

.has-education-avatar .education-avatar-control {
  opacity: 0.52;
  visibility: visible;
  pointer-events: auto;
}

.education-avatar-control:hover,
.education-avatar-control:focus-visible {
  border-color: transparent;
  background: transparent;
  opacity: 1;
}

.education-avatar-control:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.education-avatar-control::after {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: -1;
  border: 1px solid rgba(26, 26, 26, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 6px 18px rgba(26, 26, 26, 0.09);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: border-color 180ms ease, background-color 180ms ease;
}

.education-avatar-control:hover::after,
.education-avatar-control:focus-visible::after {
  border-color: rgba(26, 26, 26, 0.42);
  background: rgba(255, 255, 255, 0.96);
}

.education-avatar-control::before {
  content: "";
  position: relative;
  z-index: 1;
  width: 2px;
  height: 9px;
  background: currentColor;
  box-shadow: 5px 0 0 currentColor;
  transform: translateX(-2.5px);
}

.education-avatar-control[aria-pressed="true"]::before {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid currentColor;
  background: transparent;
  box-shadow: none;
  transform: translateX(1px);
}
.education-avatar-control:disabled { display: none; }

.education-avatar-control-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1200px) {
  .education-avatar-control {
    z-index: 101;
    top: max(10px, env(safe-area-inset-top));
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 920px) {
  .education-avatar-stage { width: clamp(158px, 27vw, 205px); }

  [data-avatar-scene="hero"] .hero-visual {
    display: flex;
    grid-column: 1;
    grid-row: 2;
    justify-self: stretch;
    min-height: 345px;
    margin-top: var(--s4);
    overflow: hidden;
  }

  [data-avatar-scene="hero"] .hero-visual .avatar-figure {
    margin-right: clamp(16px, 5vw, 40px);
    padding-bottom: 0;
  }

  .home-avatar-anchor--hero { height: 345px; }

  .home-avatar-anchor:not(.home-avatar-anchor--hero),
  [data-avatar-scene="insight"] .home-avatar-anchor,
  [data-avatar-scene="final"] .home-avatar-anchor {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    height: 150px;
    margin-bottom: var(--s3);
    transform: none;
  }

  [data-avatar-scene="method"] .home-avatar-anchor { height: 164px; }
  [data-avatar-scene="shop"] .home-avatar-anchor,
  [data-avatar-scene="latest"] .home-avatar-anchor,
  [data-avatar-scene="faq"] .home-avatar-anchor { height: 140px; }
  .home-avatar-anchor--left:not(.home-avatar-anchor--hero) { margin-right: auto; }
  .home-avatar-anchor--right:not(.home-avatar-anchor--hero) { margin-left: auto; }
  .home-avatar-anchor--left:not(.home-avatar-anchor--hero) { margin-left: 16px; }
  .home-avatar-anchor--right:not(.home-avatar-anchor--hero) { margin-right: 16px; }

  .education-avatar-stage:is(
    [data-avatar-state="insight"],
    [data-avatar-state="method"],
    [data-avatar-state="benefits"],
    [data-avatar-state="shop"],
    [data-avatar-state="latest"],
    [data-avatar-state="faq"],
    [data-avatar-state="final"]
  ) {
    --avatar-content-scale: 1.18;
  }

  html:not(.js) .education-avatar-stage {
    --avatar-left: 78vw;
    --avatar-top: 470px;
    --avatar-scale: 1.28;
  }
}

@media (max-width: 560px) {
  .education-avatar-stage { width: clamp(138px, 40vw, 158px); }

  [data-avatar-scene="hero"] .hero-visual {
    min-height: 274px;
    margin-top: var(--s3);
  }

  [data-avatar-scene="hero"] .hero-visual .avatar-figure {
    margin-right: clamp(0px, 4vw, 20px);
  }

  .home-avatar-anchor--hero { height: 274px; }
  .home-avatar-anchor:not(.home-avatar-anchor--hero),
  [data-avatar-scene="insight"] .home-avatar-anchor,
  [data-avatar-scene="final"] .home-avatar-anchor { height: 96px; }
  [data-avatar-scene="method"] .home-avatar-anchor { height: 108px; }
  [data-avatar-scene="shop"] .home-avatar-anchor,
  [data-avatar-scene="latest"] .home-avatar-anchor,
  [data-avatar-scene="faq"] .home-avatar-anchor { height: 92px; }

  .home-avatar-anchor:not(.home-avatar-anchor--hero) { margin-bottom: var(--s2); }
  [data-avatar-scene="final"] .home-avatar-anchor { margin-bottom: var(--s4); }
  .home-avatar-anchor--left:not(.home-avatar-anchor--hero) { margin-left: 8px; }
  .home-avatar-anchor--right:not(.home-avatar-anchor--hero) { margin-right: 8px; }

  .education-avatar-stage:is(
    [data-avatar-state="insight"],
    [data-avatar-state="method"],
    [data-avatar-state="benefits"],
    [data-avatar-state="shop"],
    [data-avatar-state="latest"],
    [data-avatar-state="faq"],
    [data-avatar-state="final"]
  ) {
    --avatar-content-scale: 1.14;
  }

  .education-avatar-control { width: 44px; height: 44px; }

  html:not(.js) .education-avatar-stage {
    --avatar-left: 76vw;
    --avatar-top: 800px;
    --avatar-scale: 1.30;
  }
}

@media (max-width: 340px) {
  .education-avatar-stage { width: 132px; }
}

@media (prefers-reduced-motion: reduce) {
  .education-avatar-stage,
  .education-avatar-media,
  .education-avatar-layer,
  .education-avatar-control { transition: none !important; }
}

html:not(.js) [data-avatar-scene]:not([data-avatar-scene="hero"]) .home-avatar-anchor,
.education-avatar-forced-static [data-avatar-scene]:not([data-avatar-scene="hero"]) .home-avatar-anchor {
  display: none;
}

.education-avatar-before-footer .education-avatar-stage,
.education-avatar-before-footer .education-avatar-control,
.education-avatar-control-before-footer .education-avatar-control {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}