/*//////////////////////////////////////////////////////////////////////////////////////////*/
/* CUSTOM CSS (ADD YOUR CSS HERE!) */
/*//////////////////////////////////////////////////////////////////////////////////////////*/

/* animated button start */
@layer properties {
  @property --bg-position { syntax: "<number>"; inherits: true; initial-value: 100; }
  @property --after-blur { syntax: "<number>"; inherits: true; initial-value: 10; }
  @property --after-opacity { syntax: "<number>"; inherits: true; initial-value: 1; }
  @property --before-opacity { syntax: "<number>"; inherits: true; initial-value: 0.3; }
  @property --after-pos-y { syntax: "<number>"; inherits: true; initial-value: 10; }
  @property --btn-scale { syntax: "<number>"; inherits: true; initial-value: 1; }
}

:root {
  --btn-bg: hsl(0 0% 0%);
  --btn-border-width: 1.5;

  --bg-position: 100;
  --after-blur: 10;
  --after-opacity: 1;
  --after-pos-y: 10;
  --before-opacity: 0.3;
  --btn-scale: 1;

  --ring-blur: 10;
  --ring-opacity: 0.0;

  --color-white: hsl(0 0% 100%);
  --color-cyan: hsl(180 100% 50%);
  --color-blue: hsl(240 100% 50%);
  --color-purple: hsl(270 100% 50%);
  --color-pink: hsl(330 40% 70%);
  --color-red: hsl(0 100% 50%);
  --color-yellow: hsl(60 100% 50%);
  --color-lime: hsl(90 100% 75%);
  --btn-radius: 12px;
}

/* Base button class for regular HTML buttons */
.btn-glowing-neon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1em 1.2em;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.15ch;
  text-decoration: none !important;
  border-radius: var(--btn-radius);
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: white;
  border: none;
  cursor: pointer;
  outline: none;
  overflow: visible;
  z-index: 1;
  
  transform: scale(var(--btn-scale));
  transition:
    --bg-position 1.5s ease,
    --btn-scale 0.1s cubic-bezier(.76, -0.25, .51, 1.13),
    --before-opacity 0.25s ease,
    --ring-blur 0.25s ease,
    --ring-opacity 0.25s ease;

  --btn-border-width: 3;
}

.btn-glowing-neon--sm {
  padding: 0.6em 0.8em;
  font-size: 13px;
  --btn-radius: 8px;
  --btn-border-width: 2;
}

.btn-glowing-neon--sm::before,
.btn-glowing-neon--sm::after {
  border-radius: var(--btn-radius);
}

.btn-glowing-neon .neon-outline__label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    background: linear-gradient(
        to right,
        var(--color-white),
        var(--color-white),
        var(--color-cyan),
        var(--color-blue),
        var(--color-purple),
        var(--color-pink),
        var(--color-red),
        var(--color-yellow),
        var(--color-lime),
        var(--color-white),
        var(--color-white)
    )
    no-repeat calc(var(--bg-position) * 1%) 0% / 900%;

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 650;
    
    /* Fallback for browsers that don't support background-clip: text */
    /* text-fill-color is non-standard but used in webkit */
    -webkit-text-fill-color: transparent;
}

.btn-glowing-neon .neon-outline__label i,
.btn-glowing-neon .neon-outline__label span {
    /* If you have icons or text inside that should be white or inherited */
}

