@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@400;500;600&display=swap');
@import "tailwindcss";

:root {
  --background: #f5f5f5;
  --foreground: #09090b;
  --muted: #71717a;
  --card-bg: #ffffff;

  /* Accent gradient — single accent pair used site-wide */
  --accent: #f59e0b;
  --accent-2: #ea580c;

  /* Neumorphic shadow: 6 layered outer shadows + 1 inset top-edge highlight.
     Do not collapse into a single shadow — the stack is what reads as 3D. */
  --card-shadow:
    0px 0.7px 0.7px -0.67px rgba(0, 0, 0, 0.08),
    0px 1.8px 1.8px -1.33px rgba(0, 0, 0, 0.08),
    0px 3.6px 3.6px -2px rgba(0, 0, 0, 0.07),
    0px 6.9px 6.9px -2.67px rgba(0, 0, 0, 0.07),
    0px 13.6px 13.6px -3.33px rgba(0, 0, 0, 0.05),
    0px 30px 30px -4px rgba(0, 0, 0, 0.02),
    inset 0px 3px 1px 0px rgba(255, 255, 255, 1);

  --pill-shadow:
    0px 0.7px 0.7px -0.67px rgba(0, 0, 0, 0.08),
    0px 1.8px 1.8px -1.33px rgba(0, 0, 0, 0.08),
    0px 3.6px 3.6px -2px rgba(0, 0, 0, 0.07),
    0px 6.9px 6.9px -2.67px rgba(0, 0, 0, 0.07),
    inset 0px 2px 1px 0px rgba(255, 255, 255, 1);

  --inset-shadow:
    inset 2px 2px 5px rgba(0, 0, 0, 0.06),
    inset -2px -2px 5px rgba(255, 255, 255, 0.8);
  --font-devanagari: 'Noto Sans Devanagari', sans-serif;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-muted: var(--muted);
  --color-card: var(--card-bg);
  --color-accent: var(--accent);
  --color-accent-2: var(--accent-2);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --font-devanagari: var(--font-devanagari);
}

html {
  scroll-behavior: auto; /* Lenis owns scrolling — never fight it with CSS smooth */
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-geist-sans), system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Hide navbar and prevent scroll while the loading screen is active */
body.is-loading {
  overflow: hidden;
}
body.is-loading header,
body.is-loading nav {
  opacity: 0;
  pointer-events: none;
}

/* ---- Lenis smooth scroll ---- */

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: hidden;
}

/* ---- Interaction affordances ----

   Both rules use :where() so they carry zero specificity and any component
   can still override them. */

/* Browsers default <button> to cursor: default, which reads as "not
   clickable" on a page where most controls are buttons. */
:where(button, [role="button"], a[href], summary):not(:disabled) {
  cursor: pointer;
}

/* Applied globally rather than per component: the neumorphic surfaces all
   carry a permanent box-shadow, so a shadow-based focus style would be
   invisible against them. An outline sits outside the box and always reads. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
}

/* ---- Surfaces ---- */

/* Flat #f5f5f5 sections read as unfinished next to the photographic ones, but
   a photo behind a calculator, a timeline or a wall of copy fights the content
   it sits under. This is the middle setting: two very low-opacity washes in
   the brand accents, placed off-centre so the light appears to come from the
   same direction across the page. No asset, no contrast cost — the darkest
   stop is 7% alpha, far below anything that could affect text legibility. */
/* Drawn rather than photographed: a photovoltaic cell grid with sunlight
   crossing it. Same subject as the product, but as geometry — so it sits
   under a calculator or a wall of copy without competing, and costs no asset
   download. Layer order below is top-most first, as CSS paints it. */
