:root{
  --bg:#05070b;
  --text:#ffffff;
  --accent:#7bbf85;
  --accent-hover:#91d49b;
  --accent-press:#6eaf78;
  --button-text:#111311;

  --overlay-top:rgba(0,0,0,.36);
  --overlay-mid:rgba(0,0,0,.52);
  --overlay-bottom:rgba(0,0,0,.68);

  --icon-soft:rgba(255,255,255,.74);
  --icon-strong:rgba(255,255,255,.92);

  --ease-premium:cubic-bezier(.2,1,.32,1);
  --radius-soft:.4375rem;
  --about-radius:1rem;
}

*,
*::before,
*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

html,
body{
  width:100%;
  min-height:100%;
}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
}

body.lightbox-open{
  overflow:hidden;
}

img,
video,
svg,
a,
button{
  -webkit-user-drag:none;
  user-select:none;
}

button{
  font:inherit;
  background:none;
  border:none;
  color:inherit;
}

.hero-page{
  position:relative;
  width:100%;
  min-height:100dvh;
  height:100dvh;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.04), transparent 30%),
    linear-gradient(180deg, #0b0f16 0%, #05070b 100%);
}

.hero-poster,
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  pointer-events:none;
}

.hero-poster{
  z-index:0;
  opacity:1;
  transform:scale(1.02);
  transition:opacity .7s ease;
  background:
    url("assets/hero-poster.jpg") center center / cover no-repeat,
    #05070b;
}

.hero-video{
  z-index:0;
  opacity:0;
  transition:opacity .7s ease;
  transform:scale(1.02);
  background:#05070b;
}

.hero-page.video-ready .hero-video{
  opacity:1;
}

.hero-page.video-ready .hero-poster{
  opacity:0;
}

.hero-page.no-video .hero-video{
  display:none;
}

.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      var(--overlay-top) 0%,
      var(--overlay-mid) 46%,
      var(--overlay-bottom) 100%
    );
}

.top-ribbon{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  z-index:7;
  pointer-events:none;
  padding-top:max(.18rem, env(safe-area-inset-top));
}

.top-ribbon__viewport{
  width:100%;
  overflow:hidden;
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(.42rem);
  -webkit-backdrop-filter:blur(.42rem);
}

.top-ribbon__track{
  display:flex;
  width:max-content;
  will-change:transform;
  animation:ribbonScroll var(--ribbon-duration, 28s) linear infinite;
}

.top-ribbon__group{
  display:flex;
  align-items:center;
  flex-shrink:0;
  white-space:nowrap;
  padding-block:clamp(.28rem, .42vw, .38rem);
}

.top-ribbon__unit{
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
}

.top-ribbon__item{
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  font-size:clamp(.68rem, .72vw, .78rem);
  font-weight:600;
  letter-spacing:.02em;
  color:rgba(255,255,255,.86);
  line-height:1;
}

.top-ribbon__unit:nth-child(even) .top-ribbon__item{
  color:var(--accent);
}

.top-ribbon__sep{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding-inline:clamp(.8rem, 1.2vw, 1.15rem);
  color:rgba(255,255,255,.58);
  font-size:clamp(.7rem, .78vw, .86rem);
  line-height:1;
}

.page-dots{
  position:absolute;
  top:50%;
  right:0;
  left:auto;
  transform:translateY(-50%);
  z-index:6;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(.62rem, .85vw, .78rem);
  padding:clamp(.65rem, .85vw, .8rem) clamp(.42rem, .6vw, .54rem);
  width:auto;
  background:rgba(0,0,0,.5);
  border-radius:var(--radius-soft) 0 0 var(--radius-soft);
  backdrop-filter:blur(.55rem);
  -webkit-backdrop-filter:blur(.55rem);
}

.page-dot{
  display:block;
  flex:0 0 auto;
  width:clamp(.62rem, .78vw, .74rem);
  height:clamp(.62rem, .78vw, .74rem);
  border-radius:999rem;
  border:1px solid rgba(255,255,255,.16);
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  text-decoration:none;
  background:rgba(255,255,255,.52);
  cursor:pointer;
  transition:
    transform .2s ease,
    background .2s ease,
    opacity .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
  opacity:1;
}

.page-dot:hover{
  transform:scale(1.12);
  background:rgba(255,255,255,.78);
  border-color:rgba(255,255,255,.24);
}

.page-dot.is-active{
  background:var(--accent);
  border-color:rgba(123,191,133,.48);
  box-shadow:0 0 .65rem rgba(123,191,133,.28);
}

.sections-viewport{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  overflow:hidden;
  touch-action:none;
  overscroll-behavior:none;
}

.sections{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transition:transform 1.02s var(--ease-premium);
  will-change:transform;
}

.section{
  position:absolute;
  left:0;
  width:100%;
  height:100%;
}

