/* iPhone centering + safe area support */
:root{
  --bg:#000;
  --gold-1:#fff1b3;
  --gold-2:#f5d36a;
  --gold-3:#caa23a;
  --gold-4:#fff4c7;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  overflow:hidden;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.stage{
  position:relative;
  height:100dvh; /* modern mobile viewport */
  width:100%;
  display:grid;
  place-items:center;
  padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}

/* Slides fade in/out, centered */
.slide{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  opacity:0;
  pointer-events:none;
  transition: opacity 1200ms ease;
}

.slide.show{
  opacity:1;
}

/* REEL 2: BOOK: keep proportional, centered, readable */
.bookImg{
  width: min(640px, 94vw);
  height:auto;
  max-height: 92dvh;
  display:block;
  filter: drop-shadow(0 20px 55px rgba(0,0,0,0.55));
}

/* REEL 1: Shield logo stack */
.logoStack{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.logoImg{
  width: min(520px, 92vw);
  height:auto;
  max-height: 72dvh;
  display:block;
  filter: drop-shadow(0 20px 55px rgba(0,0,0,0.55));
}

/* Shield logo fade-in animation (match your script: 5 seconds) */
.logoSlide.show .logoImg{
  animation: logoFadeIn 5s ease forwards;
  opacity: 0;
}

@keyframes logoFadeIn{
  from{ opacity:0; transform: translateY(6px) scale(0.99); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

/* REEL 3: Final gold logo + caption */
.finalStack{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 14px;
  text-align:center;
}

.finalLogo{
  width: min(980px, 96vw);
  height:auto;
  max-height: 60dvh;
  display:block;
  filter: drop-shadow(0 20px 55px rgba(0,0,0,0.65));
}

/* Caption: hidden by default, shown only when JS adds .show */
.caption{
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 900ms ease, transform 900ms ease;

  font-family: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  font-weight: 700;
  font-size: clamp(15px, 2.2vw, 24px);
  letter-spacing: 1.2px;
  text-transform: uppercase;

  background: linear-gradient(180deg, var(--gold-4), var(--gold-2) 35%, var(--gold-3) 70%, var(--gold-1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  text-shadow:
    0 2px 18px rgba(0,0,0,0.70),
    0 0 18px rgba(202,162,58,0.18);
  padding: 0 10px;
}

.caption.show{
  opacity: 1;
  transform: translateY(0);
}

/* Reduce motion: show final screen (reel 3) */
@media (prefers-reduced-motion: reduce){
  .logoSlide{ display:none; }
  .bookSlide{ display:none; }
  .finalSlide{
    opacity:1;
    position:relative;
    inset:auto;
    pointer-events:auto;
  }
  .caption{ opacity:1; transform:none; transition:none; }
}