/* 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 15s linear infinite; }
@keyframes gm-marquee { to { transform: translateX(-50%); } }

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

/* --------------------------------------------- section rhythm ---- */
/* The design shipped each section with its own hand-set padding, so the
   vertical rhythm drifted — the guides section in particular ran 80/96 top to
   bottom on desktop and 56/80 with mismatched 24px/36px sides on phones.
   One scale for every section instead; horizontal padding is normalised in the
   same place so the divider lines below all start and end on the same column. */
/* The class is doubled on purpose. Framer's own rules are `.framer-jCsHZ
   .framer-1b7ysv4`, i.e. specificity (0,2,0); a single `.gm-sec` is (0,1,0) and
   would lose the cascade, so the padding below would never apply. Doubling ties
   the specificity, and this file loads after framer.css so the tie breaks here. */
.gm-sec.gm-sec { position: relative; padding: 96px 80px; }

/* the logo strip is a thin band, not a full section, so it gets its own scale */
.gm-sec.gm-sec[data-framer-name="Section-Logo Marquee"] { padding-top: 40px; padding-bottom: 40px; }
/* the hero sits under the nav and needs the extra head room */
.gm-sec.gm-sec[data-framer-name="Section-Hero"] { padding-top: 120px; }

@media (max-width: 1199.98px) {
  .gm-sec.gm-sec { padding: 80px 40px; }
  .gm-sec.gm-sec[data-framer-name="Section-Logo Marquee"] { padding-top: 32px; padding-bottom: 32px; }
  .gm-sec.gm-sec[data-framer-name="Section-Hero"] { padding-top: 104px; }
}
@media (max-width: 809.98px) {
  .gm-sec.gm-sec { padding: 64px 24px; }
  .gm-sec.gm-sec[data-framer-name="Section-Logo Marquee"] { padding-top: 28px; padding-bottom: 28px; }
  .gm-sec.gm-sec[data-framer-name="Section-Hero"] { padding-top: 88px; }
}

/* -------------------------------------------- guides section rhythm ---- */
/* The guides Container is a flex column with one shared gap, so header, card
   grid and the "Alle Guides" button all sat the same distance apart and the
   block read as cramped. Margins on the two children open it up: air under the
   description before the cards start, and more around the button so it isn't
   pinned between the last card and the divider below.
   Doubled class for the same specificity reason as .gm-sec above. */
.framer-sdjr1f.framer-sdjr1f { margin-top: 20px; }
.framer-7ffn9d-container.framer-7ffn9d-container { margin-top: 28px; margin-bottom: 8px; }

@media (max-width: 809.98px) {
  .framer-sdjr1f.framer-sdjr1f { margin-top: 12px; }
  .framer-7ffn9d-container.framer-7ffn9d-container { margin-top: 20px; margin-bottom: 4px; }
}

/* ------------------------------------------------ section dividers ---- */
/* Hairline between sections, spanning the content column rather than the full
   viewport (learnaiwithmariah.com's treatment: 1px of the ink colour at low
   alpha on the cream ground). Only between sections, never above the first. */
.gm-sec + .gm-sec::before {
  content: "";
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(100% - 160px, 1200px); height: 1px;
  background: rgba(29, 29, 29, .14);
  pointer-events: none;
}
@media (max-width: 1199.98px) { .gm-sec + .gm-sec::before { width: calc(100% - 80px); } }
@media (max-width: 809.98px)  { .gm-sec + .gm-sec::before { width: calc(100% - 48px); } }

/* ------------------------------------------------------ hero bits ---- */
/* The design gave the hero a single CTA in a 32px-gap column. Two actions sit
   on one row instead, wrapping on narrow screens. */
.gm-hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* secondary action, same hard-shadow language as the design's black button */
.gm-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 26px; border-radius: 32px;
  border: 3px solid var(--token-242ee8ca-21cd-480f-8ef8-a755673ece2e, #030303);
  background: transparent; color: #030303;
  box-shadow: 4px 4px 0 0 rgb(15, 15, 15);
  font-family: 'Poppins', Inter, sans-serif; font-size: 16px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: transform .12s cubic-bezier(.22,1,.36,1), box-shadow .12s;
}
.gm-btn-ghost:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 0 rgb(15, 15, 15); }
.gm-btn-ghost:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 rgb(15, 15, 15); }

/* The portrait card carries the social proof, so it earns more room than the
   design's 322px. Capped per breakpoint so it never crowds the copy column. */
.framer-jCsHZ .framer-v52nzq-container { width: min(400px, 100%); }
@media (max-width: 1199.98px) { .framer-jCsHZ .framer-v52nzq-container { width: min(380px, 100%); } }
@media (max-width: 809.98px)  { .framer-jCsHZ .framer-v52nzq-container { width: min(330px, 100%); } }

/* ---------------------------------------------------- story stats ---- */
/* Two facts under the story copy. The views figure is filled live by stats.js;
   the markup value is the fallback when Supabase can't be reached. */
.gm-stats {
  display: flex; flex-wrap: wrap; gap: 40px;
  margin: 8px 0 0; padding: 24px 0 0;
  border-top: 1px solid rgba(29, 29, 29, .14);
  width: 100%;
}
.gm-stat dt {
  font-family: Inter, sans-serif; font-size: 13px; font-weight: 500;
  letter-spacing: .02em; color: rgba(3, 3, 3, .55); margin: 0 0 6px;
}
.gm-stat dd {
  font-family: 'Poppins', Inter, sans-serif; font-size: 28px; font-weight: 700;
  line-height: 1; color: #030303; margin: 0;
}
@media (max-width: 809.98px) {
  .gm-stats { gap: 28px; }
  .gm-stat dd { font-size: 24px; }
}

/* --------------------------------------------------- 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; }