/* credits to creme (https://codepen.io/creme)*/

@import url('https://fonts.googleapis.com/css?family=Press+Start+2P');
@import url('https://fonts.googleapis.com/css?family=Courier+Prime&display=swap');

body {
    background: #0e0e0e;
    color: white;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
    overflow: hidden;
}


.center-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertically center */
    align-items: center;     /* horizontally center */
    padding: 10px;
    text-align: center;
    min-height: 0; /* prevents flex overflow issues */
    margin-bottom: 10%;
}

.policy-box {
      max-width: 90%;        /* box width */
      max-height: 70vh;        /* box height */
      overflow-y: auto;        /* scroll vertically */
      padding: 20px;
      border: 1px solid #ddd;  /* light border */
      border-radius: 12px;
      background-color: #412f2f;  /* white background */
      box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* soft shadow */
      /* Firefox scrollbar */
      scrollbar-width: thin;
      scrollbar-color: #4e73df #f1f1f1;
    }

/* Custom scrollbar for Webkit (Chrome, Edge, Safari) */
    .policy-box::-webkit-scrollbar {
      width: 8px; /* slim scrollbar */
    }
    .policy-box::-webkit-scrollbar-track {
      background: #f1f1f1; 
      border-radius: 8px;
    }
    .policy-box::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #4e73df, #1cc88a);
      border-radius: 8px;
    }
    .policy-box::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, #3751c5, #17a673);
    }
    .policy-box::-webkit-scrollbar-button {
      display: none; /* removes arrow buttons */
    }

/* =========================
   Logo Styling
========================= */
.logo {
  max-width: 400px; /* adjust size as needed */
  width: 100%;
  height: auto;
}
.social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    gap: 20px;
    animation: fadeIn 2s ease-in-out;
    position: fixed;   /* keep at bottom of screen */
    bottom: 20%;      /* from bottom */
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    animation: slideUp 1.5s ease-out forwards; /* run once on load */
}

.social-links a {
    color: white;
    font-size: 2.5rem;
    text-decoration: none;
    transition: transform 0.3s, color 0.3s, background-color 0.3s;
    padding: 10px; /* more touch area */
    border-radius: 50%;
    /* background-color: rgba(0,0,0,0.5); subtle background for visibility */
}

.social-links a:hover {
    transform: scale(1.5);
    color: #ff4c4c;
}

/* Social icons: clean look (no neon glow) */
.social-icons a {
  text-shadow: none !important;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.social-icons i {
  vertical-align: middle;
  font-size: 2rem; /* consistent size */
}


@keyframes slideUp {
    0% {
        transform: translateX(-50%) translateY(100px);
        opacity: 0;
    }
    100% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

.tagline {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 
    font-size: 1.5rem;
    margin-top: 15px;
    color: #ffffff;
    animation: fadeUp 1.5s ease-in-out forwards;
    word-wrap: break-word;
    max-width: 90%;
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
} 

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
} 

/* On smaller devices */
@media (max-height: 600px) {
    .logo {
        max-height: 40vh; /* shrink if screen height is too small */
    }
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    /* VHS Title */
    .main .vhs {
        font-size: 1.2rem; /* reduce size */
        left: 1rem;        /* reduce offset */
        top: 1rem;
    }

    /* Time Display */
    .main .time {
        font-size: 1rem;
        right: 1rem;
        top: 1rem;
    }

    /* Counter Display */
    .main .counter {
        font-size: 1rem;
        left: 1rem;
        bottom: 3.5rem; /* push up so it doesn't touch social links */
    }

    /* Social Links */
    .social-links {
        gap: 25px;
        padding: 20px;
        bottom: 20%;
    }

    /* .social-links a {
        font-size: 1.5rem;
    } */
}

@media (max-width: 480px) {
    /* VHS Title even smaller for very small devices */
    .main .vhs {
        font-size: 1rem;
        left: 0.5rem;
        top: 0.5rem;
    }

    .main .time {
        font-size: 0.9rem;
        right: 0.5rem;
        top: 0.5rem;
    }

    .main .counter {
        font-size: 0.9rem;
        left: 0.5rem;
        bottom: 3.5rem;
    }

    .social-links {
        gap: 10px;
        bottom: 20%;
    }

    /* .social-links a {
        font-size: 1.2rem;
    } */
}

/* VHS Animations */
.noise {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	z-index: 400;
	opacity: 0.8;
	pointer-events: none;
  opacity: 1;
	z-index: 450;
}

.noise:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url('https://ice-creme.de/images/background-noise.png');
	pointer-events: none;
  	will-change: background-position;
	animation: noise 1s infinite alternate;
}

.lines {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	z-index: 300;
	opacity: 0.6;
	will-change: opacity;
	animation: opacity 3s linear infinite;
}

.lines:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
	background-size: 100% 4px;
	will-change: background, background-size;
	animation: scanlines 0.2s linear infinite;
}

.main {
	position: fixed;
	top: 0;
	left: 0;
	font-family: 'Press Start 2P', cursive;
	color: #fff;
	font-size: 2rem;
	width: 100vw;
	height: 100vh;
	background: #2b52ff;
}

.main .noise:before {
	background-size: 150%;
}

