/* ────────────────────────────────────────────────────────────────────────────
TOXXXIN RACING PRESENTS - TOXXXINRACING HQ & CDN
───────────────────────────────────────────────────────────────────────────── */

/*────────────────────────── FONTS ──────────────────────────*/
@font-face {
  font-display: swap;
  font-family: 'Honk';
  src: url('fonts/Bloopoly-PV3WZ.ttf') format('truetype');
  font-style:normal;
  font-weight: normal;
}

/*────────────────────────── ROOT VARIABLES ──────────────────────────*/
:root { 
  --nav-height: 60px; 
}

/*────────────────────────── GLOBAL STYLES ──────────────────────────*/

* { 
  box-sizing: border-box;
}

main {
  flex: 1 0 auto; /* allows main to grow and push footer down */
}

html, body {
  background-attachment: relative;
  background-color: black; 
  background-image: url('media/hpvideos/bg.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: lime;
  display: flex;
  flex-direction: column;
  font-family: 'honk', sans-serif;
  height:auto;
  margin: 0;
  overflow: auto;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
  position: relative;
  width: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* This wraps everything on the page */
.page-wrapper {
  flex: 1;
  display: flex;
  flex: 1; /* fills available space */
  flex-direction: column;
  min-height: 100vh;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;             /* Chrome, Safari, Opera */
}
/*────────────────────────── VIDEO COVERFLOW ──────────────────────────*/
.video-coverflow {
  justify-content: center;
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 40px 10px;
  perspective: 1000px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  touch-action: pan-x;  
  -webkit-overflow-scrolling: touch;  
}

.video-coverflow::-webkit-scrollbar {
  display: none; /* hide scrollbar for cleaner look */
}

.video-coverflow video {
  box-shadow: 0 0 10px rgba(0,0,0,0.6);
  flex: 0 0 auto;  
  height: 180px;  
  object-fit: cover;
  scroll-snap-align: center;
  transform-origin: center center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;  
  width: 280px;
}

.video-coverflow video:hover {
  box-shadow: 0 10px 30px rgba(255,113,81,0.8);
  transform: scale(1.15) rotateY(15deg);  
}

/*────────────────────────── VIDEO CONTAINERS ──────────────────────────*/
.video-container {
  height: 61vh;
  min-height: 300px;
  max-height: 2160px;
  position: relative;
  width: 100%;  
}

.video-container video {
  border-radius: 180px;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.video-title {
  align-content: center;
  border-radius: 10px;
  padding: 0px 0px 0px 0px;
  font-family: "Honk", sans-serif;
  font-size: 1em;
  position: absolute;
  text-shadow: 4px 4px 4px purple;
  top: 10%;  
  z-index: 5;
}

.video-title::before{
  content: '';  
  height: 150%;
  left: 5%;
  pointer-events: none;
  position: absolute;
  top: 75%;
  transition: top 0.6s ease-in-out;
  width: 100%;
  z-index: 3;  
}

.video-title::after {
  border-radius: 10px;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;  
  z-index: 100;  
}

.sound-overlay {
  background: rgba(0, 0, 0, 0.7);
  border-radius: 40px;
  cursor: pointer;
  display: none;  
  font-family: "Honk", sans-serif;
  font-size: 0.8em;
  left: 50%; 
  padding: 0px;
  position: absolute;
  text-shadow: 2px 2px 5px black;
  top: 50%;
  transform: translate(-50%, -50%);  
  z-index: 1000;
}

.video-container:hover .sound-overlay {
  display: block;
}

/*────────────────────────── FOOTER ──────────────────────────*/

footer {
  background-image: url(media/footer/footerbg.png);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center;
  border-bottom: 5px solid #ff7151;  
  flex-shrink: 0;
  height: 350px;
  overflow: hidden;
  padding-top: 140px;
  position: relative;  
  text-align: center;
  text-shadow: 2px 2px 4px purple;
  width: 100%;
  z-index: 1000;
}

footer section {
  margin: 0 auto; 
  max-width: 1200px;
  padding: 0px; 
}

footer p { 
  margin: 2px 0;
}

footer a { 
  font-size: 14px;
  color: #ff7151;
  margin: 0 10px;
  text-decoration: none;
  transition: color 0.3s;
}

footer a:hover {
  color: white;
}

.social-links {
  margin: 20px 0;
}

.social-links a {
  font-size: 18px;
  margin-right: 5px;
}

.footer-bottom {
  position: absolute;
  bottom: 10px; /* Adjust as needed */
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  color: #aaa;
  line-height: 1.4;
}

.footer-bottom a {
  color: #aaa;
}

.footer-bottom a:hover {
  color: limegreen;
}
/* footer logos */

/* Make sure these logos are positioned absolutely inside the footer */
.footerleftlogo, .footerrightlogo {
  animation: spinY 30s linear infinite;
  display: inline-block;
  height: 100px;
  max-height: 100px;
  max-width: 150px;
  position: absolute;
  top: 65%; /* Adjust as needed */
  transition: transform 0.3s ease;
  transform-origin: center center;
  transform-style: preserve-3d;
  vertical-align: middle;
  width: auto;
  will-change: transform;
  z-index: 1100; /* On top of background */
}

/* Fine-tuning positions (override if needed) */
.footerleftlogo {
  left: 30px;
}

.footerrightlogo {
  right: 30px;
}

@keyframes spinY {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

/* Spinning logo */
.spin-logo {
  animation: spin 4s linear infinite;
  display: inline-block;  
  transform-origin: center center;
  will-change: transform;
}

/* Spin keyframes */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/*────────────────────────── REDUCED MOTION SUPPORT ──────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  .emoji, .spin-logo, .headleftlogo, .headrightlogo, .glow-on-hover, .nav-item2 {
    animation: none !important;
    transition: none !important;
  }
}

/*────────────────────────── max-width: 360px ──────────────────────────*/
@media (max-width: 360px) {
.navbar {
  align-items: center;
  align-content: center;
  background: fixed;
  display: flex;
  font-size: 0.2em;
  grid-template-columns: repeat(7, 1fr);
  justify-content: center;
  position: fixed;
  width: 100vw;
  z-index: 1100;
}

.main-logo {
  height: 90px !important;
}

.site-title {
  display: none !important;
}

.nav-item {
  align-items: center;
  align-content: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: rgba(0,0,0,0.6);
  border-radius: 120px;
  display: flex;
  flex-wrap: wrap;
  font-size: 2em;
  justify-content: center;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  text-shadow: 3px 3px 3px black;
  transition: transform 0.3s ease;
  width: 100%;
}

/*────────────────────────── NAVBAR 2 ──────────────────────────*/
.navbar2 {
  align-items: center;
  box-sizing: border-box;
  border-radius: 100%;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: 1fr;
  height: calc(100vh - var(--nav-height));
  justify-content: center;
  justify-items: center;
  left: 12%;
  overflow-y: hidden;
  position: fixed;
  right: 12%;
  z-index: 100;
}

.nav-item2 {
  font-size: 1.5em;
  width: 300px;
}

/*────────────────────────── FOOTER ──────────────────────────*/

/* Fine-tuning positions (override if needed) */
.footerleftlogo {
  left: 5%;
}

.footerrightlogo {
  right: 5%;
}

.footerleftlogo, .footerrightlogo {
  top: 25%; /* Adjust as needed */
  z-index: -100;
}
}

/*────────────────────────── min-width: 361pxmax-width: 768px ──────────────────────────*/
@media (min-width: 361px) and (max-width: 768px) {
.navbar {
  align-items: center;
  background: fixed;
  display: flex;
  font-size: 0.2em;
  justify-content: space-evenly;
  position: fixed;
  width: 100vw;
  z-index: 1100;
}

.main-logo {
  height: 100px !important;
}

.site-title {
  display: none;
}

.nav-item {
  align-items: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: rgba(0,0,0,0.6);
  border-radius: 120px;
  display: flex;
  flex-wrap: wrap;
  font-size: 2em;
  justify-content: center;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  text-shadow: 3px 3px 3px black;
  transition: transform 0.3s ease;
  width: 100%;
}

.footerleftlogo, .footerrightlogo {
  z-index: -100;  
}

/*────────────────────────── NAVBAR 2 ──────────────────────────*/
.navbar2 {
  align-items: center;
  box-sizing: border-box;
  border-radius: 100%;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: 1fr;
  height: calc(100vh - var(--nav-height));
  justify-content: center;
  justify-items: center;
  left: 12%;
  overflow-y: hidden;
  position: fixed;
  right: 12%;
  z-index: 100;
}

.nav-item2 {
  font-size: 1.5em;
  width: 300px;
}

/*────────────────────────── FOOTER ──────────────────────────*/

/* Fine-tuning positions (override if needed) */
.footerleftlogo {
  left: 5%;
}

.footerrightlogo {
  right: 5%;
}

.footerleftlogo, .footerrightlogo {
  top: 25%; /* Adjust as needed */
}
}

/*────────────────────────── TABLETS (769px–1024px) ──────────────────────────*/
@media (min-width: 769px) and (max-width: 1024px) {
.navbar {
  align-items: center;
  background: fixed;
  display: flex;
  font-size: 0.3em;
  justify-content: space-evenly;
  position: fixed;
  width: 100vw;
  z-index: 1100;
}

.main-logo {
  height: 110px !important;
}

.site-title {
  font-size: 4em;
}

.nav-item {
  align-items: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: rgba(0,0,0,0.6);
  border-radius: 120px;
  display: flex;
  flex-wrap: wrap;
  font-size: 2em;
  justify-content: center;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  text-shadow: 3px 3px 3px black;
  transition: transform 0.3s ease;
  width: 100%;
}

/*────────────────────────── NAVBAR 2 ──────────────────────────*/
.navbar2 {
  align-items: center;
  box-sizing: border-box;
  border-radius: 600px;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: 1fr;
  height: calc(100vh - var(--nav-height));
  justify-content: center;
  justify-items: center;
  left: 12%;
  overflow-y: hidden;
  position: fixed;
  right: 12%;
  z-index: 100;
}

.nav-item2 {
  font-size: 1.5em;
  width: 400px;
}

/*────────────────────────── FOOTER ──────────────────────────*/

/* Fine-tuning positions (override if needed) */
.footerleftlogo {
  left: 5%;
}

.footerrightlogo {
  right: 5%;
}

.footerleftlogo, .footerrightlogo {
  top: 25%; /* Adjust as needed */
}
}

/*────────────────────────── DESKTOPS (1025px–1440px) ──────────────────────────*/
@media (min-width: 1025px) and (max-width: 1440px) {

.navbar {
  align-items: center;
  background: fixed;
  display: flex;
  font-size: 0.4em;
  justify-content: space-evenly;
  position: fixed;
  width: 100vw;
  z-index: 1100;
}

.main-logo {
  height: 120px !important;
}

.site-title {
  font-size: 4em;
}

.nav-item {
  align-items: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: rgba(0,0,0,0.6);
  flex-wrap: wrap;
  display: flex;
  font-size: 2em;
  justify-content: center;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  text-shadow: 3px 3px 3px black;
  transition: transform 0.3s ease;
  width: 100%;
}

/*────────────────────────── NAVBAR 2 ──────────────────────────*/
.navbar2 {
  align-items: center;
  box-sizing: border-box;
  border-radius: 600px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: 1fr;
  height: calc(100vh - var(--nav-height));
  justify-content: center;
  justify-items: center;
  left: 12%;
  overflow-y: hidden;
  position: fixed;
  right: 12%;
  top: 0;
  z-index: 100;
}

.nav-item2 {
  font-size: 1.5em;
  width: 300px;
}

/*────────────────────────── FOOTER ──────────────────────────*/


/* Fine-tuning positions (override if needed) */
.footerleftlogo {
  left: 5%;
}

.footerrightlogo {
  right: 5%;
}

.footerleftlogo, .footerrightlogo {
  top: 25%; /* Adjust as needed */
}
}

/*────────────── DESKTOPS (1441px–2560px) ──────────────*/
@media (min-width: 1441px) and (max-width: 2560px) {

.navbar {
  align-items: center;
  background: fixed;
  display: flex;
  font-size: 1em;
  justify-content: space-evenly;
  position: fixed;
  width: 100vw;
  z-index: 1100;
}

.site-title {
  font-size: 3em;
}

.main-logo {
  height: 130px !important;
}

.nav-item {
  align-items: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: rgba(0,0,0,0.6);
  border-radius: 120px;
  display: flex;
  flex-wrap: wrap;
  font-size: 1em;
  justify-content: center;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  text-shadow: 3px 3px 3px black;
  transition: transform 0.3s ease;
  width: 100%;
}

/*────────────────────────── NAVBAR 2 ──────────────────────────*/
.navbar2 {
  align-items: center;
  box-sizing: border-box;
  border-radius: 600px;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: 1fr;
  height: calc(100vh - var(--nav-height));
  justify-content: center;
  justify-items: center;
  left: 12%;
  overflow-y: hidden;
  position: fixed;
  right: 12%;
  z-index: 100;
}


.nav-item2 {
  font-size: 1.5em;
  width: 400px;
}

/*────────────────────────── FOOTER ──────────────────────────*/
footer {
  top: 11%;
}

/* Fine-tuning positions (override if needed) */
.footerleftlogo {
  left: 5%;
}

.footerrightlogo {
  right: 5%;
}

.footerleftlogo, .footerrightlogo {
  top: 25%; /* Adjust as needed */
}
}

/*────────────── DESKTOPS (2561px–3840px) ──────────────*/
@media (min-width: 2561px) and (max-width: 3840px)  {
.navbar {
  align-items: center;
  background: fixed;
  display: flex;
  font-size: 0.9em;
  justify-content: space-evenly;
  position: fixed;
  width: 100vw;
  z-index: 1100;
}

.site-title {
  font-size: 4em;
}

.main-logo {
  height: 140px !important;
}

.nav-item {
  align-items: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: rgba(0,0,0,0.6);
  border-radius: 120px;
  display: flex;
  font-size: 2em;
  justify-content: center;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  text-shadow: 3px 3px 3px black;
  transition: transform 0.3s ease;
  width: 100%;
}

/*────────────────────────── NAVBAR 2 ──────────────────────────*/
.navbar2 {
  align-items: center;
  box-sizing: border-box;
  border-radius: 600px;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: 1fr;
  height: calc(100vh - var(--nav-height));
  justify-content: center;
  justify-items: center;
  left: 12%;
  overflow-y: hidden;
  position: fixed;
  right: 12%; 
  top: 4%; 
  z-index: 100;
}

.nav-item2 {
  font-size: 1.5em;
  width: 400px;
}

/*────────────────────────── FOOTER ──────────────────────────*/
footer {
  top: 11%;
}

/* Fine-tuning positions (override if needed) */
.footerleftlogo {
  left: 5%;
}

.footerrightlogo {
  right: 5%;
}

.footerleftlogo, .footerrightlogo {
  top: 25%; /* Adjust as needed */
}
}

/*────────────────────────── 4K SCREENS (3841px) ──────────────────────────*/
@media (min-width: 3841px) {
/*────────────────────────── NAVBAR 1 ──────────────────────────*/
.navbar {
  align-items: center;
  background: fixed;
  display: flex;
  font-size: 1.3em;
  justify-content: space-evenly;
  position: fixed;
  width: 100vw;
  z-index: 1100;
}

.site-title {
  font-size: 4em;
}

.nav-item {
  align-items: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: rgba(0,0,0,0.6);

  display: flex;
  font-size: 2em;
  justify-content: center;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  text-shadow: 3px 3px 3px black;
  transition: transform 0.3s ease;
  width: 100%;
}

/*────────────────────────── NAVBAR 2 ──────────────────────────*/
.navbar2 {
  align-items: center;
  box-sizing: border-box;
  border-radius: 600px;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: 1fr;
  height: 1100px;
  justify-content: center;
  justify-items: center;
  left: 12%;
  overflow-y: visible;
  position: fixed;
  right: 12%; 
  top: 8%; 
  z-index: 100;
}

.nav-item2 {
  font-size: 3em;
  height: 800px;
  width: 500px;
}

/*────────────────────────── FOOTER ──────────────────────────*/
footer {
  top: 11%;
}

/* Fine-tuning positions (override if needed) */
.footerleftlogo {
  left: 5%;
}

.footerrightlogo {
  right: 5%;
}

.footerleftlogo, .footerrightlogo {
  top: 25%; /* Adjust as needed */
}
}

/*────────────────────────── UTILITIES ──────────────────────────*/
/*────────────────────────── NAVBAR ITEMS ──────────────────────────*/

/* Gloss overlay */
.nav-item::before {
  content: '';  
  height: 10%;
  left: 100%;
  position: absolute;
  top: 100%;
  width: 90%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255, 255, 255, 0.474) 40%,
    rgba(255, 255, 255, 0.84) 50%,
    rgba(255, 255, 255, 0.488) 60%,
    rgba(255,255,255,0) 100%
  );
  transform: rotate(120deg);
  transition: top 0.6s ease-in-out, left 0.6s ease-in-out;
  z-index: 3;
  pointer-events: none;
}

/* Dark overlay */
.nav-item::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Hover zoom & gloss movement */
.nav-item:hover::before { 
  top: -40%;
  left: -60%; 
}

.nav-item:hover {
  transform: scale(1.10);
  z-index: 1200;
}

/*────────────────────────── NAVBAR2 ITEMS ──────────────────────────*/
/* Gloss + overlay */

.nav-item2::before {
  content: '';
  height: 150%;
  left: 5%;
  position: absolute;
  pointer-events: none;
  top: 75%;
  transition: top 0.6s ease-in-out;
  width: 100%;
  z-index: 3;
}

.nav-item2::after {
  border-radius: 10px;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 100;
}

.nav-item2:hover::before { 
  top: 50%;
}

.nav-item2:hover {
  transform: scale(1.10);
  z-index: 1500;
}

/* Electric flicker animation for nav-item2 hover */
.nav-item2:hover {
  animation: electric-flicker-card 7s infinite linear;
  border-radius: 210px;
  height: fit-content;
}

.hidden {
  display: none !important;
}

.center {
  align-items: center;
  display: flex;
  justify-content: center;
}

/* Electric flicker animation for nav-item2 hover */
@keyframes electric-flicker-card {
  0%   { box-shadow: #ff7151 5px 5px 30px; }
  10%  { box-shadow: #ff8a5f 0 0 20px; }
  25%  { box-shadow: purple 0 0 40px; }
  40%  { box-shadow: #ff6f3f 0 0 20px; }
  60%  { box-shadow: purple 0 0 30px; }
  80%  { box-shadow: #ff8a5f 0 0 20px; }
  100% { box-shadow: #ff7151 5px 5px 30px; }
}

/*────────────────────────── FOCUS & ACCESSIBILITY ──────────────────────────*/

/* Accessibility focus */
.nav-item:focus, .nav-item2:focus {
  outline: 2px solid lime;
  outline-offset: 2px;
}

/* Emojis */
.emoji {
  display: inline-block;
  font-size: 1.1em;
  margin: 0 4px;
  transition: transform 0.3s;
  transform-origin: center center;
  vertical-align: middle;
  will-change: transform;
}

.emoji:hover {
  transform: rotate(180deg) scale(1.1);
}

/* Glow-on-hover utility for header and navbar images */
.glow-on-hover {
  filter: drop-shadow(0 0 0 rgba(255,113,81,0));
  height: 1.5em;
  transition: filter 0.25s ease, transform 0.25s ease;
  vertical-align: middle;
}

.main-logo {
  display: inline-block;
  height: 150px;
  max-height: 150px;
  padding: 5px;
  width: auto;
  will-change: transform;
}

.nav-item:hover .glow-on-hover,
.nav-item2:hover .glow-on-hover, .glow-on-hover {
  animation: electric-flicker 7s infinite linear;
  filter: drop-shadow(0 0 12px rgba(255,113,81,0.95));
  transform: translateY(-2px) scale(1.03);  
}

/* Electric flicker keyframes */
@keyframes electric-flicker {
  0%   { filter: drop-shadow(0 0 12px rgba(255,113,81,0.95)) brightness(1); }
  8%   { filter: drop-shadow(0 0 3px rgba(255,113,81,0.5)) brightness(0.9); }
  18%  { filter: drop-shadow(0 0 20px purple) brightness(1.2); }
  30%  { filter: drop-shadow(0 0 6px rgba(255,113,81,0.6)) brightness(0.95); }
  45%  { filter: drop-shadow(0 0 16px rgba(255,150,100,0.95)) brightness(1.05); }
  60%  { filter: drop-shadow(0 0 4px rgba(255,113,81,0.45)) brightness(0.92); }
  80%  { filter: drop-shadow(0 0 18px purple) brightness(1.18); }
  100% { filter: drop-shadow(0 0 12px rgba(255,113,81,0.95)) brightness(1); }
}

/*────────────────────────── END OF FILE ──────────────────────────*/