/* Doughbry's first impression: the page load curtain, the loader, and smooth page changes.
   Loaded on every page right after base.css. Works with js/intro.js.
   Brand Guidelines v1.3: the curtain shows the official primary lockup, orange on cream (R33, R47).
   The logo is never turned or stretched (R50, R52). The play comes from the kit of parts instead:
   small orange triangles, the same ones the guide calls triangle confetti (R88).
   Safe by design: with JavaScript off, or for people who ask for less motion, none of this hides anything. */

/* ---------- The loader: 3 little triangles hopping in a row. 3 corners, 0 forks. ----------
   These are confetti triangles: small, sharp cornered, more than one. They are not the Triangle logo,
   which is a single rounded shape that never turns (R36, R52). */
.hop { display: inline-flex; align-items: flex-end; gap: 0.26em; flex: none; line-height: 1; }
.hop i {
  display: block; width: 0.74em; height: 0.74em; flex: none;
  background: currentColor;
  clip-path: polygon(50% 10%, 96% 90%, 4% 90%);
  transform-origin: 50% 63%;
  animation: hop 1.15s cubic-bezier(0.3, 0, 0.3, 1) infinite;
  will-change: transform;
}
.hop i:nth-child(2) { animation-delay: 0.14s; }
.hop i:nth-child(3) { animation-delay: 0.28s; }
.hop--lg { font-size: 30px; }
@keyframes hop {                 /* crouch, jump with a flip from one corner to the next, land with a squash */
  0%, 52%, 100% { transform: translate3d(0, 0, 0) scale(1, 1) rotate(0deg); }
  9% { transform: translate3d(0, 6%, 0) scale(1.14, 0.84) rotate(0deg); }
  27% { transform: translate3d(0, -92%, 0) scale(0.95, 1.07) rotate(64deg); }
  42% { transform: translate3d(0, 4%, 0) scale(1.12, 0.86) rotate(120deg); }
  52% { transform: translate3d(0, 0, 0) scale(1, 1) rotate(120deg); }
}

