/* Opening animation (from the design file Intro, light version): the reuse arrows spin up, the pin pops out around
   them, the mark settles into place and the name slides out beside it. Used only by index.html. */
body #introStage.ix { background: #F4F6EC; color: #0F2A24; flex-direction: column; gap: 22px; padding: 24px 16px; }
.ix-logo { display: flex; align-items: center; justify-content: center; --mark: clamp(52px, 8vw, 112px); --type: clamp(26px, 5.4vw, 76px); --gap: clamp(10px, 1.6vw, 22px); }
.ix-markwrap { position: relative; flex: none; width: var(--mark); height: var(--mark); animation: ixSettle 1.1s cubic-bezier(.65, 0, .2, 1) 2.25s both; }
.ix-markwrap svg { display: block; width: 100%; height: 100%; overflow: visible; animation: ixHop .6s ease-out 3.3s both; }

@keyframes ixFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ixSpin { from { transform: rotate(0deg); } to { transform: rotate(1080deg); } }
@keyframes ixRingScale { 0%, 55% { transform: scale(1.9); } 100% { transform: scale(1); } }
@keyframes ixRecolor { 0%, 64% { color: var(--a0); } 80%, 100% { color: var(--a1); } }
.ix-arrows { --a0: #0F2A24; --a1: #C6F26B; transform-origin: 32px 27px; animation: ixFade .35s ease-out both, ixRecolor 2.1s linear both; }
.ix-ringScale { transform-origin: 32px 27px; animation: ixRingScale 2.1s cubic-bezier(.5, 0, .2, 1) both; }
.ix-ringSpin { transform-origin: 32px 27px; animation: ixSpin 2.1s cubic-bezier(.45, 0, .15, 1) both; }

@keyframes ixPop { 0% { transform: scale(0); } 60% { transform: scale(1.14); } 100% { transform: scale(1); } }
.ix-pinbody { transform-origin: 32px 30px; animation: ixPop .75s cubic-bezier(.34, 1.3, .5, 1) 1.3s both; }
.ix-dot { transform-origin: 32px 27px; animation: ixPop .5s cubic-bezier(.34, 1.56, .5, 1) 1.6s both; }

@keyframes ixSettle { from { transform: scale(3); } to { transform: scale(1); } }
@keyframes ixHop { 0% { transform: translateY(0); } 35% { transform: translateY(-9%); } 70% { transform: translateY(0); } 85% { transform: translateY(-2%); } 100% { transform: translateY(0); } }

@keyframes ixGrow { from { grid-template-columns: 0fr; } to { grid-template-columns: 1fr; } }
.ix-wordgrid { display: grid; grid-template-columns: 0fr; animation: ixGrow 1.2s cubic-bezier(.2, .9, .25, 1) 2.45s forwards; }
.ix-wordclip { min-width: 0; overflow: hidden; padding: .12em .14em .2em 0; }
.ix-word { white-space: nowrap; padding-left: var(--gap); font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-size: var(--type); line-height: 1; letter-spacing: -0.03em; color: #0F2A24; }
@keyframes ixLetter { 0% { opacity: 0; transform: translateX(-80px) scale(.6); } 55% { opacity: 1; transform: translateX(7px) scale(1.06); } 100% { opacity: 1; transform: none; } }
.ix-ltr { display: inline-block; animation: ixLetter .75s cubic-bezier(.3, .8, .35, 1) both; }
.ix-ltr.a { font-weight: 500; animation-delay: 2.7s; }
.ix-ltr.b { font-weight: 800; animation-delay: 2.85s; }
.ix-ltr.c { font-weight: 500; animation-delay: 3s; }
.ix-ltr.d { font-weight: 500; animation-delay: 3.15s; color: #52695F; }

/* the one-line description fades in once the name has landed */
.ix-desc { margin: 0; max-width: 560px; text-align: center !important; color: #52695F; font-size: 1.02rem; line-height: 1.5; opacity: 0; animation: ixFade .8s ease-out 3.7s forwards; }

body #introStage.ix .intro-skip { border-radius: 22px; min-height: 40px; border: 1.5px solid #B4C2A8; background: #fff; color: #0F2A24; font-weight: 600; font-family: inherit; }
body #introStage.ix .intro-skip:hover { background: #E9EFDD; }

@media (prefers-reduced-motion: reduce) {
  .ix-logo *, .ix-desc { animation-duration: .01ms !important; animation-delay: 0s !important; }
}