/* ==========================================================================
   SparkNorth Ventures - shared styles
   --------------------------------------------------------------------------
   Every page loads this file. Page-specific styles live next to it
   (home.css, apply.css, conferences.css, ...).

   Contents
     1. Fonts
     2. Design tokens
     3. Base and typography
     4. Layout helpers
     5. Buttons and links
     6. Header and navigation
     7. Footer
     8. Shared components (accordion, marquee, form fields, cards)
     9. Motion (scroll reveal and friends)
   ========================================================================== */


/* 1. Fonts
   Figtree (SIL Open Font License 1.1), self-hosted variable font. The file
   covers every weight from 300 to 900, but it is offered for 500 to 700
   only: those are the weights the original site loads, so text set in 800
   there shows at 700, and lighter text at 500. Keeping the same range keeps
   the same letter widths and line breaks. ------------------------------- */

@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-latin.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-latin-ext.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-italic-latin.woff2") format("woff2");
  font-weight: 500 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-italic-latin-ext.woff2") format("woff2");
  font-weight: 500 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* 2. Design tokens ------------------------------------------------------ */

:root {
  /* Brand colours */
  --color-red: #ea2317;          /* brand red: footer, hero, accents */
  --color-red-text: #e92016;     /* red used for text on white */
  --color-red-bright: #f9100b;   /* call-to-action buttons on black */
  --color-red-dark: #c41a10;     /* hover state */
  /* Button backgrounds: the reds above darkened just enough for white button text to
     reach WCAG AA (4.5:1). Agreed with Iris (brand) 2026-10-23; buttons only. */
  --color-red-button: #e82115;        /* 4.51:1, for --color-red buttons */
  --color-red-button-bright: #ed0b06; /* 4.51:1, for --color-red-bright buttons */
  --color-black: #000;
  --color-ink: #111;
  --color-white: #fff;
  --color-cream: #fff6f0;        /* warm section background (team, hosts) */
  --color-sand: #fbf5f0;
  --color-field: #eeeee7;        /* form field background */
  --color-line: #e6e3df;         /* hairlines and dividers */
  --color-muted: #6b6762;        /* secondary text on white */
  --color-muted-dark: #d6d2ce;   /* secondary text on black */

  /* Typography
     Sizes grow with the screen: size = (scale - 1) * unit + 1rem, where the
     unit is 1.2% of the viewport width (capped at a 2560px wide page). On a
     phone held upright the unit follows the screen height instead, so text
     stays readable on narrow screens. This is the sizing of the original
     site, so pages keep their proportions on every screen. */
  --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --tracking-tight: -0.05em;     /* headings */
  --tracking-body: -0.04em;      /* running text */

  --type-unit: calc(0.012 * min(100vh, 900px));
  --text-sm: 1rem;                                       /* scale 1   */
  --text-base: calc(0.2 * var(--type-unit) + 1rem);      /* scale 1.2 */
  --text-lead: calc(0.4 * var(--type-unit) + 1rem);      /* scale 1.4 */
  --text-h4: calc(1 * var(--type-unit) + 1rem);          /* scale 2   */
  --text-h3: calc(1.6 * var(--type-unit) + 1rem);        /* scale 2.6 */
  --text-h2: calc(2.1 * var(--type-unit) + 1rem);        /* scale 3.1 */
  --text-h1: calc(3.6 * var(--type-unit) + 1rem);        /* scale 4.6 */
  --text-marquee: calc(3.7 * var(--type-unit) + 1rem);   /* scale 4.7 */

  /* Spacing and layout
     The page runs edge to edge with a gutter of 6% of the width on phones and
     3% from 768px up. Sections are spaced by a share of the larger screen side. */
  --gutter: 6vw;
  --page-max: 2560px;
  --section-sm: 3.3vmax;
  --content-max: var(--page-max);
  --narrow-max: 900px;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-pill: 999px;
  --header-height: 84px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 1.2s;
}

@media (min-width: 768px), (orientation: landscape) {
  :root {
    --type-unit: min(1.2vw, 30.72px);
  }
}

@media (min-width: 768px) {
  :root {
    --gutter: 3vw;
    --header-height: calc(51px + 2.8vw);
  }
}


