/* Application styles */

@font-face {
  font-family: "TribeFont";
  src: url("/assets/TribeFontRegular-rXnx-d224da1c.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "TribeFont", system-ui, sans-serif;
  color: #fff;
  background-color: #000;
  background-image: url("/assets/background/background_6-50562026.webp");
  /* Explicit tile size, smaller than the source's natural 2048px: without
     this, the image renders at 1:1 CSS pixels, which both looks zoomed in
     (barely one tile fits in the viewport) and stays soft on retina
     displays (2048 source px stretched to cover 4096 device px at 2x). A
     512px tile keeps a 4x pixel buffer — plenty sharp even at 2x/3x DPR. */
  background-size: 512px 512px;
  background-repeat: repeat;
  background-attachment: fixed;
}

.firefly-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.firefly {
  position: absolute;
  top: var(--top);
  left: var(--left);
  width: var(--size);
  height: var(--size);
  background: #d9ff8c;
  border-radius: 50%;
  box-shadow: 0 0 10px 3px rgba(217, 255, 140, 0.8);
  opacity: 0;
  animation: firefly-flicker var(--duration) ease-in-out var(--delay) infinite;
}

/* Pink fireflies scattered around the corner background images, instead of
   a plain border. */
.firefly--pink {
  background: #f85d5d;
  box-shadow: 0 0 10px 3px rgba(248, 93, 93, 0.8);
}

@keyframes firefly-flicker {
  0%, 100% { opacity: 0; transform: translate(0, 0); }
  40% { opacity: 1; transform: translate(4px, -6px); }
  60% { opacity: 0.6; }
  80% { opacity: 0; transform: translate(-3px, 3px); }
}

/* A single background-image on body can't detect hover per region, so each
   corner is its own fixed-position element with a normal/hover image pair. */
/* The frame's transparent "window" only covers ~73.5% of its 1024px canvas
   (rock border eats the outer ~13% on each side). Shrinking the artwork to
   that same 73% and centering it — rather than growing the frame past the
   box — keeps the whole picture visible behind the window while the frame
   stays exactly the size of the 320px box (no overhang), so the box's
   footprint never grows past what the hero layout already accounts for. */
.bg-corner {
  display: none;
  position: fixed;
  width: 320px;
  height: 320px;
  background-size: 73% 73%;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 20px;
}

/* Stone frame overlay, drawn on top of the corner artwork so it reads as a
   rock window rather than a plain rounded square. */
.bg-corner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/assets/background/borders/2-1940c466.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.bg-corner--1 {
  top: 0;
  left: 0;
  background-image: url("/assets/background/1-f7f2781b.webp");
}

.bg-corner--1:hover {
  background-image: url("/assets/background/1_hover-f970d58f.webp");
}

.bg-corner--2 {
  bottom: 0;
  left: 0;
  background-image: url("/assets/background/2-a6e25864.webp");
}

.bg-corner--2:hover {
  background-image: url("/assets/background/2_hover-aa938387.webp");
}

.bg-corner--3 {
  top: 0;
  right: 0;
  background-image: url("/assets/background/3-a299fa7e.webp");
}

.bg-corner--3:hover {
  background-image: url("/assets/background/3_hover-6c64b23a.webp");
}

.bg-corner--4 {
  bottom: 0;
  right: 0;
  background-image: url("/assets/background/4-f48f15a4.webp");
}

.bg-corner--4:hover {
  background-image: url("/assets/background/4_hover-48ba3d48.webp");
}

@media (min-width: 901px) {
  .bg-corner {
    display: block;
  }
}

/* max-width is set by JS to match the rendered width of .hero-copy +
   .folder-widget below (see the script at the bottom of the page). A pure
   CSS grid-spanning approach was tried first, but an "auto auto" grid
   inflates both columns to fit a wide spanning item, which made the row
   below drift wider than the boxes it's meant to align with. Their combined
   width also isn't expressible as a static CSS value anyway, since
   .folder-widget's width depends on viewport height via the video's
   vh-based sizing. */
.page-heading {
  box-sizing: border-box;
  max-width: 350px;
  margin: 3rem auto 0;
  padding: 1.5rem 2rem;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: relative;
  /* The heading's top rows overlap the same vertical band as the fixed
     corner artwork (0-320px). Fixed-position elements paint above static
     content by default regardless of DOM order, so without this the corner
     images would cover the heading text where they overlap. */
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  text-align: left;
}

.page-heading-text {
  flex: 1;
  min-width: 0;
}

.page-heading-title {
  margin: 0 0 0.5rem;
  font-size: 2.5rem;
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.page-heading-subtitle {
  margin: 0;
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

/* QR + mascot are desktop-only decoration for this box, matching the pair
   already used in .hero-copy-qr — hidden on mobile where the box shrinks
   down to just the heading text, left-aligned like the rest of the copy. */
.page-heading-qr-col {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.page-heading-qr {
  width: 80px;
  height: 80px;
  padding: 0.5rem;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.page-heading-qr-link {
  display: inline-block;
  max-width: 80px;
  color: #fff;
  font-size: 0.7rem;
  text-align: center;
  overflow-wrap: break-word;
}

.page-heading-mascot {
  flex-shrink: 0;
  width: 60px;
  height: auto;
  display: block;
}

.hero {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: stretch;
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem;
  /* .hero's own box spans the full viewport width even though its content
     is centered and narrower, which would otherwise block pointer events
     (hover, clicks) from ever reaching the corner background images in the
     empty space around it. Re-enabled on the two actual boxes below. */
  pointer-events: none;
}

.hero-copy,
.folder-widget,
.hero-qr-col {
  pointer-events: auto;
}

/* Restored from main for mobile only — desktop shows the projector artwork
   via .bg-corner instead, in the space this box used to occupy. Same
   width/height formulas as .hero-copy so all three mobile-stacked boxes
   match exactly, instead of stretching to the full viewport width. */
.hero-qr-col {
  display: none;
  box-sizing: border-box;
  width: min(350px, 92vw);
  height: calc(min(60vh, 560px) + 6rem);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.hero-qr-heading {
  margin: 0;
  max-width: 220px;
  font-size: 1.15rem;
  line-height: 1.3;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.hero-qr {
  width: 140px;
  height: 140px;
  padding: 0.75rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.hero-cta-button {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease;
}

.hero-cta-button:hover {
  transform: translateY(-2px);
}

.hero-copy {
  box-sizing: border-box;
  width: min(350px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  /* Matches .folder-video's height formula plus the tabs + panel padding
     around it, so this column can never inflate the grid row beyond the
     video widget's own size — it scrolls internally instead. Keeps the
     two remaining hero boxes the same height. */
  max-height: calc(min(60vh, 560px) + 6rem);
  overflow-y: auto;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  text-align: left;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.hero-copy h2 {
  margin: 0 0 1rem;
  font-size: 2.25rem;
  line-height: 1.2;
}

.hero-copy p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.hero-copy-divider {
  width: 100%;
  margin: 2rem 0 0;
  border: none;
  border-top: 1px dashed rgba(255, 255, 255, 0.35);
}

/* Unlike the rest of .hero-copy, this whole block centers — it reads as a
   self-contained CTA card rather than body copy. */
.hero-copy-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* Matches .hero-qr's rendered width (140px content + 0.75rem padding on
   each side) so the link lines up with the QR code above it. */
.hero-copy-qr-link {
  display: inline-block;
  max-width: 164px;
  color: #fff;
  text-align: center;
  overflow-wrap: break-word;
}

.hero-copy-qr-heading {
  margin: 0;
  font-size: 1.05rem;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.hero-copy-qr-mascot {
  width: 60px;
  height: auto;
  display: block;
}

.folder-widget {
  display: flex;
  flex-direction: column;
  width: fit-content;
  max-width: 92vw;
  height: 100%;
  margin: 0 auto;
}

.folder-tabs {
  display: flex;
  gap: 0.25rem;
}

.folder-tab {
  padding: 0.65rem 1.5rem;
  border: none;
  border-radius: 10px 10px 0 0;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.15s ease, color 0.15s ease;
}

.folder-tab:hover {
  color: #fff;
}

.folder-tab.is-active {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.folder-panel {
  position: relative;
  flex: 1;
  min-height: 0;
  margin-top: -1px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 0 16px 16px 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.folder-pane {
  display: none;
  height: 100%;
}

.folder-pane.is-active {
  display: block;
}

.folder-media {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  height: 100%;
  padding: 1.5rem;
  box-sizing: border-box;
}

.video-media {
  position: relative;
}

.folder-video {
  display: block;
  height: min(60vh, 560px);
  width: auto;
  aspect-ratio: 886 / 1920;
  object-fit: cover;
  border-radius: 12px;
  background: #000;
}

.folder-screenshot {
  display: block;
  height: min(60vh, 560px);
  width: auto;
  aspect-ratio: 1080 / 2261;
  object-fit: cover;
  border-radius: 12px;
  background: #000;
}

/* Custom play/pause + mute controls, standing in for native <video> controls
   so we show exactly these two buttons — no fullscreen, download, or the
   browser's "..." overflow menu, which controlsList doesn't reliably hide. */
.video-control-button {
  position: absolute;
  bottom: 12px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.9rem;
  line-height: 36px;
  text-align: center;
  padding: 0;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.15s ease;
}

.video-toggle-play {
  left: 12px;
}

.video-toggle-mute {
  right: 12px;
}

.video-control-button:hover {
  background: rgba(0, 0, 0, 0.75);
}

.folder-nav {
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: 2rem;
  line-height: 1;
  padding: 0.5rem;
  cursor: default;
  pointer-events: none;
}

/* Only panes with more than one video (see the script below) get this —
   panes with a single item keep the arrows inert, per the base rule above. */
.folder-nav--active {
  cursor: pointer;
  pointer-events: auto;
  color: rgba(255, 255, 255, 0.85);
}

.folder-nav--active:hover {
  color: #fff;
}

.hero-features {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
}

.feature h3 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
}

.feature p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.feature p + p {
  margin-top: 0.6rem;
}

/* All three boxes keep the same "thin" width they use on desktop (350px,
   matching the video's natural size) rather than stretching full-width —
   .hero-copy and .hero-qr-col both cap via min(350px, 92vw), .folder-widget
   via its own max-width: 92vw already declared above. */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 3rem 1.5rem;
  }

  /* Reordered so a cold visitor sees the video (concrete proof of the
     product) and a single clear CTA before the long copy block, instead of
     having to scroll through a wall of text first. Desktop is untouched —
     these are visual-only reorders scoped to this media query. */
  .folder-widget {
    order: 1;
  }

  .hero-qr-col {
    display: flex;
    order: 2;
  }

  .hero-copy {
    order: 3;
    /* On desktop this cap keeps .hero-copy height-matched to the video
       widget beside it. On mobile the boxes stack instead of sitting
       side by side, so that row-matching constraint just forces an
       unnecessary nested scroll area — let it expand to full height. */
    max-height: none;
    overflow-y: visible;
  }

  /* The QR/link at the end of .hero-copy would otherwise duplicate the
     dedicated .hero-qr-col CTA directly above it on mobile. */
  .hero-copy-divider,
  .hero-copy-qr {
    display: none;
  }

  .page-heading-qr-col,
  .page-heading-mascot {
    display: none;
  }

  .policy-card {
    padding: 2rem 1.5rem;
  }
}

/* Privacy policy page: a long, table-heavy legal document reads better as a
   plain light card than laid over the busy cave background like the rest of
   the site — headings keep the brand's TribeFont, but body copy switches to
   a plain sans-serif for actual readability at paragraph/table sizes. */
.policy-page {
  min-height: 100vh;
  padding: 3rem 1.5rem;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.policy-card {
  width: 100%;
  max-width: 800px;
  padding: 3rem 3.5rem;
  box-sizing: border-box;
  background: #fdfaf5;
  color: #2a2320;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  font-family: system-ui, sans-serif;
  line-height: 1.6;
}

.policy-card h1,
.policy-card h2 {
  font-family: "TribeFont", system-ui, sans-serif;
  line-height: 1.25;
  color: #1c1714;
}

.policy-card h1 {
  margin: 0 0 1.5rem;
  font-size: 2rem;
}

.policy-card h2 {
  margin: 2.5rem 0 1rem;
  font-size: 1.4rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid #e4dccf;
}

.policy-card p {
  margin: 0 0 1rem;
}

.policy-card ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.policy-card li {
  margin-bottom: 0.4rem;
}

.policy-card strong {
  color: #1c1714;
}

.policy-card code {
  background: #efe7da;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.9em;
}

.policy-card a {
  color: #6b3fa0;
}

.policy-card table {
  display: block;
  width: 100%;
  margin: 0 0 1.5rem;
  border-collapse: collapse;
  font-size: 0.92rem;
  overflow-x: auto;
}

.policy-card th,
.policy-card td {
  padding: 0.6rem 0.75rem;
  border: 1px solid #e4dccf;
  text-align: left;
  vertical-align: top;
}

.policy-card th {
  background: #efe7da;
}

.page-footer {
  padding: 2rem 0 3rem;
  text-align: center;
}

.page-footer a {
  color: #fff;
}

.taaft-badge {
  display: inline-block;
  margin-top: 1rem;
}

/* The badge SVG from TAAFT has no intrinsic width/height, so browsers
   render it at 0x0 without an explicit size here. */
.taaft-badge img {
  width: 90px;
  height: auto;
}