/* =============================================================
   MogoVolt — sub-brand hub
   1. Tokens
   2. Reset & base
   3. Backdrop
   4. Hero
   5. Sub-brand tiles
   6. Responsive
   7. Animation utilities
   ============================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* base */
  --c-bg:      #050B10;
  --c-bg-deep: #02060A;
  --c-text:    #FFFFFF;
  --c-muted:   rgba(255, 255, 255, .45);

  /* brand accents */
  --c-amber:    #FFBB00;
  --c-electric: #00E183;
  --c-heating:  #F26522;
  --c-smart:    #C8D3DA;

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.4, 0, .2, 1);

  --disc: 200px;   /* sub-brand circle size */

  /* animation (see section 7) */
  --anim-duration: .7s;    /* how long one element takes */
  --anim-distance: 20px;   /* travel distance for anim-up / anim-down */
  --anim-step: .15s;       /* gap between staggered siblings */
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font-sans);
  line-height: 1.5;
  color: var(--c-text);
  background: var(--c-bg-deep);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--c-amber);
  outline-offset: 6px;
  border-radius: 12px;
}

/* ---------- 3. Backdrop ---------- */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(2rem, 6vw, 5rem) 1.5rem;
  overflow: hidden;
  background:
    radial-gradient(70% 55% at 78% 62%, rgba(242, 101, 34, .20), transparent 62%),
    radial-gradient(55% 45% at 12% 22%, rgba(255, 187, 0, .12), transparent 65%),
    radial-gradient(60% 60% at 50% 45%, rgba(0, 225, 131, .07), transparent 70%),
    var(--c-bg);
}

/* animated dot field (background.js) */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 45%, #000 45%, transparent 92%);
          mask-image: radial-gradient(120% 100% at 50% 45%, #000 45%, transparent 92%);
}

/* static dot grid — fallback for when background.js can't run */
.js .hero::before { display: none; }

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .10) 1px, transparent 1px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 15%, transparent 78%);
          mask-image: radial-gradient(circle at 50% 45%, #000 15%, transparent 78%);
  opacity: .5;
}

/* oversized outline of the brand mark, centred behind the content */
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  height: min(88svh, 780px);
  aspect-ratio: 997 / 1025;
  transform: translate(-50%, -50%);
  background: url("../img/logo-outline.svg") center / contain no-repeat;
  opacity: .9;
  pointer-events: none;
}

/* ---------- 4. Hero ---------- */
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  width: 100%;
  max-width: 1100px;
  margin: auto;
}

.hero__logo img {
  width: clamp(240px, 32vw, 420px);
  height: auto;
}

.hero__footer {
  position: relative;
  padding-top: 2rem;
  font-size: .8125rem;
  color: var(--c-muted);
}

/* ---------- 5. Sub-brand tiles ---------- */
.brands {
  --anim-start: .3s;   /* tiles begin after the wordmark has landed */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 4rem);
}

.brand {
  --accent: rgba(255, 255, 255, .5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform .3s var(--ease);
}
.brand--electric { --accent: var(--c-electric); }
.brand--heating  { --accent: var(--c-heating); }
.brand--smart    { --accent: var(--c-smart); }

.brand__disc {
  display: grid;
  place-items: center;
  width: var(--disc);
  height: var(--disc);
  margin-bottom: 1.25rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14);
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .06), transparent 60%),
    rgba(5, 11, 16, .72);
  backdrop-filter: blur(2px);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
}

.brand__icon {
  width: 52%;
  height: auto;
  transition: transform .3s var(--ease);
}

