/*
 * ============================================================
 * hero.css — Hero section (top of the homepage)
 * ============================================================
 *
 * WHAT THIS FILE DOES:
 *   - Styles the large introduction area at the top of the page.
 *   - Includes the two-column grid (text on left, device mockup on right).
 *   - Styles the 3D media element (video/gif) on the right side.
 *   - Styles the three "point" cards below the headline.
 *
 * EDITING TIPS (no CSS knowledge required):
 *   - To change the hero section's vertical padding, edit .hero padding.
 *   - The hero text content (headline, lead, buttons) is in content.js → hero.
 *   - The three-column point cards below the headline are .hero-points.
 *   - The grey device mockup on the right is replaced by a real video/gif
 *     wrapped in a 3D-perspective container (.hero-media-scene / .hero-media-wrap).
 *   - The caption text under the device image is .hero-caption.
 *   - To move the GIF panel up/down independently, edit .hero-visual margin-top.
 *   - To make the GIF column wider/narrower, change the second value in
 *     grid-template-columns (e.g. 2fr = bigger, 1.5fr = smaller).
 *
 * DEPENDENCIES:
 *   - Uses CSS variables from base.css.
 *   - Hero content (text, button labels) is set in content.js.
 *   - HTML structure is rendered by app.js (renderHero function).
 * ============================================================
 */

/* ── Hero section wrapper ─────────────────────────────────── */
.hero { padding: 75px 0 10px; }

.hero-grid {
  display: grid;
  grid-template-columns: 3fr 2.5fr;   /* change second value to make GIF wider or narrower */
  gap: 20px;
  align-items: start;
}

/* ── Hero headline size ───────────────────────────────────── */
.hero h1 {
  font-size: clamp(2rem, 5vw, 4.25rem);
  max-width: 100%;
}

/* ── Three highlight cards below the headline ────────────── */
/* align-items: stretch ensures all three tiles grow to the same height */
.hero-points {
  display: grid;
  grid-template-columns: repeat(3, 7fr);
  align-items: stretch;
  gap: 20px;
  margin-top: 34px;
}

/* Make each point-card fill the full cell height */
.hero-points .point-card {
  height: 100%;
  box-sizing: border-box;
}

/* ── Right-side panel (device visual) ────────────────────── */
.hero-visual {
  margin-top: 7px; /* lower the GIF panel independently of the text column */
}

.hero-panel {
  padding: 1px;
  background:
    linear-gradient(180deg, rgba(22, 31, 27, 0.72), rgba(10, 13, 11, 0.92));
  border: none;                /* no border around the GIF panel */
  border-radius: 10px;
  padding: 0;                  /* zero padding so GIF fills the full panel */
  background: transparent;
  border: none;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.42);
}

/* ── 3D media scene ───────────────────────────────────────── */
.hero-media-scene {
  display: block;
  width: 100%;
  perspective: 900px; /* depth of the virtual "camera" — lower = more dramatic tilt */
  perspective-origin: 50% 50%;
}

.hero-media-wrap {
  transform: rotateY(-10deg) rotateX(10deg);
  transform-style: preserve-3d;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(123, 255, 192, 0.10),
    0 -4px 20px rgba(123, 255, 192, 0.06),
    inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  background: #09100d;
}

/* Gloss overlay */
.hero-media-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.07) 0%,
    rgba(255,255,255,0.01) 40%,
    transparent 60%
  );
  pointer-events: none;
  border-radius: inherit;
}

/* Hover: ease the tilt slightly */
.hero-visual:hover .hero-media-wrap {
  transform: rotateY(-5deg) rotateX(2deg);
  box-shadow:
    0 50px 120px rgba(0, 0, 0, 0.60),
    0 0 0 1px rgba(123, 255, 192, 0.18),
    0 -4px 30px rgba(123, 255, 192, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

/* The media element itself — full width of its container */
.hero-media-wrap video,
.hero-media-wrap img {
  display: block;
  width: 100%;
  aspect-ratio: 1.2 / 1;
  object-fit: cover;
  border-radius: inherit;
}

/* Accessibility: disable transforms for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .hero-media-wrap {
    transform: none;
    transition: none;
  }
  .hero-visual:hover .hero-media-wrap {
    transform: none;
  }
}

/* ── Caption below device panel ──────────────────────────── */
.hero-caption {
  color: var(--muted);
  margin: 12px 0 0;
  padding: 0;
  font-size: 0.85rem;      /* Reduced size (was 0.94rem) */
  text-align: center;      /* Centers the text */
  font-style: italic;      /* Italicizes the text */
}