/* Shared styles for the static marketing pages (landing.html,
   how-it-works.html). Components mirror the app's src/styles/globals.css.
   Page-only styles stay inline in each page. */

* { scroll-behavior: smooth; }

/* The app's page wash (tailwind `bg-funke-page`), behind every section. */
body {
  background: linear-gradient(90deg, #FCEADB 0%, #FBEDEF 50%, #F9F4FB 100%);
  background-attachment: fixed;
}

/* ---- The app's components (src/styles/globals.css), so the landing page
   looks like the product: ink outlines and crisp offset shadows rather
   than soft glows. Backgrounds come from utility classes on each use. */
.funke-card {
  border-radius: 1rem;
  border: 2px solid #323954;
  box-shadow: 3px 3px 0 #323954;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.funke-card:hover {
  box-shadow: 5px 5px 0 #323954;
  transform: translate(-2px, -2px);
}
/* Icon and step tiles, like the app's empty-state icon. */
.funke-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.875rem;
  border: 2px solid #323954;
  box-shadow: 2px 2px 0 #323954;
  color: #323954;
}
/* Buttons press into their shadow, as the app's do. */
.funke-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  border-radius: 0.75rem;
  border: 2px solid #323954;
  font-weight: 800;
  box-shadow: 2px 2px 0 #323954;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.funke-btn:hover { box-shadow: 3px 3px 0 #323954; }
.funke-btn:active { transform: translate(2px, 2px); box-shadow: none; }
.funke-btn-primary { background-color: #86569b; color: #fff; }
.funke-btn-primary:hover { background-color: #6d437f; }
.funke-btn-secondary { background-color: #fff; color: #323954; }
.funke-btn-secondary:hover { background-color: #f2eaf6; }
/* Section labels: a short rule in the accent gradient (the same one as the
   headline accent words), then the label in small caps of Funke purple.
   Deliberately unboxed, so it doesn't compete with the buttons and cards. */
.funke-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #6d437f;
}
.funke-eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 3px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #86569b 0%, #c05a9e 50%, #c32e2e 100%);
}
/* On the purple band the gradient rule would vanish, so go light. */
.funke-eyebrow-on-dark { color: #fff; }
.funke-eyebrow-on-dark::before { background: linear-gradient(90deg, #FFE5C7 0%, #f7e3ef 100%); }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.nav-blur {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

::selection {
  background: rgba(134, 86, 155, 0.2);
}

/* Grainy noise texture overlay */
.noise {
  position: relative;
  isolation: isolate;
}
.noise::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("../images/noise.svg");
  background-size: 200px 200px;
  background-repeat: repeat;
  opacity: 0.3;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: soft-light;
}
.noise > * {
  position: relative;
  z-index: 2;
}

/* Funke meadow: the grass scene along the foot of a section, filled by
   scenes.js. It's 1920×1000 with hills that dip in the middle, so
   it's sized by the page width and the section's content sits in the dip;
   its solid bottom sixth is sunk out of view. The !importants beat
   `.noise > *`, which would otherwise make it relative and lift it above
   the content. */
.meadow {
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(36vh, 52vw, 100vh);
  transform: translateY(17%);
  z-index: 0 !important;
  pointer-events: none;
}
/* The hero's video card fills the dip, so sink it less: the ground then
   runs unbroken under the card into the marquee strip below. */
.meadow-shallow {
  transform: translateY(6%);
}

.noise-heavy::after {
  opacity: 0.45;
}

.noise-light::after {
  opacity: 0.18;
}

.noise-subtle::after {
  opacity: 0.12;
}

/* Noise on colored backgrounds blends differently */
.noise-on-dark::after {
  mix-blend-mode: overlay;
  opacity: 0.5;
}

/* Each section below the hero rises into place as one unit */
.section-reveal {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.8s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.section-reveal.visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .section-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Explainer slides: copied from the app's globals.css so the hero plays
   exactly like ExplainerPlayer. Slides cross-fade and drift (Ken Burns). */
.funke-slide { transition: opacity 0.7s ease; }
.funke-kb { animation-timing-function: linear; animation-fill-mode: both; }
.funke-kb-0 { animation-name: funke-kb-0; }
.funke-kb-1 { animation-name: funke-kb-1; }
.funke-kb-2 { animation-name: funke-kb-2; }
.funke-kb-3 { animation-name: funke-kb-3; }
@keyframes funke-kb-0 {
  from { transform: scale(1.06) translate3d(-1.5%, 0, 0); }
  to   { transform: scale(1.16) translate3d(1.5%, 0, 0); }
}
@keyframes funke-kb-1 {
  from { transform: scale(1.18) translate3d(0, 2%, 0); }
  to   { transform: scale(1.06) translate3d(0, -1.5%, 0); }
}
@keyframes funke-kb-2 {
  from { transform: scale(1.06) translate3d(1.8%, 0, 0); }
  to   { transform: scale(1.15) translate3d(-1.8%, 0, 0); }
}
@keyframes funke-kb-3 {
  from { transform: scale(1.08) translate3d(1.2%, -1.2%, 0); }
  to   { transform: scale(1.17) translate3d(-1.2%, 1.2%, 0); }
}
.explainer-tick { position: relative; height: 0.375rem; flex: 1; overflow: hidden; border-radius: 9999px; background: #f2eaf6; }
.explainer-tick > span { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: #86569b; border-radius: inherit; }
@media (prefers-reduced-motion: reduce) {
  .funke-kb { animation: none !important; transform: scale(1.04); }
  .funke-slide { transition: none !important; }
}

.gradient-text {
  background:
    url("../images/noise.svg"),
    linear-gradient(135deg, #86569b 0%, #c05a9e 50%, #c32e2e 100%);
  background-size: 150px 150px, 100% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- More of the app's components, for the ported teacher dashboard. */
.funke-banner {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  border: 2px solid #323954;
  box-shadow: 3px 3px 0 #323954;
  background: linear-gradient(110deg, #ceb5d9 0%, #e2e6f3 55%, #fbedef 100%);
  color: #323954;
}
.funke-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  border: 1.5px solid #323954;
  background-color: #f2eaf6;
  color: #323954;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  padding: 0.125rem 0.625rem;
}