/* ===== Essentia Glyph Scroll ===== */

/* Reset & Base */
body, html {
  margin: 0;
  padding: 0;
  font-family: 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: #ffffff;
  background: linear-gradient(to right, #0a0a0a 0%, #111111 50%, #0a0a0a 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  overflow: hidden;
}

/* Viewer Layout */
#viewer {
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding: 1vh 0 2vh 0;
  text-align: center;
}

/* Image + Wrapper */
#glyph-wrapper {
  position: relative;
  display: inline-block;
  z-index: 2;
  transition: transform 0.8s ease-in-out;
}

img {
  max-height: 60vh;
  border-radius: 12px;
  z-index: 2;
  position: relative;
  transition: opacity 0.8s ease-in-out;
}

/* Subtle Glow Ring */
.glow-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vh;
  height: 65vh;
  border-radius: 48% 52% 50% 50% / 58% 42% 60% 40%;
  background: rgba(255, 255, 255, 0.03);
  animation: subtle-warp 40s ease-in-out infinite alternate, color-shift 30s linear infinite;
  z-index: 0;
  pointer-events: none;
  box-shadow:
    0 0 24px rgba(255,255,255,0.02),
    0 0 64px rgba(255,255,255,0.02) inset;
  backdrop-filter: blur(1px);
  filter: blur(0.5px) brightness(1.05) saturate(1.1);
}

@keyframes subtle-warp {
  0%, 100% {
    border-radius: 48% 52% 50% 50% / 58% 42% 60% 40%;
  }
  25% {
    border-radius: 50% 50% 52% 48% / 60% 40% 62% 38%;
  }
  50% {
    border-radius: 52% 48% 54% 46% / 62% 38% 64% 36%;
  }
  75% {
    border-radius: 46% 54% 48% 52% / 64% 36% 60% 40%;
  }
}

@keyframes color-shift {
  0%, 100% {
    background-color: rgba(var(--current-r), var(--current-g), var(--current-b), 0.05);
  }
}

/* iOS Shiv */
#ios-shiv {
  position: absolute;
  top: -100vh;
  height: 100vh;
  width: 100vw;
  pointer-events: none;
  visibility: hidden;
}

.label {
  margin-top: 1rem;
  font-size: 1.8rem;
  opacity: 0.75;
}

.story {
  font-size: 1.2rem;
  width: 80vw;
  line-height: 1.5;
  opacity: 0.85;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6em;
  background: linear-gradient(to bottom, rgba(255,255,255,0.02), rgba(255,255,255,0));
  padding: 1em;
  border-radius: 16px;
  margin-top: 1rem;
  backdrop-filter: blur(2px);
}

.story p {
  margin: 0;
  opacity: 0.9;
  transition: opacity 1s ease, transform 1s ease, font-size 1s ease;
  text-align: center;
}

.story p.oldest { opacity: 0.25; transform: scale(0.9); font-size: 0.85em; }
.story p.older  { opacity: 0.45; transform: scale(0.93); font-size: 0.9em; }
.story p.previous { opacity: 0.65; transform: scale(0.96); font-size: 0.95em; }
.story p.current  { opacity: 0.85; transform: scale(1); }

.controls {
  display: grid;
  grid-template-areas:
    "nw north ne"
    "west center east"
    "sw south se";
  gap: 4px;
  justify-items: center;
  align-items: center;
  width: 160px;
  margin-top: 1.2rem;
}

.button {
  background: #222;
  color: #eee;
  border: none;
  width: 46px;
  height: 46px;
  border-radius: 6px;
  font-size: 1.5rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.button:hover {
  background: #444;
}

.north  { grid-area: north; }
.south  { grid-area: south; }
.west   { grid-area: west; }
.east   { grid-area: east; }
.center { grid-area: center; }
.nw     { grid-area: nw; }
.ne     { grid-area: ne; }
.sw     { grid-area: sw; }
.se     { grid-area: se; }

@media screen and (max-width: 600px) {
  html, body { font-size: 26px; padding: 0 1.2rem; }
  .label     { font-size: 2.6rem; text-align: center; }
  .story     { font-size: 1.7rem; max-width: 95vw; text-align: center; }
  .button    { width: 72px; height: 72px; font-size: 2.2rem; }
  .glow-ring {
    width: 88vw;
    height: 72vw;
    border-radius: 44% 56% 48% 52% / 60% 40% 62% 38%;
  }
}