@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body, html {
  height: 100%;
  scroll-behavior: smooth;
}
body {
  
  font-family: 'Share Tech Mono', monospace;
  
}
.first-page{
  background: #0a0a0a00;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  
}


.glitch-bg {
  text-align: center;
  position: relative;

}

.glitch-text, .glitch-subtext {
  color: #d4d4d4;
  font-weight: bold;
  position: relative;
  display: inline-block;
}

.glitch-text {
  font-size: 180px;
  letter-spacing: 2px;
  animation: glitch 2s infinite;
}

.glitch-subtext {
  font-size: 150px;
  margin-top: 10px;
  animation: glitch 3s infinite;
}

.glitch-text::before,
.glitch-text::after,
.glitch-subtext::before,
.glitch-subtext::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  color: #d4d4d4;
 
}

.glitch-text::before {
  top: -2px;
  color: #ff3c3c;
  z-index: -1;
  animation: glitchTop 2s infinite;
}

.glitch-text::after {
  top: 2px;
  color: #00fff9;
  z-index: -2;
  animation: glitchBottom 2s infinite;
}

.glitch-subtext::before {
  top: -1px;
  color: #ff3c3c;
  z-index: -1;
  animation: glitchTop 3s infinite;
}

.glitch-subtext::after {
  top: 1px;
  color: #00fff9;
  z-index: -2;
  animation: glitchBottom 3s infinite;
}

/* Animations for glitch background */

@keyframes glitch {
  0% { transform: none; }
  20% { transform: skew(-1deg, 1deg); }
  40% { transform: skew(1deg, -1deg); }
  60% { transform: translate(1px, 1px); }
  80% { transform: translate(-1px, -1px); }
  100% { transform: none; }
}

@keyframes glitchTop {
  0% { clip: rect(0, 9999px, 0, 0); }
  5% { clip: rect(0, 9999px, 100%, 0); transform: translate(-2px, -2px); }
  10% { clip: rect(0, 9999px, 10%, 0); transform: translate(2px, -1px); }
  15% { clip: rect(0, 9999px, 50%, 0); transform: translate(-1px, 2px); }
  20% { clip: rect(0, 9999px, 0, 0); }
}

@keyframes glitchBottom {
  0% { clip: rect(0, 9999px, 0, 0); }
  5% { clip: rect(80%, 9999px, 100%, 0); transform: translate(2px, 1px); }
  10% { clip: rect(10%, 9999px, 30%, 0); transform: translate(-1px, -2px); }
  15% { clip: rect(40%, 9999px, 60%, 0); transform: translate(2px, 0); }
  20% { clip: rect(0, 9999px, 0, 0); }
}

.glitch-bg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background: #000;
  overflow: hidden;
  pointer-events: none;

}

/* Horizontal scanlines */
.scanlines {
  position: absolute;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.04) 0px,
    rgba(255, 255, 255, 0.04) 1px,
    transparent 1px,
    transparent 4px
  );
  animation: flicker 1.3s infinite, shift 0.1s infinite;
}

/* Colored flickering glitch bars */
.glitch-bar {
  position: absolute;
  width: 100%;
  height: 5px;
  opacity: 0;
  mix-blend-mode: screen;
  animation: glitch-bar 5s infinite;
}

.glitch-bar.red {
  background: rgba(255, 0, 0, 0.2);
  animation-delay: 0s;
}

.glitch-bar.blue {
  background: rgba(0, 255, 255, 0.2);
  animation-delay: 2.5s;
}
.glitch-bar.green {
  background: rgba(0, 255, 0, 0.2);
  animation-delay: 1s;
}

.glitch-bar.purple {
  background: rgba(255, 0, 255, 0.2);
  animation-delay: 3.2s;
}

.glitch-bar.yellow {
  background: rgba(255, 255, 0, 0.2);
  animation-delay: 4.1s;
}

/* Animations for 1st screen glitch bars */
@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 1;
  }
  20%, 22%, 24%, 55% {
    opacity: 0.2;
  }
}

@keyframes shift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-1px, 1px); }
  50%  { transform: translate(1px, -1px); }
  75%  { transform: translate(-1px, -1px); }
  100% { transform: translate(1px, 1px); }
}

