/* Supplemental styles for the Flask conversion.
   Only the mobile navigation menu (re-implemented in site.js) needs styling;
   everything else is served by the original _nuxt CSS bundles. */

/* Safety net: the original scroll-reveal animations start at opacity:0 and
   were un-hidden by the Nuxt runtime. The pages are captured in their
   revealed state, so ensure these elements are always visible even if a
   fade class is missing (e.g. JavaScript disabled). site.js re-hides them
   only when it is able to drive the scroll-reveal itself. */
.defaut-animate { opacity: 1; }

/* ---------------------------------------------------------------------------
   Scroll-triggered text reveal.
   The original site used GSAP + SplitType to reveal headings (.c-text) line /
   word by word and to "blur in" paragraphs (.anim-text). That runtime isn't
   shipped, so site.js splits those elements into word spans (.dp-w) and this
   CSS drives the reveal. The hidden states only apply once site.js has added
   `dp-anim` to <html>, so with JavaScript disabled everything stays visible.
   --------------------------------------------------------------------------- */
.dp-w { display: inline-block; will-change: transform, opacity, filter; }

/* heading reveal: words rise + fade in */
html.dp-anim .dp-reveal .dp-w {
  opacity: 0;
  transform: translateY(0.85em);
  transition: opacity .6s cubic-bezier(.645, .045, .355, 1),
              transform .6s cubic-bezier(.645, .045, .355, 1);
}
/* paragraph reveal: words blur + tilt in */
html.dp-anim .dp-reveal.dp-blur { perspective: 600px; }
html.dp-anim .dp-reveal.dp-blur .dp-w {
  opacity: 0;
  transform: translateY(0.5em) rotateX(40deg);
  filter: blur(3px);
  transform-style: preserve-3d;
  transition: opacity .7s ease, transform .7s ease, filter .7s ease;
}
/* revealed state (added by the IntersectionObserver) */
html.dp-anim .dp-reveal.is-in .dp-w {
  opacity: 1;
  transform: none;
  filter: none;
}
@media (prefers-reduced-motion: reduce) {
  html.dp-anim .dp-reveal .dp-w { transition: none; opacity: 1; transform: none; filter: none; }
}

/* ---------------------------------------------------------------------------
   vue3-marquee stylesheet.
   The original site used the vue3-marquee component, whose CSS is injected at
   runtime by its JavaScript and therefore was not part of the extracted CSS
   bundles. This is that exact stylesheet, so the review rows scroll again.
   The per-instance timing/direction come from CSS variables already set
   inline on each .vue3-marquee element (--duration, --direction, --orientation,
   --loops, ...).
   --------------------------------------------------------------------------- */
.vue3-marquee{display:flex!important;position:relative}
.vue3-marquee.horizontal{overflow-x:hidden!important;flex-direction:row!important;width:100%;height:max-content}
.vue3-marquee.vertical{overflow-y:hidden!important;flex-direction:column!important;height:100%;width:max-content}
.vue3-marquee:hover>.marquee{animation-play-state:var(--pauseOnHover)}
.vue3-marquee:active>.marquee{animation-play-state:var(--pauseOnClick)}
.vue3-marquee>.marquee{flex:0 0 auto;min-width:var(--min-width);min-height:var(--min-height);z-index:1;animation:var(--orientation) var(--duration) linear var(--delay) var(--loops);animation-play-state:var(--pauseAnimation);animation-direction:var(--direction)}
.vue3-marquee.horizontal>.marquee{display:flex;flex-direction:row;align-items:center}
.vue3-marquee.vertical>.marquee{display:flex;flex-direction:column;align-items:center}
@keyframes scrollX{0%{transform:translate(0)}to{transform:translate(-100%)}}
@keyframes scrollY{0%{transform:translateY(0)}to{transform:translateY(-100%)}}
.vue3-marquee>.overlay{position:absolute;width:100%;height:100%}
.vue3-marquee>.transparent-overlay{position:absolute;width:100%;height:100%}
.vue3-marquee>.overlay:before,.vue3-marquee>.overlay:after{content:"";position:absolute;z-index:2}
.vue3-marquee.horizontal>.overlay:before,.vue3-marquee.horizontal>.overlay:after{background:linear-gradient(to right,var(--gradient-color));height:100%;width:var(--gradient-length)}
.vue3-marquee.vertical>.overlay:before,.vue3-marquee.vertical>.overlay:after{background:linear-gradient(to bottom,var(--gradient-color));height:var(--gradient-length);width:100%}
.vue3-marquee.horizontal>.overlay:after{transform:rotate(180deg)}
.vue3-marquee.vertical>.overlay:after{transform:rotate(-180deg)}
.vue3-marquee>.overlay:before{left:0;top:0}
.vue3-marquee.horizontal>.overlay:after{right:0;top:0}
.vue3-marquee.vertical>.overlay:after{left:0;bottom:0}

/* Download-App modal (restores the original "Download App" button action) */
.dp-dl-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(13, 18, 38, 0.6);
}
.dp-dl-modal.is-open { display: flex; }
.dp-dl-box {
  position: relative;
  width: 100%;
  max-width: 1000px;
  padding: 72px 28px;
  border-radius: 28px;
  text-align: center;
  color: #fff;
  overflow: hidden;
  background: #138a46 url("/_nuxt/footer-bg.B1sW-DNQ.png") center / cover no-repeat;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.dp-dl-content { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
.dp-dl-box h2 {
  font-size: clamp(1.6rem, 4vw, 3rem);
  font-weight: 600; line-height: 1.15; margin: 0 auto 20px; max-width: 14em;
}
.dp-dl-box p { margin: 0 auto 36px; font-size: clamp(1rem, 1.6vw, 1.2rem); opacity: 0.85; max-width: 34em; }
.dp-dl-links { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; }
.dp-dl-links a { display: inline-flex; }
.dp-dl-deco {
  position: absolute; z-index: 1; opacity: 0.3; pointer-events: none;
  width: 80px; height: auto;
}
.dp-dl-deco.is-amazon { top: 40px; left: 24px; }
.dp-dl-deco.is-apple  { top: 40px; right: 24px; }
.dp-dl-deco.is-steam  { bottom: 32px; right: 40px; }
@media (min-width: 768px) {
  .dp-dl-deco { width: 120px; }
  .dp-dl-deco.is-amazon { top: 60px; left: 60px; }
  .dp-dl-deco.is-apple  { top: 60px; right: 60px; }
  .dp-dl-deco.is-steam  { bottom: 40px; right: 60px; }
}
.dp-dl-close {
  position: absolute; top: 16px; right: 20px; z-index: 3;
  background: none; border: none; color: #fff;
  font-size: 30px; line-height: 1; cursor: pointer;
}
.dp-dl-badge { display: inline-flex; align-items: center; }
.dp-dl-badge img { height: 52px; width: auto; display: block; }
@media (max-width: 480px) { .dp-dl-badge img { height: 44px; } }

/* Mobile menu: full-width panel that drops down from the top, matching the
   original (styling comes from the site's own Tailwind classes; this only
   handles the slide transition and hidden state). */
.dp-mm {
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;        /* fully inert + invisible when closed */
  pointer-events: none;
}
/* transition is enabled only after the first paint (dp-mm--ready), so the
   panel never animates itself into view on page load */
.dp-mm.dp-mm--ready {
  transition: transform .3s ease-in-out, opacity .3s ease-in-out, visibility 0s linear .3s;
}
.dp-mm.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out, visibility 0s;
}
.dp-mm a { text-decoration: none; }
@media (min-width: 768px) {
  .dp-mm { display: none !important; }
}