/*!****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./app/ui/StartScreen/HexMenu.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************/
.hex-menu {
  position: relative;
  display: inline-block;
}

.hex-menu-button {
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0;
  margin: 0;
  width: 48px;
  height: 48px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: inherit;
  /* We only animate composited properties so this stays smooth on mobile. */
  -webkit-transition:
    -webkit-transform 150ms ease-out,
    -webkit-filter 150ms ease-out;
  transition:
    -webkit-transform 150ms ease-out,
    -webkit-filter 150ms ease-out;
  -o-transition:
    filter 150ms ease-out,
    -o-transform 150ms ease-out;
  transition:
    transform 150ms ease-out,
    filter 150ms ease-out;
  transition:
    transform 150ms ease-out,
    filter 150ms ease-out,
    -webkit-transform 150ms ease-out,
    -o-transform 150ms ease-out,
    -webkit-filter 150ms ease-out;
}

.hex-menu-button svg {
  display: block;
  width: 100%;
  height: 100%;
  /* Subtle shadow under the hex without animating box-shadow (which forces repaint). */
  -webkit-filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
          filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
}

@media (prefers-reduced-motion: no-preference) {
  .hex-menu-button:hover {
    -webkit-transform: scale(1.04);
         -o-transform: scale(1.04);
            transform: scale(1.04);
  }
  .hex-menu-button:active {
    -webkit-transform: scale(0.96);
         -o-transform: scale(0.96);
            transform: scale(0.96);
  }
}

.hex-menu-button:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 4px;
  border-radius: 6px;
}

/* Popover panel */
.hex-menu-panel {
  position: absolute;
  top: -webkit-calc(100% + 8px);
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  padding: 8px;
  background: #fff;
  border: 2px solid var(--color-dark);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2px;
  /* Hidden by default; opacity + transform kept composited. */
  opacity: 0;
  -webkit-transform: translateY(-4px) scale(0.98);
       -o-transform: translateY(-4px) scale(0.98);
          transform: translateY(-4px) scale(0.98);
  -webkit-transform-origin: top right;
       -o-transform-origin: top right;
          transform-origin: top right;
  pointer-events: none;
  -webkit-transition:
    opacity 160ms ease-out,
    -webkit-transform 160ms ease-out;
  transition:
    opacity 160ms ease-out,
    -webkit-transform 160ms ease-out;
  -o-transition:
    opacity 160ms ease-out,
    -o-transform 160ms ease-out;
  transition:
    opacity 160ms ease-out,
    transform 160ms ease-out;
  transition:
    opacity 160ms ease-out,
    transform 160ms ease-out,
    -webkit-transform 160ms ease-out,
    -o-transform 160ms ease-out;
  z-index: 20;
}

.hex-menu.is-open .hex-menu-panel {
  opacity: 1;
  -webkit-transform: translateY(0) scale(1);
       -o-transform: translateY(0) scale(1);
          transform: translateY(0) scale(1);
  pointer-events: auto;
}

.hex-menu-item {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--color-dark);
  -webkit-text-decoration: none;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  -webkit-transition: background 120ms ease-out;
  -o-transition: background 120ms ease-out;
  transition: background 120ms ease-out;
}

.hex-menu-item:hover,
.hex-menu-item:focus-visible {
  background: var(--color-lightgray);
  outline: none;
}

.hex-menu-item:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-blue);
}

/* Reduced motion: no transforms, near-instant opacity only. */
@media (prefers-reduced-motion: reduce) {
  .hex-menu-panel {
    -webkit-transition: opacity 100ms linear;
    -o-transition: opacity 100ms linear;
    transition: opacity 100ms linear;
    -webkit-transform: none;
         -o-transform: none;
            transform: none;
  }
  .hex-menu.is-open .hex-menu-panel {
    -webkit-transform: none;
         -o-transform: none;
            transform: none;
  }
  .hex-menu-button {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
  }
}

/*!********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./app/ui/StartScreen/StartScreen.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************/
/*
 * StartScreen — Figma reference: Phase 2 Layouts, frame 1815:1542
 *
 * Mobile-first per Figma; desktop/tablet layouts are designer-interpreted
 * (the designer only mocked mobile). We scale the same vertical stack up
 * with more breathing room — the composition stays identical across
 * viewports so the brand reads the same on every surface.
 *
 * Clouds come from the body-level `move-bg` animation in globals.css —
 * shared with /explore. This page stays transparent so the body bg shows
 * through, which avoids the compositing artefacts the previous custom
 * layered parallax produced on iOS Safari.
 *
 * Animation rules:
 *  - Only transform + opacity are animated (composited).
 *  - No box-shadow / filter animations during interaction.
 *  - All hover / press transitions wrapped in a no-preference media query.
 */

.start-screen {
  position: relative;
  min-height: 100vh;
  /* Fall back for older browsers; dvh gives us the proper "dynamic"
     viewport height on iOS so the bottom tagline isn't hidden behind the
     Safari chrome. */
  min-height: 100dvh;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: max(env(safe-area-inset-top, 0px), 16px) 20px
    max(env(safe-area-inset-bottom, 0px), 20px) 20px;
  box-sizing: border-box;
}

.start-screen-menu {
  position: absolute;
  top: max(env(safe-area-inset-top, 0px), 12px);
  right: 16px;
  z-index: 10;
}

.start-screen-inner {
  position: relative;
  z-index: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  /* Centre the cube + CTAs vertically in the space above the footer. The
     footer sits below .inner in the main flex column. */
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 40px;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: 8px 0;
}

