html {scroll-behavior: smooth;}
* {transition: all .3s ease-in}

/* For WebKit browsers */
::-webkit-scrollbar {
  width: 8px;
  background: linear-gradient(180deg,rgb(40,24,71) 1%,rgb(6,4,14) 50%,rgb(23,17,46) 80%,rgb(41,24,72) 100%);
}
::-webkit-scrollbar-track {
  background-color: transparent !important;
}
::-webkit-scrollbar-thumb {
  background-color: var(--wp--preset--color--accent-4)  !important;
  height: 5px !important;
  border-radius: 4px;
  border: 2px solid transparent !important;
  background-clip: padding-box;
}

header::before, body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none
}


header::before {
  background: linear-gradient(90deg, #c251fb, transparent);
  height: 80vh;
  opacity: .4;
  filter: blur(140px);
  top: -110px;
  z-index: 2
}

body::before {
  background: var(--purple-noise);
  background-size: 500px 500px;
  opacity: 1;
  z-index: 1
}

body {position: relative}

.bento-container {max-width: clamp(250px, 85vw, 1280px) !important; margin: auto}

.bento-hero-section h1 {margin-block-start: -96px}

.wp-block-cover {z-index: 3}

figure {position: relative; z-index: 3}

.bento-cover .wp-block-cover__image-background {opacity: .12;}
.bento-cover-image {position: absolute; right: 0;}

footer {
  & p, & a {font-size: clamp(13px, 1vw, 16px) !important};
  & .bento-footer-social-medias {gap: clamp(10px, 1vw, 15px); & figure:hover {scale: 1.2; cursor: pointer}}
}

@media (width <= 599px) {
  header .wp-block-image img, .footer-logo img {max-width: clamp(95px, 40vw, 150px); height: auto !important} /*logo*/
  
  header nav:not(.bento-mobile-nav) {display: none}

  .bento-mobile-nav .wp-block-navigation__responsive-container.is-menu-open {padding: 20px 40px}

  .bento-hero-section .wp-block-button__link,
  .bento-cover-text .wp-block-button__link {min-width: 185px}

  /* To override the height predifined in the gutenberg editor (bcz ggle page speed forced me to set explicit width and height so i had  to trick it out this way) */
  .bento-hero-section figure img {height: auto !important}

  .bento-grid-3 {grid-template-columns: 1fr; & .wp-block-group {flex-wrap: nowrap}}

  /* fixing (the cover in the bottom in mobiles has no padding) */
  .wp-block-cover.bento-cover {padding: 0 15px !important}

  .bento-cover-text {
    & h4, & p {text-align: center}
    & .wp-block-buttons {justify-content: center !important; padding-top: 30px}
    & .wp-block-buttons .is-style-outline a {border: 1px solid #ffffff4a !important}
  }
  
  .bento-cover-image {display: none;}
  
  footer .bento-container {grid-template-columns: 1fr}
}

@media (width >= 600px) {
  .bento-mobile-nav {display: none !important;}
  
  header .wp-block-image img, .footer-logo img {max-width: clamp(95px, 18.5vw, 206px); height: auto !important}

  .bento-grid-3 {grid-template-columns: 1fr; & .wp-block-group {flex-wrap: nowrap}}

  .bento-cover-text {position: absolute; z-index: 2}
  .bento-cover-image {z-index: 1; opacity: 0.08}

  .bento-cover-text {
    & h4, & p {text-align: center}
    & .wp-block-buttons {justify-content: center; padding-top: 30px}
    & .wp-block-buttons .is-style-outline a {border: 1px solid #ffffff4a !important}
  }
}

@media (width >= 700px) {
  .bento-grid-3 {
    grid-template-columns: repeat(2, 1fr); 
    & .wp-block-group {flex-wrap: wrap};
  }
}

@media (width >= 992px) {
  .bento-cover-text {
    left: 30px;
    & h4, & p {text-align: left};
    & .wp-block-buttons {justify-content: left};
    & .wp-block-buttons .is-style-outline a {border: 1px solid transparent !important}
  }
  
  .bento-cover-image {opacity:1}
  
  .bento-grid-3 {grid-template-columns: repeat(3, 1fr); & .wp-block-group {flex-wrap: wrap}}
}

@media (width > 1200px) {
  .bento-cover-text {left: 60px}
}




/* ———————————————————————————————————————————
    Bento Animations
  ——————————————————————————————————————————— */



/* ———————————————————————————————————————————
    1. Button “shine” hover effect
  ——————————————————————————————————————————— */
  .wp-block-button__link {
    position: relative;
    overflow: hidden;
    z-index: 1;
    display: inline-block;
  }
  .wp-block-button__link::before {
    content: '';
    position: absolute;
    top: 0; left: -101%;
    width: 100%; height: 100%;
    background: rgba(255,255,255,0.2);
    transform: skewX(-20deg);
    transition: left 0.7s ease;
    pointer-events: none;
  }
  .wp-block-button__link:hover::before {
    left: 200%;
  }
    
  /* ———————————————
    2. Tilt base styles
  ——————————————— */
  figure:not(.bento-cover-image figure), .bento-grid-3 .wp-block-group.has-border-color {
    transform-style: preserve-3d;
    transition: transform 0.2s ease-out;
    will-change: transform;
  }
  
  /* ———————————————
    3. Follow-me circle cursor
  ——————————————— */
  .custom-cursor {
    position: fixed;
    top: 0; left: 0;
    width: 40px;
    height: 40px;
    border: 2px solid #f7e60057;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    /* ← add will-change to hint the browser */
    will-change: transform, opacity;
    /* ← transition on transform (for scale) and opacity */
    transition-property: transform, opacity;
    /* ← longer duration + smoother easing */
    transition-duration: 0.4s, 0.2s;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94), ease-in-out;
    opacity: 0;
    z-index: 9999;
  }
  
  .custom-cursor.active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  
  
  @keyframes pulse {
    from { transform: translate(-50%, -50%) scale(1); }
    to   { transform: translate(-50%, -50%) scale(1.15); }
  }
  
  .custom-cursor.active {
    animation: pulse 1s infinite alternate ease-in-out;
    opacity: 1;
    /* remove the transform transition if you go this route */
    transition: opacity 0.2s ease-out;
  }
  
  /* ———————————————
    4. auto animations
  ——————————————— */
  
  /* Fade element base style */
  section, .wp-block-media-text {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.5s ease-out, transform 0.9s ease-out;
    will-change: opacity, transform;
  }
  
  /* Faded in state */
  section.fade-in, .wp-block-media-text.fade-in {
    opacity: 1;
    transform: translateY(0);
  }
  
  section,
  .wp-block-media-text {
    position: relative;    /* create a positioned context */
    z-index: 2;            /* any number > 1 (because your body::before is z-index:1) */
  }