/* =========================
   Lyobot — styles.css
   Responsive full-bleed hero with GSAP
   ========================= */

/* Base */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: #111;
  background: #f9f7f3; /* requested background */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tunables */
:root {
  --brand-offset: 1.25rem;            /* logo margin from top/left */
  --logo-min: 44px;
  --logo-max: 112px;
}

/* Brand header (safe-area aware) */
.brand {
  position: fixed;
  top: calc(var(--brand-offset) + env(safe-area-inset-top));
  left: calc(var(--brand-offset) + env(safe-area-inset-left));
  z-index: 20;
}
.brand a { display: inline-block; text-decoration: none; }
.logo {
  display: block;
  height: clamp(var(--logo-min), 9vw, var(--logo-max)); /* responsive logo size */
  width: auto;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.15));
}

/* Hero fills the real mobile viewport */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;  /* fallback */
  height: 100svh;     /* modern mobile viewport units */
  overflow: hidden;
}

/* Slides */
.slides { position: absolute; inset: 0; }
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;                 /* JS (or inline fallback) reveals the first slide */
  will-change: opacity, transform;
}
.slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* fills screen nicely */
  object-position: center;    /* default focal point */
  user-select: none;
  -webkit-user-drag: none;
  image-rendering: auto;
}

/* Placeholder area for future animated text */
.hero-text {
  position: absolute;
  inset: auto 0 max(8vh, calc(1.25rem + env(safe-area-inset-bottom))) 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 6vw;
  min-height: 7rem;
  z-index: 10;
  pointer-events: none;
  color: #111;
  text-align: center;
  text-shadow: 0 1px 2px rgba(255,255,255,0.6);
}

/* Small-screen tweaks */
@media (max-width: 768px) {
  .hero-text {
    padding: 0 5vw;
    inset: auto 0 max(6vh, calc(1rem + env(safe-area-inset-bottom))) 0;
    min-height: 5rem;
  }

  /* Keep important right-side content visible on phones for slides 2 & 3 */
  .slide[data-index="1"] img,
  .slide[data-index="2"] img {
    object-position: right center; /* or fine-tune with 80% center */
  }
}

/* Very narrow phones: guarantee no cropping for slides 2 & 3 (letterboxing) */
@media (max-width: 420px) {
  .slide[data-index="1"] img,
  .slide[data-index="2"] img {
    object-fit: contain;
    background: #f9f7f3; /* fill bars with page color */
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .slide { transition: none !important; }
}