.section--hero{top:0;display:flex;align-items:center;justify-content:center;}
.section--about{top:100%;display:flex;align-items:center;justify-content:center;padding:clamp(5rem, 9vh, 6.6rem) clamp(1rem, 2.4vw, 1.8rem) clamp(4.8rem, 9vh, 5.8rem);}
.section--features{top:200%;display:flex;align-items:center;justify-content:center;padding:clamp(5.5rem, 10vh, 7.5rem) clamp(1rem, 2.6vw, 2rem) clamp(5rem, 10vh, 6.5rem);}
.section--gallery{top:300%;display:flex;align-items:center;justify-content:center;padding:clamp(4.8rem, 8.5vh, 6rem) clamp(1rem, 2.2vw, 1.6rem) clamp(4.2rem, 8.5vh, 5.4rem);}

.section--hero .hero-content{
  position:relative;
  z-index:2;
  width:min(100%, 92rem);
  max-width:92rem;
  height:100%;
  margin-inline:auto;
  display:grid;
  justify-items:center;
  align-content:center;
  gap:clamp(.38rem, .9vh, .68rem);
  text-align:center;
  padding:
    clamp(2rem, 4vw, 4rem)
    clamp(1rem, 3vw, 2rem)
    clamp(6rem, 11vh, 8rem);
  opacity:0;
  transform:translateY(.9rem);
  filter:blur(.18rem);
  transition:
    opacity .62s var(--ease-premium),
    transform .62s var(--ease-premium),
    filter .62s var(--ease-premium);
}

.hero-page:not(.is-booted) .section--hero .hero-content{
  opacity:0 !important;
  transform:translateY(.9rem) !important;
  filter:blur(.18rem) !important;
}

.section--hero.is-active .hero-content{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
  pointer-events:auto;
}

.section--hero.is-leaving-up .hero-content{
  opacity:0;
  transform:translateY(-1.35rem);
  filter:blur(.22rem);
  pointer-events:none;
}

.section--hero.is-leaving-down .hero-content{
  opacity:0;
  transform:translateY(1.35rem);
  filter:blur(.22rem);
  pointer-events:none;
}

.hero-logo-wrap{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:clamp(8rem, 20vh, 20rem);
  isolation:isolate;
}

.hero-logo-wrap::before{
  content:"";
  position:absolute;
  inset:12% 8% 16%;
  z-index:-2;
  background:
    radial-gradient(
      ellipse at center,
      rgba(0,0,0,.58) 0%,
      rgba(0,0,0,.30) 50%,
      rgba(0,0,0,0) 80%
    );
  filter:blur(clamp(1rem, 2vw, 2rem));
  opacity:0;
  transform:scale(.92);
  transition:
    opacity .9s var(--ease-premium) .04s,
    transform .9s var(--ease-premium) .04s;
}

.hero-logo-wrap::after{
  content:"";
  position:absolute;
  inset:20% 18% 24%;
  z-index:-1;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.05) 0%,
      rgba(255,255,255,0) 100%
    );
  filter:blur(clamp(.75rem, 1.4vw, 1.2rem));
  opacity:0;
  transform:scale(.96);
  transition:
    opacity .9s var(--ease-premium) .08s,
    transform .9s var(--ease-premium) .08s;
}

.hero-page:not(.is-booted) .hero-logo-wrap::before,
.hero-page:not(.is-booted) .hero-logo-wrap::after{
  opacity:0 !important;
  transform:scale(.92) !important;
}

.hero-logo{
  width:clamp(22rem, 48vw, 58rem);
  max-width:88vw;
  max-height:44vh;
  object-fit:contain;
  display:block;
  opacity:0;
  transform:translateY(1.15rem);
  filter:blur(.36rem);
  transition:
    opacity .88s var(--ease-premium) .08s,
    transform .88s var(--ease-premium) .08s,
    filter .88s var(--ease-premium) .08s;
}

.hero-logo-fallback{
  display:none;
  font-size:clamp(2.2rem, 8vw, 6rem);
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#ffffff;
  opacity:0;
  transform:translateY(1.15rem);
  filter:blur(.36rem);
  transition:
    opacity .88s var(--ease-premium) .08s,
    transform .88s var(--ease-premium) .08s,
    filter .88s var(--ease-premium) .08s;
}

.hero-page:not(.is-booted) .hero-logo,
.hero-page:not(.is-booted) .hero-logo-fallback{
  opacity:0 !important;
  transform:translateY(1.15rem) !important;
  filter:blur(.36rem) !important;
}

.hero-logo-wrap.is-fallback .hero-logo{display:none;}
.hero-logo-wrap.is-fallback .hero-logo-fallback{display:block;}

.join-btn{
  min-width:clamp(12rem, 18vw, 15rem);
  min-height:clamp(3.1rem, 6vh, 3.9rem);
  padding-inline:clamp(1.4rem, 2.2vw, 2rem);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-soft);
  text-decoration:none;
  font-size:clamp(1rem, 1.15vw, 1.1rem);
  font-weight:700;
  background:linear-gradient(180deg, var(--accent) 0%, #72b97d 100%);
  color:var(--button-text);
  box-shadow:
    0 .5rem 1.4rem rgba(123,191,133,.18),
    inset 0 .04rem 0 rgba(255,255,255,.18);
  opacity:0;
  transform:translateY(.82rem);
  filter:blur(.18rem);
  transition:
    background .24s ease,
    box-shadow .24s ease,
    opacity .64s var(--ease-premium) .32s,
    transform .64s var(--ease-premium) .32s,
    filter .64s var(--ease-premium) .32s;
}

