/* ==========================================================
   ROAR MUSIC — shared design system
   Sticker / flyer-collage aesthetic: thick outlines, halftone
   texture, tilted elements, hard drop-shadows, marker accents.
   ========================================================== */

:root{
  --black:#0B0B0A;
  --ink:#141311;        /* warm panel black, slightly lifted off pure black */
  --white:#F5F5F1;
  --orange:#FF5A1F;
  --orange-2:#FFB347;
  --line: rgba(245,245,241,.14);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}

.display{
  font-family:'Anton',sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:0.92;
}

/* halftone dot texture — fixed so it drifts subtly under content */
body::before{
  content:"";
  position:fixed;inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.05;
  background-image:radial-gradient(rgba(245,245,241,1) 1px, transparent 1.4px);
  background-size:14px 14px;
}

.wrap{max-width:1180px;margin:0 auto;position:relative;z-index:1;}
.wrap-sm{max-width:660px;margin:0 auto;position:relative;z-index:1;}
section{padding:110px 24px;position:relative;z-index:1;}
@media(min-width:640px){section{padding:110px 40px;}}
@media(min-width:1024px){section{padding:110px 80px;}}

/* ---------------- reveal on scroll ---------------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-delay-1{transition-delay:.08s;}
.reveal-delay-2{transition-delay:.16s;}
.reveal-delay-3{transition-delay:.24s;}
@media (prefers-reduced-motion: reduce){
  .reveal{transition:opacity .3s ease;transform:none !important;}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;}
}

/* ---------------- scribble underline accent (echoes the logo's swash) ---------------- */
.scribble{position:relative;display:inline-block;}
.scribble::after{
  content:"";
  position:absolute;left:-2%;right:-2%;bottom:-.12em;height:.22em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M2 12 C 60 2, 120 18, 180 8 S 260 2, 298 10' fill='none' stroke='%23FF5A1F' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:100% 100%;
}

/* ---------------- nav — no bar, just a floating hamburger ---------------- */
.nav{
  position:fixed;top:22px;right:22px;z-index:60;
  display:flex;align-items:center;
}

/* hamburger trigger */
.burger{
  position:relative;z-index:62;
  width:46px;height:46px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:2px solid var(--white);border-radius:50%;
  cursor:pointer;transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.burger:hover{border-color:var(--orange);transform:rotate(-6deg);}
.burger-lines{position:relative;width:18px;height:12px;}
.burger-lines span{
  position:absolute;left:0;width:100%;height:2px;background:var(--white);
  transition:transform .3s cubic-bezier(.16,1,.3,1), opacity .2s ease, top .3s ease;
}
.burger-lines span:nth-child(1){top:0;}
.burger-lines span:nth-child(2){top:5px;}
.burger-lines span:nth-child(3){top:10px;}
.nav.open .burger-lines span:nth-child(1){top:5px;transform:rotate(45deg);}
.nav.open .burger-lines span:nth-child(2){opacity:0;}
.nav.open .burger-lines span:nth-child(3){top:5px;transform:rotate(-45deg);}
.nav.open .burger{border-color:var(--orange);}

/* fullscreen overlay menu */
.nav-overlay{
  position:fixed;inset:0;z-index:55;
  background:var(--black);
  opacity:0;visibility:hidden;
  transition:opacity .4s ease, visibility 0s linear .4s;
  display:flex;flex-direction:column;
  padding:110px 24px 48px;
}
@media(min-width:640px){.nav-overlay{padding:120px 40px 56px;}}
.nav-overlay::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;
  background-image:radial-gradient(rgba(245,245,241,1) 1px, transparent 1.4px);
  background-size:14px 14px;
}
.nav.open + .nav-overlay,
body.nav-open .nav-overlay{
  opacity:1;visibility:visible;transition:opacity .4s ease;
}
.nav-overlay-links{
  position:relative;z-index:1;
  display:flex;flex-direction:column;gap:6px;
  margin:auto 0;
}
.nav-overlay-links a{
  font-family:'Anton';text-transform:uppercase;
  font-size:clamp(32px, 11vw, 64px);line-height:1.08;color:var(--white);
  transition:color .25s ease, transform .25s ease;
  transform:translateX(-14px);opacity:0;
}
.nav-overlay.show-links a{transform:translateX(0);opacity:1;}
.nav-overlay-links a:nth-child(1){transition-delay:.05s;}
.nav-overlay-links a:nth-child(2){transition-delay:.1s;}
.nav-overlay-links a:nth-child(3){transition-delay:.15s;}
.nav-overlay-links a:nth-child(4){transition-delay:.2s;}
.nav-overlay-links a:hover{color:var(--orange);}
.nav-overlay-links a span{font-family:'Anton';font-size:14px;color:var(--orange);vertical-align:super;margin-right:14px;}
.nav-overlay-bottom{
  position:relative;z-index:1;
  display:flex;flex-direction:column;gap:20px;
  padding-top:28px;border-top:1px solid var(--line);
}
@media(min-width:640px){.nav-overlay-bottom{flex-direction:row;align-items:center;justify-content:space-between;}}
.nav-overlay-socials{display:flex;gap:12px;}
.nav-overlay-socials a{
  width:40px;height:40px;border-radius:50%;border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;
  transition:border-color .2s ease, color .2s ease;color:rgba(245,245,241,.6);
}
.nav-overlay-socials a:hover{border-color:var(--orange);color:var(--orange);}

