:root{
  --bg:#0b0b0f; --ink:#f2d675;
  --base-size:20px;   /* JS will shrink if needed */
  --line:1.40;
  --gap:0.9em;
  --pad:6vw;
}

/* Odinson font (put files in assets/fonts/) */
@font-face{
  font-family:"Odinson";
  src: url("../fonts/Odinson.woff2") format("woff2"),
       url("../fonts/Odinson.woff")  format("woff"),
       url("../fonts/Odinson.ttf")   format("truetype");
  font-display:swap;
}

html,body{
  margin:0; height:100%;
  background:var(--bg); color:var(--ink);
  font-family:"Odinson", serif;  /* no cursive anywhere */
  overflow:hidden;               /* no scrolling */
}

/* full-viewport layout */
.wrapper{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  height:100dvh; width:100vw;
  padding:var(--pad);
  box-sizing:border-box;
  text-align:center;
  z-index:1;
}

.presentation-text{
  max-width:min(80ch, 92vw);
  line-height:var(--line);
  letter-spacing:.04em;
  text-transform:lowercase;
  font-size:var(--base-size);
  animation: glow 5s ease-in-out infinite alternate;
}

/* reveal sequence (JS toggles .show) */
.presentation-text p{
  margin:0 0 var(--gap);
  opacity:0; transform:translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
}
.presentation-text p.show{ opacity:1; transform:translateY(0); }

/* subtle golden glow for all text */
@keyframes glow{
  0%{   text-shadow:0 0 6px rgba(242,214,117,.45), 0 0 12px rgba(242,214,117,.3); }
  100%{ text-shadow:0 0 10px rgba(242,214,117,.85), 0 0 24px rgba(242,214,117,.5), 0 0 40px rgba(242,214,117,.35); }
}

/* prophecy emphasis */
.prophecy{ margin-top:1.1em; }
.runes{
  display:block;
  font-size:calc(var(--base-size) * 1.2);
  letter-spacing:.12em;
  animation: runeGlow 3s ease-in-out infinite alternate;
}
@keyframes runeGlow{
  0%{   text-shadow:0 0 12px rgba(242,214,117,.8), 0 0 26px rgba(242,214,117,.7), 0 0 50px rgba(242,214,117,.6); }
  100%{ text-shadow:0 0 20px rgba(242,214,117,1), 0 0 50px rgba(242,214,117,.9), 0 0 100px rgba(242,214,117,.8); }
}

/* --- fog background (fixed, no scroll) --- */
body::before,
body::after{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
}
body::before{
  inset:-2vmax;
  background:
    radial-gradient(1000px 1000px at 20% 30%, rgba(214,77,77,.35), transparent 70%),
    radial-gradient(1200px 1200px at 80% 70%, rgba(88,130,255,.35), transparent 70%),
    radial-gradient(1000px 1000px at 50% 110%, rgba(180,117,255,.35), transparent 70%);
  filter: blur(28px) saturate(150%);
  transform: translate3d(0,0,0);
  animation: fogDrift 22s ease-in-out infinite alternate, hueShift 30s linear infinite;
}
body::after{
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.65) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.2), rgba(0,0,0,.2));
}
@keyframes fogDrift{
  0%   { transform: translate3d(-3%, -3%, 0) scale(1.02); }
  50%  { transform: translate3d( 4%,  5%, 0) scale(1.08); }
  100% { transform: translate3d(-5%,  4%, 0) scale(1.02); }
}
@keyframes hueShift{
  from { filter: blur(28px) saturate(150%) hue-rotate(0deg); }
  to   { filter: blur(28px) saturate(150%) hue-rotate(60deg); }
}

/* --- Desktop: improve typography and spacing on large screens --- */
@media (min-width: 1000px) {
  /* relax auto-fit a bit on desktop */
  :root {
    --base-size: 22px;  /* a bit larger on desktop */
    --line: 1.5;
    --gap: 1.1em;
    --pad: 9vw;
  }

  .presentation-text{
    max-width: 65ch;      /* narrower measure for comfortable reading */
    font-size: var(--base-size);
    line-height: var(--line);
    letter-spacing: 0.045em;
    text-align: center;   /* keep it centered on wide screens */
  }

  .runes{
    font-size: calc(var(--base-size) * 1.6);
    letter-spacing: .14em;
  }

  /* soften fog on very wide displays so page looks balanced */
  @supports (position: fixed) {
    body::before { filter: blur(30px) saturate(140%); }
  }
}