/* 3. Base and typography ------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
  margin: 0;
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Elements waiting to slide in from the side must not widen the page.
   Clipping main (not body) keeps the page itself from scrolling sideways
   and leaves the sticky header alone. */
main {
  overflow-x: clip;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.h1,
.h2,
.h4 {
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
}

/* Heading line height tightens as the size grows: 1.2 * (1 + (1 - scale) / 25). */
h1,
.h1 {
  font-size: var(--text-h1);
  line-height: 1.0272;
}

h2,
.h2 {
  font-size: var(--text-h2);
  line-height: 1.0992;
}

h3,
.h3 {
  font-size: var(--text-h3);
  line-height: 1.1232;
}

h4,
.h4 {
  font-size: var(--text-h4);
  line-height: 1.152;
}

p {
  margin: 1rem 0;
}

p:first-child {
  margin-top: 0;
}

p:last-child {
  margin-bottom: 0;
}

strong {
  font-weight: 700;
}

.lead {
  font-size: var(--text-lead);
  line-height: 1.5;
}

.text-red {
  color: var(--color-red-text);
}

.eyebrow {
  display: block;
  margin-bottom: 1rem;
  color: var(--color-red-bright);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bullets {
  margin: 1em 0;
  padding-left: 40px;
  list-style: none;
}

/* The original keeps half a line under a closing list (its last item's
   paragraph margin), so a block that ends in a list is that much taller. */
.bullets:last-child {
  margin-bottom: 0.5em;
}

.bullets li {
  margin: 0;
}

.bullets li + li {
  margin-top: 0.5em;
}

.bullets li::before {
  content: "\2022";
  display: inline-block;
  box-sizing: border-box;
  width: 40px;
  margin-left: -40px;
  padding-right: 10px;
  text-align: right;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-black);
  font-weight: 700;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

:focus-visible {
  outline: 3px solid var(--color-red);
  outline-offset: 3px;
}


/* 4. Layout helpers ----------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: calc(var(--narrow-max) + 2 * var(--gutter));
}

/* Every section gets the same padding above and below its content, so the
   space between two sections is the same all down the page. (The original
   site mixed taller and shorter sections; Peter asked for even spacing.) */
.section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--section-sm);
}

/* A section that fills most of the screen, for a page with little content
   (the 404 page). */
.section--fill {
  min-height: 66vh;
}

.section--flush {
  padding-block: 0;
}

.section--cream {
  background: var(--color-cream);
}

.section--black {
  background: var(--color-black);
  color: var(--color-white);
}

/* Layout grid ------------------------------------------------------------
   Most sections place their pieces on one grid, so they keep the same
   proportions on every screen:
     phones      8 columns between 6vw gutters, rows at least 24px tall;
     768px up   24 columns between 3vw gutters, rows at least 2.15% of the
                content width tall;
   with 11px between columns and rows.
   Each section sets its row counts (--rows / --rows-m) and each piece its
   place with grid-area, phone first, in the page stylesheet. Rows grow when
   their content needs more room. */

.grid {
  --rows-m: 8;
  --rows: 8;
  --gap: 11px;
  display: grid;
  grid-template-columns:
    minmax(calc(6vw - var(--gap)), 1fr)
    repeat(8, minmax(0, calc((var(--page-max) - 7 * var(--gap)) / 8)))
    minmax(calc(6vw - var(--gap)), 1fr);
  grid-template-rows: repeat(var(--rows-m), minmax(24px, auto));
  gap: var(--gap);
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns:
      minmax(calc(3vw - var(--gap)), 1fr)
      repeat(24, minmax(0, calc((var(--page-max) - 23 * var(--gap)) / 24)))
      minmax(calc(3vw - var(--gap)), 1fr);
    grid-template-rows: repeat(var(--rows), minmax(calc(min(var(--page-max), 94vw) * 0.0215), auto));
  }
}

/* A grid without gaps, for pieces that sit edge to edge (the hero card). */
.grid--flush {
  --gap: 0px;
}

.grid > * {
  min-width: 0;
}

