@font-face { font-family: 'Thmanyah'; src: url('/static/fonts/thmanyahsans-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Thmanyah'; src: url('/static/fonts/thmanyahsans-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Thmanyah'; src: url('/static/fonts/thmanyahsans-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Thmanyah'; src: url('/static/fonts/thmanyahsans-Black.woff2') format('woff2'); font-weight: 900; font-display: swap; }

/* Brand colours are set from the wall settings at runtime (display.js). */
:root {
  --bg: #000000;
  --primary: #45CE4E;
  --secondary: #25AFA9;
  --primary-rgb: 69 206 78;
  --secondary-rgb: 37 175 169;
  --d: 112px;          /* glass circle diameter */
  --min-edge: 1080px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: #fff;
  font-family: 'Thmanyah', 'Segoe UI', Tahoma, sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
body.hide-cursor, body.hide-cursor * { cursor: none !important; }

/* The design's ground: black at the top, teal rising from the bottom-left and
   green from the bottom-right, meeting in a dark green across the middle. */
#stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(95% 70% at 100% 100%, rgb(var(--primary-rgb) / 1) 0%, rgb(var(--primary-rgb) / 0.62) 26%, rgb(var(--primary-rgb) / 0.2) 52%, rgb(var(--primary-rgb) / 0) 76%),
    radial-gradient(90% 62% at 0% 100%, rgb(var(--secondary-rgb) / 1) 0%, rgb(var(--secondary-rgb) / 0.58) 26%, rgb(var(--secondary-rgb) / 0.16) 54%, rgb(var(--secondary-rgb) / 0) 76%),
    radial-gradient(70% 55% at 62% 62%, rgb(var(--primary-rgb) / 0.16), rgb(var(--primary-rgb) / 0) 70%),
    var(--bg);
}

/* Everything behind the guest — pulled back and softened while they are greeted. */
#field {
  position: absolute;
  inset: 0;
  transition: transform 1.6s cubic-bezier(0.45, 0, 0.2, 1), filter 1.6s ease;
  will-change: transform, filter;
}
body.showcase #field { transform: scale(0.94); filter: blur(5px) brightness(0.7); }

#circles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#logo img {
  display: block;
  width: calc(var(--d) * 1.86 * var(--logo-scale, 1));
  height: auto;
  filter: drop-shadow(0 0 calc(var(--d) * 0.12) rgb(var(--primary-rgb) / 0.25));
}

#eventTitle {
  position: absolute;
  top: calc(var(--min-edge) * 0.06);
  left: 6vw;
  right: 6vw;
  z-index: 5;
  text-align: center;
  font-weight: 700;
  font-size: calc(var(--min-edge) * 0.045);
  text-shadow: 0 0 calc(var(--min-edge) * 0.03) rgb(var(--primary-rgb) / 0.4);
  pointer-events: none;
}
#eventTitle:empty { display: none; }

#dim {
  position: absolute;
  inset: 0;
  z-index: 150;
  background: radial-gradient(circle at 50% 45%, rgb(0 0 0 / 0.15), rgb(0 0 0 / 0.55));
  opacity: 0;
  transition: opacity 1.4s ease;
  pointer-events: none;
}
body.showcase #dim { opacity: 1; }

/* ── hero: the circle that comes forward ─────────────────────────────────── */

#hero {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 200;
  perspective: 2200px;
  transform-origin: 50% 50%;
  will-change: transform;
  visibility: hidden;
  pointer-events: none;
}
#hero.is-active { visibility: visible; }

/* Shadow sits on the ground behind the circle and grows as it approaches. */
.hero-shadow {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0));
  transform: translate(0, 4%) scale(1.08);
  opacity: var(--lift, 0);
  filter: blur(calc(var(--d) * 0.25));
}

.hero-tilt { position: absolute; inset: 0; transform-style: preserve-3d; }

.hero-flip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 1.2s cubic-bezier(0.55, 0, 0.2, 1);
}
.hero-flip.no-anim { transition: none; }
.hero-flip.flipped { transform: rotateY(180deg); }

.face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.face.back { transform: rotateY(180deg); background: #000; }

/* Front face continues the field's glass: dark translucent body, white rim,
   the brand light pooling at the bottom. */
.face.front {
  background:
    radial-gradient(85% 70% at 30% 105%, rgb(var(--secondary-rgb) / 0.55), rgb(var(--secondary-rgb) / 0) 70%),
    radial-gradient(85% 70% at 75% 105%, rgb(var(--primary-rgb) / 0.5), rgb(var(--primary-rgb) / 0) 70%),
    radial-gradient(circle at 50% 40%, rgb(30 30 30 / 0.92), rgb(8 12 10 / 0.96));
}

.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 26%;
}

/* Glass shared by both faces of the hero — the same flat glass disc as the
   circles behind: white outline, a lit top-left edge and a shaded bottom-right
   edge for thickness. Its only reflection is the band of light that sweeps
   across the whole wall. */
.glass {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
  box-shadow:
    inset 0 0 0 0.006em rgb(255 255 255 / 0.95),
    inset 0.035em 0.035em 0.03em -0.012em rgb(255 255 255 / 0.32),
    inset -0.04em -0.04em 0.05em -0.012em rgb(0 0 0 / 0.45),
    inset 0 0 0 0.075em rgb(255 255 255 / 0.03);
  background: linear-gradient(135deg, rgb(255 255 255 / 0.10), rgb(255 255 255 / 0) 45%, rgb(255 255 255 / 0.04));
}
.face.back .glass { background: linear-gradient(135deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0) 40%); }
/* fine inner edge of thick glass */
.glass::before {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 0.002em solid rgb(255 255 255 / 0.16);
}
/* The same thick band of light that crosses the field passes over the hero. */
.glass::after {
  content: '';
  position: absolute;
  inset: -50%;
  --bw: calc(2.5% * var(--sweep-width, 1));
  background: linear-gradient(90deg,
    rgb(255 255 255 / 0) calc(50% - var(--bw)),
    rgb(255 255 255 / 0.22) calc(50% - var(--bw) * 0.5),
    rgb(255 255 255 / 0.22) calc(50% + var(--bw) * 0.5),
    rgb(255 255 255 / 0) calc(50% + var(--bw)));
  transform: rotate(35deg) translateX(-60%);
  animation: heroSweep 7.5s linear infinite;
}
@keyframes heroSweep {
  0%   { transform: rotate(35deg) translateX(-60%); }
  43%  { transform: rotate(35deg) translateX(60%); }
  100% { transform: rotate(35deg) translateX(60%); }
}

.welcome {
  position: absolute;
  inset: 14% 12%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.022em;
  text-align: center;
}
.welcome > * {
  opacity: 0;
  transform: translateY(0.035em);
  transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.2, 0.9, 0.2, 1);
}
#hero.show-text .welcome > * { opacity: 1; transform: none; }
#hero.show-text .w-line { transition-delay: 0.15s; }
#hero.show-text .w-name { transition-delay: 0.4s; }
#hero.show-text .w-title { transition-delay: 0.7s; }

.w-mark { height: 0.13em; width: auto; margin-bottom: 0.035em; }
.w-mark.wide { height: 0.1em; }
.w-line {
  font-weight: 500;
  font-size: 0.068em;
  background: linear-gradient(90deg, var(--secondary), var(--primary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.w-name {
  font-weight: 900;
  font-size: 0.11em;
  line-height: 1.18;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: #fff;
  text-shadow: 0 0 0.3em rgb(var(--primary-rgb) / 0.35);
}
.w-title {
  font-weight: 500;
  font-size: 0.048em;
  line-height: 1.35;
  color: rgb(255 255 255 / 0.78);
  max-width: 100%;
}
.w-title:empty { display: none; }

#caption {
  position: absolute;
  left: 4vw;
  right: 4vw;
  z-index: 210;
  text-align: center;
  opacity: 0;
  transform: translateY(2vmin);
  transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.2, 0.9, 0.2, 1);
  pointer-events: none;
}
#caption.is-visible { opacity: 1; transform: none; }
.c-name {
  font-weight: 900;
  font-size: calc(var(--min-edge) * 0.064);
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 0 calc(var(--min-edge) * 0.02) rgb(var(--primary-rgb) / 0.45);
}
.c-title {
  margin-top: calc(var(--min-edge) * 0.006);
  font-weight: 500;
  font-size: calc(var(--min-edge) * 0.032);
  background: linear-gradient(90deg, var(--secondary), var(--primary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.c-title:empty { display: none; }

/* thin ring of light that opens when the circle arrives */
#burst {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 190;
  border-radius: 50%;
  border: 2px solid rgb(255 255 255 / 0.8);
  box-shadow: 0 0 30px rgb(var(--primary-rgb) / 0.7), inset 0 0 30px rgb(var(--secondary-rgb) / 0.5);
  opacity: 0;
  pointer-events: none;
}
#burst.go { animation: burst 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes burst {
  0%   { opacity: 0.9; transform: translate(-50%, -50%) scale(0.92); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(1.4); }
}

#status {
  position: absolute;
  bottom: 1.4vmin;
  left: 1.4vmin;
  z-index: 300;
  padding: 0.6vmin 1.2vmin;
  border-radius: 99px;
  font-size: 1.5vmin;
  background: rgb(253 84 43 / 0.85);
  color: #fff;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
#status.is-visible { opacity: 1; }