/* === BASE & ROOT === */
* {box-sizing: border-box; padding: 0; margin: 0; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}
:root { --background-rgb: 0 0 0; --blue-rgb: 0 0 0; --primary-rgb: 50 50 50; }

body, html { width: 100vw; min-height: 100vh; overflow-x: hidden; overflow-y: auto; margin: 0; font-family:'Nortune','Roboto',sans-serif; color: #000;background-color: #FFDE00; }

a {text-decoration: none;}

@font-face { font-family:'Nortune'; src:url('./assets/Nortune-Black.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Bassy'; src:url('./assets/Bassy.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'JUNO'; src:url('./assets/JUNO-DEMO.otf') format('truetype'); font-display:swap; }
@font-face { font-family:'Heisenberg'; src:url('./assets/Heisenberg.otf') format('opentype'); font-display:swap; }

#grid-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; display: none;}

.motorlive {position: absolute; top: 2%; left: 50%; transform: translate(-50%, 0%) translateY(-200px); width: 5%; height: auto; z-index: 4; mix-blend-mode: darken; opacity: 0;}
@media (max-width: 1000px) {.motorlive{top: 3%; width: 33%;}}

/* ==========================================================================
HERO SECTION
========================================================================== */
.hero{height:100vh;width:100vw;display:flex;flex-direction:column;justify-content:center;padding:2vw;position:relative;align-self:center;text-align:center;z-index:2;}
.hero-title{font-size:33rem;line-height:.9;letter-spacing:-.02em; font-family:'JUNO','Stranger','Nortune','Roboto',sans-serif;font-weight: lighter;}
.text-white{color: #fff; font-family:'Bassy', 'Nortune','Roboto',sans-serif;font-size:14.2rem;font-weight:lighter; position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) rotate(-10deg);}
.hero-title .word{display:inline-block;transform-origin:center bottom;}
.hero-subtitle{margin-top:4vh;font-size:3rem;max-width:50vw;line-height:1.1;align-self:center;text-align:center;z-index: 2;}
.intro__info { color: #fff; max-width:12ch; margin-bottom:4rem; padding-bottom:1rem; line-height:1.2; opacity:1; position:absolute;bottom: -2%;left: 50%; transform: translate(-50%, 0%); align-self:end; text-transform:initial; font-family: 'Bassy', 'Heisenberg', 'LEMONMILK-Regular', 'Roboto', sans-serif;font-size:3rem; }
.intro__info::after { content:""; width:2px; height:4rem; background:linear-gradient(to bottom,#fff,transparent); position:absolute; top:66%; left:50%; }
.hero-meta{position:absolute;display:flex;flex-direction:column;gap:.5rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.3em;opacity:.4;}
.hero-meta-left{left:2vw;bottom:10vh;}
.hero-meta-right{right:2vw;top:20vh;text-align:right;}
.hero-line{position:absolute;width:50vw;left:50%;top:57%;transform:translateX(-50%) rotate(-10deg);}
.hero-line path{fill:none;stroke:#fff;stroke-width:5;}
@media (max-width: 1000px) {
    .hero{gap: 5vh;} 
    .hero-title{font-size:10rem;}
    .text-white{font-size:5rem;width:100%;}
    .hero-subtitle{font-size:1.5rem;width:100vw;}
    .hero-meta-left{bottom:20vh;}
    .hero-line{width:80vw;top:52%;}
}
/* === HUGE MARQUEE === */
.marquee-trial { position: absolute; bottom: 0%; width: 150%; margin: 0 auto; padding: 0.2em 0; white-space: nowrap; overflow: hidden; z-index: 0; background: transparent; display: flex; align-items: center; opacity: 0; transform: translateX(100vw); transition: transform .5s ease-out, opacity .5s ease-out; }
.marquee-trial-content { display: inline-block; white-space: nowrap; animation: marqueeAnim 100s linear infinite; }
.marquee-trial-content span { font-family: 'Nortune', 'Roboto', sans-serif; text-transform: uppercase; font-weight: 300; color: #fff; font-size: 66em; letter-spacing: 1rem; display: inline-block; padding-right: 2rem; text-shadow: 0 0 0.05em #fff; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } 
@keyframes marqueeAnim { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } }
/*.skullcen:hover ~ .marquee-trial { transform: translateX(0vw); opacity: 1; }*/
/* === RESPONSIVE SCALING (MARQUEES & MORPH) === */
@media (max-width: 2000px) { .marquee-trial { bottom: -2%; transform: translateX(100vw); } .marquee-trial-content span { font-size: 48em; } }
@media (max-width: 1000px) { .marquee-trial { bottom: 2%; transform: translateX(100vw); }.marquee-trial-content span { font-size: 40em; } }
@media (max-width: 600px) and (max-height: 800px) { .marquee-trial { bottom: 0%; transform: translateX(100vw); } .marquee-trial-content span { font-size: 30em; }}

/* === CONTENT SECTION === */
.content-section { position: relative; width: 100%; padding: 10vh 2vw; background: transparent; z-index: 20; overflow: hidden !important; }
.content-marquee { position: absolute; width: 250%; overflow: hidden; pointer-events: none; z-index: -1; }
.content-marquee.top { top: 20%; left: -10%; transform: rotate(-8deg) translateY(-50%); }
.content-marquee.bottom { bottom: 20%; left: -10%; transform: rotate(12deg) translateY(50%); }
.content-marquee-track { display: inline-block; white-space: nowrap; animation: contentMarquee 40s linear infinite; }
.content-marquee span { font-family:  'Nortune'; font-size: 40rem; color: rgba(0,0,0,0.08); letter-spacing: 10px; }
@keyframes contentMarquee { from { transform: translateX(0%); } to { transform: translateX(-50%); } }
.content-wrapper { max-width: 2000px; margin: 0 auto; color: #000; animation: contentBreath 6s ease-in-out infinite; }
@keyframes contentBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.01); } }
.content-wrapper > div > * { position: relative; text-align: center;}
.content-wrapper > div > *::before { content: ""; position: absolute; left: -5vw; top: 50%; width: 200vw; height: 1px; background: rgba(0,0,0,0.1); transform: scaleX(0); transform-origin: center; }
.content-wrapper > div > *:hover::before { transform: scaleX(1); transition: 0.6s ease; }
.content-wrapper h1, .content-wrapper h2 { font-family: 'Nortune'; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 1rem; }
/* === TYPOGRAPHY UPGRADE === */
.agency-hero {position: relative;}
.agency-hero h1{text-align: center;width: 100%;color: #fff;text-shadow: -5px -5px 0 black, 5px -5px 0 black, -5px  5px 0 black, 5px  5px 0 black;letter-spacing: 100px;}
.pillar-number {font-family: 'Nortune'; font-size: 3rem;}
.content-wrapper h1 { font-size: 8rem; line-height: 0.85; letter-spacing: -2px; position: relative; display: inline-block; mix-blend-mode: difference; }
.content-wrapper h2 { font-size: 16rem; margin-top: 6rem; position: relative; display: inline-block; }
.content-wrapper p { font-size: 10rem; letter-spacing: 2px; line-height: .7; max-width: 1800px; }
.content-wrapper p {color: #fff;  font-family: 'Bassy', 'Heisenberg', 'Nortune', 'Roboto', sans-serif;text-align: center; width: 100%; position:absolute;top:66%;transform:translateY(-50%);z-index: 2;}
@keyframes wordFloat { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-4px); } }
@media (max-width: 1000px){  }
/* === VISIT === */
.mtv-block { margin-bottom: 8rem; }
.item { cursor: pointer; transform: translateY(80px); opacity: 1; will-change: transform; }
.item a { text-decoration: none; color: #000; }
.title { margin-top: 10px; font-family: 'Nortune'; font-size: 28rem; transition: .3s;}
.title:hover { transform: translateX(10px); color: #fff; }
@media (max-width: 2000px) { .title { font-size: 24rem; } }
@media (max-width: 1000px) { 
    .content-wrapper h1 { font-size: clamp(4rem, 8vw, 10rem); line-height: 1.1;} 
    .content-wrapper h2 { font-size: 4rem;}
    .content-wrapper p { font-size: 3rem;}
    .pillar-number { display: none; }
    .title { font-size: 4rem; } 
}

/* === STATS === */
.stats {width: 100%;min-height: 66vh; display: flex;align-items: center;justify-content: space-around;}
.stat {position: relative;width: 33%; display: flex;align-items: center;justify-content: center;}
.stat span {font-size: 20rem;font-family: 'Nortune', 'Roboto', sans-serif;}
.stat small {color: #fff; font-size: 6rem;font-family: 'Bassy', 'Nortune', 'Roboto', sans-serif;font-weight: lighter;text-align: center; width: 100%; position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) rotate(-10deg);z-index: 2;}
@media (max-width: 1000px) {
    .stats {flex-direction: column;}
    .stat span {font-size: 10rem;}
    .stat small {font-size: 3rem;}
}
/* === SERVICES === */
.services-section{background:transparent;color:#000;padding:8rem 0rem;}
.services-header{color: #fff; font-size: 8rem;font-family: 'Nortune', 'Roboto', sans-serif;font-weight: lighter;letter-spacing: 5px; text-shadow: -5px -5px 0 black, 5px -5px 0 black, -5px  5px 0 black, 5px  5px 0 black;margin-bottom:6rem;line-height:.9;text-align:center;}
.service-row{border-top:5px solid #000;padding:3rem 0 .5rem;position:relative;overflow:hidden;}
.service-row:last-child{border-bottom:5px solid #000;}
.service-row-bg{position:absolute;inset:0;background:#000;transform:translateY(101%);z-index:1;transition:transform .4s cubic-bezier(.25,1,.5,1);}
.service-row:hover .service-row-bg{transform:translateY(0);}
.service-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;}
.service-num{position:absolute;left:2rem;font-size:2rem;font-weight:800;}
.service-title{font-size:clamp(2rem,5vw,6rem);font-weight:800;text-transform:uppercase;line-height:.9;text-align:center;transition:color .4s ease;}
.service-marquee{background-color: #000; position:relative;z-index:2;margin-top:0rem;overflow:hidden;white-space:nowrap;transition:background-color .4s ease;}
.service-marquee-track{display:flex;width:max-content;gap:4rem;}
.service-marquee span{color: #FFDE00; font-size:2rem;font-weight:700;text-transform:uppercase;flex-shrink:0;transition:color .4s ease;}
.service-row:hover .service-title,.service-row:hover .service-num,.service-row:hover .service-marquee{color:#fff;}
.service-row:hover .service-marquee,.service-row:hover .service-marquee span {background-color: #fff;color: #000;}
@media (max-width: 1000px) { 
    .services-header { font-size: clamp(4rem, 8vw, 10rem); line-height: 1.1;} 
    .service-row{padding:1rem 0 .5rem;}
    .service-title{font-size:3rem;}
}
@media(max-width:1000px){
.service-top{flex-direction:column;gap:1rem;}
.service-num{position:relative;left:auto;}
.service-title{text-align:center;}
}

/* === SERVICES === */
.services {width: 100vw; display: flex;flex-direction: column;align-items: center;justify-content: space-around; margin-bottom: 10vh;}
.services h2 {color: #fff; font-size: 8rem;font-family: 'Nortune', 'Roboto', sans-serif;font-weight: lighter;letter-spacing: 5px; text-shadow: -5px -5px 0 black, 5px -5px 0 black, -5px  5px 0 black, 5px  5px 0 black;}
.service{ position: relative; font-size: 8rem;font-family: 'Nortune', 'Roboto', sans-serif; opacity:.2; transition: opacity .6s cubic-bezier(.19,1,.22,1), transform .6s cubic-bezier(.19,1,.22,1), letter-spacing .6s cubic-bezier(.19,1,.22,1);will-change:transform; }
.service::before{content:attr(data-text);position:absolute;inset:0;color:#fff;opacity:0;transform:scaleX(.85);filter:blur(20px);transition:opacity .6s cubic-bezier(.19,1,.22,1),transform .6s cubic-bezier(.19,1,.22,1),filter .6s cubic-bezier(.19,1,.22,1);pointer-events:none;}
/*.services:hover .service{opacity:.05;}*/
.services .service:hover{opacity:1;transform:translateX(30px) scale(1.03);letter-spacing:8px;}
.services .service:hover::before{opacity:.5;transform:scaleX(1.1);filter:blur(10px);}
.marquee {opacity: 0;will-change: transform, opacity;flex-wrap: nowrap; color: #fff; font-size: 5rem;font-family:'Bassy','Nortune','Roboto',sans-serif;font-weight:lighter; width: 100%;position:absolute;top:0%;left:50%;transform: translate(-50%, -50%)}
.fade-sides { -webkit-mask-image: linear-gradient( to right, transparent 0%, black 15%, black 85%, transparent 100% ); mask-image: linear-gradient( to right, transparent 0%, black 15%, black 85%, transparent 100% ); }
.marquee { white-space: nowrap; overflow: hidden; }
.marquee-track { display: inline-flex; white-space: nowrap; width: max-content; }
.marquee-track > * { white-space: nowrap; }
@media (max-width: 1000px) { 
    .services {display: none;}
    .services h2 { font-size: clamp(3rem, 6vw, 8rem); line-height: 1.1; text-align: center;} 
    .label {font-size: 2rem;line-height: .5;text-align: center;}
    .marquee {top:50%;font-size: 4rem;}
    
}
/* === FOOTER === */
.footer { position: relative; padding: 2vh 5vw; color: #FFDE00; overflow: hidden; background: linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 30%,rgba(0,0,0,0.8) 60%,rgba(0,0,0,1) 100%);}
.footer-marquee { position: absolute; width: 300%; top: 50%; left: -50%; transform: translateY(-50%) rotate(-10deg); z-index: 0; pointer-events: none; }
.footer-marquee-track { white-space: nowrap; animation: footerMarquee 60s linear infinite; }
.footer-marquee span { font-family:  'Nortune'; font-size: 30rem; color: rgba(194, 191, 25, 0.15); letter-spacing: 10px; }
@keyframes footerMarquee { from { transform: translateX(0%); } to { transform: translateX(-50%); } }
.footer-content { position: relative; z-index: 2;  display: flex;flex-direction: column;align-items: center; gap: 4rem; flex-wrap: wrap; animation: footerBreath 6s ease-in-out infinite; }
.footer-left {width: 100%; mix-blend-mode: lighten;}
.motorlivered {width: 100%; height: auto; z-index: 4;}
.footer-tagline { font-size: 5rem;font-family: 'Bassy', 'Nortune', 'Roboto', sans-serif; opacity: 0.7; margin-top: 10px; text-align: center;}
.footer-right {align-self: center;}
.footer-socials { display: flex;justify-content: space-evenly;align-items: center; gap: 1rem; font-size: 3rem; }
.footer-socials i { cursor: pointer; transition: 0.3s; color: #FFDE00;}
.footer-socials i:hover { transform: scale(1.2) rotate(10deg); color: #fff; }
.footer-copy { font-family: 'Bassy', 'Nortune', 'Roboto', sans-serif;font-size: 2.5rem; margin-top: 10px; opacity: 0.6; }
@keyframes footerBreath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.02); } }

@media (max-width: 1000px) { .footer-left {width: 100%;}.footer-tagline { font-size: 2rem;line-height: .9;} .footer-center { width: 100%; text-align: center; }.footer-center a {font-size: 4rem;} .footer-right {width: 100%;}.footer-socials {justify-content: space-evenly;gap: 0;} .footer-copy {text-align: center;}}
@media (max-width: 600px) and (max-height: 800px) {.footer-center a {font-size: 3.3rem;}}

/* === LOADER CSS === */
#loader{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000;color:#FFDE00;z-index:10000;}
.loader-text{font-size:10rem;line-height:0.9;overflow:hidden;}
.loader-text-top {font-size:13rem;}
.loader-text-II {color: #fff; font-size: 8rem;font-family:'Bassy','Nortune','Roboto',sans-serif;font-weight:lighter; position:absolute;top:50%;left:50%;transform: translate(-50%, -50%)}
.load-counter{position:absolute;bottom:0;left:0;width:100%;display:flex;justify-content:center;gap:10px;font-family:'Nortune','Flagmen','Roboto',sans-serif;font-size:clamp(9rem,15vw,18rem);font-weight:lighter;color:#FFDE00;text-shadow:0 0 .02em #FFDE00;letter-spacing:10px;text-align:center;z-index:50;pointer-events:none;}
.load-counter { position: absolute;bottom: 0;left: 0;width: 100%; /* ✅ full width */ display: flex;justify-content: center;gap: 10px; font-family: 'Nortune', 'Flagmen', 'Roboto', sans-serif;font-size: clamp(9rem, 15vw, 18rem); font-weight: lighter; color: #FFDE00;text-shadow: 0 0 0.02em #FFDE00; letter-spacing: 10px;text-align: center; z-index: 50;pointer-events: none; }
@media (max-width: 2000px) { .load-counter{font-size: 15vw;}}
@media (max-width: 1000px) { .loader-text{font-size:5rem;}.loader-text-top{font-size:6.5rem;}.loader-text-II{font-size:4rem;} .load-counter{font-size: 10rem;bottom:20%;}}