/* ==========================================================================
   YoTicks Override CSS
   Loaded AFTER Webflow CSS to override template styling.
   Design system: dark mode, Mango Grotesque, orange accent.
   ========================================================================== */


/* ==========================================================================
   1. FONT FACES
   ========================================================================== */

@font-face {
  font-family: 'Mango Grotesque';
  src: url('../fonts/MangoGrotesque-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mango Grotesque';
  src: url('../fonts/MangoGrotesque-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mango Grotesque';
  src: url('../fonts/MangoGrotesque-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mango Grotesque';
  src: url('../fonts/MangoGrotesque-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mango Grotesque';
  src: url('../fonts/MangoGrotesque-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================================
   2. CSS CUSTOM PROPERTIES
   ========================================================================== */

:root {
  --yt-bg: #000000;
  --yt-bg-dark: #0A0A0A;
  --yt-grey: #2A2A2A;
  --yt-text-secondary: #888888;
  --yt-text: #F5F5F5;
  --yt-orange: #FF6A00;
  --yt-orange-hover: #FF7F1F;
  --yt-font: 'Mango Grotesque', sans-serif;
  --yt-radius: 2px;
  --yt-border: rgba(255, 255, 255, 0.08);
  --yt-border-orange: rgba(255, 106, 0, 0.2);
}


/* ==========================================================================
   2b. LOGO COMPONENTS (icon + HTML text — replaces PNG logos)
   ========================================================================== */

/* --- Inline logo (navbar, footer, legal, cart) --- */
.yt-logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  white-space: nowrap;
}

.yt-logo__icon {
  height: 26px;
  width: auto;
}

.yt-logo__text {
  font-family: 'Montserrat', 'Poppins', var(--yt-font), sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.3px;
}

.yt-logo__yo {
  color: #FFFFFF;
}

.yt-logo__ticks {
  color: var(--yt-orange);
}

/* Footer variant — slightly larger */
.yt-logo--footer .yt-logo__icon {
  height: 32px;
}

.yt-logo--footer .yt-logo__text {
  font-size: 22px;
}

/* --- Hero logo (large, centered) --- */
.yt-hero-logo {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
}

.yt-hero-logo__icon {
  height: clamp(60px, 12vw, 120px);
  width: auto;
}

.yt-hero-logo__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.yt-hero-logo__wordmark {
  font-family: 'Montserrat', 'Poppins', var(--yt-font), sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 7vw, 72px);
  line-height: 1;
  letter-spacing: -1px;
}

.yt-hero-logo__yo {
  color: #FFFFFF;
}

.yt-hero-logo__ticks {
  color: var(--yt-orange);
}

.yt-hero-logo__tagline {
  font-family: 'Montserrat', 'Poppins', var(--yt-font), sans-serif;
  font-weight: 600;
  font-size: clamp(10px, 2vw, 18px);
  letter-spacing: 4px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1;
}


/* ==========================================================================
   3. GLOBAL RESETS
   ========================================================================== */

body,
.body,
.body-bg,
.overflow,
.horizontal-section,
.horizontal-shop {
  background-color: #000000 !important;
  color: var(--yt-text);
  font-family: var(--yt-font) !important;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Force Mango Grotesque on ALL elements — overrides Webflow's Lato/MuseoModerno/Nunito */
*, *::before, *::after,
h1, h2, h3, h4, h5, h6,
p, a, span, div, label, input, textarea, button,
.bio-heading, .hero-heading, .title, .date-text,
.main-paragraph, .navbar-link, .nav-link,
.card-heading, .heading-footer, .link-footer,
.text-block, .text-bold, .field-label, .text-field,
.submit-button, .succes-text, .error-text, .empty-text,
.price, .bold-text, .top-text, .text-credits,
.w-nav-link, .w-button, .w-input {
  font-family: var(--yt-font) !important;
}

*:not(svg):not(path):not(polygon):not(g) {
  border-color: var(--yt-border);
}

::selection {
  background-color: var(--yt-orange);
  color: #fff;
}


/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.hero-heading,
.bio-heading,
.card-heading,
.title {
  font-family: var(--yt-font);
  font-weight: 700;
  color: var(--yt-text);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

h1, .h1, .hero-heading {
  font-weight: 900;
}

h2, .h2, .bio-heading {
  font-weight: 700;
}

p,
.main-paragraph,
.paragraph,
.text-block {
  font-family: var(--yt-font);
  font-weight: 400;
  color: var(--yt-text);
  line-height: 1.6;
}

.date-text,
.subtitle,
.label,
.text-field-label {
  font-family: var(--yt-font);
  font-weight: 500;
  color: var(--yt-text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.8rem;
}

small,
.small-text {
  color: var(--yt-text-secondary);
}


/* ==========================================================================
   5. NAVBAR
   ========================================================================== */

.navbar,
.nav-menu,
.navbar-wrapper,
.navigation {
  background-color: transparent !important;
  background-image: none !important;
  border-bottom: none;
  align-items: center;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* Center nav links in the navbar */
.navbar .nav-menu {
  flex: 1;
  display: flex;
  justify-content: center;
}

.navbar .wrapper-menu-nav,
.navbar .navigation-right {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Hide the misaligned line under navbar */
.navbar-line {
  display: none !important;
}

/* Override Webflow purple on nav link underline */
.line-link-nav {
  background-color: var(--yt-orange) !important;
}

.navbar-link,
.nav-link,
.nav-menu-link {
  font-family: var(--yt-font);
  font-weight: 500;
  color: var(--yt-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  transition: color 0.2s ease;
}

.navbar-link:hover,
.nav-link:hover,
.nav-menu-link:hover,
.navbar-link.w--current,
.nav-link.w--current {
  color: var(--yt-orange);
}

/* Navbar logo — 30% smaller */
.navbar .brand,
.brand-logo {
  max-height: 40px;
}

.navbar .logo {
  max-height: 32px;
  width: auto;
}

.burger-line {
  background-color: var(--yt-text);
}

/* Mobile menu overlay */
.w-nav-overlay {
  background-color: var(--yt-bg);
}


/* ==========================================================================
   6. HERO SECTION
   ========================================================================== */

/* DO NOT override display/height/position on .hero-section — Webflow needs
   height:200vh + display:block + position:static for the scroll animation */

/* Hero logo — horizontal, width-constrained */
.logo-wrapper.first .image {
  width: 80vw;
  max-width: 600px;
  height: auto;
}

.hero-heading {
  font-weight: 900;
  font-size: clamp(2.5rem, 8vw, 6rem);
  line-height: 1.05;
  text-align: center;
  color: var(--yt-text);
}

.hero-heading .orange,
.hero-heading span {
  color: var(--yt-orange);
}


/* ==========================================================================
   7. BUTTONS
   ========================================================================== */

.submit-button,
.button,
.w-button,
.btn,
.cta-button,
a.button,
input[type="submit"] {
  font-family: var(--yt-font);
  font-weight: 600;
  background-color: var(--yt-orange);
  color: #fff;
  border: none;
  border-radius: var(--yt-radius);
  padding: 14px 32px;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.submit-button:hover,
.button:hover,
.w-button:hover,
.btn:hover,
.cta-button:hover,
a.button:hover,
input[type="submit"]:hover {
  background-color: var(--yt-orange-hover);
  color: #fff;
  transform: translateY(-1px);
}

.submit-button:active,
.button:active,
.w-button:active {
  transform: translateY(0);
}

/* Outlined / secondary button variant */
.button.outlined,
.button-secondary {
  background-color: transparent;
  border: 1px solid var(--yt-orange);
  color: var(--yt-orange);
}

.button.outlined:hover,
.button-secondary:hover {
  background-color: var(--yt-orange);
  color: #fff;
}


/* ==========================================================================
   8. FORM FIELDS
   ========================================================================== */

.text-field,
.textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
textarea,
select {
  font-family: var(--yt-font);
  font-weight: 400;
  background-color: var(--yt-bg-dark);
  color: var(--yt-text);
  border: 1px solid var(--yt-grey);
  border-radius: var(--yt-radius);
  padding: 12px 16px;
  font-size: 1rem;
  transition: border-color 0.2s ease;
}

.text-field:focus,
.textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border-color: var(--yt-orange);
  outline: none;
  box-shadow: 0 0 0 2px var(--yt-border-orange);
}

.text-field::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--yt-text-secondary);
  opacity: 1;
}

.text-field-label,
label {
  font-family: var(--yt-font);
  font-weight: 500;
  color: var(--yt-text);
  font-size: 0.85rem;
  margin-bottom: 6px;
}

/* Success / error states */
.w-form-done {
  background-color: var(--yt-bg-dark);
  color: var(--yt-text);
  border: 1px solid var(--yt-orange);
  border-radius: var(--yt-radius);
}

.w-form-fail {
  background-color: var(--yt-bg-dark);
  color: #ff4444;
  border: 1px solid #ff4444;
  border-radius: var(--yt-radius);
}


/* ==========================================================================
   9. LINKS
   ========================================================================== */

a {
  color: var(--yt-orange);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--yt-orange-hover);
  text-decoration: none;
}


/* ==========================================================================
   10. SECTION BACKGROUNDS
   ========================================================================== */

.section,
.content-section {
  background-color: var(--yt-bg);
}

.section.alt,
.section-dark,
.section:nth-child(even) {
  background-color: var(--yt-bg-dark);
}

.bg.orange,
.bg-orange,
.orange-section {
  background-color: var(--yt-bg) !important;
  color: #fff;
}

/* Fix salmon Webflow colors → dark theme */
.orange-wrapper {
  background-color: var(--yt-bg-dark) !important;
}

.gradient {
  background-image: linear-gradient(to top, var(--yt-bg-dark) 9%, rgba(21,21,21,0.89) 29%, rgba(21,21,21,0.64) 48%, transparent) !important;
}

.gradient-radius {
  background-image: none !important;
}

.bg {
  background-color: var(--yt-bg) !important;
}

.content-block,
.content-block.flex {
  background-color: rgba(255, 106, 0, 0.1) !important;
  border-color: var(--yt-border-orange) !important;
}

.bg.orange h1,
.bg.orange h2,
.bg.orange h3,
.bg.orange p,
.bg-orange h1,
.bg-orange h2,
.bg-orange h3,
.bg-orange p {
  color: #fff;
}


/* ==========================================================================
   11. CARDS & CONTENT BLOCKS
   ========================================================================== */

.card,
.event-card {
  background-color: var(--yt-bg-dark);
  border: 1px solid var(--yt-border);
  border-radius: var(--yt-radius);
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

/* Keep original Webflow styling on content-block-wrapper (slider cards) */
.content-block-wrapper {
  border: none;
  border-radius: 0;
  overflow: visible;
}

.content-block-wrapper:hover,
.card:hover,
.product-card-shop:hover,
.event-card:hover {
  border-color: var(--yt-border-orange);
  transform: translateY(-2px);
}

.card-heading {
  font-family: var(--yt-font);
  font-weight: 700;
  color: var(--yt-text);
}

.card-description,
.card-text {
  color: var(--yt-text-secondary);
}


/* ==========================================================================
   12. FOOTER
   ========================================================================== */

.footer,
.footer-background,
.footer-section {
  background-color: var(--yt-bg);
  background-image: none !important;
  border-top: 1px solid var(--yt-border);
  color: var(--yt-text-secondary);
}

.footer a {
  color: var(--yt-text-secondary);
}

.footer a:hover {
  color: var(--yt-orange);
}

.footer h4,
.footer h5,
.footer .heading {
  color: var(--yt-text);
  font-family: var(--yt-font);
  font-weight: 600;
}

.footer .copyright,
.footer .small-text {
  color: var(--yt-text-secondary);
  font-size: 0.8rem;
}


/* ==========================================================================
   13. PARALLAX SECTION
   ========================================================================== */

.parallax-section {
  position: relative;
  flex-direction: column;
  min-height: 80vh;
  height: auto;
  background-image: url('../images/parallax-features.webp') !important;
  background-position: 50% !important;
  background-size: cover !important;
}

.parallax-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  pointer-events: none;
}

.parallax-section > * {
  position: relative;
  z-index: 1;
}

.parallax-section h1,
.parallax-section h2,
.parallax-section h3,
.parallax-section .heading {
  color: var(--yt-text);
}


/* ==========================================================================
   14. HORIZONTAL SCROLL SECTIONS
   ========================================================================== */

.horizontal-section,
.horizontal-shop,
.horizontal-wrapper {
  background-color: var(--yt-bg-dark);
}

/* Webflow IX2 disabled — GSAP handles the horizontal scroll with scrub delay.
   overflow: clip instead of hidden so position:sticky still works on children.
   Height 450vh (up from 300vh) to give enough scroll room for all 6 cards + scrub delay. */
.horizontal-shop.content-wrap {
  overflow: clip;
  height: 450vh;
}

/* Uniform content blocks: same size, same spacing for all 4 categories.
   Override Webflow JS animations (only 3 blocks are wired) — force all blocks
   to full opacity and scale so they look identical. CSS handles hover. */
.content-block-wrapper,
.content-block-wrapper._2,
.content-block-wrapper._3 {
  width: 24em;
  height: 24em;
  margin-left: 4em;
  margin-right: 4em;
  flex: none;
  border-radius: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-position: 50%;
  background-size: cover;
  /* Override Webflow JS inline styles that animate only 3 blocks */
  opacity: 1 !important;
  transform: scale(1) !important;
  transition: transform 0.4s ease, box-shadow 0.4s ease !important;
}

.content-block-wrapper:hover,
.content-block-wrapper._2:hover,
.content-block-wrapper._3:hover {
  transform: scale(1.04) !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

/* Wider horizontal scroll to fit 4 blocks + composition */
.horizontal-scrollable-section {
  width: 900vw;
}

@media screen and (min-width: 1920px) {
  .content-block-wrapper,
  .content-block-wrapper._2,
  .content-block-wrapper._3 {
    width: 34em;
    height: 34em;
  }
}

@media screen and (max-width: 767px) {
  .content-block-wrapper,
  .content-block-wrapper._2,
  .content-block-wrapper._3 {
    width: 75vw;
    height: 65vh;
    max-height: 320px;
    margin-left: 10px;
    margin-right: 10px;
  }
}


/* ==========================================================================
   15. INSTAGRAM / CTA SECTION
   ========================================================================== */

.instagram-section,
.cta-section {
  background-color: var(--yt-bg-dark);
}

.instagram-section h2,
.cta-section h2 {
  color: var(--yt-text);
}

.instagram-section a,
.cta-section a {
  color: var(--yt-orange);
}


/* ==========================================================================
   16. GRADIENT & ORANGE ELEMENTS
   ========================================================================== */

.gradient-text,
.text-gradient {
  background: linear-gradient(135deg, var(--yt-orange), var(--yt-orange-hover));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.divider-orange,
.accent-line {
  background-color: var(--yt-orange);
}

.dot,
.bullet {
  background-color: var(--yt-orange);
}


/* ==========================================================================
   17. HIDE ECOMMERCE ELEMENTS
   ========================================================================== */

.wrapper-cart,
.cart,
.cart-button,
.cart-icon,
.cart-quantity,
.w-commerce-commercecartcontainerwrapper,
.w-commerce-commercecartwrapper,
.w-commerce-commercecartcontainer,
.search,
.search-button,
.search-icon,
.shop-button,
.price,
.price-wrapper,
.add-to-cart,
.checkout-button,
.w-commerce-commerceaddtocartbutton,
.w-commerce-commercecheckoutplaceholder {
  display: none !important;
}


/* ==========================================================================
   18. SCROLLBAR
   ========================================================================== */

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--yt-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--yt-grey);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--yt-text-secondary);
}


/* ==========================================================================
   19. UTILITY OVERRIDES
   ========================================================================== */

.w-richtext {
  color: var(--yt-text);
}

.w-richtext h2,
.w-richtext h3 {
  color: var(--yt-text);
}

.w-richtext a {
  color: var(--yt-orange);
}

.w-richtext blockquote {
  border-left-color: var(--yt-orange);
  color: var(--yt-text-secondary);
}

/* Webflow lightbox overlay */
.w-lightbox-backdrop {
  background-color: rgba(11, 11, 11, 0.92);
}

/* Webflow tabs */
.w-tab-link {
  font-family: var(--yt-font);
  color: var(--yt-text-secondary);
}

.w-tab-link.w--current {
  color: var(--yt-orange);
  border-bottom-color: var(--yt-orange);
}

.w-tab-content {
  background-color: transparent;
}

/* Webflow slider arrows */
.w-slider-arrow-left,
.w-slider-arrow-right {
  color: var(--yt-text);
}

.w-slider-dot {
  background-color: var(--yt-grey);
}

.w-slider-dot.w--active {
  background-color: var(--yt-orange);
}




/* ==========================================================================
   20. RESPONSIVE
   ========================================================================== */

/* Tablet */
@media screen and (max-width: 991px) {
  .hero-heading {
    font-size: clamp(2rem, 7vw, 4rem);
  }

  /* Force dark navbar on tablet (Webflow sets gradient) */
  .navbar {
    background-color: transparent !important;
    background-image: linear-gradient(rgba(0,0,0,0.7), transparent) !important;
  }

  .nav-menu {
    background-color: var(--yt-bg) !important;
  }

  .w-nav-overlay {
    background-color: var(--yt-bg) !important;
  }

  .navbar-link,
  .nav-link {
    color: var(--yt-text);
    border-bottom: 1px solid var(--yt-border);
    padding: 16px 20px;
  }

  .navbar-link:hover,
  .nav-link:hover {
    color: var(--yt-orange);
  }

  .burger-line {
    background-color: var(--yt-text);
  }

  /* Hide old Webflow arrow slider — replaced by stacked cards */
  .responsive-slider {
    display: none !important;
  }

  /* Hide desktop horizontal section on mobile — replaced by yt-cats-mobile */
  .horizontal-section {
    display: none !important;
  }

  /* ---- KILL HORIZONTAL SCROLL SECTIONS ON TABLET/MOBILE ---- */
  /* These use position:sticky + height:300vh for desktop scroll.
     On mobile they create massive empty black areas. Reset everything. */
  .horizontal-shop,
  .horizontal-shop.content-wrap {
    height: auto !important;
    position: relative !important;
    z-index: 5 !important;
    overflow: visible !important;
    display: block !important;
  }

  .horizontal-div-wrapper-second {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
  }

  .overflow-mask-second {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
  }

  .horizontal-scrollable-section-second,
  .horizontal-scrollable-section-second.auto {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
  }

  .horizontal-content-second {
    position: static !important;
    margin: 0 !important;
  }

  /* Hide desktop horizontal section (categories) — replaced by yt-cats-mobile */
  .horizontal-section {
    display: none !important;
  }

  .overflow {
    overflow: visible !important;
    position: relative !important;
    z-index: 5 !important;
  }
}

/* Hide video on desktop — shown only in mobile media query */
.hero-video-mobile {
  display: none;
}

/* Mobile landscape */
@media screen and (max-width: 767px) {
  .hero-heading {
    font-size: clamp(1.8rem, 8vw, 3rem);
  }

  h2, .h2, .bio-heading {
    font-size: clamp(1.5rem, 6vw, 2.4rem);
  }

  .submit-button,
  .button,
  .w-button {
    width: 100%;
    text-align: center;
    padding: 14px 24px;
  }

  .content-block-wrapper,
  .card,
  .product-card-shop {
    margin-bottom: 16px;
  }

  /* Fix salmon background leak on intro-store (Webflow sets --light-salmon) */
  .intro-store {
    background-color: var(--yt-bg) !important;
  }

  /* ---- MOBILE HERO ---- */

  /* Hero section container */
  .hero-section {
    background-color: var(--yt-bg) !important;
    height: auto !important;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Hero background image via ::before */
  .hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.45)),
                url('../images/hero.webp') center / cover no-repeat;
    z-index: 0;
  }

  /* Logo entrance — scale + glow */
  .logo-wrapper.first {
    z-index: 3 !important;
    height: auto !important;
    min-height: unset !important;
    padding-top: 120px !important;
    padding-bottom: 0 !important;
    animation: heroLogoEntrance 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .logo-wrapper.first .image {
    height: auto;
    width: 70vw;
    max-width: 300px;
    object-fit: contain;
  }

  .logo-wrapper.hidden {
    z-index: 3 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    height: auto !important;
    min-height: unset !important;
    padding: 20px 24px 60px !important;
  }

  /* Staggered text reveal with blur */
  .hero-heading._1 {
    opacity: 0;
    animation: heroTextReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
  }

  .hero-heading:not(._1) {
    opacity: 0;
    animation: heroTextReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.85s forwards;
  }

  .hero-tagline {
    opacity: 0;
    animation: heroTaglineReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.2s forwards;
  }

  .hero-buttons {
    opacity: 0;
    animation: heroButtonsReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.5s forwards;
  }

  @keyframes heroLogoEntrance {
    0% { opacity: 0; transform: scale(0.5) translateY(-30px); filter: blur(8px); }
    60% { opacity: 1; transform: scale(1.08) translateY(0); filter: blur(0); }
    100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
  }

  @keyframes heroTextReveal {
    from { opacity: 0; transform: translateY(40px) scale(0.95); filter: blur(6px); }
    to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  }

  @keyframes heroTaglineReveal {
    from { opacity: 0; transform: translateY(20px); letter-spacing: 0.3em; }
    to   { opacity: 1; transform: translateY(0); letter-spacing: 0.08em; }
  }

  @keyframes heroButtonsReveal {
    from { opacity: 0; transform: translateY(30px) scale(0.9); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* Parallax section */
  .parallax-section {
    background-color: var(--yt-bg) !important;
  }

  /* Footer dark bg */
  .footer,
  .footer.about,
  .footer.blog {
    background-color: var(--yt-bg) !important;
  }

  .footer-background {
    background-color: var(--yt-bg) !important;
    background-image: none !important;
  }

  /* Step cards responsive */
  .step-card {
    min-width: unset;
    width: 100%;
    height: 300px;
  }

  /* ---- WAITLIST SECTION FIX ---- */
  /* "Sois parmi les premiers" is position:absolute and overlaps the form.
     Fix: make it static, stack naturally. */
  .size-section {
    background-color: var(--yt-bg) !important;
    background-image: none !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    padding: 80px 20px 60px !important;
    height: auto !important;
    position: relative !important;
  }

  .bio-heading.home {
    position: static !important;
    text-align: center;
    font-size: clamp(2rem, 8vw, 3.5rem) !important;
    margin-bottom: 24px;
  }

  .orange-wrapper {
    display: none !important;
  }

  .form-wrapper {
    position: static !important;
    padding: 0 !important;
    height: auto !important;
    width: 100%;
    max-width: 500px;
    background-color: transparent !important;
  }

  .main-paragraph {
    text-align: center;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 28px;
    color: var(--yt-text-secondary) !important;
  }

  .container-form {
    flex-direction: column !important;
    gap: 16px;
  }

  /* ---- STEP CARDS / "COMMENT CA MARCHE" ---- */
  .intro-store {
    display: flex !important;
    position: static !important;
    justify-content: center;
    background-color: var(--yt-bg) !important;
    padding: 60px 20px 20px !important;
  }

  .bio-heading.auto {
    display: block !important;
    font-size: clamp(1.5rem, 6vw, 2.4rem) !important;
    text-align: center;
    margin-top: 0 !important;
    color: var(--yt-text) !important;
  }

  /* ---- HIDE WEBFLOW STEP CARDS ON MOBILE ---- */
  .horizontal-shop.content-wrap {
    display: none !important;
  }

  /* ---- SHOW CLEAN MOBILE STACKED CARDS ---- */
  .yt-steps-mobile {
    display: block !important;
    position: relative;
    z-index: 5;
    background-color: var(--yt-bg);
  }

  /* Form section dark */
  .form-wrapper {
    background-color: transparent !important;
  }

  /* Content blocks */
  .content-block {
    background-color: transparent !important;
  }

  .content-block.flex {
    background-color: transparent !important;
  }

  /* Bio section */
  .bio-heading.footer {
    color: var(--yt-text) !important;
  }

  /* All sections dark */
  .body-search,
  .body-color {
    background-color: var(--yt-bg) !important;
  }

  /* Hide old Webflow arrow slider */
  .responsive-slider {
    display: none !important;
  }

  .slide-image {
    border-radius: var(--yt-radius);
  }

  .title {
    color: var(--yt-text) !important;
  }

  .wrapper-text {
    background-color: transparent !important;
  }

  .date-text {
    color: var(--yt-orange) !important;
  }
}

/* Mobile portrait */
@media screen and (max-width: 479px) {
  .hero-heading {
    font-size: 2rem;
  }

  h2, .h2, .bio-heading {
    font-size: 1.5rem;
  }

  .section,
  .content-section {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Force dark + visible on small screens */
  .intro-store {
    display: flex !important;
    position: static !important;
    justify-content: center;
    background-color: var(--yt-bg) !important;
  }

  .navbar {
    padding: 16px 20px !important;
  }

  /* "Comment ca marche" title — Webflow hides it at 479px */
  .bio-heading.auto {
    display: block !important;
    font-size: 1.6rem !important;
  }

  /* Webflow step cards hidden on small mobile too */
  .horizontal-shop.content-wrap {
    display: none !important;
  }

  /* Hero — smaller icon, tighter spacing */
  .logo-wrapper.first {
    padding-top: 90px !important;
  }

  .logo-wrapper.first .image {
    width: 65vw;
    max-width: 260px;
  }

  .logo-wrapper.hidden {
    padding: 16px 16px 40px !important;
  }
}

/* ==========================================================================
   21. YOTICKS HERO IMAGE OVERRIDE
   ========================================================================== */

/* Hero background — DO NOT touch .fixed-image opacity (Webflow animations control it).
   HERO_1.jpg has been replaced with the concert image at the file level.
   Only override background-image sources, not visibility. */

/* Desktop parallax background (position:fixed, animated by Webflow JS) */
.fixed-image {
  background-image: url('../images/hero.webp') !important;
}

/* Mobile/tablet: hero-section gets direct background */
.hero-section {
  background-image: url('../images/hero.webp') !important;
  background-position: 50% 50% !important;
  background-size: cover !important;
}

/* Horizontal section parallax — concert hero image (this is the ONLY .fixed-image
   visible on desktop, animated to opacity:1 by Webflow JS on scroll) */
.horizontal-section > .fixed-image {
  background-image: url('../images/hero.webp') !important;
}

/* ==========================================================================
   22. HIDE ECOMMERCE & UNUSED ELEMENTS
   ========================================================================== */

.wrapper-cart,
.search,
.cart,
.cart-button,
.w-commerce-commercecartwrapper {
  display: none !important;
}

/* ==========================================================================
   23. FEATURES GRID (Ce que fait YoTicks)
   ========================================================================== */

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 40px auto 0;
  padding: 0 20px;
}

.feature-item {
  text-align: center;
  padding: 28px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--yt-border);
  border-radius: var(--yt-radius);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.feature-item:hover {
  border-color: var(--yt-border-orange);
  transform: translateY(-2px);
}

.feature-icon {
  display: block;
  color: var(--yt-orange);
  font-size: 24px;
  margin-bottom: 12px;
}

.feature-item h4 {
  color: var(--yt-text);
  font-family: var(--yt-font);
  font-weight: 500;
  font-size: 15px;
  margin: 0;
  line-height: 1.4;
}

@media screen and (max-width: 767px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media screen and (max-width: 479px) {
  .features-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .feature-item {
    padding: 20px 12px;
  }
  .feature-item h4 {
    font-size: 13px;
  }
}

/* ==========================================================================
   23b. WAITLIST / "COMMENT CA MARCHE" OVERLAP FIX
   ========================================================================== */

/* Give the size-section enough bottom space so the absolute-positioned
   .intro-store ("Comment ça marche") does not overlap the submit button */
.size-section {
  padding-bottom: 12em;
}

/* Reduce the intro-store bottom padding so it sits closer to the section edge */
.intro-store {
  padding-bottom: 4%;
  margin-top: 0;
}

@media screen and (max-width: 991px) {
  .size-section {
    padding-bottom: 10em;
  }
}

@media screen and (max-width: 479px) {
  .size-section {
    padding-bottom: 8em;
  }
}

/* ==========================================================================
   24. STEP CARDS
   ========================================================================== */

/* Override product-card-shop styles when used as step-card */
.product-card-shop.home.step-card {
  background-color: #1A1A1A;
  padding: 0;
}

.step-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 280px;
  height: 360px;
  padding: 24px;
  border-radius: var(--yt-radius);
  position: relative;
  overflow: hidden;
  background-color: #1A1A1A;
}

.step-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.step-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 30%, rgba(0,0,0,0.85) 100%);
  z-index: 1;
}

.step-card .step-number {
  position: relative;
  z-index: 2;
  color: var(--yt-orange);
  font-family: var(--yt-font);
  font-weight: 900;
  font-size: 48px;
  line-height: 1;
  margin-bottom: 8px;
}

.step-card .step-title {
  position: relative;
  z-index: 2;
  color: var(--yt-text);
  font-family: var(--yt-font);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
}

.step-card.placeholder {
  background-color: #1A1A1A;
}

/* ==========================================================================
   25. HERO BUTTONS
   ========================================================================== */

.hero-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 24px;
}

.hero-buttons .btn-primary {
  display: inline-block;
  padding: 14px 32px;
  background: var(--yt-orange);
  color: #fff;
  font-family: var(--yt-font);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  border-radius: var(--yt-radius);
  transition: background 0.3s ease, transform 0.2s ease;
}

.hero-buttons .btn-primary:hover {
  background: var(--yt-orange-hover);
  transform: translateY(-1px);
}

.hero-buttons .btn-outline {
  display: inline-block;
  padding: 14px 32px;
  background: transparent;
  color: var(--yt-text);
  font-family: var(--yt-font);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--yt-radius);
  transition: border-color 0.3s ease, transform 0.2s ease;
}

.hero-buttons .btn-outline:hover {
  border-color: var(--yt-orange);
  transform: translateY(-1px);
}

.hero-tagline {
  color: #fff;
  font-family: var(--yt-font);
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  margin-top: 16px;
  letter-spacing: 2px;
}

@media screen and (max-width: 479px) {
  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }
  .hero-tagline {
    font-size: 14px;
  }
}

/* ==========================================================================
   26. MOBILE STACKED CARDS — CLEAN SECTION (no Webflow classes)
   ========================================================================== */

/* Hidden on desktop */
.yt-steps-mobile {
  display: none;
}

@media screen and (max-width: 991px) {
  .yt-steps-mobile {
    display: block;
    position: relative;
    z-index: 5;
    background: var(--yt-bg);
  }

  .yt-steps-mobile__track {
    height: 450vh;
    position: relative;
  }

  .yt-steps-mobile__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .yt-steps-mobile__stack {
    position: relative;
    width: min(85vw, 380px);
    height: clamp(380px, 55vh, 480px);
    overflow: hidden;
    border-radius: 16px;
  }

  .yt-step-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    will-change: transform;
  }

  .yt-step-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }

  .yt-step-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 30%, rgba(0,0,0,0.85) 100%);
  }

  .yt-step-card__num {
    position: absolute;
    bottom: 44px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--yt-font);
    font-weight: 900;
    font-size: 2.8rem;
    color: var(--yt-orange);
    line-height: 1;
  }

  .yt-step-card__title {
    position: absolute;
    bottom: 16px;
    left: 0;
    right: 0;
    text-align: center;
    font-family: var(--yt-font);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--yt-text);
  }
}

