/* The dial, character and chapter transitions share one bottom-left pivot. */
:root {
  --orbit-x: clamp(80px, 9vw, 145px);
  --orbit-y: calc(100dvh - clamp(62px, 11dvh, 96px));
  --orbit-radius: clamp(180px, 18vw, 265px);
  --coo-size: clamp(240px, 26vw, 380px);
  --chapter-left: 47vw;
  --hero-wordmark-width: clamp(310px, 57vw, 680px);
  --hero-wordmark-height: clamp(69px, 12.56vw, 150px);
  --hero-wordmark-y: 32dvh;
}

.orbit { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.orbit-ring, .orbit-halo, .orbit-coo {
  position: absolute;
  left: var(--orbit-x);
  top: var(--orbit-y);
  translate: -50% -50%;
}
.orbit-ring { width: calc(var(--orbit-radius) * 2); aspect-ratio: 1; }
.orbit-ring::before, .orbit-ring::after {
  content: ""; position: absolute; inset: -55px; border: 1px solid color-mix(in srgb, var(--accent) 9%, transparent); border-radius: 50%;
}
.orbit-ring::after { inset: 42px; border-color: color-mix(in srgb, var(--accent) 13%, transparent); }
.orbit-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit-rotor { stroke: color-mix(in srgb, var(--ink) 13%, transparent); transform: rotate(var(--dial-turn, 0deg)); }
.orbit-rotor circle { stroke: color-mix(in srgb, var(--accent) 22%, transparent); }
.orbit-indicator { transform: rotate(var(--indicator-angle, -96deg)); stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.orbit-indicator circle { fill: var(--accent); stroke-width: 0; }
.orbit-rotor, .orbit-indicator { transition: transform .72s cubic-bezier(.22,1,.36,1); }
.orbit-halo {
  width: calc(var(--coo-size) * 1.65); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 8%, transparent), transparent 66%);
}
.orbit-coo {
  width: var(--coo-size); height: var(--coo-size); padding: 0; border-radius: 50%;
  pointer-events: auto; cursor: pointer; color: var(--ink);
}
.orbit-coo-tilt { display: block; transform: rotate(calc(-10deg + var(--coo-tilt, 0deg))); transition: transform .6s cubic-bezier(.22,1.25,.36,1), scale .45s; }
.orbit-coo svg { width: 100%; height: 100%; overflow: visible; transform-origin: center; }
.orbit-coo .ink { stroke: var(--ink); }
.orbit-coo .eye { stroke: var(--accent); }
.orbit-coo .blush { fill: #ff8fa8; }
.orbit-coo:focus-visible { outline-offset: -45px; }
.is-curious .orbit-coo-tilt { scale: 1.035; }

.orbit-navigation { position: fixed; inset: 0; z-index: 40; transform: none; display: block; pointer-events: none; }
.orbit-navigation a {
  position: absolute;
  left: calc(var(--orbit-x) + var(--orbit-radius) * var(--slot-x));
  top: calc(var(--orbit-y) + var(--orbit-radius) * var(--slot-y));
  translate: -50% -50%;
  width: auto; height: 42px; display: flex; align-items: center; gap: 11px;
  padding: 0 16px 0 11px; pointer-events: auto; border-radius: 99px;
  background: var(--paper); border: 1px solid var(--line-2); color: var(--ink-soft);
  transition: color .2s, background .2s, border-color .2s, transform .35s cubic-bezier(.22,1,.36,1);
}
.orbit-navigation i { width: auto; height: auto; background: none; opacity: .6; font: 10px var(--mono); box-shadow: none; }
.orbit-navigation span { position: static; opacity: 1; transform: none; color: inherit; font-size: 11px; }
.orbit-navigation [aria-current="page"] { color: var(--sheet); background: var(--ink); border-color: var(--ink); }
.orbit-navigation [aria-current="page"] i { background: none; color: #80d3b3; box-shadow: none; opacity: 1; }
.orbit-navigation a:hover, .orbit-navigation a:focus-visible { transform: translateY(-4px); border-color: var(--accent); color: var(--accent); }
.orbit-navigation [aria-current="page"]:is(:hover,:focus-visible) { color: white; }

/* Keep this delay independent of the wordmark intro, which finishes earlier. */
html[data-orbit-intro] { --orbit-arrival-delay: .08s; }
html[data-orbit-intro="home"] { --orbit-arrival-delay: 1.68s; }
html[data-orbit-intro] .orbit-coo {
  animation: orbit-arrive 1.05s cubic-bezier(.22,.8,.28,1) var(--orbit-arrival-delay) both;
}
html[data-orbit-intro] .orbit-ring {
  animation: orbit-unfurl .86s cubic-bezier(.22,1,.36,1) calc(var(--orbit-arrival-delay) + .06s) both;
}
html[data-orbit-intro] .orbit-halo {
  animation: orbit-unfurl .8s ease-out calc(var(--orbit-arrival-delay) + .12s) both;
}
html[data-orbit-intro] .orbit-navigation a {
  animation: orbit-slot-in .46s cubic-bezier(.22,1.2,.36,1) calc(var(--orbit-arrival-delay) + .27s + var(--slot-index, 0) * .065s) both;
}
@keyframes orbit-arrive {
  0% { opacity: 0; transform: translate(-65%, 70%) rotate(-105deg) scale(.78); }
  18% { opacity: 1; }
  66% { transform: translate(2%, -6%) rotate(9deg) scale(1.04, .97); }
  83% { transform: translate(0, 2%) rotate(-4deg) scale(.98, 1.02); }
  100% { opacity: 1; transform: none; }
}
@keyframes orbit-unfurl {
  from { opacity: 0; transform: rotate(-24deg) scale(.68); }
  to { opacity: 1; transform: none; }
}
@keyframes orbit-slot-in {
  from { opacity: 0; transform: translate(calc(var(--slot-x) * -34px), calc(var(--slot-y) * -34px)) scale(.8); }
  to { opacity: 1; transform: none; }
}

.brand:not(.is-folded) {
  left: 50%; top: var(--hero-wordmark-y); width: var(--hero-wordmark-width); height: var(--hero-wordmark-height);
}
.brand:not(.is-folded) svg { width: var(--hero-wordmark-width); }
.home-eyebrow { left: 50%; top: calc(var(--hero-wordmark-y) - var(--hero-wordmark-height) / 2 - 28px); transform: translateX(-50%); letter-spacing: .2em; }
.home-copy { left: 24px; right: 24px; top: calc(var(--hero-wordmark-y) + var(--hero-wordmark-height) / 2 + 26px); text-align: center; }
.home-title { font-size: clamp(30px, 3.7vw, 57px); font-weight: 500; line-height: 1.4; letter-spacing: -.055em; margin-bottom: 17px; }
.greeting-dot { color: var(--accent); }
.home-description { font-size: 14px; line-height: 1.9; color: var(--ink-soft); }
.home-next { display: inline-flex; align-items: center; gap: 13px; margin-top: 34px; font-size: 11px; color: var(--ink-soft); }
.scroll-orb { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line-2); border-radius: 50%; font-size: 17px; transition: transform .3s, border-color .3s; }
.home-next:hover .scroll-orb { transform: translateY(4px); border-color: var(--accent); }
.scroll-touch { display: none; }

.page { padding: 105px 6vw 75px var(--chapter-left); justify-content: flex-start; }
.page-content { width: 100%; max-width: 640px; }
.companion-content, .download-content { text-align: left; }
.page-content h2 { font-size: clamp(34px, 3.4vw, 52px); letter-spacing: -.05em; line-height: 1.4; }
.page-content .eyebrow { margin-bottom: 17px; }
.qualities { display: grid; grid-template-columns: 1fr; gap: 0; margin: 27px 0 0; max-width: 480px; }
.qualities > div { display: grid; position: relative; grid-template-columns: 74px 1fr; align-items: start; gap: 18px; border: 0; border-top: 1px solid var(--line); padding: 16px 0 16px 32px !important; }
.qualities .quality-number { position: absolute; left: 0; top: 19px; }
.qualities h3 { font-size: 15px; margin: 0; line-height: 1.8; }
.qualities p { font-size: 12px; line-height: 1.8; }
.qualities br { display: none; }
.appearance-content { display: flex; flex-direction: column; align-items: stretch; gap: 23px; max-width: 580px; }
.appearance-copy h2 br { display: none; }
.appearance-copy h2 { font-size: clamp(28px, 2.5vw, 40px); }
.appearance-copy .eyebrow, .appearance-copy .section-description { display: none; }
.wardrobe { gap: 16px; }
.wardrobe-panel { min-height: 214px; }
.wardrobe-panel .opts { gap: 8px; }
.wardrobe-panel .opt.wide { width: calc((100% - 24px) / 4); min-width: 78px; }
.wardrobe-status { font-size: 11px; }
.download-content { max-width: 420px; }
.download-content .download-links { justify-content: flex-start; }

.paged .page { transform-origin: var(--orbit-x) var(--orbit-y); }
.paged .page.is-leaving { animation: page-leave .24s ease-in both; }
.paged .page.is-entering { animation: page-enter .62s cubic-bezier(.22,1,.36,1) .07s both; }
.paged .page:is(.is-entering,.is-leaving) { will-change: opacity, transform; }
@keyframes page-enter {
  from { opacity: 0; transform: rotate(calc(9deg * var(--page-direction,1))); }
  to { opacity: 1; transform: rotate(0deg); }
}
@keyframes page-leave {
  from { opacity: 1; transform: rotate(0deg); }
  to { opacity: 0; transform: rotate(calc(-6deg * var(--page-direction,1))); }
}

@media (max-width: 1000px) and (min-width: 701px) {
  :root { --orbit-x: 76px; --orbit-radius: 180px; --coo-size: 250px; --chapter-left: 42vw; }
  .page { padding-right: 5vw; }
  .home-title { font-size: 34px; }
  .wardrobe-panel .opt.wide { min-width: 0; width: calc((100% - 24px) / 4); }
  .qualities > div { grid-template-columns: 61px 1fr; gap: 10px; padding-left: 26px !important; }
}

@media (max-width: 700px) {
  :root { --orbit-x: 28px; --orbit-y: calc(100dvh - 28px); --orbit-radius: 82px; --coo-size: 120px; --chapter-left: 28px; --hero-wordmark-width: 81vw; --hero-wordmark-height: 17.85vw; --hero-wordmark-y: 25dvh; }
  body[data-page="0"] { --orbit-x: 48px; --orbit-y: calc(100dvh - 44px); --orbit-radius: min(37vw, 156px); --coo-size: min(58vw, 240px); }
  .orbit-ring::before { inset: -25px; }
  .orbit-ring::after { inset: 22px; }
  .orbit-coo { transition: width .65s, height .65s, left .65s, top .65s; }
  .orbit-navigation a { width: 32px; height: 32px; padding: 0; justify-content: center; }
  .orbit-navigation span { display: none; }
  .orbit-navigation i { font-size: 10px; opacity: .8; }
  .orbit-coo:focus-visible { outline-offset: -15px; }
  .home-eyebrow { left: 50%; top: calc(25dvh - 8.925vw - 25px); transform: translateX(-50%); font-size: 9px; }
  .home-copy { left: 28px; right: 28px; top: calc(25dvh + 8.925vw + 22px); text-align: center; }
  .home-title { font-size: clamp(29px, 7.7vw, 39px); margin-bottom: 9px; }
  .home-description { font-size: 12px; line-height: 1.8; }
  .home-description br { display: none; }
  .home-next { margin-top: 20px; font-size: 10px; gap: 9px; }
  .scroll-orb { width: 30px; height: 30px; font-size: 15px; }
  .scroll-desktop { display: none; }
  .scroll-touch { display: inline; }
  .page { padding: 86px 28px 110px; }
  .page-content { max-width: 460px; margin-inline: auto; }
  .page-content h2 { font-size: 34px; }
  .page-content .eyebrow { font-size: 9px; }
  .qualities { margin-top: 23px; }
  .qualities > div { grid-template-columns: 62px 1fr; gap: 10px; padding: 12px 0 12px 26px !important; }
  .qualities .quality-number { top: 16px; }
  .qualities h3 { font-size: 13px; }
  .qualities p { font-size: 11px; }
  .appearance-content { gap: 17px; }
  .appearance-copy h2 { font-size: 26px; }
  .wardrobe-panel { min-height: 220px; }
  .wardrobe-panel .opt.wide { min-width: 0; width: calc((100% - 16px) / 3); }
  .wardrobe-status { font-size: 10px; }
  .download-content { max-width: 350px; }
  .page-footer { bottom: 20px; }
}

@media (max-width: 700px) and (max-height: 680px) {
  body[data-page="0"] { --orbit-radius: min(34vw, 130px); --coo-size: min(53vw, 200px); --orbit-y: calc(100dvh - 32px); }
  .home-copy { top: calc(25dvh + 8.925vw + 14px); }
  .home-next { margin-top: 14px; }
  .home-description { font-size: 11px; }
  .page { padding: 78px 26px 56px; }
  .page-content h2 { font-size: 28px; }
  .qualities { margin-top: 17px; }
  .qualities > div { padding-block: 9px !important; }
  .qualities .quality-number { top: 13px; }
  .appearance-content, .wardrobe { gap: 10px; }
  .appearance-copy h2 { font-size: 22px; }
  .wardrobe-panel { min-height: 0; }
  .wardrobe-figures .coo-preview, .wardrobe-figures img { display: none; }
  .wardrobe-panel .opts { gap: 6px; }
  .wardrobe-panel .opt.wide { width: calc((100% - 12px) / 3); }
  .wardrobe-status { margin-top: 6px; }
}

@media (max-height: 620px) and (min-width: 701px) {
  :root { --orbit-x: 76px; --orbit-y: calc(100dvh - 44px); --orbit-radius: 165px; --coo-size: 240px; --hero-wordmark-y: 27dvh; }
  .page { padding-top: 80px; padding-bottom: 25px; }
  .appearance-content { gap: 12px; }
  .wardrobe { gap: 10px; }
  .wardrobe-panel { min-height: 180px; }
  .wardrobe-figures .coo-preview, .wardrobe-figures img { display: none; }
  .page-content h2 { font-size: 32px; }
  .qualities { margin-top: 18px; }
  .qualities > div { padding-block: 10px !important; }
  .qualities .quality-number { top: 13px; }
}

html:not(.paged) .orbit { display: none; }
@media (prefers-reduced-motion: reduce) {
  .orbit *, .orbit-navigation a, .page { animation: none !important; transition: none !important; }
}