.brand__name {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.brand__label {
  margin-top: .25rem;
  font-size: clamp(.875rem, 1.2vw, 1.0625rem);
  font-weight: 600;
  color: var(--accent);
}

.brand__soon {
  margin-top: .65rem;
  padding: .2rem .65rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

/* Divisions that aren't live yet: dimmed and inert. */
.brand.is-soon { cursor: default; }
.brand.is-soon .brand__disc { opacity: .72; }
.brand.is-soon .brand__label { opacity: .8; }

/* hover / focus — live tiles only */
.brand:not(.is-soon):hover,
.brand:not(.is-soon):focus-visible { transform: translateY(-4px); }

.brand:not(.is-soon):hover .brand__disc,
.brand:not(.is-soon):focus-visible .brand__disc {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 40px -8px var(--accent);
}
.brand:not(.is-soon):hover .brand__icon { transform: scale(1.06); }

/* ---------- 6. Responsive ---------- */
@media (max-width: 900px) {
  :root { --disc: 168px; }
}

@media (max-width: 640px) {
  :root { --disc: 156px; }
  .brands { flex-direction: column; align-items: center; gap: 2.5rem; }
  .brand { width: 100%; }
  .brand__disc { margin-bottom: 1rem; }
}

/* ---------- 7. Animation utilities ----------
   Drop one of .anim-up / .anim-down / .anim-fade / .anim-pop on any element.
   Nothing plays until <html> gets .is-ready (main.js, on DOMContentLoaded), so
   elements never appear half-animated on a slow load.

   Timing:
     • .stagger on a parent  → its children play one after another
     • --anim-start on that parent → delays the whole group
     • .delay-1 … .delay-6   → manual delay for a single element
     • --anim-duration / --anim-distance / --anim-step → global feel (section 1)

   Hidden state is scoped to .js:not(.is-ready), so the page still renders if
   JavaScript never runs, and animation-fill-mode stays `backwards` so finished
   elements go back to normal styling (otherwise hover transforms get locked out).
--------------------------------------------------------------- */
.js:not(.is-ready) .anim-up,
.js:not(.is-ready) .anim-down,
.js:not(.is-ready) .anim-fade,
.js:not(.is-ready) .anim-pop { opacity: 0; }

.is-ready .anim-up,
.is-ready .anim-down,
.is-ready .anim-fade,
.is-ready .anim-pop {
  animation-duration: var(--anim-duration);
  animation-timing-function: var(--ease);
  animation-delay: var(--anim-delay, 0s);
  animation-fill-mode: backwards;
}

.is-ready .anim-up   { animation-name: anim-up; }
.is-ready .anim-down { animation-name: anim-down; }
.is-ready .anim-fade { animation-name: anim-fade; }
.is-ready .anim-pop  { animation-name: anim-pop; }

@keyframes anim-up {
  from { opacity: 0; transform: translateY(var(--anim-distance)); }
  to   { opacity: 1; transform: none; }
}
@keyframes anim-down {
  from { opacity: 0; transform: translateY(calc(var(--anim-distance) * -1)); }
  to   { opacity: 1; transform: none; }
}
@keyframes anim-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes anim-pop {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: none; }
}

/* Stagger: each child waits one --anim-step longer than the previous one. */
.stagger > *:nth-child(1) { --anim-delay: calc(var(--anim-start, 0s) + var(--anim-step) * 0); }
.stagger > *:nth-child(2) { --anim-delay: calc(var(--anim-start, 0s) + var(--anim-step) * 1); }
.stagger > *:nth-child(3) { --anim-delay: calc(var(--anim-start, 0s) + var(--anim-step) * 2); }
.stagger > *:nth-child(4) { --anim-delay: calc(var(--anim-start, 0s) + var(--anim-step) * 3); }
.stagger > *:nth-child(5) { --anim-delay: calc(var(--anim-start, 0s) + var(--anim-step) * 4); }
.stagger > *:nth-child(6) { --anim-delay: calc(var(--anim-start, 0s) + var(--anim-step) * 5); }
.stagger > *:nth-child(7) { --anim-delay: calc(var(--anim-start, 0s) + var(--anim-step) * 6); }
.stagger > *:nth-child(8) { --anim-delay: calc(var(--anim-start, 0s) + var(--anim-step) * 7); }

/* Manual delays for elements outside a .stagger group. */
.delay-1 { --anim-delay: calc(var(--anim-step) * 1); }
.delay-2 { --anim-delay: calc(var(--anim-step) * 2); }
.delay-3 { --anim-delay: calc(var(--anim-step) * 3); }
.delay-4 { --anim-delay: calc(var(--anim-step) * 4); }
.delay-5 { --anim-delay: calc(var(--anim-step) * 5); }
.delay-6 { --anim-delay: calc(var(--anim-step) * 6); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}