.hero-page:not(.is-booted) .join-btn{
  opacity:0 !important;
  transform:translateY(.82rem) !important;
  filter:blur(.18rem) !important;
}

.section--hero.is-active .hero-logo-wrap::before{
  opacity:1;
  transform:scale(1);
}

.section--hero.is-active .hero-logo-wrap::after{
  opacity:.52;
  transform:scale(1);
}

.section--hero.is-active .hero-logo,
.section--hero.is-active .hero-logo-fallback{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

.section--hero.is-active .join-btn{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

.join-btn:hover{
  background:linear-gradient(180deg, var(--accent-hover) 0%, #7ec889 100%);
  box-shadow:
    0 .85rem 2rem rgba(123,191,133,.24),
    inset 0 .04rem 0 rgba(255,255,255,.24);
  filter:saturate(1.05) brightness(1.015);
}

.join-btn:active{
  background:linear-gradient(180deg, #84ca8f 0%, var(--accent-press) 100%);
  box-shadow:
    0 .35rem 1rem rgba(123,191,133,.18),
    inset 0 .04rem 0 rgba(255,255,255,.14);
}

.section--about .about-wrap,
.section--features .features-wrap,
.section--gallery .gallery-wrap{
  width:min(100%, 92rem);
  opacity:0;
  transform:translateY(1rem);
  filter:blur(.18rem);
  transition:
    opacity .62s var(--ease-premium),
    transform .62s var(--ease-premium),
    filter .62s var(--ease-premium);
}

.section--about.is-active .about-wrap,
.section--features.is-active .features-wrap{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
  pointer-events:auto;
}

.section--gallery .gallery-wrap{
  width:min(100%, 78rem);
}

.section--gallery.is-active .gallery-wrap{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
  pointer-events:auto;
  animation:galleryPageIn 1.05s var(--ease-premium) both;
}

.section--about.is-leaving-up .about-wrap,
.section--features.is-leaving-up .features-wrap,
.section--gallery.is-leaving-up .gallery-wrap{
  opacity:0;
  transform:translateY(-1rem);
  filter:blur(.18rem);
  pointer-events:none;
}

.section--about.is-leaving-down .about-wrap,
.section--features.is-leaving-down .features-wrap,
.section--gallery.is-leaving-down .gallery-wrap{
  opacity:0;
  transform:translateY(1rem);
  filter:blur(.18rem);
  pointer-events:none;
}

/* ABOUT */
.about-wrap{
  width:min(100%, 68rem);
}

.about-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(15rem, 21rem) minmax(0, 1fr);
  align-items:stretch;
  gap:0;
  background:rgba(0,0,0,.76);
  border-radius:var(--about-radius);
  overflow:hidden;
  box-shadow:0 1.1rem 2.8rem rgba(0,0,0,.24);
}

.about-card__image,
.about-card__text{
  min-width:0;
}

.about-card__image{
  grid-column:1;
  grid-row:1;
  position:relative;
  background:#0d1118;
}

.about-card__image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  aspect-ratio:9/16;
}

.about-card__text{
  grid-column:2;
  grid-row:1;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:clamp(1.1rem, 1.45vw, 1.45rem) clamp(1.2rem, 1.7vw, 1.7rem);
}

.about-card__kicker{
  display:inline-block;
  margin-bottom:.45rem;
  color:var(--accent);
  font-size:clamp(.72rem, .82vw, .78rem);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.about-card__text h2{
  font-size:clamp(1.45rem, 2.05vw, 1.95rem);
  line-height:1.02;
  font-weight:800;
  margin-bottom:.8rem;
}

.about-card__text p{
  color:rgba(255,255,255,.82);
  font-size:clamp(.84rem, .9vw, .92rem);
  line-height:1.55;
}

.about-card__text p + p{
  margin-top:.72rem;
}

/* ABOUT TEXT */
.about-card__lead{
  margin:0 0 .6rem;
  color:rgba(255,255,255,.92);
  font-size:clamp(.92rem,1vw,.98rem);
  line-height:1.68;
}

.about-card__body{
  display:flex;
  flex-direction:column;
  gap:.92rem;
}

.about-card__group{
  display:flex;
  flex-direction:column;
  gap:.42rem;
}

.about-card__group + .about-card__group{
  padding-top:.15rem;
  border-top:none;
}

.about-card__group-head{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin-bottom:.08rem;
}

.about-card__group-title{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  color:var(--accent);
  font-size:clamp(.7rem,.8vw,.76rem);
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.about-card__group-line{
  display:block;
  width:100%;
  height:1px;
  background:linear-gradient(90deg, rgba(123,191,133,.34), rgba(123,191,133,0));
}

.about-card__group p{
  margin:0;
  color:rgba(255,255,255,.82);
}

.about-card__group p + p{
  margin-top:.14rem;
}

.about-card__accent{
  color:var(--accent);
  font-weight:700;
}

.about-card__closing{
  margin-top:.05rem !important;
  color:rgba(255,255,255,.95) !important;
}

/* FEATURES HEAD */
.features-head{
  text-align:center;
  margin-bottom:clamp(.9rem, 1.6vw, 1.25rem);
  opacity:0;
  transform:translateY(1rem);
}

.section--features.is-active .features-head{
  animation:featuresHeadIn .82s var(--ease-premium) .06s both;
}

.features-kicker{
  display:inline-block;
  margin-bottom:.35rem;
  font-size:clamp(.74rem, .9vw, .82rem);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
}

.features-head h2{
  font-size:clamp(1.5rem, 2.3vw, 2.1rem);
  font-weight:800;
  line-height:1.05;
  margin-bottom:.45rem;
}

.features-head p{
  max-width:42rem;
  margin:0 auto;
  color:rgba(255,255,255,.74);
  font-size:clamp(.9rem, .98vw, .98rem);
  line-height:1.45;
}

.features-swipe-hint{
  display:none;
}

/* FEATURES */
.features-track{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(1rem, 1.5vw, 1.3rem);
}

.feature-card{
  min-width:0;
  border-radius:var(--radius-soft);
  overflow:hidden;
  background:transparent;
}

.feature-card__banner{
  aspect-ratio:596 / 256;
  height:auto;
  overflow:hidden;
  border-radius:var(--radius-soft) var(--radius-soft) 0 0;
  opacity:0;
  transform:translateY(1rem);
}

.feature-card__banner img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.feature-card__body{
  background:rgba(0,0,0,.78);
  min-height:clamp(15.4rem, 21vw, 17.8rem);
  padding:clamp(1rem, 1.4vw, 1.2rem);
  border-radius:0 0 var(--radius-soft) var(--radius-soft);
  opacity:0;
  transform:translateY(-.8rem) scaleY(.94);
  transform-origin:top;
}

.feature-card__body h3{
  margin:0 0 .65rem;
  font-size:clamp(1rem, 1.2vw, 1.1rem);
  font-weight:800;
  color:#fff;
}

.feature-card__intro{
  color:rgba(255,255,255,.7);
  font-size:clamp(.82rem, .92vw, .88rem);
  line-height:1.48;
  margin-bottom:.95rem;
}

.feature-card__body ul{
  list-style:none;
  display:grid;
  gap:.58rem;
}

.feature-card__body li{
  color:rgba(255,255,255,.84);
  line-height:1.45;
  font-size:clamp(.84rem, .95vw, .92rem);
}

.feature-card__body li::before{
  content:"•";
  color:var(--accent);
  display:inline-block;
  margin-right:.5rem;
}

.section--features.is-active .feature-card:nth-child(1) .feature-card__banner{animation:cardBannerIn .65s var(--ease-premium) .08s both;}
.section--features.is-active .feature-card:nth-child(1) .feature-card__body{animation:cardBodyIn .6s var(--ease-premium) .22s both;}
.section--features.is-active .feature-card:nth-child(2) .feature-card__banner{animation:cardBannerIn .65s var(--ease-premium) .18s both;}
.section--features.is-active .feature-card:nth-child(2) .feature-card__body{animation:cardBodyIn .6s var(--ease-premium) .32s both;}
.section--features.is-active .feature-card:nth-child(3) .feature-card__banner{animation:cardBannerIn .65s var(--ease-premium) .28s both;}
.section--features.is-active .feature-card:nth-child(3) .feature-card__body{animation:cardBodyIn .6s var(--ease-premium) .42s both;}
.section--features.is-active .feature-card:nth-child(4) .feature-card__banner{animation:cardBannerIn .65s var(--ease-premium) .38s both;}
.section--features.is-active .feature-card:nth-child(4) .feature-card__body{animation:cardBodyIn .6s var(--ease-premium) .52s both;}

/* GALLERY */
.gallery-wrap{
  display:grid;
  justify-items:center;
}

.gallery-head,
.gallery-shell,
.gallery-thumbs{
  width:100%;
}

.gallery-head{
  text-align:center;
  margin-bottom:clamp(.75rem, 1.5vw, 1.15rem);
  opacity:0;
  transform:translateY(1.1rem);
}

.section--gallery.is-active .gallery-head{
  animation:galleryHeadIn .88s var(--ease-premium) .08s both;
}

.gallery-kicker{
  display:inline-block;
  margin-bottom:.35rem;
  font-size:clamp(.74rem, .9vw, .82rem);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
}

.gallery-head h2{
  font-size:clamp(1.55rem, 2.4vw, 2.2rem);
  font-weight:800;
  line-height:1.05;
  margin-bottom:.45rem;
}

.gallery-head p{
  max-width:38rem;
  margin:0 auto;
  color:rgba(255,255,255,.74);
  font-size:clamp(.9rem, .98vw, .98rem);
  line-height:1.45;
}

.gallery-shell{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  gap:clamp(.7rem, 1vw, .9rem);
  align-items:center;
  max-width:min(100%, 70rem);
  margin-inline:auto;
  opacity:0;
  transform:translateY(1.25rem) scale(.985);
}

.section--gallery.is-active .gallery-shell{
  animation:galleryShellIn .94s var(--ease-premium) .2s both;
}

.gallery-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  text-align:center;
}

.gallery-nav span{
  display:block;
  line-height:1;
  transform:translateY(-.03em);
}

.gallery-nav{
  width:clamp(2.6rem, 3vw, 3rem);
  height:clamp(2.6rem, 3vw, 3rem);
  border-radius:999rem;
  background:rgba(0,0,0,.58);
  color:#fff;
  font-size:clamp(1.35rem, 1.55vw, 1.5rem);
  cursor:pointer;
  transition:
    transform .22s ease,
    background .22s ease,
    color .22s ease;
}

.gallery-nav:hover{
  transform:scale(1.06);
  background:rgba(0,0,0,.76);
  color:var(--accent);
}

.gallery-viewport{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:var(--radius-soft);
  margin-inline:auto;
}

.gallery-track{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  margin-inline:auto;
}

.gallery-slide{
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  border-radius:var(--radius-soft);
  overflow:hidden;
  background:#0b0f16;
  cursor:pointer;
  transition:
    opacity .72s var(--ease-premium),
    visibility 0s linear .72s;
}

.gallery-slide.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  z-index:2;
  transition:
    opacity .72s var(--ease-premium),
    visibility 0s linear 0s;
}

.gallery-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.gallery-slide__overlay{
  position:absolute;
  inset:auto 0 0 0;
  padding:clamp(.85rem, 1.5vw, 1.1rem);
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.78) 100%);
}

