/**
 * React Bits (ports vanilla) + landing Anime.js — styles partagés
 * Sources : https://reactbits.dev/ · https://animejs.com/
 */

@import url('./logo-loop.css');
@import url('./sticker-peel.css');

/* —— ClickSpark —— */
.rb-click-spark {
  position: relative;
  overflow: hidden;
}

.rb-click-spark__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* —— SpotlightCard —— */
.rb-spotlight-card {
  position: relative;
  overflow: hidden;
  --mouse-x: 50%;
  --mouse-y: 50%;
  --spotlight-color: color-mix(in srgb, var(--okdak-accent-soft, #5eead4) 24%, transparent);
}

.rb-spotlight-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle 180px at var(--mouse-x) var(--mouse-y),
    var(--spotlight-color),
    transparent 72%
  );
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
  z-index: 0;
}

.rb-spotlight-card:hover::before,
.rb-spotlight-card:focus-within::before {
  opacity: 1;
}

.rb-spotlight-card > * {
  position: relative;
  z-index: 1;
}

/* —— SplitText —— */
.rb-split-parent {
  overflow: visible;
}

.rb-split-word {
  display: inline-block;
  will-change: transform, opacity, filter;
}

/* —— GradientText (teal OkDak, pas de violet) —— */
.rb-gradient-text,
body.page-index .index-focus-title .brand-highlight.rb-gradient-text,
body.page-start .start-title__accent.rb-gradient-text,
body.page-abonnement .abonnement-title__accent.rb-gradient-text {
  background-image: linear-gradient(
    to right,
    var(--rb-gradient-colors, #5eead4, #14b8a6, #0d9488, #5eead4)
  );
  background-size: 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  animation: rb-gradient-shift var(--rb-gradient-speed, 8s) ease-in-out infinite alternate;
}

@keyframes rb-gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

/* —— ShinyText —— */
.rb-shiny-text {
  --rb-shiny-base: var(--okdak-accent-soft, #5eead4);
  background-image: linear-gradient(
    120deg,
    var(--rb-shiny-base) 0%,
    var(--rb-shiny-base) 40%,
    var(--rb-shiny-color, #ffffff) 50%,
    var(--rb-shiny-base) 60%,
    var(--rb-shiny-base) 100%
  );
  background-size: 220% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  animation: rb-shiny-sweep var(--rb-shiny-speed, 2.8s) linear infinite;
}

/* Si GradientText + ShinyText : garder le dégradé animé, shine en overlay via animation */
.rb-gradient-text.rb-shiny-text {
  background-image: linear-gradient(
    to right,
    var(--rb-gradient-colors, #5eead4, #14b8a6, #0d9488, #5eead4)
  );
  background-size: 300% 100%;
  animation:
    rb-gradient-shift var(--rb-gradient-speed, 8s) ease-in-out infinite alternate,
    rb-shiny-sweep var(--rb-shiny-speed, 2.8s) linear infinite;
}

@keyframes rb-shiny-sweep {
  0% {
    background-position: 120% center;
  }
  100% {
    background-position: -20% center;
  }
}

/* —— RotatingText (React Bits) —— */
.rb-rotating-text {
  display: inline-flex;
  vertical-align: baseline;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  min-width: 0.5ch;
  transition: width 0.05s linear;
}

.rb-rotating-text__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.rb-rotating-text__viewport {
  display: inline-flex;
  position: relative;
  overflow: hidden;
  vertical-align: baseline;
}

.rb-rotating-text__word {
  display: inline-flex;
  will-change: transform, opacity;
}

.rb-rotating-text__group {
  display: inline-flex;
}

.rb-rotating-text__char {
  display: inline-block;
  will-change: transform, opacity;
}

.rb-rotating-text__space {
  white-space: pre;
}

/* Marque + produit rotatif (index / start / abonnement) */
body.page-index .index-focus-brand__name,
body.index-cards-focus .index-focus-brand__name,
.index-focus-hero .index-focus-brand__name,
body.page-start .start-brand-hero,
body.page-abonnement .abonnement-brand {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.28em;
}

.index-focus-brand__product,
body.page-index .index-focus-brand__product,
body.index-cards-focus .index-focus-brand__name .index-focus-brand__product,
.start-brand-hero__product,
body.page-start .start-brand-hero__product,
.abonnement-brand__product,
body.page-abonnement .abonnement-brand__product {
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: var(--okdak-accent-soft, #5eead4);
  -webkit-text-fill-color: var(--okdak-accent-soft, #5eead4);
}

body.light-theme .index-focus-brand__product,
html[data-okdak-theme='light'] .index-focus-brand__product,
body.light-theme.index-cards-focus .index-focus-brand__name .index-focus-brand__product,
body.light-theme .start-brand-hero__product,
html[data-okdak-theme='light'] .start-brand-hero__product,
body.light-theme .abonnement-brand__product,
html[data-okdak-theme='light'] .abonnement-brand__product,
body.light-theme.page-abonnement .abonnement-brand__product {
  color: var(--okdak-accent-deep, #0d9488);
  -webkit-text-fill-color: var(--okdak-accent-deep, #0d9488);
}

@media (prefers-reduced-motion: reduce) {
  .rb-rotating-text__char {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* —— Aurora (CSS) —— */
.rb-aurora-mount,
.rb-aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.rb-aurora__layer {
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.45;
  mix-blend-mode: screen;
}

.rb-aurora__layer--1 {
  background: radial-gradient(circle at 30% 40%, var(--rb-aurora-a, #0d9488), transparent 55%);
  animation: rb-aurora-drift 14s ease-in-out infinite alternate;
}

.rb-aurora__layer--2 {
  background: radial-gradient(circle at 70% 30%, var(--rb-aurora-b, #5eead4), transparent 50%);
  animation: rb-aurora-drift 18s ease-in-out infinite alternate-reverse;
  opacity: 0.35;
}

.rb-aurora__layer--3 {
  background: radial-gradient(circle at 50% 70%, var(--rb-aurora-c, #14b8a6), transparent 55%);
  animation: rb-aurora-drift 22s ease-in-out infinite alternate;
  opacity: 0.28;
}

@keyframes rb-aurora-drift {
  0% {
    transform: translate(-4%, -2%) scale(1);
  }
  100% {
    transform: translate(5%, 4%) scale(1.08);
  }
}

body.light-theme .rb-aurora__layer {
  mix-blend-mode: multiply;
  opacity: 0.28;
}

/* —— Noise —— */
.rb-noise-host {
  position: relative;
}

.rb-noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.35;
  mix-blend-mode: soft-light;
}

/* —— GlareHover (désactivé — trop « réflexion ») —— */
.rb-glare-hover::after {
  content: none !important;
  display: none !important;
}

/* —— StarBorder —— */
.rb-star-border {
  position: relative;
  overflow: hidden;
  z-index: 0;
  isolation: isolate;
  max-width: 100%;
}

.rb-star-border__grad {
  position: absolute;
  width: 300%;
  height: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, var(--sb-color, #5eead4), transparent 18%);
  opacity: 0.75;
}

.rb-star-border__grad--top {
  top: calc(-1 * var(--sb-thickness, 1px));
  left: -100%;
  animation: rb-star-spin var(--sb-speed, 6s) linear infinite;
}

.rb-star-border__grad--bottom {
  bottom: calc(-1 * var(--sb-thickness, 1px));
  right: -100%;
  animation: rb-star-spin var(--sb-speed, 6s) linear infinite reverse;
}

.rb-star-border > :not(.rb-star-border__grad):not(.rb-click-spark__canvas) {
  position: relative;
  z-index: 1;
}

@keyframes rb-star-spin {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50%, 0);
  }
}

/* —— Magnet —— */
.rb-magnet {
  will-change: transform;
}

/* —— Landing scroll / hero —— */
body.landing-motion .landing-scroll-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

body.landing-motion .landing-scroll-reveal.is-visible {
  opacity: 1;
  transform: none;
}

body.landing-motion .landing-motion-item {
  will-change: transform, opacity;
}

body.page-seo-landing .start-faq__item.rb-spotlight-card,
body.page-seo-landing .start-why__item.rb-spotlight-card,
body.page-seo-landing .start-seo-body.landing-scroll-reveal {
  isolation: isolate;
}

body.page-seo-landing .start-title__accent.rb-gradient-text,
body.page-seo-landing .start-title__accent.rb-shiny-text {
  font-weight: inherit;
}

body.page-abonnement .plan.rb-spotlight-card::before {
  border-radius: inherit;
}

body.page-index .index-modeles__tile.rb-spotlight-card,
body.page-index .index-steps__item.rb-spotlight-card {
  isolation: isolate;
}

/* —— Community (Feed / Explorer) —— */
body.community-motion .community-motion-card {
  isolation: isolate;
  will-change: transform, opacity;
}

body.page-feed .slider-item.community-motion-card.rb-glare-hover,
body.page-explorer .explorer-card.community-motion-card.rb-glare-hover {
  overflow: hidden;
}

body.page-explorer .explorer-card.community-motion-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  body.community-motion .community-motion-card {
    will-change: auto;
    opacity: 1 !important;
    transform: none !important;
  }
}

body.page-index .index-hero-atmosphere,
body.page-start .start-hero {
  position: relative;
}

body.page-start .start-hero > :not(.rb-aurora-mount):not(.rb-noise) {
  position: relative;
  z-index: 1;
}

body.page-index .index-hero-atmosphere + .index-hero-stage,
body.page-index .index-hero-stage {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .rb-gradient-text,
  .rb-shiny-text {
    animation: none;
    background: none;
    color: inherit;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    -webkit-background-clip: unset;
  }

  .rb-aurora__layer,
  .rb-star-border__grad,
  .rb-noise {
    animation: none !important;
    display: none;
  }

  body.landing-motion .landing-scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .rb-split-word {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}