/* ───── Logo cube ───── */
.start-screen-logo {
  width: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  /* Reserve vertical space so the logo's intrinsic aspect doesn't cause
     layout shift while the SVG is decoding. */
  -webkit-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
}

.start-screen-logo img {
  width: 240px;
  height: auto;
  max-width: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
}

/* ───── CTA circles ───── */
.start-screen-ctas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
  width: 100%;
  max-width: 420px;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  justify-items: center;
  place-items: center;
}

.start-cta {
  /* A perfect circle, self-sized by aspect-ratio + width. */
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  max-width: 160px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 2.5px solid var(--color-dark);
  -webkit-text-decoration: none;
  text-decoration: none;
  color: var(--color-dark);
  background: var(--color-lightblue);
  /* Composited properties only. */
  -webkit-transition:
    box-shadow 180ms cubic-bezier(0.2, 0, 0, 1),
    -webkit-transform 180ms cubic-bezier(0.2, 0, 0, 1);
  transition:
    box-shadow 180ms cubic-bezier(0.2, 0, 0, 1),
    -webkit-transform 180ms cubic-bezier(0.2, 0, 0, 1);
  -o-transition:
    box-shadow 180ms cubic-bezier(0.2, 0, 0, 1),
    -o-transform 180ms cubic-bezier(0.2, 0, 0, 1);
  transition:
    transform 180ms cubic-bezier(0.2, 0, 0, 1),
    box-shadow 180ms cubic-bezier(0.2, 0, 0, 1);
  transition:
    transform 180ms cubic-bezier(0.2, 0, 0, 1),
    box-shadow 180ms cubic-bezier(0.2, 0, 0, 1),
    -webkit-transform 180ms cubic-bezier(0.2, 0, 0, 1),
    -o-transform 180ms cubic-bezier(0.2, 0, 0, 1);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
  /* Avoid the browser's blue tap highlight on iOS. */
  -webkit-tap-highlight-color: transparent;
  /* Hint to the compositor so transforms are GPU-accelerated. */
  will-change: transform;
}

.start-cta-play {
  background: var(--color-start-yellow, #f3eb4b);
}

.start-cta-label {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  padding: 0 14px;
  line-height: 1.15;
  pointer-events: none; /* Let the link handle the click. */
}

@media (prefers-reduced-motion: no-preference) {
  .start-cta:hover {
    -webkit-transform: translateY(-2px);
         -o-transform: translateY(-2px);
            transform: translateY(-2px);
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.22);
  }
  .start-cta:active {
    -webkit-transform: translateY(1px);
         -o-transform: translateY(1px);
            transform: translateY(1px);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
  }
}

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

/* ───── Footer ───── */
.start-screen-footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 12px 20px 4px;
  margin: 0 auto;
  width: 100%;
  max-width: 520px;
  color: var(--color-dark);
}

.start-screen-brand {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.start-screen-tagline {
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-dark);
}

/* ───────────────────────── Responsive tuning ───────────────────────── */

/* Very small phones (iPhone SE class). Tighten everything so we fit
   without scrolling. */
@media (max-width: 390px) {
  .start-screen-logo img { width: 200px; }
  .start-cta { max-width: 140px; }
  .start-cta-label { font-size: 16px; padding: 0 10px; }
  .start-screen-tagline { font-size: 12px; }
}

/* Tablet + up. Switch the flex alignment from "push apart" to "centre"
   so the composition doesn't stretch to fill tall viewports and clip
   the footer off-screen. The cube then uses viewport-height-aware
   clamp() so it scales with available vertical space. */
@media (min-width: 768px) {
  .start-screen {
    padding: 32px 40px max(env(safe-area-inset-bottom, 0px), 32px) 40px;
  }
  .start-screen-inner {
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 32px;
    padding-top: 16px;
  }
  .start-screen-logo img { width: max(240px, min(36vh, 340px)); }
  .start-screen-ctas { gap: 36px; max-width: 520px; }
  .start-cta { max-width: 200px; }
  .start-cta-label { font-size: 20px; }
  .start-screen-brand { font-size: 16px; }
  .start-screen-tagline { font-size: 14px; }
}

/* Desktop — max width cap so we don't sprawl, slightly larger accents. */
@media (min-width: 1024px) {
  .start-screen-inner {
    gap: 40px;
    max-width: 820px;
  }
  .start-screen-logo img { width: max(260px, min(34vh, 380px)); }
  .start-cta { max-width: 220px; }
  .start-cta-label { font-size: 22px; }
  .start-screen-tagline { font-size: 15px; }
}

/* Short wide viewports (laptops at 720-780h). Trade some vertical cube
   presence so the footer + tagline stay on screen. */
@media (max-height: 780px) and (min-width: 768px) {
  .start-screen {
    padding: 20px 40px max(env(safe-area-inset-bottom, 0px), 20px) 40px;
  }
  .start-screen-inner {
    gap: 20px;
    padding-top: 0;
  }
  .start-screen-logo img {
    width: max(200px, min(30vh, 300px));
  }
  .start-cta { max-width: 170px; }
  .start-cta-label { font-size: 18px; }
}

/* Very short viewports (landscape phones). Already-smaller cube + tighter
   gaps so every element stays above the fold. */
@media (max-height: 600px) {
  .start-screen-logo img { width: 170px; }
  .start-cta { max-width: 130px; }
  .start-cta-label { font-size: 15px; }
  .start-screen-inner { gap: 16px; }
}

/* Reduced motion: kill transforms, keep the colour change snappy. */
@media (prefers-reduced-motion: reduce) {
  .start-cta {
    -webkit-transition: background-color 80ms linear;
    -o-transition: background-color 80ms linear;
    transition: background-color 80ms linear;
    will-change: auto;
  }
}