.surface-wash {
  position: relative;
  overflow: hidden;
  background-color: var(--background);
  background-image:
    /* sun, low in the corner */
    radial-gradient(
      42rem 26rem at 88% -12%,
      rgba(245, 158, 11, 0.13),
      transparent 62%
    ),
    /* module seams — the heavier frame lines between panels */
    repeating-linear-gradient(
      90deg,
      rgba(9, 9, 11, 0.05) 0 1px,
      transparent 1px 256px
    ),
    /* cell grid — the fine lattice inside each module */
    repeating-linear-gradient(
      0deg,
      rgba(9, 9, 11, 0.032) 0 1px,
      transparent 1px 64px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(9, 9, 11, 0.032) 0 1px,
      transparent 1px 64px
    ),
    /* warm ground light */
    radial-gradient(
      48rem 26rem at 8% 104%,
      rgba(234, 88, 12, 0.05),
      transparent 62%
    );
  background-repeat: no-repeat, repeat, repeat, repeat, no-repeat;
}

/* Sun bloom that breathes. Paired with the sweep below it reads as daylight
   moving across the array rather than a generic shimmer. */
.surface-wash::before {
  content: "";
  position: absolute;
  top: -14rem;
  right: -8rem;
  z-index: 0;
  width: 34rem;
  height: 34rem;
  border-radius: 9999px;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(253, 224, 71, 0.24),
    rgba(245, 158, 11, 0.09) 45%,
    transparent 70%
  );
  filter: blur(26px);
  animation: surface-sun 11s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes surface-sun {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.14);
    opacity: 1;
  }
}

/* The sheen is a pseudo-element so it can be moved with a transform, which the
   compositor handles on its own thread. Animating background-position instead
   would repaint the full width of these sections every frame. */
.surface-wash::after {
  content: "";
  position: absolute;
  inset: -30% -65%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 44%,
    rgba(245, 158, 11, 0.13) 50%,
    transparent 56%
  );
  transform: translate3d(-42%, 0, 0);
  animation: surface-sheen 14s ease-in-out infinite;
  will-change: transform;
}

/* Keeps section content above the sheen without touching any markup. */
.surface-wash > * {
  position: relative;
  z-index: 1;
}

@keyframes surface-sheen {
  0%,
  100% {
    transform: translate3d(-42%, 0, 0);
  }
  50% {
    transform: translate3d(42%, 0, 0);
  }
}

/* The global reduced-motion rule collapses the duration, which would leave the
   sheen frozen mid-sweep — hide it outright instead. */
@media (prefers-reduced-motion: reduce) {
  .surface-wash::after {
    display: none;
  }
  .surface-wash::before {
    animation: none;
  }
}

.card-surface {
  background: var(--card-bg);
  border-radius: 20px;
  box-shadow: var(--card-shadow);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.card-surface-nested {
  background: var(--background);
  border-radius: 20px;
  box-shadow: var(--card-shadow);
}

.pill-surface {
  background: var(--card-bg);
  border-radius: 9999px;
  box-shadow: var(--pill-shadow);
}

.inset-surface {
  background: var(--background);
  box-shadow: var(--inset-shadow);
}

/* ---- Scroll-animation section heights ----

   These set how much scrolling the 120-frame hero is spread across, which is
   what governs how fast the animation reads. Minus the 100vh sticky child,
   600vh leaves 500vh of travel — about 25px of scroll per frame on a typical
   desktop, so one wheel notch advances ~4 frames rather than ~7.

   Raise these if the animation still feels hurried; lower them if visitors
   have to scroll too long before reaching the sections below. */

.scroll-animation {
  height: 600vh;
}

@media (max-width: 1024px) {
  .scroll-animation {
    height: 500vh !important;
  }
}

@media (max-width: 768px) {
  .scroll-animation {
    height: 420vh !important;
  }
}

/* ---- Keyframes ---- */

@keyframes slide {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(250%);
  }
}

/* ---- Range input (savings calculator) ---- */

.solar-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 9999px;
  background: linear-gradient(
    to right,
    var(--accent) 0%,
    var(--accent-2) var(--fill, 50%),
    #e4e4e7 var(--fill, 50%),
    #e4e4e7 100%
  );
  box-shadow: var(--inset-shadow);
  outline: none;
}

.solar-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--pill-shadow);
  cursor: grab;
}

.solar-range::-webkit-slider-thumb:active {
  cursor: grabbing;
}

.solar-range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--pill-shadow);
  cursor: grab;
}

/* ---- Accessibility ---- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}