@keyframes glitch-bar {
  0%, 95%, 100% {
    opacity: 0;
    top: -10%;
  }
  5%, 10% {
    opacity: 0.8;
    top: 20%;
  }
  20%, 25% {
    opacity: 0.6;
    top: 50%;
  }
  35%, 40% {
    opacity: 0.9;
    top: 70%;
  }
  60%, 65% {
    opacity: 0.5;
    top: 40%;
  }
}

.floating-tablets {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.tablet {
  position: absolute;
  width: 60px;
  opacity: 0.6;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Each tablet: different path, delay, size if you want */
.tablet-1 {
  top: -10%;
  left: 5%;
  animation: float1 18s infinite;
}

.tablet-2 {
  top: 110%;
  left: 20%;
  animation: float2 16s infinite 2s;
}

.tablet-3 {
  top: 50%;
  left: -15%;
  animation: float3 20s infinite 5s;
}

.tablet-4 {
  top: 10%;
  left: 90%;
  animation: float4 22s infinite 3s;
}

.tablet-5 {
  top: 80%;
  left: 40%;
  animation: float5 25s infinite 1s;
}

.tablet-6 {
  top: -5%;
  left: 70%;
  animation: float6 19s infinite 4s;
}

/* Animation for pills */
@keyframes float1 {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(400px, 100vh) rotate(360deg); }
}

@keyframes float2 {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(-250px, -120vh) rotate(-360deg); }
}

@keyframes float3 {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(100vw, -300px) rotate(720deg); }
}

@keyframes float4 {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(-100vw, 400px) rotate(-720deg); }
}

@keyframes float5 {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(200px, -90vh) rotate(360deg); }
}

@keyframes float6 {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(-300px, 130vh) rotate(-360deg); }
}
.tablet-wrapper {
  position: absolute;
  width: 60px;
  opacity: 0.6;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.tablet-wrapper.tablet-1 {
  top: -10%;
  left: 5%;
  animation: float1 18s infinite;
}

.tablet-wrapper.tablet-2 {
  top: -5%;
  left: 20%;
  animation: float2 16s infinite;
}

.tablet-wrapper.tablet-3 {
  top: -8%;
  left: 35%;
  animation: float3 20s infinite;
}

.tablet-wrapper.tablet-4 {
  top: -12%;
  left: 50%;
  animation: float4 22s infinite;
}

.tablet-wrapper.tablet-5 {
  top: -7%;
  left: 65%;
  animation: float5 19s infinite;
}

.tablet-wrapper.tablet-6 {
  top: -9%;
  left: 80%;
  animation: float6 21s infinite;
}

.second-page {
  height: 1080vh; /* Long scroll area */
  position: relative;
  background: #f4f4f4;
  margin-bottom: -10px;
}

.scroll-buffer {
  height: 0.1vh; /* First 100vh: animation doesn’t play */
}

.mobile-screen {
  position: sticky;
  top: 0;
  left:0;
  width: 100vw;
  margin: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

#lottie-container {
  width: 100%;
  height: 100%;
  background-color: lightgreen;
}
.third-page {
  position: relative;
  height: 1080vh;
  background: rgb(0, 0, 0);
  z-index: 5;
  margin-bottom: -10px;
}
.scroll-buffer3 {
  height: 0.1vh; /* First 100vh: animation doesn’t play */
}
.stage {
  position: sticky;
  top: 0;
  left:0;
  width: 100vw;
  margin: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
#lottie-container3 {
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0);
}

.curtain {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100vh;
  background: #C00B21;
  z-index: 999;
  transition: transform 1.5s ease-in-out;
}

.left-curtain {
  left: 0;
  transform: translateX(0);
}

.right-curtain {
  right: 0;
  transform: translateX(0);
}

.curtains-open .left-curtain {
  transform: translateX(-100%);
}

.curtains-open .right-curtain {
  transform: translateX(100%);
}


.fourth-page {
  height: 1300vh; /* Long scroll area */
  position: relative;
  background: #f4f4f4;
  margin-bottom: -10px;
}

