/* reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* global + full-screen background */
html, body {
  height: 100%;
  overflow-y: scroll;
  scroll-behavior: smooth;

  /* absolute path from web root, with fallback color */
  background-color: #000;
  background-image: url('/images/bg.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
}

/* show/hide desktop vs mobile */
.desktop-only { display: block; }
.mobile-only  { display: none; }

/* switch at mobile breakpoint */
@media (max-width: 768px) {
  .desktop-only { display: none; }
  .mobile-only  { display: block; }
}

/* shared container styling */
.container {
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}

/* each slide = full viewport, edge-to-edge */
.panel {
  position: relative;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1s ease-out;
}

/* fade-in when scrolled into view */
.panel.visible {
  opacity: 1;
}

/* scroll‐hint animation (first slide peek) */
@keyframes scrollHint {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-15vh); }
  100% { transform: translateY(0); }
}

/* apply scroll hint to the first panel shown */
.container .panel:first-child {
  animation: scrollHint 1s ease-in-out forwards;
  animation-delay: 2s;
}

/* ===== MOBILE OVERRIDE ===== */
@media (max-width: 768px) {
  /* ensure portrait slides fit fully, no cropping */
  .mobile-only .panel {
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
  }
}