/* Use before for the border effect */
.btn-glowing-neon::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: calc(var(--btn-border-width) * 1px);
    border-radius: var(--btn-radius);
    background: linear-gradient(
        to right,
        var(--color-white),
        var(--color-white),
        var(--color-cyan),
        var(--color-blue),
        var(--color-purple),
        var(--color-pink),
        var(--color-red),
        var(--color-yellow),
        var(--color-lime),
        var(--color-white),
        var(--color-white)
    )
    no-repeat calc(var(--bg-position) * 1%) 0% / 900%;
    
    -webkit-mask:
      linear-gradient(#333 0 0) content-box,
      linear-gradient(#333 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    
    opacity: var(--before-opacity);
    z-index: -1;
    pointer-events: none;
}

/* Use after for the glow effect */
.btn-glowing-neon::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: calc(var(--btn-border-width) * 1px);
    border-radius: var(--btn-radius);
    background: linear-gradient(
        to right,
        var(--color-white),
        var(--color-white),
        var(--color-cyan),
        var(--color-blue),
        var(--color-purple),
        var(--color-pink),
        var(--color-red),
        var(--color-yellow),
        var(--color-lime),
        var(--color-white),
        var(--color-white)
    )
    no-repeat calc(var(--bg-position) * 1%) 0% / 900%;
    
    filter: blur(calc(var(--ring-blur) * 1px));
    opacity: var(--ring-opacity);
    
    -webkit-mask:
      linear-gradient(#333 0 0) content-box,
      linear-gradient(#333 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    
    z-index: -2;
    pointer-events: none;
}

.btn-glowing-neon:hover {
    --bg-position: 0;
    --before-opacity: 1;
    --ring-opacity: 0.55;
    --ring-blur: 18;
    --btn-scale: 1.03;
    text-decoration: none !important;
}

.btn-glowing-neon:active {
    --ring-opacity: 0.35;
    --ring-blur: 12;
    --btn-scale: 0.99;
}

.btn-glowing-neon.is-animated {
  --bg-position: 0;
  --before-opacity: 1;
  --ring-opacity: 0.55;
  --ring-blur: 18;
  --btn-scale: 1.03;
}
/* animated button end */

.logo__moto {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
}

.logo-svg-animated {
    fill: #ffffff;
    z-index: 1;
    position: relative;
}

/* Neuer Texteffekt für MotoMapr */
.text-animated-gradient {
    color: #fff;
    background: linear-gradient(
        to right,
        #fff 0%,
        #fff 15%,
        #fd004c 25%,
        #fe9000 35%,
        #fff020 45%,
        #3edf4b 55%,
        #3363ff 65%,
        #b102b7 75%,
        #fff 85%,
        #fff 100%
    );
    background-size: 500% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    background-position: 100% center;
    transition: background-position 0s; /* Standardmäßig kein fließender Übergang beim Zurücksetzen */
}

/* Die Animation soll beim Laden der Seite EINMAL ausgeführt werden - mit 2s Verzögerung */
.text-animated-gradient {
    animation: none;
}

/* Custom changes for listing-anons hover border */
.listing-anons {
    transition: border-color 0.2s ease;
    border: 2px solid transparent !important; /* Prepare border to avoid layout shifts */
}

.listing-anons:hover {
    border-color: #429e85 !important; /* Mint-Grün aus color2.css */
}

@keyframes text-shine {
    0% {
        background-position: 100% center;
    }
    100% {
        background-position: 0% center;
    }
}

/* --- MotoMapr Slider Loader Styles (Codepen inspired) --- */
.slider-loader {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    background: #1b1b1b;
}

.slider-loader .items-group {
    width: 100%;
    height: 100%;
    position: relative;
}

.slider-loader .item {
    top: 0px;
    left: 0px;
    opacity: 0;
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
    transition: 0.3s;
    visibility: visible;
    padding: 50px 20px;
    position: absolute;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    z-index: 1; /* Sicherstellen, dass der Item-Inhalt inkl. Background über dem Slider-Hintergrund liegt */
}

/* Erster Slide standardmäßig sichtbar */
.slider-loader .items-group .item:first-child {
    opacity: 1 !important;
    visibility: visible !important;
}

.slider-loader .item:hover .bg {
    opacity: 0.2;
}

.slider-loader .item:hover .block {
    box-shadow: 0px 0px 50px #333;
}

.slider-loader .item.active {
    opacity: 1;
    visibility: visible;
}

.slider-loader .item .bg {
    top: 0px;
    left: 0px;
    opacity: 0.6;
    z-index: -1;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s;
    position: absolute;
    transform: scale(1.03);
    background-size: cover;
    background-position: center;
    background-attachment: scroll; /* fixed kann Probleme mit transforms verursachen */
}

.slider-loader .item .blur {
    top: 0px;
    left: 0px;
    z-index: -1;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s;
    filter: blur(5px);
    position: absolute;
    transform: scale(1.03);
    background-size: cover;
    background-position: center;
    background-attachment: scroll; /* fixed kann Probleme mit transforms verursachen */
}

.slider-loader .item:hover .bg, .slider-loader .item:hover .blur {
    transition: opacity 0.3s;
}

.slider-loader .item .block {
    width: 400px;
    height: 400px;
    padding: 20px;
    color: #ffffff;
    transition: box-shadow 0.3s;
    overflow: hidden;
    border-radius: 10px;
    transform: scale(1.03);
    box-sizing: border-box;
    background-size: cover;
    background-position: center;
    background-attachment: scroll; /* fixed kann Probleme mit transforms verursachen */
    box-shadow: none;
    position: relative;
    z-index: 10;
    border: 1px solid rgba(255,255,255,0.1);
}

.slider-loader .item .block .circleLight {
    top: 0px;
    left: 0px;
    opacity: 0;
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    transition: 0.3s;
    position: absolute;
    border-radius: 10px;
    background: radial-gradient(circle at 80px 40px, #fff, transparent);
    pointer-events: none;
}

.slider-loader .item .block .text {
    width: 100%;
    height: 100%;
    display: flex;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    z-index: 11;
    pointer-events: none;
}

.slider-loader .item .block h2 {
    font-family: 'Lato', sans-serif;
    font-size: 60px;
    font-weight: 900;
    margin-bottom: 0px;
    color: #429e85;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

.slider-loader .item .block h2.moto-mapr-logo {
    font-size: 45px;
    letter-spacing: 2px;
}

.slider-loader .item .block h2.moto-mapr-logo .moto {
    color: #429e85; /* Mint-Grün */
    font-weight: 900;
}

.slider-loader .item .block h2.moto-mapr-logo .mapr {
    color: #ffffff;
    font-weight: 300;
}

.slider-loader .spinner-mint {
    width: 40px;
    height: 40px;
    margin: 20px auto 0;
    border: 3px solid rgba(66, 158, 133, 0.2);
    border-top: 3px solid #429e85;
    border-radius: 50%;
    animation: spin-loader 1s linear infinite;
}

@keyframes spin-loader {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.slider-loader .item .block p {
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    font-weight: 300;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.slider-loader .item .block:hover {
    box-shadow: 0px 0px 70px #111;
}

.slider-loader .item .block:hover .circleLight {
    opacity: 0.4;
}

.slider-loader .navigations {
    bottom: 20px;
    width: 100%;
    position: absolute;
    z-index: 100;
}

.slider-loader .dots {
    height: 20px;
    padding: 10px 0px;
    text-align: center;
    margin: 0;
    list-style: none;
}

.slider-loader .dots li {
    width: 10px;
    height: 10px;
    cursor: pointer;
    transition: 0.3s;
    background: #fff;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
}

.slider-loader .dots li:hover {
    filter: blur(2px);
}

.slider-loader .dots li.active {
    width: 15px;
    height: 15px;
    background: #429e85;
}

.slider-loader .dots li.active:hover {
    filter: blur(0px);
}
/* --- End MotoMapr Slider Loader Styles --- */