@media (prefers-reduced-motion: reduce){
  .nav-overlay-links a{transition:opacity .2s ease;transform:none;}
}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Inter',sans-serif;font-weight:600;font-size:15px;
  padding:15px 30px;border-radius:999px;cursor:pointer;
  border:2px solid transparent;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-solid{
  background:var(--orange);color:var(--black);
  box-shadow:4px 4px 0 var(--white);
}
.btn-solid:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--white);}
.btn-solid:active{transform:translate(0,0);box-shadow:2px 2px 0 var(--white);}
.btn-solid:disabled{opacity:.3;cursor:not-allowed;transform:none;box-shadow:4px 4px 0 var(--white);}
.btn-outline{
  background:transparent;color:var(--white);border-color:var(--white);
}
.btn-outline:hover{border-color:var(--orange);color:var(--orange);}

/* ---------------- sticker panel (replaces soft rounded card) ---------------- */
.sticker{
  position:relative;
  border:3px solid var(--white);
  border-radius:22px;
  background:var(--ink);
  box-shadow:6px 6px 0 rgba(255,90,31,.9);
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.sticker:hover{transform:translate(-3px,-3px) rotate(0deg) !important;box-shadow:9px 9px 0 rgba(255,90,31,.9);}
.tilt-l{transform:rotate(-1.6deg);}
.tilt-r{transform:rotate(1.4deg);}

/* ---------------- tag chip ---------------- */
.chip{
  display:inline-flex;align-items:center;
  border:2px solid var(--white);border-radius:999px;
  padding:8px 18px;font-size:13px;font-weight:600;
  letter-spacing:.02em;
  background:var(--black);
}

/* ---------------- footer ---------------- */
footer{
  position:relative;z-index:1;
  padding:72px 24px 32px;
  background:var(--ink);
}
@media(min-width:640px){footer{padding:80px 40px 32px;}}
@media(min-width:1024px){footer{padding:88px 80px 32px;}}
/* torn-ticket edge along the top of the footer */
footer::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:14px;
  background-image:radial-gradient(circle at 10px 0, transparent 9px, var(--ink) 9.5px);
  background-size:20px 14px;background-repeat:repeat-x;
}
.footer-grid{
  max-width:1180px;margin:0 auto;position:relative;z-index:1;
  display:grid;grid-template-columns:1fr;gap:48px;
}
@media(min-width:768px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr;gap:32px;}}
.footer-brand-col p{margin:18px 0 0;max-width:280px;color:rgba(245,245,241,.5);font-size:14px;line-height:1.6;}
.footer-brand-col img{height:36px;width:auto;}
.footer-heading{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:rgba(245,245,241,.4);margin:0 0 18px;}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.footer-col a{font-size:15px;color:rgba(245,245,241,.75);transition:color .2s ease;}
.footer-col a:hover{color:var(--orange);}
.social-icons{display:flex;flex-wrap:wrap;gap:10px;}
.social-icons a{
  width:38px;height:38px;border-radius:50%;border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:rgba(245,245,241,.6);
  transition:border-color .2s ease,color .2s ease,transform .2s ease;
}
.social-icons a:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-3px);}
.footer-bottom{
  max-width:1180px;margin:56px auto 0;padding-top:24px;
  border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:space-between;
  font-size:13px;color:rgba(245,245,241,.4);
}
@media(min-width:640px){.footer-bottom{flex-direction:row;}}
.back-top{
  display:inline-flex;align-items:center;gap:6px;
  color:rgba(245,245,241,.5);font-size:13px;cursor:pointer;background:none;border:none;font-family:inherit;
  transition:color .2s ease;
}
.back-top:hover{color:var(--orange);}

/* ---------------- misc ---------------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;color:rgba(245,245,241,.55);margin-bottom:22px;
}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--orange);transform:rotate(45deg);}