.gallery-slide__tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:1.9rem;
  padding:0 .75rem;
  border-radius:999rem;
  background:rgba(123,191,133,.18);
  color:var(--accent);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  margin-bottom:.55rem;
}

.gallery-slide__overlay h3{
  font-size:clamp(1.08rem, 1.35vw, 1.28rem);
  font-weight:800;
  color:#fff;
  margin-bottom:.25rem;
}

.gallery-slide__desc{
  color:rgba(255,255,255,.78);
  font-size:clamp(.83rem, .9vw, .9rem);
  line-height:1.42;
  max-width:44rem;
}

.gallery-thumbs{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  margin-top:clamp(.7rem, 1vw, .9rem);
  opacity:0;
  transform:translateY(.8rem);
}

.section--gallery.is-active .gallery-thumbs{
  animation:galleryThumbsIn .82s var(--ease-premium) .34s both;
}

.gallery-thumb{
  position:relative;
  width:.74rem;
  height:.74rem;
  border-radius:999rem;
  background:rgba(255,255,255,.34);
  border:none;
  outline:none;
  box-shadow:none;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  overflow:hidden;
  transition:
    width .22s ease,
    transform .2s ease,
    background .2s ease;
}

.gallery-thumb::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:0;
  height:100%;
  background:var(--accent);
  border-radius:inherit;
  box-shadow:none;
}