.main .vhs {
	position: absolute;
	left: 2rem;
	top: 2rem;
	will-change: text-shadow;
	animation: rgbText 2s steps(9) 0s infinite alternate;
}

.main .vhs .char {
	will-change: opacity;
	animation: type 1.2s infinite alternate;
	animation-delay: calc(60ms * var(--char-index));
}

.main .time {
	position: absolute;
	right: 2rem;
	top: 2rem;
	will-change: text-shadow;
	animation: rgbText 1s steps(9) 0s infinite alternate;
}

.main .counter {
	position: absolute;
	left: 2rem;
	bottom: 2rem;
	will-change: text-shadow;
	animation: rgbText 1s steps(9) 0s infinite alternate;
}

/* =========================
   Scrolling Slogans
========================= */
.scrolling-text {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.scrolling-inner {
  display: inline-block;
  animation: scroll-left 12s linear infinite;
}

.scrolling-inner.reverse {
  animation: scroll-right 12s linear infinite;
}


/* =========================
   REC Blinking Dot
========================= */
.rec-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border-radius: 50%;
  background-color: red;
  animation: blink 1s infinite;
  vertical-align: middle;
}

@keyframes blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}

/* Left → Center → Pause → Left */
@keyframes scroll-left {
  0%   { transform: translateX(100%); }
  40%  { transform: translateX(0); }
  60%  { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Right → Center → Pause → Right */
@keyframes scroll-right {
  0%   { transform: translateX(-100%); }
  40%  { transform: translateX(0); }
  60%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

@keyframes noise {
	0%,
	100% {
		background-position: 0 0;
	}
	10% {
		background-position: -5% -10%;
	}
	20% {
		background-position: -15% 5%;
	}
	30% {
		background-position: 7% -25%;
	}
	40% {
		background-position: 20% 25%;
	}
	50% {
		background-position: -25% 10%;
	}
	60% {
		background-position: 15% 5%;
	}
	70% {
		background-position: 0 15%;
	}
	80% {
		background-position: 25% 35%;
	}
	90% {
		background-position: -10% 10%;
	}
}

@keyframes opacity {
	0% {
		opacity: 0.6;
	}
	20% {
		opacity: 0.3;
	}
	35% {
		opacity: 0.5;
	}
	50% {
		opacity: 0.8;
	}
	60% {
		opacity: 0.4;
	}
	80% {
		opacity: 0.7;
	}
	100% {
		opacity: 0.6;
	}
}

@keyframes scanlines {
	from {
		background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
		background-size: 100% 4px;
	}
	to {
		background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 50%, transparent 51%);
		background-size: 100% 4px;
	}
}

@keyframes rgbText {
	0% {
		text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
	}
	25% {
		text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
	}
	45% {
		text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
	}
	50% {
		text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
	}
	55% {
		text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 3px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
	}
	90% {
		text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
	}
	100% {
		text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
	}
}

@keyframes type {
	0%,
	19% {
		opacity: 0;
	}
	20%,
	100% {
		opacity: 1;
	}
}

/* Footer CSS Start */
footer a {
  font-size: 1rem;
  color: #0dcaf0 !important;  /* bright blue */
}

footer a:hover {
  text-decoration: underline;
}

footer {
  z-index: 9999; /* keeps it above overlays like .noise or .lines */
}
/* Footer CSS End */


.sticky-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(10, 10, 10, 0.9);
  color: #fff;
  height: 55px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center; /* center Privacy Policy */
  box-shadow: 0 -2px 15px rgba(0, 255, 255, 0.3);
  overflow: hidden;
}
/* Neon scanner effect: top & bottom only */
.sticky-footer::before,
.sticky-footer::after {
  content: "";
  position: absolute;
  left: -200%;
  width: 400%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #0dcaf0, transparent);
  animation: neonScan 4s linear infinite;
  filter: drop-shadow(0 0 6px #0dcaf0) drop-shadow(0 0 12px #0dcaf0);
  pointer-events: none;
}

.sticky-footer::before {
  top: 0; /* top border */
}

.sticky-footer::after {
  bottom: 0; /* bottom border */
  animation-delay: 2s; /* out of phase with top for effect */
}

@keyframes neonScan {
  0%   { transform: translateX(0); }
  100% { transform: translateX(50%); }
}

/* Neon glow for links */
.sticky-footer a,
main a {
  color: #0dcaf0;
  text-shadow: 0 0 5px #0dcaf0, 0 0 10px #0dcaf0;
}

.sticky-footer a:hover,
main a:hover {
  color: #fff;
  text-shadow: 0 0 8px #0dcaf0, 0 0 15px #0dcaf0;
}

/* REC blinking */
.rec-indicator {
  position: absolute;
  left: 20px; /* keep REC locked to bottom-left */  
  color: #ff3b3b;
  font-weight: bold;
  text-shadow: 0 0 6px #ff3b3b, 0 0 12px #ff3b3b;
  animation: blink 1.2s infinite;
}
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.3; }
}

/* Privacy link styled like neon */
.privacy-link {
  color: #0dcaf0;
  font-size: 1.1rem;
  text-shadow: 0 0 5px #0dcaf0, 0 0 12px #0dcaf0;
}

.privacy-link:hover {
  color: #fff;
  text-shadow: 0 0 8px #0dcaf0, 0 0 15px #0dcaf0;
}