/* Vertical alignment inside the grid area (top is the default). */
.grid > .is-middle,
.grid > .is-bottom {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.grid > .is-bottom {
  justify-content: flex-end;
}

/* Pictures that fill their grid area; the area, not the picture, sets the size. */
.grid__media {
  position: relative;
}

.grid__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.grid__media--cover img {
  object-fit: cover;
}

@media (max-width: 767px) {
  .grid > .is-wide-only {
    display: none;
  }
}

/* Two columns: media on one side, text on the other. Stacks on small screens. */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }

  .split--media-right > :first-child {
    order: 2;
  }
}


/* 5. Buttons and links -------------------------------------------------- */

a {
  color: inherit;
}

.link {
  color: var(--color-red-text);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color 0.2s;
}

.link:hover {
  color: var(--color-red-dark);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.85rem 2.1rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-red-button);
  color: var(--color-white);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s, transform 0.25s var(--ease-out), box-shadow 0.25s;
}

.button:hover {
  background: var(--color-red-dark);
  box-shadow: 0 10px 24px -12px rgb(234 35 23 / 0.7);
  transform: translateY(-2px);
}

.button--bright {
  background: var(--color-red-button-bright);
  font-size: 1.125rem;
}

.button--light {
  background: var(--color-white);
  color: var(--color-black);
}

.button--light:hover {
  background: var(--color-black);
  color: var(--color-white);
}


/* 6. Header and navigation ---------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: box-shadow 0.3s;
}

/* The frosted background sits on a pseudo-element: a backdrop-filter on the
   header itself would make the header the box that the fixed mobile menu is
   positioned in, and the menu would shrink to the header's height. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(255 255 255 / 0.92);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
}

.site-header.is-scrolled {
  box-shadow: 0 1px 0 var(--color-line), 0 8px 30px -20px rgb(0 0 0 / 0.35);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: var(--header-height);
}

.site-header__logo {
  flex: 0 0 auto;
  margin-right: auto;
}

.site-header__logo img {
  width: clamp(180px, 18vw, 231px);
}

.site-nav ul {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.6rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  position: relative;
  color: var(--color-black);
  font-size: var(--text-base);
  text-decoration: none;
}

/* Underline that grows from the left on hover */
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--color-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.site-header__cta {
  min-height: 2.5rem;
  padding: 0.55rem 1.5rem;
}

.site-header__toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.site-header__toggle span {
  display: block;
  width: 26px;
  height: 2px;
  margin: 6px auto;
  background: var(--color-black);
  transition: transform 0.3s var(--ease-out), opacity 0.2s;
}

.site-header__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.site-header__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 960px) {
  .site-header__toggle {
    display: block;
  }

  .site-header__cta {
    display: none;
  }

  /* The menu becomes a black full-screen panel under the header, with the
     links centred in white and the Apply button at the bottom, as on the
     original site. */
  .site-nav {
    position: fixed;
    inset: var(--header-height) 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem var(--gutter) 6.5rem;
    overflow-y: auto;
    background: var(--color-black);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.3s, transform 0.4s var(--ease-out), visibility 0s 0.4s;
  }

  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.3s, transform 0.4s var(--ease-out);
  }

  .site-nav ul {
    flex-direction: column;
    align-items: center;
    gap: 23px;
  }

  .site-nav a {
    color: var(--color-white);
    font-size: 33px;
    line-height: 1;
    letter-spacing: -0.026em;
    text-align: center;
  }

  .site-nav .site-nav__apply {
    display: block;
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
  }

  .site-nav .site-nav__apply a {
    display: block;
    min-width: 210px;
    padding: 16px 21px;
    border-radius: 300px;
    background: var(--color-white);
    color: var(--color-black);
    font-size: 19px;
    font-weight: 700;
    line-height: 23px;
  }

  .site-nav .site-nav__apply a::after {
    content: none;
  }
}

@media (min-width: 961px) {
  .site-nav .site-nav__apply {
    display: none;
  }
}


/* 7. Footer
   Compact by design: one row with the slogan and the contact links, and a
   thin legal bar underneath. -------------------------------------------- */

.site-footer {
  background: var(--color-red);
  color: var(--color-white);
  padding-block: clamp(2rem, 3.5vw, 3rem) 1.25rem;
}

.site-footer a {
  color: inherit;
}

.site-footer__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
}