.gallery-thumb:hover{
  transform:scale(1.08);
  background:rgba(255,255,255,.5);
}

.gallery-thumb.is-active{
  width:3rem;
  background:rgba(255,255,255,.08);
  border:none;
  outline:none;
  box-shadow:none;
}

.gallery-thumb.is-progress-running::before{
  animation:thumbProgress 5s linear forwards;
}

.gallery-thumb:focus,
.gallery-thumb:focus-visible,
.gallery-thumb:active{
  outline:none;
  box-shadow:none;
  border:none;
}

.gallery-lightbox{
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(0,0,0,.92);
  backdrop-filter:blur(.4rem);
  -webkit-backdrop-filter:blur(.4rem);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease;
}

.gallery-lightbox.is-open{
  opacity:1;
  pointer-events:auto;
}

.gallery-lightbox__content{
  width:min(92vw, 82rem);
  max-width:82rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-soft);
  overflow:hidden;
  text-align:center;
}

.gallery-lightbox__content img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:contain;
  display:block;
  background:#05070b;
  border-radius:var(--radius-soft);
}

.gallery-lightbox__caption{
  width:100%;
  padding-top:.9rem;
  text-align:center;
}

.gallery-lightbox__tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:1.9rem;
  padding:0 .75rem;
  border-radius:999rem;
  background:rgba(123,191,133,.16);
  color:var(--accent);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  margin-bottom:.55rem;
}

.gallery-lightbox__caption h3{
  font-size:clamp(1.15rem, 1.55vw, 1.38rem);
  font-weight:800;
  margin-bottom:.3rem;
}

.gallery-lightbox__caption p{
  color:rgba(255,255,255,.78);
  font-size:clamp(.88rem, .95vw, .95rem);
  line-height:1.45;
  max-width:46rem;
  margin:0 auto;
}

/* ORIENTATION LOCK */
.mobile-orientation-lock{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
  background:#000;
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease;
}

.mobile-orientation-lock__inner{
  width:min(100%, 22rem);
  text-align:center;
  color:#fff;
}

.mobile-orientation-lock__phone{
  width:4.7rem;
  height:4.7rem;
  margin:0 auto 1.1rem;
  display:grid;
  place-items:center;
  position:relative;
}