.scroll-buffer2 {
  height: 0.1vh; /* First 100vh: animation doesn’t play */
}

.tv-screen {
  position: sticky;
  top: 0;
  left:0;
  width: 100vw;

  margin: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

#lottie-container2 {
  width: 100%;
  height: 100%;
  background: url('tv-bg.gif') ;
  background-size: cover;
  overflow: hidden;
}

.spotlight-follow {
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.95) 10%);
  transition: background 0.05s;
}


.fifth-page {
  background-color: #000;
  overflow: hidden;
  height: 100vh;
  position: relative;
}

.frame-container {
  position: sticky;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
  z-index: 1;
}


/* Loop for last screen */
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 40px solid white;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  animation: shrinkLoop 2s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes shrinkLoop {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.1);
    opacity: 0;
  }
}
/*First to second circle */
.transition-circle {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100vmax;
  height: 100vmax;
  border-radius: 50%;
  background: #f4f4f4; 
  transform: translate(-50%, -50%) scale(0);
  z-index: 1000;
  pointer-events: none;
  mix-blend-mode: overlay; /* Creates nice blending effect */
}

/* Ensure content is visible after transition */
.second-page {
  position: relative;
  z-index: 1;
}
/* TV Static Effect */
.tv-static {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    repeating-linear-gradient(45deg, 
      #000 0px, #000 1px, 
      #fff 1px, #fff 2px);
  background-size: 4px 4px;
  opacity: 0;
  z-index: 2000;
  pointer-events: none;
  mix-blend-mode: overlay;
  animation: static-flicker 0.1s infinite;
}

@keyframes static-flicker {
  0% { opacity: 0.8; }
  50% { opacity: 0.2; }
  100% { opacity: 0.8; }
}

/* Film Reels */
.film-reel {
  position: fixed;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: 
    radial-gradient(circle, #222 30%, #444 100%),
    repeating-radial-gradient(circle, 
      #777 0px, #777 2px, 
      #444 2px, #444 4px);
  z-index: 2001;
  opacity: 0;
}

.left-reel {
  top: 50%;
  left: 10%;
  transform: translate(-50%, -50%);
}

.right-reel {
  top: 50%;
  right: 10%;
  transform: translate(50%, -50%);
}

/* Film Strip */
.film-strip {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
  repeating-linear-gradient(to bottom, 
    #000 0px, #000 20px, 
    transparent 20px, transparent 40px);
mix-blend-mode: multiply;
  z-index: 2001;
  transform: translateY(-100%);
  opacity: 0;
}

/* Remove or replace the .projector-light style */
.projector-light {
  display: none; /* Completely remove the gold light */
}


/* Film Grain Effect (for fifth page) */
.fifth-page::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: none;
  z-index: 1;
  pointer-events: none;
}

.bottom-buffer {
  height: 10vh; /* 100% of screen height */
  background: #000; /* Match fifth-page background if needed */
}
#spotlight {
  position: relative; /* This is very important */
  width: 100%;
  height: 100vh; /* or whatever height you want */
  overflow: hidden;
}

/* All positioned elements */
.item {
  position: absolute;
}

/* Bear top-left */
#bear-container{
  top: 20px;
  left: 20px;
}

/* Gavel top-right */
#gavel-container {
  top: 20px;
  right: 100px;
}

/* Child drawing center */
#child-drawing-container{
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Fire bottom-left */
#fire-canvas-container2 {
  bottom: 20px;
  left: 20px;
}

#fire-canvas-container {
  bottom: 20px;
  right: 20px;
}
.newspaper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  width: 600px; /* Adjust size */
  transition: opacity 0.5s ease, transform 0.5s ease;
  opacity: 0;
  pointer-events: none; /* So it doesn't block clicks behind it */
  z-index: 1000;
}

.newspaper.show {
  opacity: 1;
  animation: floatPaper 3s ease-in-out infinite;
}

@keyframes floatPaper {
  0% { transform: translate(-50%, -50%) rotate(-2deg); }
  50% { transform: translate(-48%, -52%) rotate(2deg); }
  100% { transform: translate(-50%, -50%) rotate(-2deg); }
}

/* Hidden by default */
.hidden {
  display: none;
}