/*
 * OCCULT LIBRARY — responsive one-image landing page for Cloudflare Pages
 *
 * Design rule: do not crop or stretch the foreground artwork.
 * To fill every shape of browser window, use a heavily blurred copy behind it.
 * Media queries are based on available space, not unreliable phone/PC detection.
 */

:root {
  color-scheme: dark;
  --background: #090b0a;
  --artwork: url("./assets/occult-library.webp");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
  background: var(--background);
}

body {
  width: 100%;
  min-height: 100%;
  height: 100vh; /* Fallback for older browsers */
  height: 100dvh; /* Tracks mobile browser bars and viewport resizing */
  margin: 0;
  overflow: hidden; /* One-screen landing page, with no accidental scrolling */
  background: var(--background);
}

.viewport {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--background);
}

/* Atmospheric full-bleed fill behind the uncropped picture. */
.viewport::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -52px; /* Hides the edges exposed by blur */
  background-image: var(--artwork);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(32px) brightness(0.45) saturate(0.8);
  pointer-events: none;
}

/* Subtle vignette in areas that aren't covered by the foreground art. */
.viewport::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 35%,
    rgba(0, 0, 0, 0.28) 100%
  );
  pointer-events: none;
}

.scene {
  position: relative;
  z-index: 1;
  isolation: isolate;

  /* At 16:9 the image fills the entire browser; at other shapes it scales
     down until ALL edges are visible. It never stretches or crops. */
  width: min(100vw, 177.77778vh);
  width: min(100vw, 177.77778dvh);
  aspect-ratio: 16 / 9;
  flex: none;
}

.scene__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

/*
 * Reserved for future interactive objects.
 * Position them with percentages relative to the artwork, not the viewport.
 */
.scene__content {
  position: absolute;
  inset: 0;
  pointer-events: none; /* Don't intercept clicks while empty */
}

.scene__hotspot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

/* Portrait phones and tablets: a floating panoramic painting over atmosphere. */
@media (orientation: portrait) and (max-width: 1024px) {
  .scene {
    width: min(calc(100vw - 24px), 177.77778dvh);
    box-shadow:
      0 25px 75px rgba(0, 0, 0, 0.64),
      0 0 0 1px rgba(208, 158, 91, 0.28);
  }

  .viewport::before {
    filter: blur(38px) brightness(0.53) saturate(0.75);
  }
}

/* Very narrow devices: preserve a small margin without shrinking the art too far. */
@media (max-width: 420px) and (orientation: portrait) {
  .scene {
    width: calc(100vw - 16px);
  }
}

/* Landscape phones retain the full panorama without an overlay or black bars. */
@media (orientation: landscape) and (max-height: 500px) {
  .viewport::before {
    filter: blur(24px) brightness(0.4) saturate(0.75);
  }
}