.mobile-orientation-lock__phone::before{
  content:"";
  width:2rem;
  height:3.3rem;
  border:.14rem solid rgba(255,255,255,.82);
  border-radius:.55rem;
  display:block;
  animation:rotatePhone 1.6s var(--ease-premium) infinite;
}

.mobile-orientation-lock__phone span{
  position:absolute;
  width:.3rem;
  height:.3rem;
  border-radius:999rem;
  background:var(--accent);
  bottom:.82rem;
  left:50%;
  transform:translateX(-50%);
  animation:phoneDotPulse 1.6s ease-in-out infinite;
}

.mobile-orientation-lock__inner h2{
  font-size:1.15rem;
  font-weight:800;
  margin-bottom:.4rem;
}

.mobile-orientation-lock__inner p{
  color:rgba(255,255,255,.72);
  font-size:.9rem;
  line-height:1.45;
}

@keyframes rotatePhone{
  0%,100%{transform:rotate(0deg);}
  25%,75%{transform:rotate(0deg);}
  50%{transform:rotate(90deg);}
}

@keyframes phoneDotPulse{
  0%,100%{opacity:1;transform:translateX(-50%) scale(1);}
  50%{opacity:.35;transform:translateX(-50%) scale(.78);}
}

@keyframes featuresHeadIn{
  0%{
    opacity:0;
    transform:translateY(1rem);
    filter:blur(.18rem);
  }
  100%{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
}

@keyframes thumbProgress{
  0%{width:0;}
  100%{width:100%;}
}

@keyframes galleryPageIn{
  0%{
    opacity:0;
    transform:translateY(1rem);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes galleryHeadIn{
  0%{
    opacity:0;
    transform:translateY(1.1rem);
    filter:blur(.2rem);
  }
  100%{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
}

@keyframes galleryShellIn{
  0%{
    opacity:0;
    transform:translateY(1.15rem) scale(.988);
    filter:blur(.22rem);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}

@keyframes galleryThumbsIn{
  0%{
    opacity:0;
    transform:translateY(.8rem);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes cardBannerIn{
  0%{
    opacity:0;
    transform:translateY(1rem);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes cardBodyIn{
  0%{
    opacity:0;
    transform:translateY(-.8rem) scaleY(.94);
  }
  100%{
    opacity:1;
    transform:translateY(0) scaleY(1);
  }
}

@keyframes iconsIn{
  0%{
    opacity:0;
    transform:translateX(-50%) translateY(.8rem);
  }
  100%{
    opacity:1;
    transform:translateX(-50%) translateY(0);
  }
}

@keyframes scrollPulse{
  0%{
    opacity:1;
    transform:translateX(-50%) translateY(0);
  }
  60%{
    opacity:.26;
    transform:translateX(-50%) translateY(.32rem);
  }
  100%{
    opacity:1;
    transform:translateX(-50%) translateY(0);
  }
}

@keyframes ribbonScroll{
  0%{
    transform:translateX(0);
  }
  100%{
    transform:translateX(calc(var(--ribbon-shift, 0px) * -1));
  }
}

.bottom-icons{
  position:absolute;
  left:50%;
  bottom:max(1rem, env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(1rem, 1.8vw, 1.4rem);
  opacity:0;
}

.hero-page.page-ready .bottom-icons{
  animation:iconsIn .96s var(--ease-premium) .9s both;
}

.kofi-btn,
.discord-btn{
  width:clamp(1.85rem, 2.6vw, 2.25rem);
  height:clamp(1.85rem, 2.6vw, 2.25rem);
  display:grid;
  place-items:center;
  text-decoration:none;
  background:none;
  border:none;
  color:var(--icon-soft);
  opacity:.95;
  transform:translateY(0) scale(1);
  transition:
    color .22s ease,
    opacity .22s ease,
    transform .22s ease;
}

.kofi-btn:hover,
.discord-btn:hover{
  color:var(--icon-strong);
  opacity:1;
  transform:translateY(-.10rem) scale(1.08);
}

.kofi-btn svg,
.discord-btn svg{
  width:100%;
  height:100%;
  display:block;
  fill:currentColor;
}

.scroll-indicator{
  display:flex;
  align-items:center;
  justify-content:center;
}

.scroll-indicator__mouse{
  position:relative;
  width:clamp(1.2rem, 1.8vw, 1.45rem);
  height:clamp(1.9rem, 3vw, 2.35rem);
  border:clamp(.08rem, .11vw, .12rem) solid var(--icon-soft);
  border-radius:999rem;
  opacity:.95;
}

.scroll-indicator__mouse::after{
  content:"";
  position:absolute;
  left:50%;
  top:16%;
  width:clamp(.16rem, .22vw, .2rem);
  height:clamp(.42rem, .55vw, .48rem);
  border-radius:999rem;
  background:var(--accent);
  transform:translateX(-50%);
  animation:scrollPulse 1.8s ease-in-out infinite;
}

@media (max-width: 48rem){
  :root{
    --mobile-top-space:max(calc(env(safe-area-inset-top) + 4.55rem), 9svh);
    --mobile-bottom-space:max(calc(env(safe-area-inset-bottom) + 5.1rem), 11svh);
    --mobile-shell-height:calc(100svh - var(--mobile-top-space) - var(--mobile-bottom-space));
  }

  .page-dots{
    display:none !important;
  }

  .sections-viewport{
    touch-action:pan-y;
  }

  .top-ribbon__group{
    padding-block:.34rem;
  }

  .top-ribbon__item{
    font-size:.68rem;
  }

  .top-ribbon__sep{
    padding-inline:.78rem;
    font-size:.78rem;
  }

  .hero-logo{
    width:min(78vw, 24rem);
    max-height:18vh;
  }

  .section--hero .hero-content{
    width:100%;
    max-width:none;
    height:100%;
    justify-items:center;
    align-content:center;
    padding:
      max(calc(env(safe-area-inset-top) + 2.8rem), 12vh)
      clamp(1rem, 5vw, 1.2rem)
      max(calc(env(safe-area-inset-bottom) + 5.8rem), 18vh);
    gap:clamp(.55rem, 1.1vh, .8rem);
  }

  .join-btn{
    min-width:min(80vw, 21rem);
    min-height:3.15rem;
  }

  .section--about{
    align-items:center;
    justify-content:center;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
    scrollbar-width:none;
    padding:
      var(--mobile-top-space)
      clamp(.8rem, 3.2vw, .95rem)
      var(--mobile-bottom-space);
  }

  .section--features{
    align-items:center;
    justify-content:center;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
    scrollbar-width:none;
    padding:
      var(--mobile-top-space)
      clamp(.85rem, 3.4vw, 1rem)
      var(--mobile-bottom-space);
  }

  .section--gallery{
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:
      max(calc(env(safe-area-inset-top) + 4.2rem), 8vh)
      clamp(.85rem, 3.4vw, 1rem)
      max(calc(env(safe-area-inset-bottom) + 4.4rem), 9vh);
  }

  .section--about::-webkit-scrollbar,
  .section--features::-webkit-scrollbar{
    display:none;
  }

  .about-wrap,
  .features-wrap,
  .gallery-wrap{
    width:100%;
    margin-inline:auto;
  }

  /* PAGE 2 PORTRAIT */
  .about-wrap{
    max-width:min(100%, 21.4rem);
    min-height:var(--mobile-shell-height);
    display:grid;
    place-items:center;
  }

  .about-card{
    grid-template-columns:1fr;
    width:min(100%, 19.9rem);
    margin-inline:auto;
  }

  .about-card__image{
    display:none;
  }

  .about-card__text{
    grid-column:1;
    grid-row:1;
    justify-content:flex-start;
    padding:.82rem .82rem .86rem;
    text-align:left;
  }

  .about-card__kicker{
    margin-bottom:.28rem;
    font-size:.62rem;
    letter-spacing:.11em;
  }

  .about-card__text h2{
    font-size:clamp(1.08rem, 4.4vw, 1.34rem);
    margin-bottom:.45rem;
    line-height:1;
  }

  .about-card__text p{
    font-size:clamp(.75rem, 2.95vw, .82rem);
    line-height:1.34;
  }

  .about-card__text p + p{
    margin-top:.42rem;
  }

  .about-card__lead{
    margin:0 0 .38rem;
    font-size:clamp(.76rem, 3vw, .83rem);
    line-height:1.38;
  }

  .about-card__body{
    gap:.56rem;
  }

  .about-card__group{
    gap:.22rem;
  }

  .about-card__group + .about-card__group{
    padding-top:0;
  }

  .about-card__group-head{
    gap:.45rem;
    margin-bottom:0;
  }

  .about-card__group-title{
    font-size:.62rem;
    letter-spacing:.1em;
  }

  .about-card__group-line{
    opacity:.9;
  }

  .about-card__closing{
    margin-top:0 !important;
  }

  /* PAGE 3 PORTRAIT */
  .features-wrap{
    max-width:none;
    min-height:var(--mobile-shell-height);
    display:grid;
    grid-template-rows:auto auto auto;
    align-content:center;
    gap:.68rem;
  }

  .features-head{
    width:min(100%, 20rem);
    margin:0 auto;
  }

  .features-head h2{
    font-size:clamp(1.26rem, 4.4vw, 1.55rem);
  }

  .features-head p{
    font-size:.84rem;
    line-height:1.34;
  }

  .features-swipe-hint{
    display:flex;
    align-items:center;
    justify-content:center;
    width:min(100%, 20rem);
    margin:0 auto;
    font-size:.72rem;
    color:rgba(255,255,255,.62);
    text-align:center;
  }

  .features-track{
    display:flex;
    gap:.78rem;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    touch-action:pan-x;
    align-items:stretch;
    width:100vw;
    max-width:100vw;
    margin-left:50%;
    transform:translateX(-50%);
    padding-inline:calc(50vw - (min(78vw, 17.3rem) / 2));
    scroll-padding-inline:calc(50vw - (min(78vw, 17.3rem) / 2));
  }

  .features-track::-webkit-scrollbar{
    display:none;
  }

  .feature-card{
    flex:0 0 min(78vw, 17.3rem);
    max-width:min(78vw, 17.3rem);
    min-height:0;
    display:grid;
    grid-template-rows:auto minmax(0, 1fr);
    align-self:flex-start;
    scroll-snap-align:center;
    opacity:1;
    transform:none;
  }

  .feature-card.is-visible{
    opacity:1;
    transform:none;
  }

  .feature-card__banner{
    aspect-ratio:596 / 256;
    height:auto;
    opacity:1;
    transform:none;
  }

  .feature-card__body{
    min-height:clamp(15.8rem, 33svh, 17.6rem);
    padding:.88rem .9rem .94rem;
    opacity:1;
    transform:none;
  }

  .feature-card__body h3{
    font-size:.96rem;
    margin-bottom:.54rem;
  }

  .feature-card__intro{
    font-size:.79rem;
    line-height:1.34;
    margin-bottom:.72rem;
  }

  .feature-card__body ul{
    gap:.46rem;
  }

  .feature-card__body li{
    font-size:.8rem;
    line-height:1.3;
  }

  .section--features.is-active .feature-card:nth-child(1) .feature-card__banner,
  .section--features.is-active .feature-card:nth-child(2) .feature-card__banner,
  .section--features.is-active .feature-card:nth-child(3) .feature-card__banner,
  .section--features.is-active .feature-card:nth-child(4) .feature-card__banner{
    animation:cardBannerIn .65s var(--ease-premium) both;
  }

  .section--features.is-active .feature-card:nth-child(1) .feature-card__body,
  .section--features.is-active .feature-card:nth-child(2) .feature-card__body,
  .section--features.is-active .feature-card:nth-child(3) .feature-card__body,
  .section--features.is-active .feature-card:nth-child(4) .feature-card__body{
    animation:cardBodyIn .6s var(--ease-premium) both;
  }

  /* PAGE 4 PORTRAIT */
  .gallery-wrap{
    max-width:min(100%, 24rem);
    min-height:var(--mobile-shell-height);
    display:grid;
    grid-template-rows:auto auto auto;
    align-content:center;
    justify-items:center;
    gap:.72rem;
  }

  .gallery-head{
    width:100%;
    margin-bottom:0;
    text-align:center;
  }

  .gallery-head h2{
    font-size:clamp(1.32rem, 4.8vw, 1.68rem);
  }

  .gallery-head p{
    font-size:.88rem;
    line-height:1.4;
  }

  .gallery-shell{
    grid-template-columns:1fr;
    gap:.6rem;
    width:100%;
    max-width:min(100%, 24rem);
    margin-inline:auto;
  }

  .gallery-nav{
    display:none !important;
    pointer-events:none !important;
  }

  .gallery-viewport{
    width:100%;
    margin-inline:auto;
  }

  .gallery-track{
    width:100%;
    aspect-ratio:16/9;
  }

  .gallery-slide__overlay{
    padding:.82rem;
    text-align:left;
  }

  .gallery-slide__tag{
    min-height:1.7rem;
    padding:0 .66rem;
    font-size:.67rem;
    margin-bottom:.42rem;
  }

  .gallery-slide__overlay h3{
    font-size:.98rem;
    margin-bottom:.18rem;
    text-align:left;
  }

  .gallery-slide__desc{
    font-size:.8rem;
    line-height:1.36;
    text-align:left;
    margin-inline:0;
  }

  .gallery-thumbs{
    width:100%;
    margin-top:0;
    justify-content:center;
  }

  .gallery-thumb{
    width:.66rem;
    height:.66rem;
  }

  .gallery-thumb.is-active{
    width:2.4rem;
  }

  .gallery-lightbox__content{
    width:92vw;
    border-radius:var(--radius-soft);
    overflow:hidden;
  }

  .gallery-lightbox__content img{
    width:100%;
    aspect-ratio:16/9;
    max-height:none;
    border-radius:var(--radius-soft);
  }

  .gallery-lightbox__caption{
    padding-top:.75rem;
  }

  .gallery-lightbox__caption h3{
    font-size:1.04rem;
  }

  .gallery-lightbox__caption p{
    font-size:.84rem;
  }

  .bottom-icons{
    bottom:max(.9rem, env(safe-area-inset-bottom));
    gap:.9rem;
  }

  .kofi-btn,
  .discord-btn{
    width:1.9rem;
    height:1.9rem;
  }

  .scroll-indicator__mouse{
    width:1.18rem;
    height:1.85rem;
  }

  .hero-logo-wrap::before{
    inset:14% 2% 18%;
  }

  .hero-logo-wrap::after{
    inset:24% 10% 28%;
  }
}

@media (max-width: 64rem) and (orientation: landscape){
  .hero-page,
  .gallery-lightbox{
    visibility:hidden;
    pointer-events:none;
  }

  .mobile-orientation-lock{
    opacity:1;
    pointer-events:auto;
  }
}

@media (min-width: 120rem){
  .hero-logo{
    width:clamp(30rem, 40vw, 60rem);
  }
}