:root{
  --bg:#000;
  --fg:#fff;
  --gap:14px;
  --ui-pad:44px;
  --compH:70vh;
}

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

/* Background stage */
#stage{
  position:fixed;
  inset:0;
  background:var(--bg);
}

#bgSingle{
  position:absolute;
  inset:0;
  background-color:var(--bg);
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  opacity:0;
  pointer-events:none;
  transition: opacity 180ms linear;
}

/* Default composition centered vertically (equal top/bottom page space) */
#bgComposite{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--gap);
  background:var(--bg);
  opacity:1;
  pointer-events:none;
  transition: opacity 180ms linear;
}

.compWrap{
  display:flex;
  gap:var(--gap);
  height:var(--compH);
  max-width: calc(100vw - (2 * var(--gap)));
  max-height: calc(100vh - (2 * var(--gap)));
}

.compImg{
  height:100%;
  width:auto;     /* no cropping */
  display:block;
  background:var(--bg);
}

@media (max-aspect-ratio: 1/1){
  .compWrap{
    display:grid;
    grid-template-columns:auto auto;
    grid-template-rows:auto auto;
    gap:var(--gap);
    height:var(--compH);
  }
  .compImg{
    height:100%;
    width:auto;
    justify-self:center;
  }
}

/* UI text */
#name{
  position:fixed;
  top:var(--ui-pad);
  left:var(--ui-pad);
  z-index:5;
  font-size:18px;
  line-height:1.2;
  letter-spacing:0.01em;
  opacity:0.9;
  pointer-events:none;
  white-space:nowrap;
}

#email{
  position:fixed;
  left:var(--ui-pad);
  bottom:var(--ui-pad);
  z-index:5;
  font-size:16px;
  line-height:1.2;
  opacity:0.85;
  pointer-events:auto;
  color:rgba(255,255,255,0.85);
  text-decoration:none;
  white-space:nowrap;
}
#email:hover{ text-decoration:underline; }

/* Center corona button (no orb) */
#menuBtn{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:260px;   /* constant hit area */
  height:260px;
  z-index:6;
  display:grid;
  place-items:center;
  text-decoration:none;
  color:inherit;
  -webkit-tap-highlight-color: transparent;
  outline:none;
}

#menuBtn .halo{
  width:160px;
  height:160px;
  border-radius:999px;
  position:relative;
  pointer-events:none;
  animation: haloPulse 2.2s ease-in-out infinite;
  filter: url(#corona) drop-shadow(0 0 18px rgba(255,255,255,0.35));
}

#menuBtn .halo::before{
  content:"";
  position:absolute;
  inset:-60px;
  border-radius:999px;
  background:
    radial-gradient(circle,
      rgba(255,255,255,1.00) 0%,
      rgba(255,255,255,0.55) 18%,
      rgba(255,255,255,0.18) 40%,
      rgba(255,255,255,0.00) 70%
    );
  mask-image:
    radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 78%);
  opacity: 0.95;
}

#menuBtn .halo::after{
  content:"";
  position:absolute;
  inset:-60px;
  border-radius:999px;
  background:
    radial-gradient(circle,
      rgba(255,255,255,0.00) 0%,
      rgba(255,255,255,0.10) 52%,
      rgba(255,255,255,0.00) 75%
    );
  mix-blend-mode: screen;
  opacity: 0.55;
  filter: url(#corona);
  animation: coronaDrift 3.6s ease-in-out infinite;
}

@keyframes haloPulse{
  0%,100% { transform: scale(0.92); }
  50%     { transform: scale(1.08); }
}

@keyframes coronaDrift{
  0%,100% { transform: rotate(-4deg) scale(0.98); }
  50%     { transform: rotate(6deg)  scale(1.02); }
}

/* Invisible hover zones */
.zone{
  position:absolute;
  background:transparent;
  z-index:4;
}
/* Regular (400) */
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/montserrat/Montserrat-Regular.woff2") format("woff2"),
       url("/fonts/montserrat/Montserrat-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Medium (500) */
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/montserrat/Montserrat-Medium.woff2") format("woff2"),
       url("/fonts/montserrat/Montserrat-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Bold (700) */
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/montserrat/Montserrat-Bold.woff2") format("woff2"),
       url("/fonts/montserrat/Montserrat-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Debug */
/* .zone{ outline:1px solid rgba(255,255,255,0.18); } */