/* BRASSLINE performs on a shared color clock with different chapter rhythms. */
main section { isolation:isolate }
main section:not(.hero) { overflow:hidden }
main section > :not(.chromatic-field) { position:relative;z-index:1 }
.chromatic-field { position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none }
.chromatic-field i { position:absolute;inset:-12%;display:block;opacity:0;transform:scale(1.12);background:var(--wash-one);animation:color-loop 18s ease-in-out infinite }
.chromatic-field i:nth-child(2) { background:var(--wash-two);animation-delay:6s }
.chromatic-field i:nth-child(3) { background:var(--wash-three);animation-delay:12s }
@media(prefers-reduced-motion:no-preference) {
  .chromatic-field i { animation-play-state:paused }
  main section.color-active .chromatic-field i { animation-play-state:running }
}
.hero { --wash-one:radial-gradient(circle at 47% 42%,#8a3529 0%,#371c19 48%,#151114 95%);--wash-two:radial-gradient(circle at 30% 65%,#805026 0%,#34251d 48%,#171317 95%);--wash-three:radial-gradient(circle at 75% 22%,#a5392a 0%,#421b20 47%,#151114 95%) }
.purpose { --wash-one:linear-gradient(120deg,#ef7643,#bd392d);--wash-two:linear-gradient(120deg,#f5ad51,#cf5832);--wash-three:linear-gradient(120deg,#dd4b39,#f18147) }
.whatif { --wash-one:radial-gradient(circle at 80% 20%,#b94a29,#53221f 65%,#1b1718);--wash-two:radial-gradient(circle at 20% 70%,#8d5030,#42211d 62%,#1b1718);--wash-three:radial-gradient(circle at 60% 35%,#99362e,#511f25 60%,#1b1718) }
.goal-section { --wash-one:linear-gradient(120deg,#fff0c7,#f5b45b);--wash-two:linear-gradient(135deg,#fdd985,#e5a453);--wash-three:linear-gradient(120deg,#f9b969,#fff0ca) }
.principles { --wash-one:radial-gradient(circle at 75% 20%,#7d2c28,#22191a 75%);--wash-two:radial-gradient(circle at 20% 80%,#6e492c,#21191a 75%);--wash-three:radial-gradient(circle at 60% 50%,#65312b,#21191a 75%) }
.field-notes { --wash-one:linear-gradient(110deg,#fdd376,#ed9660);--wash-two:linear-gradient(120deg,#f8b65d,#ffd77c);--wash-three:linear-gradient(110deg,#ffdf93,#efa559) }
.questions { --wash-one:linear-gradient(120deg,#a94331,#492322);--wash-two:linear-gradient(120deg,#79502d,#742c25);--wash-three:linear-gradient(120deg,#9c312b,#5d2725) }
.purpose-copy { background:linear-gradient(135deg,#ffe4b4e8,#ffe1c5e2);padding:clamp(1.2rem,2.5vw,2rem);box-shadow:14px 15px 0 #54201645;clip-path:polygon(0 0,96% 0,100% 8%,100% 100%,4% 100%,0 92%) }
.purpose-copy p { color:#271a15 }
.notes-heading>p:last-child { color:#3c2418 }
.notes-list a>span:first-child { color:#4c2c1a }
.questions>div:nth-of-type(2)>p:last-child { color:#fff0d5;font-size:1.12rem;max-width:25rem }
.questions .faq details p { color:#fff0d5 }
@keyframes color-loop {
  0%,100% { opacity:0;transform:scale(1.12) rotate(-5deg) }
  7%,24% { opacity:.68;transform:scale(1.03) rotate(0deg) }
  34% { opacity:0;transform:scale(1.12) rotate(5deg) }
}

/* The opening has a full kinetic sentence and an orbital set, never a twitch. */
.hero h1 em span { display:inline-block;transform-origin:50% 75% }
.hero h1 em span:nth-child(2) { transform-origin:25% 70% }
.hero .planner::before { content:"";position:absolute;inset:-10%;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 35%,#ffd26925 49%,transparent 62%);transform:translateX(-110%) rotate(-10deg) }
.hero-sequence span { transform-origin:left center }
.planner-result strong,.scenario-figures strong,.goal-readout strong,.share-values strong { transform-origin:left center }
.purpose-figure { transform-style:preserve-3d }
.figure-block { transform-origin:50% 95%;backface-visibility:visible }
.figure-ring { transform-origin:50% 50% }
.scenario-track span { transform-origin:left center }
.goal-stages i { transform-origin:50% 90% }
.principle-list article>span { display:inline-block;transform-origin:center }
.notes-arrow { display:inline-block }
.faq summary::after { transition:transform .6s cubic-bezier(.2,.75,.2,1),color .3s }
.faq details[open] summary::after { transform:rotate(180deg) scale(1.25);color:#ffd269 }

@keyframes word-dance {
  0%,15%,100% { transform:translateY(0) rotate(0deg) scale(1);color:#ffd269 }
  20% { transform:translateY(-16px) rotate(-8deg) scale(1.08);color:#ff9d58 }
  27% { transform:translateY(10px) rotate(6deg) scale(.97);color:#ffd269 }
  34% { transform:translateY(-6px) rotate(-3deg) scale(1.03) }
  42%,85% { transform:translateY(0) rotate(0deg) scale(1) }
}
@keyframes hero-orbit {
  0%,100% { transform:translate(0,0) rotate(0deg) scale(1);opacity:.8 }
  25% { transform:translate(35px,-22px) rotate(90deg) scale(1.08);opacity:1 }
  50% { transform:translate(8px,24px) rotate(180deg) scale(.93);opacity:.62 }
  75% { transform:translate(-25px,-8px) rotate(270deg) scale(1.06);opacity:.95 }
}
@keyframes card-glint {
  0%,72%,100% { transform:translateX(-110%) rotate(-10deg) }
  88% { transform:translateX(110%) rotate(-10deg) }
}
@keyframes block-turn {
  0%,13%,100% { transform:skewY(-8deg) rotateY(0deg) translateY(0) }
  26% { transform:skewY(-8deg) rotateY(78deg) translateY(-25px) }
  39% { transform:skewY(-8deg) rotateY(170deg) translateY(-50px) }
  51% { transform:skewY(-8deg) rotateY(270deg) translateY(-12px) }
  64% { transform:skewY(-8deg) rotateY(360deg) translateY(0) }
}
@keyframes block-bounce {
  0%,14%,100% { transform:skewY(-8deg) translateY(0) rotate(-2deg) }
  28% { transform:skewY(-8deg) translateY(-48px) rotate(7deg) }
  42% { transform:skewY(-8deg) translateY(8px) rotate(-5deg) }
  56% { transform:skewY(-8deg) translateY(-24px) rotate(3deg) }
  70% { transform:skewY(-8deg) translateY(0) rotate(-2deg) }
}
@keyframes ring-spin {
  0%,100% { transform:translateX(-50%) rotateX(62deg) rotateZ(0deg) scale(1);opacity:.5 }
  34% { transform:translateX(-50%) rotateX(55deg) rotateZ(125deg) scale(1.18);opacity:1 }
  67% { transform:translateX(-50%) rotateX(69deg) rotateZ(260deg) scale(.9);opacity:.7 }
}
@keyframes bar-dance {
  0%,12%,100% { transform:skew(-12deg) scaleY(1) }
  24% { transform:skew(-12deg) scaleY(1.65) }
  36% { transform:skew(-12deg) scaleY(.8) }
  48% { transform:skew(-12deg) scaleY(1.2) }
}
@keyframes stage-wave {
  0%,14%,100% { transform:skew(-16deg) translateY(0) rotate(0deg) }
  28% { transform:skew(-16deg) translateY(-18px) rotate(-10deg) }
  42% { transform:skew(-16deg) translateY(4px) rotate(4deg) }
  56% { transform:skew(-16deg) translateY(-8px) rotate(-3deg) }
}
@keyframes number-turn {
  0%,78%,100% { transform:rotate(0deg) scale(1) }
  88% { transform:rotate(360deg) scale(1.25) }
}
@keyframes arrow-flair {
  0%,76%,100% { transform:translate(0,0) rotate(0deg) }
  84% { transform:translate(12px,-12px) rotate(18deg) }
  91% { transform:translate(-4px,3px) rotate(-6deg) }
}

/* Chapters enter by folding, swinging, and turning through their own geometry. */
@keyframes type-swing {
  0% { opacity:.65;transform:translate(-90px,65px) rotate(-11deg) scale(.83) }
  62% { opacity:1;transform:translate(15px,-10px) rotate(3deg) scale(1.05) }
  78% { transform:translate(-7px,4px) rotate(-2deg) scale(.99) }
  100% { opacity:1;transform:none }
}
@keyframes copy-slide {
  0% { opacity:.7;transform:translate(100px,45px) rotate(7deg) }
  70% { opacity:1;transform:translate(-12px,-7px) rotate(-2deg) }
  100% { transform:none }
}
@keyframes bench-turn {
  0% { opacity:.75;transform:perspective(900px) translateX(140px) rotateY(-40deg) scale(.82) }
  72% { opacity:1;transform:perspective(900px) translateX(-12px) rotateY(5deg) scale(1.02) }
  100% { transform:none }
}
@keyframes goal-turn {
  0% { opacity:.72;transform:perspective(1000px) translateX(140px) rotateY(55deg) scale(.87) }
  72% { opacity:1;transform:perspective(1000px) translateX(-14px) rotateY(-5deg) scale(1.02) }
  100% { transform:none }
}
@keyframes fold-row {
  0% { opacity:.6;transform:perspective(800px) translateY(48px) rotateX(-55deg) }
  75% { opacity:1;transform:perspective(800px) translateY(-6px) rotateX(6deg) }
  100% { transform:none }
}
@keyframes top-pop {
  0% { transform:translateY(120%) rotate(-30deg) scale(.5) }
  72% { transform:translateY(-9px) rotate(8deg) scale(1.12) }
  100% { transform:translateY(0) rotate(0deg) scale(1) }
}
@keyframes mobile-swing {
  0% { opacity:.7;transform:translate(-38px,28px) rotate(-7deg) scale(.9) }
  70% { opacity:1;transform:translate(7px,-5px) rotate(2deg) scale(1.02) }
  100% { transform:none }
}
@keyframes mobile-slide {
  0% { opacity:.7;transform:translate(38px,24px) rotate(5deg) }
  70% { opacity:1;transform:translate(-5px,-4px) rotate(-2deg) }
  100% { transform:none }
}
@keyframes mobile-turn {
  0% { opacity:.7;transform:perspective(700px) translateX(45px) rotateY(-24deg) scale(.9) }
  75% { opacity:1;transform:perspective(700px) translateX(-5px) rotateY(4deg) scale(1.02) }
  100% { transform:none }
}

@media(prefers-reduced-motion:no-preference) {
  main section:not(.hero).in-view { animation:none }
  .hero h1 em span:first-child { animation:word-dance 8s .4s ease-in-out infinite }
  .hero h1 em span:nth-child(2) { animation:word-dance 8s 1.35s ease-in-out infinite }
  .hero::after { animation:hero-orbit 14s ease-in-out infinite }
  .hero .planner::before { animation:card-glint 10s linear infinite }
  .hero-sequence span:first-child { animation:fold-row 1.1s .6s both }
  .hero-sequence span:nth-child(2) { animation:fold-row 1.1s .8s both }
  .hero-sequence span:nth-child(3) { animation:fold-row 1.1s 1s both }

  .purpose .figure-block.one { animation:block-bounce 9s 0s cubic-bezier(.25,.6,.3,1) infinite }
  .purpose .figure-block.two { animation:block-turn 11s 1.2s cubic-bezier(.3,.7,.2,1) infinite }
  .purpose .figure-block.three { animation:block-bounce 9s 2.2s cubic-bezier(.25,.6,.3,1) infinite }
  .purpose .figure-ring { animation:ring-spin 12s ease-in-out infinite }
  .whatif.in-view .scenario-track span:nth-child(2) { animation:bar-dance 7s 1s ease-in-out infinite }
  .goal-section.in-view .goal-stages i { animation:stage-wave 7s ease-in-out infinite }
  .goal-stages i:nth-child(2n) { animation-delay:.18s }
  .goal-stages i:nth-child(3n) { animation-delay:.36s }
  .goal-stages i:nth-child(4n) { animation-delay:.54s }
  .principles.in-view .principle-list article>span { animation:number-turn 9s ease-in-out infinite }
  .principle-list article:nth-child(2)>span { animation-delay:2.3s }
  .principle-list article:nth-child(3)>span { animation-delay:4.6s }
  .field-notes.in-view .notes-arrow { animation:arrow-flair 8s ease-in-out infinite }
  .notes-list a:nth-child(2) .notes-arrow { animation-delay:1.8s }
  .notes-list a:nth-child(3) .notes-arrow { animation-delay:3.6s }
  .back-top.visible { animation:top-pop .75s cubic-bezier(.2,.75,.2,1) both }

  .purpose.in-view .purpose-type,.whatif.in-view .whatif-intro,
  .goal-section.in-view .section-heading,.principles.in-view .principles-lead,
  .field-notes.in-view .notes-heading,.questions.in-view>div:nth-of-type(2) {
    animation:type-swing 1.4s cubic-bezier(.16,.78,.2,1) both
  }
  .purpose.in-view .purpose-copy,.principles.in-view .principle-list,
  .questions.in-view .faq { animation:copy-slide 1.3s .17s cubic-bezier(.16,.78,.2,1) both }
  .whatif.in-view .whatif-workbench { animation:bench-turn 1.6s .12s cubic-bezier(.16,.78,.2,1) both }
  .goal-section.in-view .goal-card { animation:goal-turn 1.65s .17s cubic-bezier(.16,.78,.2,1) both }
  .field-notes.in-view .notes-list a { animation:fold-row 1.1s cubic-bezier(.16,.78,.2,1) both }
  .field-notes.in-view .notes-list a:nth-child(2) { animation-delay:.18s }
  .field-notes.in-view .notes-list a:nth-child(3) { animation-delay:.36s }
  .questions.in-view .faq details { animation:fold-row 1s cubic-bezier(.16,.78,.2,1) both }
  .questions.in-view .faq details:nth-child(2) { animation-delay:.13s }
  .questions.in-view .faq details:nth-child(3) { animation-delay:.26s }
  .questions.in-view .faq details:nth-child(4) { animation-delay:.39s }
  .questions.in-view .faq details:nth-child(5) { animation-delay:.52s }
}
@media(max-width:580px) {
  .hero h1 em span { max-width:100% }
  .purpose .figure-block.two { animation-duration:12s }
  .goal-stages i { animation-duration:8s }
  .chromatic-field i { inset:-18% }
  .purpose-copy { padding:1.2rem;box-shadow:9px 9px 0 #54201645 }
  .questions>div:nth-of-type(2)>p:last-child { max-width:40rem }
}
@media(max-width:580px) and (prefers-reduced-motion:no-preference) {
  .purpose.in-view .purpose-type,.whatif.in-view .whatif-intro,
  .goal-section.in-view .section-heading,.principles.in-view .principles-lead,
  .field-notes.in-view .notes-heading,.questions.in-view>div:nth-of-type(2) { animation-name:mobile-swing }
  .purpose.in-view .purpose-copy,.principles.in-view .principle-list,
  .questions.in-view .faq { animation-name:mobile-slide }
  .whatif.in-view .whatif-workbench,.goal-section.in-view .goal-card { animation-name:mobile-turn }
}
@media(prefers-reduced-motion:reduce) {
  .chromatic-field { display:none }
  .hero h1 em span,.hero::after,.hero .planner::before,.hero-sequence span,
  .purpose .figure-block,.purpose .figure-ring,.whatif .scenario-track span,
  .goal-stages i,.principle-list article>span,.notes-arrow,.back-top.visible,
  .purpose.in-view .purpose-type,.whatif.in-view .whatif-intro,.goal-section.in-view .section-heading,
  .principles.in-view .principles-lead,.field-notes.in-view .notes-heading,.questions.in-view>div:first-of-type,
  .purpose.in-view .purpose-copy,.principles.in-view .principle-list,.questions.in-view .faq,
  .whatif.in-view .whatif-workbench,.goal-section.in-view .goal-card,
  .field-notes.in-view .notes-list a,.questions.in-view .faq details { animation:none!important;transition:none }
  .faq summary::after { transition:none }
}