@media screen and (max-width: 479px) {
  .yt-steps-mobile__stack {
    width: 90vw;
    height: clamp(340px, 50vh, 420px);
  }
}

/* ==========================================================================
   27. MOBILE CATEGORIES SWIPE SLIDER
   ========================================================================== */

.yt-cats-mobile {
  display: none;
}

@media screen and (max-width: 991px) {
  .yt-cats-mobile {
    display: block;
    position: relative;
    z-index: 5;
    background: var(--yt-bg);
    padding: 20px 0 40px;
  }

  .yt-cats-mobile__slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;
    padding: 0 20px;
  }

  .yt-cats-mobile__slider::-webkit-scrollbar {
    display: none;
  }

  .yt-cat-card {
    flex-shrink: 0;
    width: 80vw;
    max-width: 360px;
    height: 65vh;
    max-height: 520px;
    min-height: 380px;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    scroll-snap-align: center;
  }

  .yt-cat-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .yt-cat-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 40%, rgba(0,0,0,0.8) 100%);
  }

  .yt-cat-card__content {
    position: absolute;
    bottom: 24px;
    left: 24px;
    z-index: 1;
  }

  .yt-cat-card__num {
    font-family: var(--yt-font);
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--yt-orange);
    display: block;
    margin-bottom: 4px;
  }

  .yt-cat-card__name {
    font-family: var(--yt-font);
    font-weight: 700;
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    color: #fff;
    margin: 0;
    line-height: 1.1;
  }
}

