/* A quiet, tactile motion layer. All content is visible without JavaScript. */
:root { --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-spring: cubic-bezier(.2, 1.55, .4, 1); }
.word-clip { display: inline-block; overflow: clip; vertical-align: bottom; padding: .09em .06em; margin: -.09em -.06em; }
.motion-word { display: inline-block; transform-origin: 10% 100%; }
.header { transition: box-shadow .4s, background .4s; }
.header.has-scrolled { background: #fff9edf5; box-shadow: 0 8px 35px #3d245609; backdrop-filter: blur(16px); }
.reading-progress { position: absolute; bottom: 0; left: 0; height: 2px; width: 100%; background: linear-gradient(90deg,#f0c557,#d66caa,#8863d9); transform: scaleX(var(--read-progress,0)); transform-origin: left; pointer-events: none; }
.desktop-nav { position: relative; isolation: isolate; }
.desktop-nav .nav-marker { position: absolute; z-index: -1; top: 4px; height: calc(100% - 8px); left: -11px; width: var(--nav-width,0px); border-radius: 30px; background: #ede4f6; opacity: var(--nav-visible,0); translate: var(--nav-left,0px) 0; transition: translate .5s var(--ease-out), width .5s var(--ease-out), opacity .3s; pointer-events: none; }
.desktop-nav a[aria-current="location"] { color: var(--purple); }
.desktop-nav a:after { transition: right .4s var(--ease-out); }

/* The fill blooms from the point where the pointer enters. */
.button.motion-button { position: relative; overflow: hidden; isolation: isolate; translate: var(--magnet-x,0px) var(--magnet-y,0px); transition: translate .55s var(--ease-out), box-shadow .4s, background .3s; }
.button.motion-button::before { content: ''; position: absolute; z-index: -1; left: var(--ink-x,50%); top: var(--ink-y,100%); width: 230%; aspect-ratio: 1; border-radius: 50%; background: #4d2dad; transform: translate(-50%,-50%) scale(0); transition: transform .6s var(--ease-out); pointer-events: none; }
.button-yellow.motion-button::before { background: #ffe79a; }
.button.motion-button:hover { transform: none; }
.button.motion-button:focus-visible::before { transform: translate(-50%,-50%) scale(1); }
.button > .button-content { display: inline-flex; align-items: center; justify-content: center; gap: inherit; font-size: inherit; line-height: inherit; position: relative; }
.button-content > [aria-hidden] { transition: transform .5s var(--ease-spring); }
.button:focus-visible .button-content > [aria-hidden] { transform: rotate(8deg) translate(2px,-2px); }
.button.motion-button:active { scale: .97; }
.text-link span { display: inline-block; transition: translate .4s var(--ease-spring); }
.text-link:is(:hover,:focus-visible) span { translate: 5px 0; }
.brand img { transform-origin: center 80%; transition: transform .6s var(--ease-spring); }
.brand:is(:hover,:focus-visible) img { transform: rotate(-12deg); }

/* Independent translate/rotate/scale keep the original illustrated composition. */
.hero-visual { --pointer-x: 0px; --pointer-y: 0px; --hero-drift: 0px; }
.motion-ready .hero-child { translate: calc(var(--pointer-x) * .36) calc(var(--pointer-y) * .28 + var(--hero-drift) * -.25); }
.motion-ready .hero-blob { translate: calc(var(--pointer-x) * -.35) calc(var(--pointer-y) * -.25); }
.motion-ready .hero-sticker { translate: calc(var(--pointer-x) * .85) calc(var(--pointer-y) * .7 + var(--hero-drift) * -.55); }
.motion-ready .hero-caption { translate: calc(var(--pointer-x) * -.4) calc(var(--pointer-y) * -.3); }
.motion-ready .hero-star { translate: calc(var(--pointer-x) * -.75) calc(var(--pointer-y) * -.6 + var(--hero-drift) * -.7); }
.motion-ready .hero-scribble { translate: calc(var(--pointer-x) * .5) calc(var(--pointer-y) * .4); }
.motion-ready .hero.is-onstage .hero-blob { animation: gentle-morph 12s ease-in-out infinite alternate; }
.motion-ready .hero.is-onstage .star-yellow { animation: sun-turn 42s linear infinite; }
.motion-ready .hero.is-onstage .orbit { animation: orbit-breathe 8s ease-in-out infinite; }
.motion-paused .hero * { animation-play-state: paused !important; }
@keyframes gentle-morph { from { border-radius: 48% 49% 38% 41% / 50% 50% 36% 36%; } to { border-radius: 42% 53% 43% 48% / 43% 42% 46% 40%; } }
@keyframes sun-turn { to { rotate: 360deg; } }
@keyframes orbit-breathe { 50% { scale: 1.035; opacity: .55; } }
.marker:after { transform-origin: left center; }
.motion-ready .marker:after { transform: rotate(-2deg) scaleX(.06); transition: transform .95s var(--ease-out) .35s; }
.motion-ready .is-revealed .marker:after { transform: rotate(-2deg) scaleX(1); }

.group-card { isolation: isolate; transform-style: preserve-3d; transition: transform .6s var(--ease-out), box-shadow .6s; }
.group-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at var(--light-x,50%) var(--light-y,30%),#ffffffb0,transparent 64%); opacity: 0; transition: opacity .45s; z-index: -1; pointer-events: none; }
.group-card .age { transition: transform .5s var(--ease-spring); }
.group-card .group-icon { transform-origin: center 80%; transition: transform .6s var(--ease-spring); }
.group-link > span { display: inline-block; transition: transform .5s var(--ease-spring); }
.group-card:focus-visible { transform: translateY(-6px); box-shadow: 0 15px 35px #37215712; }
.group-card:focus-visible .group-icon { transform: rotate(-8deg) translateY(-3px); }
.group-card:focus-visible .group-link > span { transform: translate(3px,-3px); }
.photo-button { transition: box-shadow .5s; }
.photo-button:is(:hover,:focus-visible) { box-shadow: 0 20px 60px #432b521c; }
.photo-button > img { transition: transform .9s var(--ease-out); }
.photo-expand { transition: transform .6s var(--ease-spring); }
.photo-button:is(:hover,:focus-visible) .photo-expand { transform: rotate(8deg) scale(1.1); }
.approach-list > li > span { transition: background .3s,color .3s,transform .4s var(--ease-spring); }
.approach-list > li:hover > span { background: var(--purple); color: #fff; transform: rotate(-7deg); }
.discovery-items i { rotate: var(--discovery-turn,0deg); }
.discovery-items > span:nth-child(odd) { translate: 0 var(--discovery-shift,0px); }
.discovery-items > span:nth-child(even) { translate: 0 calc(var(--discovery-shift,0px) * -1); }

.day-tabs::after { content: ''; position: absolute; top: 22px; left: 10%; height: 3px; border-radius: 5px; width: 80%; background: #c3acdF; transform: scaleX(var(--day-progress,.25)); transform-origin: left; transition: transform .7s var(--ease-out); pointer-events: none; }
.day-tab { z-index: 1; border-radius: 16px; transition: color .3s; }
.day-tab > span { transition: background .35s, border-color .35s, box-shadow .5s, transform .4s var(--ease-spring); }
.day-image-ghost { z-index: 1; pointer-events: none; }
.day-image-wrap .example-label { z-index: 2; }
.day-copy { overflow: hidden; }
.format-card { transition: border-color .45s, box-shadow .45s, transform .5s var(--ease-out); }
.format-card:focus-within { border-color: #cbb6ea; box-shadow: 0 12px 35px #4525700b; }
.faq-answer.is-transitioning { overflow: hidden; }
.faq-question { transition: color .25s; }
.faq-question:is(:hover,:focus-visible) { color: var(--purple); }
.faq-question > span { transition: transform .5s var(--ease-spring), background .3s, color .3s; }
dialog::backdrop { animation: backdrop-in .35s both; }
dialog.is-closing::backdrop { animation: backdrop-out .18s both; }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdrop-out { to { opacity: 0; } }
.dialog-close { transition: rotate .4s var(--ease-spring), background .3s; }
.dialog-close:hover { rotate: 90deg; }
input,select { transition: border-color .25s, box-shadow .3s; }
input:focus,select:focus { box-shadow: 0 0 0 5px #6441cd0c; }
.visit-section { overflow-x: clip; }
.celebration-bit { position: absolute; left: 52%; top: 45%; width: 9px; height: 9px; background: var(--bit-color); border-radius: var(--bit-radius,3px); pointer-events: none; z-index: 3; }
.back-top { transition: color .3s, translate .4s var(--ease-spring); }
.back-top:hover { translate: 0 -3px; }

@media (hover:hover) and (pointer:fine) {
  .button.motion-button:hover::before { transform: translate(-50%,-50%) scale(1); }
  .button:hover .button-content > [aria-hidden] { transform: rotate(8deg) translate(2px,-2px); }
  .group-card:hover { transform: perspective(800px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-8px); box-shadow: 0 22px 40px -20px #3721574a; }
  .group-card:hover::after { opacity: 1; }
  .group-card:hover .group-icon { transform: rotate(-9deg) translateY(-4px); }
  .group-card:hover .age { transform: rotate(4deg); }
  .group-card:hover .group-link > span { transform: translate(3px,-3px); }
  .format-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px #4525700b; border-color: #cbb6ea; }
}
@media (max-width:700px) {
  .day-tabs::after { top: 19px; }
  .motion-ready .hero.is-onstage .hero-blob, .motion-ready .hero.is-onstage .orbit { animation: none; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .motion-ready .marker:after { transform: rotate(-2deg); }
  .motion-ready .hero-child,.motion-ready .hero-blob,.motion-ready .hero-sticker,.motion-ready .hero-caption,.motion-ready .hero-star,.motion-ready .hero-scribble,.button.motion-button,.discovery-items > span { translate: none !important; }
  .group-card:hover,.format-card:hover { transform: none; }
}