/* ==========================================================================
   Verati — base styles
   Tokens, reset, page shell, shared typography and shared components.
   Section styles live in their own files (home-hero.css, home-feature.css, ...).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  --font-hellix: "Hellix", system-ui, sans-serif;
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-accent: "Playfair Display", Georgia, "Times New Roman", serif;

  --home-ease: cubic-bezier(.215, .61, .355, 1);
  --home-ease-out: cubic-bezier(.165, .84, .44, 1);

  --home-block-gap: 3.75rem;          /* vertical gap between sections (8.5rem on desktop) */
  --home-header-offset: 6.12rem;
  --home-reveal: 0;                   /* 0..1, driven by scroll for .home-scrub sections */
  --home-page-gradient: linear-gradient(180.72deg, #000 60%, #1a140f 66%, #2a1d12 72%, #281c12 77%, #1e140c 86%, #1e1106 93%, #030201 99.38%);
}

@media (min-width: 768px) {
  :root {
    --home-block-gap: 8.5rem;
  }
}

@property --home-reveal {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --glass-sheen-t {
  syntax: "<number>";
  inherits: true;
  initial-value: -.9;
}

@property --timer-p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --sunrise {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

/* --------------------------------------------------------------------------
   2. Reset (kept in a cascade layer so that every normal rule wins over it)
   -------------------------------------------------------------------------- */
@layer base {
  *,
  ::backdrop,
  ::before,
  ::after {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    line-height: 1.5;
    tab-size: 4;
    -webkit-tap-highlight-color: transparent;
  }

  body {
    line-height: inherit;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    text-decoration: inherit;
  }

  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    top: -.5em;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }

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

  button, input, select, textarea {
    background-color: transparent;
    border-radius: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    opacity: 1;
  }

  button {
    appearance: button;
    cursor: pointer;
  }

  [hidden] {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   3. Page shell
   -------------------------------------------------------------------------- */
html,
body {
  background-color: #000;
  font-family: var(--font-hellix);
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

html.index-bg,
html.index-bg body {
  background-color: #000;
  color-scheme: dark;
  overscroll-behavior: none;
}

html.home-scroll-bg {
  font-size: 16px;
}

/* Lenis (desktop smooth scroll) */
html.lenis,
html.lenis body {
  height: auto;
}

/* While the page is locked (pinned chapters) the scrollbar must not disappear:
   with classic scrollbars that would widen the page and nudge everything to the
   right. Keep the gutter reserved and hide the overflow instead of clipping it
   (scrollbar-gutter has no effect on clip). */
html.lenis {
  scrollbar-gutter: stable;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.app {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  min-height: 100dvh;
  overflow-x: clip;
  position: relative;
}

.app__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  max-width: 100%;
  min-height: 0;
  overflow-x: clip;
  position: relative;
  z-index: 1;
}

/* On phones the page scrolls inside .app__content (keeps the viewport height stable) */
@media (max-width: 767px) {
  html.home-scroll-bg {
    height: 100lvh;
    height: var(--home-vh, 100lvh);
  }

  html.home-scroll-bg,
  html.home-scroll-bg body {
    overflow: hidden;
  }

  html.home-scroll-bg body,
  html.home-scroll-bg .app,
  html.home-scroll-bg .app__content {
    height: 100%;
    min-height: 100%;
  }

  html.home-scroll-bg .app__content {
    background-color: #000;
    overflow: clip auto;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  html.home-scroll-bg .app__content::-webkit-scrollbar {
    display: none;
    height: 0;
    width: 0;
  }

  html.home-scroll-bg .app__content,
  html.home-scroll-bg .app__content *,
  html.home-scroll-bg .app__content ::before,
  html.home-scroll-bg .app__content ::after {
    -webkit-backdrop-filter: none !important;
  }
}

.home-page {
  background-color: #000;
  color: #fff;
  flex-shrink: 0;                      /* keep the full content height inside the .app__content scroller */
  isolation: isolate;
  min-height: 100dvh;
  overflow-anchor: none;
  position: relative;
}

/* warm gradient that appears towards the footer */
.home-page::before {
  background-image: var(--home-page-gradient);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.home-page__content {
  display: flex;
  flex-direction: column;
  gap: var(--home-block-gap);
  position: relative;
  z-index: 1;
}

/* Boot loader */
#verati-loader {
  align-items: center;
  background: #000;
  display: flex;
  inset: 0;
  justify-content: center;
  pointer-events: none;
  position: fixed;
  transition: opacity .45s ease;
  z-index: 2000;
}

#verati-loader img {
  animation: verati-loader-bounce 1.65s cubic-bezier(.45, 0, .25, 1) infinite;
  display: block;
  height: auto;
  width: 64px;
}

#verati-loader.is-done {
  opacity: 0;
}

@keyframes verati-loader-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
.home-h1,
.home-h2 {
  color: #fff;
  font-family: var(--font-display);
  margin: 0;
}

.home-h1,
.home-h1-accent {
  font-size: 36px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 45px;
}

.home-h1-accent {
  align-items: center;
  display: inline-flex;
  font-family: var(--font-accent);
  font-style: italic;
}

.home-h2 {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 28px;
}

.home-h2-accent {
  align-items: center;
  display: inline-flex;
  font-family: var(--font-accent);
  font-size: 26px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 32px;
}

.home-h1-accent.home-accent--plain,
.home-h2-accent.home-accent--plain {
  display: inline-grid;
  font-size: .96em;
  letter-spacing: -.045em;
  line-height: inherit;
  text-shadow: none;
  vertical-align: baseline;
}

.home-h1-accent.home-accent--char,
.home-h2-accent.home-accent--char {
  display: inline-grid;
  letter-spacing: 0;
  width: max-content;
}

.home-body,
.home-body-accent {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 26px;
}

.home-body {
  color: #ffffffa8;
}

.home-body-accent {
  color: #fff;
}

.home-nav-text {
  color: #ffffffb3;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 24px;
}

@media (min-width: 768px) {
  .home-h1 {
    font-size: 48px;
    line-height: 60px;
  }

  .home-h1-accent {
    font-size: 52px;
    letter-spacing: -.03em;
    line-height: 60px;
  }

  .home-h2 {
    font-size: 32px;
    line-height: 40px;
  }

  .home-h2-accent {
    font-size: 34px;
    letter-spacing: -.03em;
    line-height: 40px;
  }

  .home-body,
  .home-body-accent,
  .home-nav-text {
    font-size: 20px;
    line-height: 28px;
  }
}

/* --------------------------------------------------------------------------
   5. Scroll-reveal helpers
   .home-scrub            section fades/slides in with --home-reveal (0..1)
   .home-scrub--chars     heading is revealed char by char instead (js/heading-chars.js)
   .home-copy-fade        block that fades in when it gets .home-copy-fade--in
   .home-copy-line        child lines staggered by --copy-i
   -------------------------------------------------------------------------- */
.home-scrub {
  opacity: calc(.06 + var(--home-reveal) * .94);
  transform: translateY(calc((1 - var(--home-reveal)) * 20px));
}

.home-scrub--chars {
  opacity: 1;
  transform: none;
}

.home-copy-fade {
  filter: blur(8px);
  opacity: 0;
  transform: translateY(4vh);
  transition: opacity .5s var(--home-ease), transform .5s var(--home-ease), filter .5s var(--home-ease);
}

.home-copy-fade--in,
.home-copy-fade--lines {
  filter: blur(0);
  opacity: 1;
  transform: translate(0);
}

.home-copy-line {
  filter: blur(8px);
  opacity: 0;
  transform: translateY(4vh);
  transition: opacity .7s var(--home-ease), transform .7s var(--home-ease), filter .7s var(--home-ease);
  transition-delay: calc(var(--copy-i, 0) * .1s);
}

.home-copy-fade--in .home-copy-line,
.home-copy-line.home-copy-fade--in {
  filter: blur(0);
  opacity: 1;
  transform: translate(0);
  transition-delay: calc(var(--copy-i, 0) * .16s);
  transition-duration: 1.15s;
}

@media (max-width: 767px) {
  .home-copy-line,
  .home-copy-fade--in .home-copy-line,
  .home-copy-line.home-copy-fade--in {
    filter: none;
  }
}

/* --------------------------------------------------------------------------
   6. Heading characters
   Headings marked with [data-heading-chars] are split into words and characters
   by js/heading-chars.js so they can be revealed one character at a time.
   <em> words become "glass" words: a metallic, italic accent with a moving sheen.
   -------------------------------------------------------------------------- */
.home-heading-word {
  display: inline-block;
  white-space: nowrap;
}

.home-heading-stick {              /* glass word + trailing punctuation, kept on one line */
  display: inline;
  white-space: nowrap;
}

.home-heading-char {
  display: inline-block;
  letter-spacing: 0;
  margin: 0;
  opacity: 0;                      /* revealed by JS */
  padding: 0;
  vertical-align: baseline;
  -webkit-font-smoothing: antialiased;
}

.home-heading-char:not(.home-heading-char--space) {
  margin-right: -.02em;
}

.home-heading-char--space {
  margin-right: 0;
  white-space: pre;
}

.home-heading-word--css-glass {
  display: inline-block;
  vertical-align: baseline;
  white-space: nowrap;
}

.home-heading-word--css-glass .home-heading-char:not(.home-heading-char--space) {
  margin-right: -.015em;
}

/* Glass accent: four stacked copies of the letter (edge, metal, catch, shine) */
.home-accent {
  align-items: center;
  display: inline-grid;
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  overflow: visible;
  position: relative;
}

.home-accent--plain {
  background: none;
  color: #c6ccd4;
  display: inline-grid;
  mix-blend-mode: normal;
  text-shadow: none;
  -webkit-text-fill-color: #c6ccd4;
}

.home-accent--char {
  letter-spacing: 0;
  line-height: inherit;
  vertical-align: baseline;
}

.home-accent--char.home-accent--plain {
  overflow: visible;
  vertical-align: baseline;
  width: max-content;
}

.home-accent--plain .home-accent__edge,
.home-accent--plain .home-accent__metal,
.home-accent--plain .home-accent__catch,
.home-accent--plain .home-accent__shine {
  grid-area: 1 / 1;
}

.home-accent--char.home-accent--plain .home-accent__edge,
.home-accent--char.home-accent--plain .home-accent__metal,
.home-accent--char.home-accent--plain .home-accent__catch,
.home-accent--char.home-accent--plain .home-accent__shine {
  margin: -.22em -.42em -.62em -.55em;
  padding: .22em .42em .62em .55em;
}

.home-accent--plain .home-accent__edge {
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: .9px hsla(0, 0%, 100%, .88);
}

.home-accent--plain .home-accent__metal {
  background-clip: text;
  -webkit-background-clip: text;
  background-image:
    linear-gradient(108deg, transparent, transparent 34%, hsla(0, 0%, 100%, .2) 44%, #fff 50%, hsla(0, 0%, 100%, .2) 56%, transparent 66%, transparent),
    linear-gradient(180deg, #f8fafc, #d6dce4 34%, #b0b6c0 68%, #ced4dc);
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.home-accent--plain .home-accent__catch {
  color: transparent;
  mask-image:
    radial-gradient(ellipse 36% 52% at 12% 10%, #000 0, transparent 72%),
    radial-gradient(ellipse 26% 38% at 48% 6%, #000 0, transparent 70%),
    radial-gradient(ellipse 28% 42% at 80% 20%, #000 0, transparent 70%),
    radial-gradient(ellipse 22% 34% at 34% 90%, #000 0, transparent 68%);
  -webkit-mask-image:
    radial-gradient(ellipse 36% 52% at 12% 10%, #000 0, transparent 72%),
    radial-gradient(ellipse 26% 38% at 48% 6%, #000 0, transparent 70%),
    radial-gradient(ellipse 28% 42% at 80% 20%, #000 0, transparent 70%),
    radial-gradient(ellipse 22% 34% at 34% 90%, #000 0, transparent 68%);
  mix-blend-mode: plus-lighter;
  pointer-events: none;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: .85px #fff;
}

.home-accent--plain .home-accent__shine {
  background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(66deg, transparent, hsla(0, 0%, 100%, .15) 28%, #fff 46%, #fff 54%, hsla(0, 0%, 100%, .15) 72%, transparent);
  background-position: calc(var(--glass-sheen-t, -.9) * var(--glass-word-width, 0px) - var(--glass-letter-left, 0px)) 50%;
  background-repeat: no-repeat;
  background-size: var(--glass-sheen-width, 42%) 180%;
  color: transparent;
  mix-blend-mode: plus-lighter;
  opacity: 0;
  pointer-events: none;
  -webkit-text-fill-color: transparent;
}

.home-heading-word--css-glass.is-sheening .home-accent--plain .home-accent__shine {
  animation: home-accent-sheen-fade var(--glass-sheen-cross, 2.3s) cubic-bezier(.45, .05, .55, .95) 1;
}

@keyframes home-accent-sheen-fade {
  0% { opacity: 0; }
  12% { opacity: 1; }
  78% { opacity: 1; }
  to { opacity: 0; }
}

/* --------------------------------------------------------------------------
   7. Shared components
   -------------------------------------------------------------------------- */
/* Frosted glass surface */
.liquid-glass {
  backface-visibility: hidden;
  background: #ffffff0f;
  -webkit-backdrop-filter: blur(5px) saturate(180%);
  box-shadow: inset 0 1px #ffffff40, inset -1px 0 #ffffff1f, inset 0 -1px #ffffff0a, inset 1px 0 #ffffff08;
  isolation: isolate;
  transform: translateZ(0);
}

@media (hover: none) and (pointer: coarse) {
  .liquid-glass {
    background: #ffffff1f;
  }
}

/* "Apply for membership" pill */
.home-apply-pill {
  align-items: center;
  appearance: none;
  background: #ffffffe0;
  border: 0;
  border-radius: 28px;
  color: #000000b8;
  cursor: pointer;
  display: inline-flex;
  height: 45px;
  isolation: isolate;
  justify-content: center;
  outline: none;
  padding: 0 22px;
  position: relative;
  text-decoration: none;
  transition: transform .45s var(--home-ease-out);
  white-space: nowrap;
}

.home-apply-pill__text {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.home-apply-pill__plain {
  font-family: var(--font-display);
  letter-spacing: -.01em;
}

.home-apply-pill__italic {
  font-family: var(--font-accent);
  font-size: 15px;
  font-style: italic;
  letter-spacing: -.03em;
  margin-left: .22em;
}

/* lifts 2px on hover (mouse only) */
.home-magnet-up {
  transition: transform .45s var(--home-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .home-magnet-up:hover {
    transform: translateY(-2px);
  }
}

/* --------------------------------------------------------------------------
   8. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .home-scrub,
  .home-copy-fade,
  .home-copy-line {
    filter: none;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .home-heading-char {
    opacity: 1;
  }

  .home-accent--plain .home-accent__shine {
    animation: none;
    opacity: 0;
  }

  .home-magnet-up {
    transition: none;
  }

  .home-magnet-up:hover {
    transform: none;
  }
}