/* Homepage overrides on top of the ported Framer stylesheet.
   Deliberately small: everything visual comes from assets/framer.css so a
   re-port stays faithful. Only site-level behaviour lives here. */

/* ---------------------------------------------------- custom cursor ---- */
/* Same component as the rest of the site (assets/cursor.js) — the Framer
   design's "custom cursor mouse": yellow arrow, black outline, hard shadow. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.has-cursor, html.has-cursor * { cursor: none !important; }
}
.framer-cursor {
  position: fixed; top: 0; left: 0; z-index: 9999;
  width: 55px; height: 55px; padding: 4px;
  margin: -11px 0 0 -11px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; will-change: transform;
  opacity: 0; transition: opacity .2s;
}
.framer-cursor svg {
  transform: rotate(13deg);
  filter: drop-shadow(-2px 2px 0 rgba(0,0,0,.94));
  transition: transform .18s cubic-bezier(.22,1,.36,1);
}
.cursor-ready .framer-cursor { opacity: 1; }
.cursor-hot .framer-cursor svg { transform: rotate(13deg) scale(1.25); }

/* --------------------------------------------------- text reveal ---- */
/* Replays the design's word-by-word entrance: fade up out of a blur.
   Words start hidden ONLY once reveal.js has claimed the block, so with JS
   disabled the text stays readable. */
.gm-reveal .gm-word {
  opacity: 0; filter: blur(10px); transform: translateY(10px);
}
.gm-reveal.gm-in .gm-word {
  animation: gm-word-in .55s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes gm-word-in {
  from { opacity: 0; filter: blur(10px); transform: translateY(10px); }
  to   { opacity: 1; filter: blur(0);    transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-reveal .gm-word { opacity: 1; filter: none; transform: none; }
}

/* ------------------------------------------------------- marquees ---- */
/* The logo strip is server-rendered by Framer but only scrolls under its
   runtime, so it gets a CSS animation. */
.gm-marquee-track { animation: gm-marquee 34s linear infinite; }
@keyframes gm-marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) { .gm-marquee-track { animation: none; } }

/* --------------------------------------------------- DE/EN toggle ---- */
/* Kept for any page that renders the toggle outside the nav. */
.floating-lang {
  position: fixed; top: 14px; right: 18px; z-index: 200;
  height: 34px; min-width: 40px; padding: 0 .7rem;
  border-radius: 8px;
  border: 2px solid #1d1d1d;
  background: #ffe74a; color: #030303;
  box-shadow: 2px 2px 0 0 rgba(0,0,0,.95);
  font-family: 'Poppins', Inter, sans-serif; font-size: 12px; font-weight: 700;
  cursor: pointer;
  transition: transform .12s cubic-bezier(.22,1,.36,1), box-shadow .12s;
}
.floating-lang:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 0 rgba(0,0,0,.95); }
.floating-lang:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 0 rgba(0,0,0,.95); }
@media (max-width: 900px) {
  .floating-lang { top: auto; bottom: 16px; right: 16px; }
}

/* ------------------------------------------------- community modal ---- */
/* community.js injects this markup; the Framer stylesheet knows nothing of it. */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.78);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
  opacity: 0; pointer-events: none; transition: opacity .22s;
}
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
.modal {
  width: 100%; max-width: 440px; background: #faf7eb; color: #030303;
  border: 2px solid #1d1d1d; border-radius: 16px;
  padding: 2rem 1.9rem; box-shadow: 4px 4px 0 0 rgba(0,0,0,.95);
  transform: translateY(14px) scale(.98); transition: transform .22s cubic-bezier(.22,1,.36,1);
  position: relative;
  font-family: Inter, sans-serif;
}
.modal-backdrop.open .modal { transform: none; }
.modal-emoji { font-size: 2rem; }
.modal h3 { font-family: 'Poppins', Inter, sans-serif; font-weight: 600; font-size: 1.4rem; margin: .5rem 0 .4rem; }
.modal p { color: rgba(3,3,3,.7); font-size: .95rem; line-height: 1.6; margin-bottom: 1.3rem; }
.modal-close { position: absolute; top: 1rem; right: 1.1rem; background: none; border: none; color: rgba(3,3,3,.5); font-size: 1.4rem; cursor: pointer; line-height: 1; }
.modal-row { display: flex; gap: .6rem; }
.modal input {
  flex: 1; min-width: 0; padding: .85rem 1rem; border-radius: 8px;
  border: 2px solid #1d1d1d; background: #fff; color: #030303;
  font-family: inherit; font-size: .95rem;
}
.modal input:focus { outline: none; box-shadow: 2px 2px 0 0 rgba(0,0,0,.95); }
.modal .btn-primary {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: .85rem 1.3rem; border-radius: 8px; border: 2px solid #1d1d1d;
  background: #c191ff; color: #030303; font-weight: 700; font-size: .95rem;
  text-decoration: none; cursor: pointer;
  box-shadow: 2px 2px 0 0 rgba(0,0,0,.95);
}
.modal-status { margin-top: .9rem; font-size: .9rem; font-weight: 600; min-height: 1.1rem; }
.modal-fine { color: rgba(3,3,3,.5); font-size: .78rem; margin-top: .8rem; }

/* ---------------------------------------------------- smooth scroll ---- */
/* Required by Lenis. Without the scroll-behavior override the native smooth
   scrolling fights the smooth scroller and the page feels sticky. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }