html, body {
  margin: 0;
  height: 100%;
}

* { box-sizing: border-box; }

.bg {
  position: fixed;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: opacity 0.8s ease;
  pointer-events: none !important;  /* 👈 IMPORTANT: bg never blocks hover */
}

/* Default background */
.bg-1 {
  background-image: url("bg.png");
  opacity: 1;
}

/* Hover background (hidden until hover) */
.bg-2 {
  background-image: url("bg2.png");
  opacity: 0;
}

/* Your red hover area */
.hover-zone {
  position: fixed;
  top: 0;
  left: 0;
  width: 35vw;   /* adjust */
  height: 45vh;  /* adjust */
  z-index: 20;
  outline: darkred;
  pointer-events: auto;
}

.hestia-caption{
  position: fixed;
  left: 110px;
  bottom: 86px;
  max-width: min(38vw, 500px);
  color: var(--gold);
  font-family: inherit;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  z-index: 30;
}

.hestia-caption-title{
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.hestia-caption-body{
  margin-top: 10px;
  font-size: 18px;
  line-height: 1.35;
}

.hover-zone:hover ~ .hestia-caption{
  opacity: 1;
  transform: translateY(0);
}

.video-caption{
  position: fixed;
  right: 110px;
  left: auto;
  bottom: 86px;
  max-width: min(42vw, 560px);
  color: var(--gold);
  font-family: inherit;
  text-align: right;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  z-index: 30;
}

.video-caption-title{
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.video-caption-body{
  margin-top: 10px;
  font-size: 18px;
  line-height: 1.35;
}

.video-caption.is-visible{
  opacity: 1;
  transform: translateY(0);
}

#on{
  pointer-events: auto;
}

/* Hover → fade in second bg */
.hover-zone:hover ~ .bg-2 {
  opacity: 1;
}

/* OPTIONAL: show the zone while positioning, remove later */
.hover-zone {

}

.chips {
  position: fixed;
  right: 48px;
  bottom: 48px;
  transform: none;
  width: min(60vw, 600px);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 50;
}

.chips.show {
  opacity: 1;
}

:root{
  --gold: #EBAD41;
}

/* fixed overlay bar */
.top-ui{
  position: fixed;
  top: 28px;
  left: 0;
  right: 0;
  padding: 0 48px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 1000;
  pointer-events: none; /* so background hover zones still work */
}

/* title block centered */
.title-wrap{
  text-align: center;
  pointer-events: none;
  position: absolute;
  top: 4px;
}

.title{
  color: var(--gold);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 0.9;
}

.subtitle{
  margin-top: 4px;
  color: var(--gold);
  opacity: 0.9;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
}

/* numbers on the right */
.steps{
  position: absolute;
  right: 48px;
  top: 4px;
  display: flex;
  gap: 18px;
  pointer-events: auto; /* links clickable */
}

.audio-toggle{
  position: absolute;
  left: 24px;
  top: 4px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
}

.audio-toggle img{
  width: 100%;
  height: 100%;
  display: block;
}

.step{
  color: #cfcfcf;
  text-decoration: none;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 22px;
  font-weight: 400;
  transition: transform .15s ease, color .15s ease;
}

.step:hover{
  transform: translateY(-1px);
  color: #ffffff;
}

.step.active{
  color: var(--gold);
}

/* makes anchor jumps land nicely below fixed header */
html{
  scroll-behavior: smooth;
}

.anchor{
  position: relative;
  top: -90px;   /* offset for fixed header */
  height: 1px;
}

.switch {
  position: fixed;
  left: 0px;        /* adjust to match reference */
  bottom: 120px;     /* adjust vertically */
  width: 70px;       /* small, natural size */
  cursor: pointer;
  z-index: 24;
  user-select: none;
  pointer-events: auto;
}

.switch:active {
  transform: translateY(1px);
}

/* anchor point */
.orbit{
  position: fixed;
  left: var(--x);
  top: var(--y);
  width: 0;
  height: 0;
  z-index: 30;
  pointer-events: auto;
}

/* base style for each floating tile */
.orb{
  position: absolute;
  width: 240px;          /* size of tiles */
  height: 140px;         /* for video; for img it will stretch—see below */
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  opacity: .95;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

/* if you use gifs/images, keep aspect nicely */
.orb[src$=".gif"], .orb[src$=".png"], .orb[src$=".jpg"]{
  height: auto;
}

/* --- animations: orbit + levitate --- */
.o1{ --r: 220px; --speed: 30s; --phase: 0deg;  --bob: 7px;  --delay: 0s; }
.o2{ --r: 280px; --speed: 40s; --phase: 120deg;--bob: 10px; --delay: -2s; }
.o3{ --r: 200px; --speed: 34s; --phase: 240deg;--bob: 8px;  --delay: -4s; }

.o1,.o2,.o3{
  animation:
    orbit var(--speed) linear infinite,
    bob 4.5s ease-in-out infinite;
  animation-delay: var(--delay), var(--delay);
}

/* orbit around the anchor point */
@keyframes orbit{
  from { transform: translate(-50%, -50%) rotate(var(--phase)) translateX(var(--r)) rotate(calc(-1 * var(--phase))); }
  to   { transform: translate(-50%, -50%) rotate(calc(360deg + var(--phase))) translateX(var(--r)) rotate(calc(-360deg - var(--phase))); }
}

/* gentle levitation */
@keyframes bob{
  0%,100% { margin-top: 0; }
  50%     { margin-top: calc(var(--bob) * -1); }
}

.orb {
  width: 260px;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  background: black;
}

#cam-wrapper {
  transform: scaleX(-1);
}

#cam {
  transform: scaleX(-1);
  background: #111;     /* so you see the tile even if stream is black */
  outline: none !important;   /* removes browser highlight */
  box-shadow: none;
  border: 2px solid;
  border-color:var(--gold);  /* your own color (gold example) */
    opacity: 0.9;
  mix-blend-mode: screen;
}

.orbit-boundary {
  position: fixed;
  inset: 0;
  overflow: hidden; /* 👈 nothing escapes screen */
  pointer-events: auto;
  z-index: 4;
}


:root{
  --lampX: 50%;
  --lampY: 50%;
}

.lamp-pop{
  position: fixed;
  left: var(--lampX);
  top: var(--lampY);

  width: 420px;
  height: 420px;

  transform: translate(-50%, -50%);
  border: 2px solid var(--gold, #EBAD41);
  background: rgba(0,0,0,.35);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  overflow: hidden;
  z-index: 9999;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.lamp-pop img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* when active */
.lamp-pop.on{
  opacity: 1;
  visibility: visible;
  animation: popIn .08s linear, shake .55s linear, glitchFlicker .55s steps(2,end);
}

/* tiny “in” */
@keyframes popIn{
  from { transform: translate(-50%, -50%) scale(.98); }
  to   { transform: translate(-50%, -50%) scale(1); }
}

/* shake */
@keyframes shake{
  0%   { transform: translate(-50%, -50%) translate(0,0); }
  10%  { transform: translate(-50%, -50%) translate(-6px, 2px); }
  20%  { transform: translate(-50%, -50%) translate(5px, -3px); }
  30%  { transform: translate(-50%, -50%) translate(-4px, -2px); }
  40%  { transform: translate(-50%, -50%) translate(6px, 3px); }
  50%  { transform: translate(-50%, -50%) translate(-2px, 4px); }
  60%  { transform: translate(-50%, -50%) translate(3px, -4px); }
  70%  { transform: translate(-50%, -50%) translate(-5px, 1px); }
  80%  { transform: translate(-50%, -50%) translate(4px, 2px); }
  90%  { transform: translate(-50%, -50%) translate(-2px, -2px); }
  100% { transform: translate(-50%, -50%) translate(0,0); }
}

/* subtle color tear */
@keyframes glitchFlicker{
  0%   { filter: none; }
  30%  { filter: hue-rotate(18deg) contrast(140%); }
  60%  { filter: hue-rotate(-12deg) contrast(150%); }
  100% { filter: none; }
}

.glitch-overlay{
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity 0.08s linear;
}

.glitch-overlay.on{
  opacity: 1;
  animation: glitchFlickerBackround 0.4s steps(2, end);
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.05) 0px,
      rgba(255,255,255,0.05) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 6px
    );
  filter: contrast(140%) saturate(140%);
}

@keyframes glitchFlickerBackground {
  0%   { transform: translate(0,0); filter: hue-rotate(0deg); }
  25%  { transform: translate(2px,-1px); filter: hue-rotate(20deg); }
  50%  { transform: translate(-3px,1px); filter: hue-rotate(-20deg); }
  75%  { transform: translate(1px,2px); filter: hue-rotate(35deg); }
  100% { transform: translate(0,0); filter: hue-rotate(0deg); }
}