/* What replaced the Next.js runtime: theme switch, language menu, mobile menu, FAQ accordion,
   pricing slider, hero animation. All of it works without scripts; js/main.js adds the extras. */

/* ------------------------------------------------------------------ theme
   Follows the system colour scheme; the hidden #theme-toggle checkbox flips it.
   The matching `.dark` rules live in styles.css under the same two conditions. */
.theme-toggle-input { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not(:has(#theme-toggle:checked)) { color-scheme: dark; } }
@media (prefers-color-scheme: light) { :root:has(#theme-toggle:checked) { color-scheme: dark; } }

.theme-toggle { cursor: pointer; -webkit-user-select: none; user-select: none; }
.theme-toggle svg { transition: opacity .3s ease, scale .3s ease, rotate .3s ease; }
.theme-toggle .lucide-moon { opacity: 0; scale: .5; rotate: -90deg; }
@media (prefers-color-scheme: dark) {
  :root:not(:has(#theme-toggle:checked)) .theme-toggle .lucide-moon { opacity: 1; scale: 1; rotate: 0deg; }
  :root:not(:has(#theme-toggle:checked)) .theme-toggle .lucide-sun { opacity: 0; scale: .5; rotate: 90deg; }
}
@media (prefers-color-scheme: light) {
  :root:has(#theme-toggle:checked) .theme-toggle .lucide-moon { opacity: 1; scale: 1; rotate: 0deg; }
  :root:has(#theme-toggle:checked) .theme-toggle .lucide-sun { opacity: 0; scale: .5; rotate: 90deg; }
}
:root:has(#theme-toggle:focus-visible) .theme-toggle { outline: 2px solid currentColor; outline-offset: 2px; }

/* ------------------------------------------------------------------ <details> menus */
.lang-menu, .mobile-menu { display: block; }
.lang-menu > summary, .mobile-menu > summary, .faq-question { list-style: none; cursor: pointer; }
.lang-menu > summary::-webkit-details-marker,
.mobile-menu > summary::-webkit-details-marker,
.faq-question::-webkit-details-marker { display: none; }

/* click anywhere else to close */
.lang-menu[open] > summary::before,
.mobile-menu[open] > summary::before { content: ""; position: fixed; inset: 0; z-index: 40; cursor: default; }

/* language menu */
.lang-menu { position: relative; }
.lang-menu > summary svg { transition: rotate .2s ease; }
.lang-menu[open] > summary svg { rotate: 180deg; }
.lang-menu-panel { position: absolute; top: calc(100% + 4px); right: 0; z-index: 50; animation: menu-in .15s ease-out; }
.mobile-menu .lang-menu-panel { top: auto; bottom: calc(100% + 4px); }
.lang-menu-panel a:hover, .lang-menu-panel a:focus-visible { background: var(--accent); color: var(--accent-foreground); outline: none; }
.lang-menu-panel a[aria-current]::before {
  content: ""; position: absolute; left: .75rem; top: 50%; width: .5rem; height: .5rem; margin-top: -.25rem;
  border-radius: 9999px; background: currentColor;
}
@keyframes menu-in { from { opacity: 0; transform: scale(.95); } }

/* mobile menu: hamburger <-> close icon */
.mobile-menu[open] > summary .lucide-menu { scale: 0; rotate: 90deg; opacity: 0; }
.mobile-menu[open] > summary .lucide-x { scale: 1; rotate: 0deg; opacity: 1; }

/* ------------------------------------------------------------------ FAQ */
.faq-question > svg { transition: rotate .2s ease; }
.faq-item[open] > .faq-question > svg { rotate: 180deg; }
@supports (interpolate-size: allow-keywords) {
  .faq-item { interpolate-size: allow-keywords; }
  .faq-item::details-content { block-size: 0; overflow: clip; transition: block-size .2s ease-out, content-visibility .2s allow-discrete; }
  .faq-item[open]::details-content { block-size: auto; }
}

/* ------------------------------------------------------------------ mobile pricing slider */
.pricing-slider { margin-inline: -1rem; }
.pricing-slider-track {
  display: flex; gap: 1rem; padding: 0 1rem 2.5rem; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; scrollbar-width: none;
}
.pricing-slider-track::-webkit-scrollbar { display: none; }
.pricing-slide { flex: 0 0 calc(100% - 1.25rem); scroll-snap-align: start; }

/* ------------------------------------------------------------------ hero */
.hero-logo { animation: hero-pop .6s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(.25s + var(--i, 0) * .12s); }
@keyframes hero-pop { from { opacity: 0; transform: scale(.8); } }

.hero-beams-host { position: relative; }
.hero-beams {
  position: absolute; inset: 32px; width: calc(100% - 64px); height: calc(100% - 64px);
  overflow: visible; pointer-events: none; animation: hero-fade .8s ease-out .7s both;
}
@keyframes hero-fade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hero-logo, .hero-beams, .lang-menu-panel { animation: none; }
}

/* ------------------------------------------------------------------ footer
   The live site draws the logo on a 4:1 canvas; keep that box so the footer height matches. */
.footer-logo { aspect-ratio: 4 / 1; object-fit: contain; }

/* phones show the plain logo at full strength (larger screens get the dot version from js/main.js) */
@media (max-width: 767.98px) { .footer-logo { opacity: 1; aspect-ratio: auto; } }
.footer-logo-canvas { aspect-ratio: 4 / 1; image-rendering: pixelated; }

/* ------------------------------------------------------------------ hero title logo */
h1 > .inline-flex > .inline-flex { transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
h1 > .inline-flex:hover > .inline-flex { transform: scale(1.15) rotate(5deg) translateY(-4px) !important; }


/* ------------------------------------------------------------------ support section */
section[id] { scroll-margin-top: 5rem; }
.support-container { max-width: 1066px; }
.support-header { max-width: 664px; margin: 0 auto 6rem; }
.support-row { display: flex; align-items: center; gap: 1.5rem; }
.support-row:not(:last-child) { margin-bottom: 6rem; }
.support-text { flex: 1; max-width: 477px; }
.support-image { flex: 1; }
.support-image img { width: 100%; height: auto; }
@media (max-width: 767px) {
  .support-header { text-align: left; margin-bottom: 3.5rem; }
  .support-row { flex-direction: column; gap: 2.5rem; }
  .support-row:not(:last-child) { margin-bottom: 3.5rem; }
  .support-text { max-width: 100%; width: 100%; flex: none; }
}