/* ============================================================
   Lando Norris — MODO HORRÍVEL™ (feio + pixelado de propósito)
   ============================================================ */
:root{
  --bg:#00ff00;
  --bg-soft:#ff00ff;
  --bg-card:#00ffff;
  --line:#ff0000;
  --text:#0000ff;
  --muted:#ff8800;
  --lime:#ff00ff;
  --lime-dim:#ffff00;
  --ease:linear;
  --pad:13px;
}

*{margin:0;padding:0;box-sizing:border-box;image-rendering:pixelated;image-rendering:crisp-edges;}
html{scroll-behavior:smooth}

/* tudo pixelado: imagens borradas e quadradas */
img,svg{display:block;max-width:100%;image-rendering:pixelated;filter:contrast(1.4) saturate(2.5);transform:scale(1.0)}

body{
  font-family:"Comic Sans MS","Comic Sans",cursive,fantasy;
  background:
    repeating-conic-gradient(#ff00ff 0% 25%, #00ff00 0% 50%) 0 / 24px 24px,
    #ffff00;
  color:var(--text);
  overflow-x:hidden;line-height:1.1;
  text-shadow:2px 2px 0 #ff0000, -2px -2px 0 #00ffff;
  cursor:crosshair;
  -webkit-font-smoothing:none;
}
a{color:#ff0000;text-decoration:underline wavy #00ff00 3px}
a:visited{color:#aa00aa}
section{position:relative;border:6px ridge #ff00ff;margin:6px;background:repeating-linear-gradient(45deg,#00ffff 0 10px,#ffff00 10px 20px)}

.kicker{
  display:inline-block;font-size:1.3rem;letter-spacing:-2px;
  text-transform:uppercase;color:#ff0000;font-weight:900;margin-bottom:.4rem;
  background:#00ff00;border:3px dashed #0000ff;padding:2px 6px;transform:rotate(-4deg);
  animation:blink 0.6s steps(2) infinite;
}
@keyframes blink{50%{opacity:.2;color:#00ffff}}

.section-head{padding:0 var(--pad);margin:0 auto 14px}
.section-head h2{
  font-family:"Comic Sans MS",cursive;font-weight:900;
  font-size:clamp(2rem,9vw,5rem);line-height:.9;
  text-transform:uppercase;letter-spacing:3px;
  color:#ffff00;text-shadow:4px 4px 0 #ff0000,8px 8px 0 #0000ff;
  transform:skewX(-12deg) rotate(2deg);
}
.section-head p{color:#ff00ff;margin-top:.4rem;background:#000;padding:3px;display:inline-block;transform:rotate(1.5deg)}

/* reveal? não, aparece tudo torto */
[data-reveal]{opacity:1;transform:rotate(-1deg)}
[data-reveal]:nth-child(even){transform:rotate(2deg)}

/* ===== Preloader ===== */
.preloader{position:fixed;inset:0;z-index:9999;background:repeating-radial-gradient(#ff0000 0 8px,#00ff00 8px 16px);display:grid;place-items:center;transition:opacity .3s}
.preloader.is-done{opacity:0;visibility:hidden}
.preloader__inner{text-align:center;width:min(90vw,420px);background:#00ffff;border:8px outset #ff00ff;padding:18px;transform:rotate(-3deg)}
.preloader__num{font-family:"Comic Sans MS";font-size:clamp(3rem,18vw,8rem);color:#ff0000;line-height:1;display:block;text-shadow:3px 3px 0 #ffff00}
.preloader__label{font-size:1rem;letter-spacing:0;color:#0000ff;display:block;margin:.4rem 0 .8rem;font-weight:900}
.preloader__bar{height:18px;background:#000;border:3px solid #00ff00;overflow:hidden}
.preloader__bar span{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,#ff0000 0 8px,#ffff00 8px 16px);transition:width .2s}

/* ===== Scroll progress ===== */
.scroll-progress{position:fixed;top:0;left:0;height:10px;width:0;background:repeating-linear-gradient(90deg,#ff00ff 0 6px,#00ff00 6px 12px);z-index:200;border-bottom:2px solid #000}

/* ===== Header ===== */
.header{
  position:fixed;top:0;left:0;right:0;z-index:150;
  display:flex;align-items:center;justify-content:space-between;
  padding:6px var(--pad);
  background:repeating-linear-gradient(45deg,#ff0000 0 12px,#ffff00 12px 24px);
  border-bottom:6px groove #00ff00;
}
.header.is-scrolled{background:#ff00ff;transform:skewY(-1deg)}
.logo{display:flex;align-items:center;gap:6px;background:#00ff00;border:4px dotted #ff0000;padding:3px;transform:rotate(-5deg)}
.logo__mark{width:36px;height:36px;color:#ff0000}
.logo__text{font-family:"Comic Sans MS";letter-spacing:0;font-size:1.2rem;color:#0000ff;font-weight:900}
.nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.nav__link{font-size:1.05rem;font-weight:900;color:#ff0000;background:#00ffff;border:3px solid #ff00ff;padding:2px 6px;transform:rotate(3deg)}
.nav__link:nth-child(odd){transform:rotate(-4deg);background:#ffff00}
.nav__link:hover{background:#ff0000;color:#00ff00;transform:scale(1.4) rotate(8deg)}
.nav__link--store{color:#00ff00;background:#ff00ff}
.header__right{display:flex;align-items:center;gap:6px}
.socials{display:flex;gap:4px;flex-wrap:wrap}
.social{
  width:38px;height:38px;border:3px dashed #ff0000;border-radius:0;
  display:grid;place-items:center;font-size:.8rem;font-weight:900;
  background:#ffff00;color:#0000ff;
}
.social:hover{background:#ff00ff;color:#fff;transform:rotate(20deg) scale(1.3)}
.burger{display:none;flex-direction:column;gap:5px;background:#ff0000;border:3px solid #000;cursor:pointer;padding:4px}
.burger span{width:26px;height:4px;background:#ffff00}
.burger.is-open span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* ===== Hero ===== */
.hero{min-height:600px;position:relative;overflow:hidden;display:flex;align-items:center;border:10px ridge #ff0000}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,0,255,.3) 0 4px,transparent 4px 8px);z-index:3}

/* "video" feio e pixelado */
.track-stage{position:absolute;inset:0;overflow:hidden;background:#000;image-rendering:pixelated}
.track-stage__sky{position:absolute;inset:0 0 38% 0;background:repeating-linear-gradient(#ff00ff 0 20px,#00ff00 20px 40px)}
.track-stage__road{position:absolute;left:50%;bottom:0;width:300%;height:62%;background:repeating-linear-gradient(90deg,#ffff00 0 18px,#ff0000 18px 36px);transform:translateX(-50%) perspective(420px) rotateX(58deg);transform-origin:bottom}
.track-stage__lines{position:absolute;left:50%;bottom:0;width:30px;height:62%;transform:translateX(-50%) perspective(420px) rotateX(58deg);transform-origin:bottom;background:repeating-linear-gradient(180deg,#00ffff 0 20px,#000 20px 40px);animation:road .3s steps(4) infinite}
@keyframes road{to{background-position-y:80px}}
.track-stage__car{position:absolute;left:50%;bottom:9%;width:min(60vw,460px);transform:translateX(-50%);z-index:2;image-rendering:pixelated;filter:hue-rotate(180deg) contrast(2) saturate(3);animation:bob .25s steps(2) infinite}
@keyframes bob{50%{transform:translateX(-48%) translateY(-16px) rotate(4deg)}}
.track-stage__speed{position:absolute;inset:0;z-index:1;background:repeating-radial-gradient(circle at 50% 80%,#ff0000 0 6px,#ffff00 6px 12px);opacity:.3;animation:zoom .8s steps(3) infinite}
@keyframes zoom{50%{opacity:.6;transform:scale(1.3)}}

.hero__content{position:relative;z-index:5;padding:14px;width:100%}
.hero__eyebrow{font-size:1.2rem;color:#ffff00;background:#ff0000;display:inline-block;padding:3px;transform:rotate(-3deg);font-weight:900}
.hero__title{font-family:"Comic Sans MS",cursive;font-weight:900;line-height:.85;text-transform:uppercase;font-size:clamp(3rem,17vw,11rem);letter-spacing:2px;color:#00ff00;text-shadow:5px 5px 0 #ff0000,10px 10px 0 #0000ff,15px 15px 0 #ffff00}
.hero__title span{display:block}
.hero__title span:nth-child(2){color:#ff00ff;transform:skewX(-15deg)}
.hero__sub{font-size:clamp(1.1rem,3vw,1.8rem);color:#fff;background:#000;padding:4px;margin:.8rem 0;display:inline-block;transform:rotate(2deg);animation:blink 1s steps(2) infinite}
.hero__cta{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border:6px outset #ffff00;background:#ff00ff;color:#00ff00;font-weight:900;transform:rotate(-2deg)}
.hero__cta:hover{background:#ff0000;transform:scale(1.2) rotate(5deg)}
.hero__cta-label{font-size:.8rem;color:#ffff00}
.hero__cta-race{font-weight:900;color:#fff}
.hero__cta-arrow{color:#00ffff;font-size:1.6rem}
.hero__num{position:absolute;top:10%;right:10px;font-family:"Comic Sans MS";font-size:clamp(6rem,26vw,20rem);color:#ff0000;z-index:1;line-height:1;opacity:.6;text-shadow:6px 6px 0 #00ff00}
.hero__scroll{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.9rem;color:#fff;background:#ff0000;padding:4px;font-weight:900}
.hero__scroll span{width:4px;height:30px;background:#00ff00;animation:scrollLine .4s steps(2) infinite}
@keyframes scrollLine{50%{transform:scaleY(.3)}}

/* ===== Ticker ===== */
.ticker{background:repeating-linear-gradient(90deg,#ff0000 0 16px,#00ff00 16px 32px);color:#ffff00;overflow:hidden;padding:8px 0;border-top:5px solid #0000ff;border-bottom:5px solid #ff00ff}
.ticker__track{display:flex;gap:30px;white-space:nowrap;width:max-content;animation:ticker 8s linear infinite;font-family:"Comic Sans MS";font-size:1.5rem;font-weight:900;text-shadow:2px 2px 0 #000}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ===== Message ===== */
.message{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:20px var(--pad)}
.message__media{position:relative;overflow:hidden;aspect-ratio:4/5;background:#ff00ff;border:8px inset #00ff00;transform:rotate(-3deg)}
.message__media img{width:100%;height:100%;object-fit:fill;image-rendering:pixelated;transform:scale(1.05)}
.message__sign{position:absolute;bottom:10px;left:10px;width:140px;background:#fff}
.message__text h2{font-family:"Comic Sans MS";font-weight:900;font-size:clamp(1.4rem,4vw,2.8rem);line-height:1;text-transform:uppercase;margin-bottom:.8rem;color:#ff0000;text-shadow:3px 3px 0 #00ffff}
.message__text p{color:#0000ff;margin-bottom:1rem;background:#ffff00;padding:4px}

.btn{display:inline-flex;align-items:center;gap:6px;font-weight:900;font-size:1.1rem;padding:10px 18px;border:6px outset #ff0000;background:#00ff00;color:#ff00ff;transform:rotate(-2deg)}
.btn:hover{background:#ffff00;color:#ff0000;transform:scale(1.3) rotate(6deg)}
.btn--solid{background:#ff00ff;color:#ffff00}

/* ===== Stats ===== */
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:10px;background:#000}
.stat{background:repeating-linear-gradient(45deg,#00ffff 0 8px,#ff00ff 8px 16px);padding:18px 6px;text-align:center;border:4px ridge #ffff00;transform:rotate(-2deg)}
.stat:nth-child(even){transform:rotate(3deg)}
.stat__num{font-family:"Comic Sans MS";font-size:clamp(2rem,6vw,4rem);color:#ff0000;line-height:1;display:block;text-shadow:2px 2px 0 #fff}
.stat__label{font-size:.9rem;text-transform:uppercase;color:#0000ff;margin-top:.3rem;display:block;font-weight:900}

/* ===== Split ===== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px}
.split__card{position:relative;aspect-ratio:16/13;overflow:hidden;display:block;border:8px outset #ff00ff}
.split__card img{width:100%;height:100%;object-fit:fill;image-rendering:pixelated;filter:hue-rotate(90deg) saturate(3) contrast(1.6)}
.split__card:hover img{transform:scale(1.3) rotate(5deg)}
.split__overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:12px;background:rgba(255,0,255,.45)}
.split__tag{font-family:"Comic Sans MS";color:#ffff00;font-size:1.6rem;text-shadow:2px 2px 0 #000}
.split__overlay h3{font-family:"Comic Sans MS";font-weight:900;font-size:clamp(1.6rem,5vw,3.5rem);text-transform:uppercase;line-height:1;color:#00ff00;text-shadow:3px 3px 0 #ff0000}
.split__overlay p{color:#fff;background:#000;padding:3px;margin-bottom:.6rem}
.split__go{color:#ffff00;font-weight:900;background:#ff0000;padding:3px;display:inline-block}

/* ===== Helmets ===== */
.helmets{padding:20px 0}
.helmets__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px;background:#000}
.helmet{position:relative;background:repeating-conic-gradient(#ffff00 0 25%,#ff00ff 0 50%) 0/16px 16px;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;cursor:crosshair;border:5px dashed #00ff00}
.helmet svg{width:70%;image-rendering:pixelated;filter:saturate(3) contrast(2)}
.helmet:hover svg{transform:scale(1.4) rotate(25deg)}
.helmet__meta{position:absolute;inset:auto 0 0 0;padding:8px;display:flex;justify-content:space-between;align-items:end;background:#ff0000}
.helmet__name{font-family:"Comic Sans MS";font-size:1.2rem;text-transform:uppercase;color:#ffff00}
.helmet__year{color:#00ffff;font-size:1rem;font-weight:900}
.helmet__bg{display:none}

/* ===== Store ===== */
.store{background:repeating-linear-gradient(135deg,#00ff00 0 14px,#ff00ff 14px 28px);border-block:8px ridge #ffff00}
.store__inner{display:grid;grid-template-columns:1fr 1.3fr;gap:16px;padding:20px var(--pad)}
.store__text h2{font-family:"Comic Sans MS";font-weight:900;font-size:clamp(1.6rem,5vw,3rem);text-transform:uppercase;line-height:1;margin-bottom:.6rem;color:#ff0000;text-shadow:3px 3px 0 #fff}
.store__text p{color:#0000ff;margin-bottom:1rem;background:#ffff00;padding:4px}
.store__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.product{background:#00ffff;border:6px outset #ff0000;padding:8px;transform:rotate(-2deg)}
.product:nth-child(even){transform:rotate(3deg)}
.product:hover{transform:scale(1.15) rotate(-8deg)}
.product__img{aspect-ratio:1;margin-bottom:8px;image-rendering:pixelated}
.product__img--a{background:repeating-conic-gradient(#ff0000 0 25%,#00ff00 0 50%) 0/12px 12px}
.product__img--b{background:repeating-linear-gradient(45deg,#ff00ff 0 8px,#ffff00 8px 16px)}
.product__img--c{background:repeating-radial-gradient(#00ffff 0 6px,#ff0000 6px 12px)}
.product__name{font-weight:900;display:block;color:#0000ff}
.product__price{color:#ff0000;font-size:1.1rem;font-weight:900}

/* ===== Partners ===== */
.partners{padding:20px 0}
.partners__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px;background:#000}
.partner{background:repeating-linear-gradient(90deg,#ffff00 0 10px,#00ffff 10px 20px);aspect-ratio:2/1;display:grid;place-items:center;font-family:"Comic Sans MS";font-size:1.3rem;color:#ff0000;text-transform:uppercase;border:4px groove #ff00ff;transform:rotate(-1deg)}
.partner:hover{background:#ff0000;color:#ffff00;transform:scale(1.2) rotate(6deg)}

/* ===== Calendar ===== */
.calendar{padding:20px 0}
.calendar__list{padding:0 var(--pad)}
.race{display:grid;grid-template-columns:50px 1fr auto auto;gap:10px;align-items:center;padding:10px;border:4px dashed #ff00ff;margin-bottom:6px;background:repeating-linear-gradient(45deg,#00ffff 0 8px,#ffff00 8px 16px);transform:rotate(-.5deg)}
.race:nth-child(even){transform:rotate(1deg);background:repeating-linear-gradient(45deg,#ff00ff 0 8px,#00ff00 8px 16px)}
.race__round{font-family:"Comic Sans MS";color:#ff0000;font-size:1.5rem;text-shadow:2px 2px 0 #fff}
.race__name{font-weight:900;font-size:1.2rem;color:#0000ff}
.race__circuit{color:#ff0000;font-size:.9rem;font-weight:900}
.race__date{color:#000;font-size:1rem;font-weight:900;background:#ffff00;padding:2px}
.race__status{font-size:.8rem;font-weight:900;padding:4px 8px;text-transform:uppercase;border:2px solid #000}
.race__status--done{background:#888;color:#000}
.race__status--next{background:#ff0000;color:#ffff00;animation:blink .5s steps(2) infinite}
.race__status--up{background:#00ffff;color:#ff00ff}

/* ===== Gallery ===== */
.gallery{padding:20px 0}
.gallery__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;padding:8px;background:#000}
.gallery__item{aspect-ratio:1;overflow:hidden;position:relative;border:4px ridge #ffff00}
.gallery__item img{width:100%;height:100%;object-fit:fill;image-rendering:pixelated;filter:hue-rotate(200deg) saturate(4) contrast(2)}
.gallery__item:hover img{transform:scale(1.5) rotate(15deg)}
.gallery__item::after{content:"@";position:absolute;inset:0;display:grid;place-items:center;background:rgba(255,0,0,.7);color:#00ff00;font-family:"Comic Sans MS";font-size:2.5rem;opacity:0}
.gallery__item:hover::after{opacity:1}

/* ===== Footer ===== */
.footer{background:repeating-conic-gradient(#ff0000 0 25%,#0000ff 0 50%) 0/30px 30px;border-top:10px ridge #00ff00;padding:20px var(--pad)}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:16px;padding-bottom:16px;border-bottom:5px dashed #ffff00}
.footer__brand p{color:#ffff00;margin:.6rem 0;background:#000;padding:4px;display:inline-block}
.footer__nav{display:flex;flex-direction:column;gap:6px}
.footer__nav a{color:#00ffff;background:#ff00ff;padding:2px 6px;font-weight:900;transform:rotate(-2deg)}
.footer__nav a:hover{background:#ffff00;color:#ff0000}
.footer__mail{display:block;margin-top:.4rem;font-size:1.2rem;font-weight:900;color:#00ff00;background:#ff0000;padding:3px}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;color:#fff;background:#000;padding:6px;font-weight:900;flex-wrap:wrap}
.footer__legal{display:flex;gap:10px}
.footer__legal a{color:#ffff00}

/* ===== Custom cursor ===== */
.cursor{position:fixed;top:0;left:0;width:24px;height:24px;background:#ff0000;border:3px solid #00ff00;pointer-events:none;z-index:9000;transform:translate(-50%,-50%);display:none}
.cursor.is-hover{width:60px;height:60px;background:#ffff00;border-color:#ff00ff}
@media (hover:hover) and (pointer:fine){.cursor{display:block}}

/* ===== Rotate hint ===== */
.rotate-hint{display:none}

/* ============================================================
   Responsive (continua feio em qualquer tela)
   ============================================================ */
@media (max-width:1024px){
  .gallery__grid{grid-template-columns:repeat(3,1fr)}
  .helmets__grid,.partners__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .burger{display:flex}
  .nav{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:14px;background:repeating-conic-gradient(#ff0000 0 25%,#00ff00 0 50%) 0/40px 40px;transform:translateY(-200%);transition:transform .3s steps(3);z-index:155}
  .nav.is-open{transform:none}
  .nav__link{font-size:2rem}
  .message,.store__inner,.footer__top{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .helmets__grid{grid-template-columns:repeat(2,1fr)}
  .race{grid-template-columns:40px 1fr auto}
  .race__date{display:none}
}
@media (max-width:560px){
  .gallery__grid{grid-template-columns:repeat(2,1fr)}
  .partners__grid{grid-template-columns:repeat(2,1fr)}
  .store__cards{grid-template-columns:1fr}
}