/* A button that is busy: site.js adds class is-loading and drops the loader inside it */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading .hop { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -42%); font-size: 1.05em; color: var(--white, #FFFFFF); }
.btn--white.is-loading .hop { color: var(--orange, #E4562A); }

/* ---------- The page load curtain ----------
   Two sheets lift one after the other: cream with the lockup, then white a beat behind it.
   Each trails a row of little triangles. Orange, white and cream only (R66). */
.intro { display: none; }                       /* never shows unless intro.js asks for it */
html.intro-run { overflow: hidden; }            /* no scrolling behind the curtain */
html.intro-run .intro {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(1.6rem, 4.5vh, 2.6rem);
  background: var(--cream, #EFEFE6); color: var(--orange, #E4562A);
  transform: translate3d(0, 0, 0);
  transition: transform 0.72s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}
html.intro-run .intro::after {                   /* the row of little triangles under the cream sheet */
  content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 22px;
  background:
    linear-gradient(135deg, var(--cream, #EFEFE6) 25%, transparent 25%) -22px 0 / 44px 44px repeat-x,
    linear-gradient(225deg, var(--cream, #EFEFE6) 25%, transparent 25%) -22px 0 / 44px 44px repeat-x;
}
html.intro-run::before {                         /* the white sheet right behind it, with its own row of triangles */
  content: ""; position: fixed; inset: 0 0 -22px 0; z-index: 999; pointer-events: none;
  background:
    linear-gradient(var(--white, #FFFFFF), var(--white, #FFFFFF)) 0 0 / 100% calc(100% - 22px) no-repeat,
    linear-gradient(135deg, var(--white, #FFFFFF) 25%, transparent 25%) 0 calc(100% + 22px) / 44px 44px repeat-x,
    linear-gradient(225deg, var(--white, #FFFFFF) 25%, transparent 25%) 0 calc(100% + 22px) / 44px 44px repeat-x;
  transform: translate3d(0, 0, 0);
  transition: transform 0.72s cubic-bezier(0.76, 0, 0.24, 1) 0.13s;
  will-change: transform;
}
.intro__lockup {
  display: block; width: min(72vw, 440px); height: auto;      /* the lockup never goes under 200 px (R41) */
  animation: intro-lockup-in 0.75s cubic-bezier(0.2, 1.25, 0.35, 1) 0.12s both;   /* it lands with a small bounce, same shape the whole way (R50) */
  will-change: transform, opacity;
}
html.intro-run .intro .hop { animation: intro-fade-in 0.4s ease 0.3s both; }
@keyframes intro-lockup-in { from { opacity: 0; transform: translate3d(0, 22px, 0) scale(0.88); } to { opacity: 1; transform: none; } }
@keyframes intro-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* The lift: intro.js adds intro-out when the page is ready */
html.intro-out .intro { transform: translate3d(0, calc(-100% - 26px), 0); }
html.intro-out::before { transform: translate3d(0, calc(-100% - 4px), 0); }
html.intro-out .intro__lockup { transition: transform 0.5s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.3s ease; transform: translate3d(0, -18px, 0) scale(1.04); opacity: 0; }
html.intro-out .intro .hop { transition: opacity 0.2s ease; opacity: 0; }

/* ---------- Entrances that wait for the curtain ----------
   Put data-enter on anything in the first screen. Give each a step with style="--i:1", "--i:2" ...
   While the curtain is up they wait. The moment it lifts (html.is-ready) they come in one after another.
   data-enter="rise" is for the big words: they land with a small bounce.
   data-enter="pop" is for drawings: they pop in a little crooked, then settle.
   data-enter="peek" is for a drawing at the bottom edge: it comes up from below.
   With no JavaScript neither class exists, so everything is simply visible. */
html.intro-run:not(.is-ready) [data-enter] { opacity: 0; }
html.is-ready [data-enter] { animation: enter-up 0.72s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 85ms + var(--enter-base, 120ms)); }
html.is-ready [data-enter="rise"] { animation-name: enter-rise; animation-duration: 0.85s; animation-timing-function: cubic-bezier(0.3, 0.7, 0.3, 1); transform-origin: 0 100%; }
html.is-ready [data-enter="pop"] { animation-name: enter-pop; animation-duration: 0.8s; }
html.is-ready [data-enter="peek"] { animation-name: enter-peek; animation-duration: 0.95s; animation-timing-function: cubic-bezier(0.3, 0.7, 0.3, 1); }
html.is-ready [data-enter="fade"] { animation-name: intro-fade-in; }
@keyframes enter-up { from { opacity: 0; transform: translate3d(0, 20px, 0); } to { opacity: 1; transform: none; } }
@keyframes enter-rise {
  0% { opacity: 0; transform: translate3d(0, 0.55em, 0) rotate(-3deg) scale(0.94); }
  55% { opacity: 1; transform: translate3d(0, -0.05em, 0) rotate(0.6deg) scale(1.015); }
  100% { opacity: 1; transform: none; }
}
@keyframes enter-peek { 0% { opacity: 1; transform: translate3d(0, 80%, 0); } 62% { opacity: 1; transform: translate3d(0, -5%, 0); } 100% { opacity: 1; transform: none; } }
@keyframes enter-pop { 0% { opacity: 0; transform: scale(0.82) rotate(-6deg); } 60% { opacity: 1; transform: scale(1.04) rotate(1deg); } 100% { opacity: 1; transform: none; } }

/* ---------- Smooth page changes ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out 0.2s ease both; }
  ::view-transition-new(root) { animation: vt-in 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .site-header { view-transition-name: site-header; }
}
@keyframes vt-out { to { opacity: 0; transform: translate3d(0, -8px, 0); } }
@keyframes vt-in { from { opacity: 0; transform: translate3d(0, 12px, 0); } }

/* The small "one moment" chip that appears only if the next page is slow (intro.js adds it) */
.page-wait {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 900;
  width: 76px; height: 52px; margin-left: -38px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink, #1E1916); color: var(--white, #FFFFFF);
  opacity: 0; transform: translate3d(0, 24px, 0) scale(0.9); pointer-events: none;
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.2, 1.2, 0.35, 1);
}
.page-wait .hop { font-size: 17px; }
.page-wait .hop i { animation-play-state: paused; }          /* it only hops while it is on screen */
html.is-leaving .page-wait .hop i { animation-play-state: running; }
html.is-leaving .page-wait { opacity: 1; transform: none; }

/* ---------- Less motion: no curtain, no movement, everything simply there ---------- */
@media (prefers-reduced-motion: reduce) {
  html.intro-run { overflow: auto; }
  html.intro-run .intro { display: none; }
  html.intro-run::before { display: none; }
  html.intro-run:not(.is-ready) [data-enter] { opacity: 1; }
  html.is-ready [data-enter] { animation: none; }
  .hop i { animation: hop-pulse 1.2s ease-in-out infinite !important; animation-duration: 1.2s !important; animation-iteration-count: infinite !important; }
}
@keyframes hop-pulse { 50% { opacity: 0.35; } }