/* ==========================================================================
   28. MOBILE "TOUS LES EVENTS" — SCATTERED COLLAGE
   ========================================================================== */

.yt-events-mobile {
  display: none;
}

@media screen and (max-width: 991px) {
  .yt-events-mobile {
    display: block;
    position: relative;
    z-index: 5;
    background: var(--yt-bg);
    padding: 0;
    overflow: hidden;
  }

  .yt-events-mobile__collage {
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 420px;
  }

  .yt-ev {
    position: absolute;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  }

  .yt-ev img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Title overlaid in the center */
  .yt-events-mobile__title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    font-family: var(--yt-font);
    font-weight: 900;
    font-size: clamp(2.5rem, 12vw, 4.5rem);
    color: #fff;
    text-align: center;
    line-height: 1;
    text-shadow: 0 4px 30px rgba(0,0,0,0.6);
    pointer-events: none;
  }

  .yt-events-mobile__sub {
    font-family: var(--yt-font);
    font-weight: 700;
    font-size: clamp(1.8rem, 8vw, 3rem);
    color: #fff;
    text-align: center;
    line-height: 1.1;
    margin: 0;
    padding: 24px 20px 40px;
  }
}

/* ==========================================================================
   29. MOBILE FOOTER — COMPACT LAYOUT
   ========================================================================== */