.site-footer__slogan {
  margin-bottom: 0.35rem;
  font-size: var(--text-h4);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
}

.site-footer__address {
  font-size: var(--text-sm);
  opacity: 0.92;
}

.site-footer__links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.site-footer__mail {
  font-size: var(--text-lead);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}

.site-footer__social {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-red) !important;
  transition: transform 0.25s var(--ease-out);
}

.site-footer__social:hover {
  transform: translateY(-3px);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: 1rem;
  border-top: 1px solid rgb(255 255 255 / 0.3);
  font-size: 0.8125rem;
}

.site-footer__bottom p {
  margin: 0;
}


/* 8. Shared components -------------------------------------------------- */

/* Accordion: native <details>, animated by main.js when motion is allowed. */
.accordion {
  border-top: 1px solid rgb(0 0 0 / 0.15);
}

.accordion__item {
  border-bottom: 1px solid rgb(0 0 0 / 0.15);
}

.accordion__item > summary {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 30px 0;
  font-size: var(--text-h4);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  list-style: none;
  cursor: pointer;
}

.accordion__item > summary::-webkit-details-marker {
  display: none;
}

/* The plus sign turns into a minus when the item is open. */
.accordion__icon {
  position: relative;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
}

.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  background: currentColor;
  transition: transform 0.35s var(--ease-out);
}

.accordion__icon::after {
  transform: rotate(90deg);
}

.accordion__item[open] .accordion__icon::after {
  transform: rotate(0deg);
}

.accordion__body {
  overflow: hidden;
}

.accordion__content {
  padding: 0 0 30px 48px;
}

.accordion__content p {
  margin-bottom: 0.75em;
}

/* Marquee: a band of words that scrolls forever. The list is duplicated in the
   markup (aria-hidden copy) so the loop is seamless. */
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__list {
  display: flex;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-marquee);
  line-height: 1.4;
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
}

.marquee__list li::after {
  content: "*";
  margin-inline: 0.55em;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* Form fields (contact form, apply form) */
.field {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.field__label {
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.field__label small,
.field__hint {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.04em;
}

.field__label small,
.field__hint small {
  margin-left: 4px;
  font-size: inherit;
  opacity: 0.7;
}

.field__hint {
  line-height: 26px;
}

.field__input {
  width: 100%;
  padding: 10px 20px;
  border: 1px solid var(--color-black);
  border-radius: 26px;
  background: var(--color-field);
  color: var(--color-black);
  font: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  transition: box-shadow 0.2s, background-color 0.2s;
}

.field__input:focus {
  outline: none;
  background: var(--color-white);
  box-shadow: 0 0 0 3px rgb(234 35 23 / 0.35);
}

textarea.field__input {
  height: 100px;
  resize: vertical;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 0.75rem;
}

/* Honeypot: invisible to people, tempting for bots. */
.field--trap {
  position: absolute;
  left: -9999px;
}

.form-status {
  margin-top: 1rem;
  font-weight: 700;
}

/* No space below the form while there is no message to show. */
.form-status:empty {
  margin-top: 0;
}

.form-status[data-state="error"] {
  color: var(--color-red-text);
}


/* 9. Motion --------------------------------------------------------------
   As on the original site: when a piece scrolls into view it fades in over
   1.2s; headings, pictures and buttons also grow from 90% to full size.
   main.js marks the pieces (data-reveal="scale" or "fade") and adds
   .is-visible. Without JavaScript, or for people who asked their device for
   reduced motion, everything is simply shown. If main.js never gets going
   (failed download, an error), the pieces show themselves after 3 seconds
   instead of leaving a blank page; main.js switches that off once it has
   set up the reveal (.reveal-ready). */

.js [data-reveal] {
  opacity: 0;
  transition: opacity var(--duration) ease, transform var(--duration) ease;
  transition-delay: var(--reveal-delay, 0s);
  animation: reveal-fallback 0.6s ease 3s forwards;
}

.js.reveal-ready [data-reveal] {
  animation: none;
}

@keyframes reveal-fallback {
  to {
    opacity: 1;
    transform: none;
  }
}

.js [data-reveal="scale"] {
  transform: scale(0.9);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .marquee__track {
    animation: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}