@media screen and (max-width: 991px) {
  .footer.blog.margin {
    position: relative;
    z-index: 5;
  }

  /* Hide the big "YoTicks" heading + tagline — redundant on mobile */
  .footer .footer-form {
    display: none !important;
  }

  /* Footer grid: links left, logo right — single row */
  .grid-menu-footer {
    display: flex !important;
    align-items: flex-start;
    gap: 0;
    padding: 40px 20px 24px !important;
  }

  /* Navigation + Informations side by side */
  .grid-menu-footer .list-footer {
    flex: 1;
  }

  .grid-menu-footer .list-footer:first-child {
    margin-right: 8px;
  }

  .heading-footer {
    font-size: 0.85rem !important;
    margin-bottom: 8px;
  }

  .link-footer {
    font-size: 0.82rem !important;
    padding: 3px 0;
  }

  /* Logo: right side, smaller */
  .footer-logo-link {
    flex-shrink: 0;
    align-self: center;
  }

  .footer-logo-link img {
    width: 140px !important;
    height: auto;
  }

  /* Bottom bar compact */
  .footer-details {
    padding: 0 20px 20px;
  }

  .footer-grid.bottom {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }

  .text-bold,
  .top-text {
    font-size: 0.72rem !important;
  }
}

/* ==========================================================================
   30. ACCESSIBILITY — REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}