:root {
        --color: #5D9B62;
        --accent-2: #9cc7ff;
        --section-glow: 0 0 42px rgba(156, 199, 255, 0.12);
        --poster-scale: 1.03;
        --drift-x: 8px;
        --drift-y: -4px;
    }
    * {
      -webkit-tap-highlight-color: transparent;
      -webkit-focus-ring-color: transparent;
      outline: none;
      box-sizing:border-box;
    }
    html, body {
      margin: 0;
      min-height: 100vh;
      min-height: 100svh;
      min-height: 100dvh;
      background: black;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      overflow: hidden;
    }

    #loader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: black;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 5000000;
      transition: opacity 0.6s ease, visibility 0.6s ease;
    }

    #loader.hide {
      opacity: 0;
      visibility: hidden;
    }

    #loader-logo {
      width: 160px;
      height: auto;
      animation: glitchy 1.65s infinite steps(2, end);
      position: relative;
      will-change: transform, filter, opacity, clip-path;
      transform-origin: center center;
    }

    /* Effet glitch */
    @keyframes glitchy {
      0% {
        transform: translate3d(0, 0, 0) scale(1);
        filter: none;
        clip-path: inset(0 0 0 0);
        opacity: 1;
      }
      8% {
        transform: translate3d(-4px, 1px, 0) scale(1.02);
        filter: contrast(1.8) brightness(1.08) drop-shadow(-3px 0 rgba(255, 70, 70, 0.5));
        clip-path: inset(8% 0 68% 0);
        opacity: 0.92;
      }
      12% {
        transform: translate3d(4px, -1px, 0) scale(0.992);
        filter: contrast(1.95) brightness(1.1) drop-shadow(3px 0 rgba(90, 170, 255, 0.48));
        clip-path: inset(58% 0 12% 0);
        opacity: 0.98;
      }
      18% {
        transform: translate3d(-2px, 0, 0) scale(1.01);
        filter: contrast(1.35) brightness(1.04) drop-shadow(-2px 0 rgba(255, 90, 90, 0.22)) drop-shadow(2px 0 rgba(90, 170, 255, 0.18));
        clip-path: inset(22% 0 46% 0);
      }
      24% {
        transform: translate3d(0, 0, 0) scale(1);
        filter: none;
        clip-path: inset(0 0 0 0);
        opacity: 1;
      }
      62% {
        transform: translate3d(0, 0, 0) scale(1);
        filter: none;
        clip-path: inset(0 0 0 0);
        opacity: 1;
      }
      70% {
        transform: translate3d(3px, 0, 0) scale(1.015);
        filter: contrast(1.7) brightness(1.06) drop-shadow(2px 0 rgba(90, 170, 255, 0.35));
        clip-path: inset(70% 0 6% 0);
        opacity: 0.95;
      }
      76% {
        transform: translate3d(-5px, 1px, 0) scale(0.99);
        filter: contrast(2) brightness(1.12) drop-shadow(-4px 0 rgba(255, 70, 70, 0.4));
        clip-path: inset(10% 0 74% 0);
        opacity: 0.9;
      }
      84% {
        transform: translate3d(2px, -1px, 0) scale(1.008);
        filter: contrast(1.25) brightness(1.03);
        clip-path: inset(36% 0 28% 0);
        opacity: 0.97;
      }
      100% {
        transform: translate3d(0, 0, 0) scale(1);
        filter: none;
        clip-path: inset(0 0 0 0);
        opacity: 1;
      }
    }

    #loader.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    span, a{
      color:var(--color);
    }

    #back{
      background-image:url("/static/img/backgrounds/back_tm.jpg");
      background-size:cover;
      background-position:center;
      position:fixed;
      top:0px;
      opacity:0.4;
      left:0px;
      width:100%;
      height:100%;
      transform: scale(1.03);
      filter: saturate(0.9) brightness(0.75);
      transition: transform 0.5s ease, filter 0.5s ease, opacity 0.5s ease;
    }

    #icon{
      background-position:center;
      position:fixed;
      top:0px;
      left:0px;
      width:100%;
      height:100%;
      opacity: 0.1;
      background-size: 300px !important;
      background-repeat: no-repeat;
      mix-blend-mode: screen;
      transform: translate3d(0, 0, 0) scale(1);
      transition: opacity 0.45s ease, transform 0.45s ease, filter 0.45s ease;
    }

    .swiper-vertical {
      position:fixed;
      right:0px;
      width:55%;
      top:0px;
      box-sizing: border-box;
      height:100%;
      z-index: 1;
      background: transparent;
      overflow: hidden;
    }

    /* slides verticales */
    .swiper-vertical .swiper-slide {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      text-align:center;
      transition: all 0.3s;
      cursor: pointer;
      opacity:0.18;
      filter:grayscale(0.76);
    }

    .swiper-vertical .swiper-slide:last-child{
      z-index:-1;
    }
    .swiper-vertical .swiper-slide-active {
      z-index:10 !important;
      opacity:1;
      filter:grayscale(0);
    }

    .swiper-vertical .swiper-slide-prev,
    .swiper-vertical .swiper-slide-next {
      opacity:0.76;
      filter:grayscale(0.2);
    }

    .swiper-vertical .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next) {
      opacity:0.12;
      filter:grayscale(0.82);
    }

    .swiper-vertical .swiper-slide-active ~ .swiper-slide {
      opacity:1;
      filter:grayscale(0);
    }

    .swiper-vertical .swiper-slide-active ~ .swiper-slide.swiper-slide-next {
      opacity:1;
      filter:grayscale(0);
    }

    .swiper-vertical .swiper-slide-next ~ .swiper-slide {
      opacity:0.94;
      filter:grayscale(0.04);
    }

    body.curated-selected-stage .swiper-vertical .swiper-slide.curated-hidden-carousel {
      opacity: 0 !important;
      filter: blur(18px) grayscale(1) !important;
      pointer-events: none;
      transform: translate3d(0, 0, 0);
    }

    body.curated-reveal-dispatching .swiper-vertical .swiper-slide.curated-hidden-carousel {
      opacity: calc(0.16 + (0.84 * var(--curated-reveal-progress, 0))) !important;
      filter: blur(calc(14px * (1 - var(--curated-reveal-progress, 0)))) grayscale(calc(1 - var(--curated-reveal-progress, 0))) !important;
      pointer-events: none;
      transform: translate3d(0, 0, 0);
    }

    body.curated-selected-stage .swiper-vertical .swiper-slide.curated-selected-carousel {
      opacity: 1 !important;
      filter: grayscale(0) !important;
      transform: translate3d(0, 0, 0);
    }

    body.curated-selected-stage .curated-selected-carousel .trending-badge {
      opacity: 0 !important;
    }

    .curated-reveal-slide {
      flex: 0 0 auto;
      position: relative;
      overflow: hidden;
      width: 120px !important;
      height: 80px !important;
    }

    .swiper-horizontal .swiper-slide.title-cell.curated-reveal-slide {
      width: 120px !important;
      min-width: 120px !important;
      max-width: 120px !important;
      height: 80px !important;
      min-height: 80px !important;
      max-height: 80px !important;
      padding: 0 10px !important;
      white-space: normal;
      line-height: 1.05;
    }

    .curated-reveal-slide::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(93, 155, 98, 0.58), rgba(0, 0, 0, 0.08));
      pointer-events: none;
    }

    .swiper-vertical .swiper-slide.curated-selected-carousel.curated-fading-out {
      opacity: 0 !important;
      transform: translate3d(0, -24px, 0);
      transition: opacity 0.22s ease, transform 0.22s ease;
      pointer-events: none;
    }

    body.curated-reveal-dispatching .curated-selected-carousel .swiper-slide[data-track-id] {
      background-image: none !important;
      background-color: #000 !important;
      color: transparent !important;
    }

    body.curated-reveal-dispatching .curated-selected-carousel .swiper-slide[data-track-id] .trending-badge {
      opacity: 0;
    }

    .curated-dispatch-target-hidden {
      background-image: none !important;
      background-color: #000 !important;
      color: transparent !important;
    }

    .curated-dispatch-target-hidden .trending-badge {
      opacity: 0 !important;
    }

    .curated-dispatch-clone {
      position: fixed;
      z-index: 5000000;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background-size: cover;
      background-position: center;
      border: 2px solid black;
      transition: transform 0.82s cubic-bezier(0.22, 1, 0.36, 1), width 0.82s cubic-bezier(0.22, 1, 0.36, 1), height 0.82s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.82s ease;
      pointer-events: none;
    }

    /* carrousel horizontal */
    .swiper-horizontal {
      flex: 1;
      pointer-events: none;
      transition: filter 0.3s;
      position: relative;
      overflow: hidden;
    }
    .swiper-slide-active .swiper-horizontal {
      pointer-events: auto;
    }

    /* cellules */
    .swiper-horizontal .swiper-slide {
      flex: 0 0 auto; /* largeur auto (peut varier) */
      height: 80px;
      width:120px;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 0.9em;
      padding: 0 10px; /* marge interne pour voir la diff */
      border: 2px solid black;
      cursor: pointer;
      transition: all 0.25s ease;
      background: black;
      color: white;
      background-size:cover;
      background-position:center;
    }

    .trending-badge {
      position: absolute;
      top: 6px;
      right: 6px;
      padding: 2px 6px;
      border: 1px solid currentColor;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.72);
      font-size: 8px;
      font-weight: bold;
      letter-spacing: 0.08em;
      line-height: 1;
      text-transform: uppercase;
      pointer-events: none;
      opacity: 0.88;
    }

    .icons .swiper-slide.square{
      background-size:30%;
      background-position:center;
      background-repeat:no-repeat;
    }

    .icons .swiper-slide.link:not(.title-cell) {
      background-color: #050805;
      box-shadow: inset 0 0 0 1px rgba(93, 155, 98, 0.16), 0 10px 20px rgba(0, 0, 0, 0.18);
    }

    .swiper-slide.square{
      width:80px !important;
    }

    .swiper-slide-active .swiper-horizontal .swiper-slide{
      filter:grayscale(0);
    } 

    /* cellule active */
    .swiper-slide-active .swiper-horizontal .swiper-slide.swiper-slide-active {
      border: 2px solid var(--color);
    }

    /* cellule "titre" = noire */
    .swiper-horizontal .swiper-slide.title-cell {
      background: #000 !important;
      color: white;
      font-weight: bold;
      width: 80px;
    }

    /* Boutons de navigation horizontale */
    .nav-button {
      position: fixed;
      top: 50%;
      transform: translateY(-50%);
      background-color: transparent;
      color: #fff;
      border: 2px solid rgba(255, 255, 255, 0.78);
      font-size: 30px;
      cursor: pointer;
      height:56px;
      width:56px;
      z-index: 1000;
      border-radius: 50%;
      user-select: none;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
      transition: background-color 0.24s ease, border-color 0.24s ease, opacity 0.24s ease, transform 0.24s ease, box-shadow 0.24s ease;
    }
    .nav-button::before {
      content: "";
      position: absolute;
      inset: 0;
      margin: auto;
      width: 42%;
      height: 42%;
      background-image: var(--nav-icon);
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      filter: brightness(0) invert(1);
      opacity: 0.96;
    }
    .nav-button:hover {
      background-color: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.96);
      box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
    }

    .nav-button:active {
      transform: translateY(-50%) scale(0.96);
    }

    .nav-button.is-disabled,
    .nav-button:disabled {
      opacity: 0.28;
      cursor: default;
      background-color: rgba(0, 0, 0, 0.04);
      border-color: rgba(255, 255, 255, 0.2);
      box-shadow: none;
      pointer-events: none;
    }
    .nav-left {
      right: calc(55% - 70px);
      --nav-icon: url("/static/img/icons/arrow_left.png");
    }
    .nav-right {
      right: 30px;
      --nav-icon: url("/static/img/icons/arrow.png");
    }

    #title{
      position: absolute;
      top: calc(50% - 120px);
      left: 45%;
      background-color: black;
      padding: 7px;
      padding-left: 20px;
      padding-right: 20px;
      color: white;
      border-radius: 10px;
      font-size: 27px;
      font-family: "Oswald", sans-serif;
      letter-spacing: 2px;
      z-index:2;
      transition:0.3s;
      box-shadow: 0 0 24px rgba(0,0,0,0.25);
      overflow: visible;
    }

    #cat{
      position: absolute;
      top: calc(50% - 155px);
      left: 45%;
      background-color: black;
      padding: 4px;
      padding-left: 15px;
      padding-right: 15px;
      color: var(--color);
      border-radius: 10px;
      font-size: 13px;
      font-family: "Oswald", sans-serif;
      letter-spacing: 2px;
      z-index:2;
      font-weight:bold;
      transition:0.3s;
      pointer-events:none;
      box-shadow: 0 0 22px rgba(0,0,0,0.22);
    }

    #personalized_greeting {
      position: fixed;
      top: 22px;
      left: 24px;
      z-index: 2000;
      pointer-events: none;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
      line-height: 1;
      padding-left: 13px;
    }

    #personalized_greeting::before {
      content: "";
      position: absolute;
      left: 0;
      top: 1px;
      bottom: 1px;
      width: 2.5px;
      border-radius: 2px;
      background: var(--color);
    }

    /* When the contact has their own photo, swap the accent bar for a
       small circular avatar instead — row layout, bar hidden. */
    #personalized_greeting.has-photo {
      flex-direction: row;
      align-items: center;
      gap: 10px;
      padding-left: 0;
    }
    #personalized_greeting.has-photo::before {
      display: none;
    }
    #personalized_greeting_photo {
      width: 36px;
      height: 36px;
      flex: 0 0 auto;
      border-radius: 50%;
      background-size: cover;
      background-position: center;
      border: 1.5px solid var(--color);
    }
    #personalized_greeting_text {
      display: flex;
      flex-direction: column;
      gap: 2px;
      line-height: 1;
    }

    #personalized_greeting_label {
      font-family: "Oswald", sans-serif;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--color);
    }

    #personalized_greeting_name {
      font-family: "Oswald", sans-serif;
      font-size: 20px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--color);
    }

    @media screen and (max-height: 450px){
      .nav-button {
            top: 59%;
      }
      #title{
        top: calc(60% - 130px);
      }
      #title{
        font-size:22px;
        top: calc(60% - 115px);
      }
      #cat{
        top: calc(60% - 145px);
        font-size:11px;
      }
    }

    video {  
      width: 100vw;
      height: 100vh;
      min-width: 100%; 
      min-height: 100%;
      object-fit: cover;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 0;
      filter: grayscale(100%) blur(1px) brightness(35%);
      /* object-position deliberately NOT transitioned: switching to a new
         video while one is already playing (mobile only — object-position
         never actually changes value on desktop, so this went unnoticed
         there) crosses the is-portrait boundary before the new source's
         own metadata is known, so its object-position target value jumps;
         animating that slide made the newly-revealed video visibly crawl
         into its correct crop for the transition's remaining duration
         instead of just being right immediately. */
      transition: filter 0.5s, transform 0.5s ease, opacity 0.35s ease !important;
    }

    #video_mobile_ghost_canvas,
    #video_mobile_ghost_fallback {
      opacity: 0;
      pointer-events: none;
      z-index: -1;
      display: none;
      filter: none;
      transform: scale(1);
      mix-blend-mode: soft-light;
      transition: opacity 0.42s ease, transform 0.5s ease !important;
    }

    #video_mobile_ghost_canvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      object-fit: cover;
    }

    body.has-portrait-video #video_mobile_ghost_canvas,
    body.has-portrait-video #video_mobile_ghost_fallback {
      display: block;
      z-index: 0;
      object-fit: cover;
      object-position: center center;
    }

    body.has-portrait-video #video_mobile_ghost_canvas.active,
    body.has-portrait-video #video_mobile_ghost_fallback.active {
      opacity: 0.8;
    }

    #video_mobile_ghost_fallback {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      object-fit: cover;
      object-position: center center;
    }

    #video_portrait_backdrop {
      position: fixed;
      inset: -4vh -4vw;
      width: calc(100vw + 8vw);
      height: calc(100vh + 8vh);
      opacity: 0;
      pointer-events: none;
      z-index: 0;
      object-fit: cover;
      object-position: center center;
      filter: blur(34px) saturate(1.05) brightness(0.42);
      transform: scale(1.08);
      transition: opacity 0.42s ease, transform 0.55s ease;
    }

    body.has-portrait-video #video_portrait_backdrop {
      opacity: 1;
    }

    #foreground_glitch {
      --fg-glitch-duration: 0.22s;
      --fg-glitch-flare-x: 58%;
      --fg-glitch-flare-y: 44%;
      --fg-glitch-flare-size: 22vmax;
      --fg-glitch-angle: 102deg;
      --fg-glitch-shift-x: 8px;
      --fg-glitch-shift-y: -1px;
      --fg-glitch-scale-x: 1.018;
      --fg-glitch-scale-y: 0.992;
      --fg-glitch-skew: -0.9deg;
      --fg-glitch-opacity: 0.34;
      --fg-glitch-red: rgba(255, 92, 92, 0.08);
      --fg-glitch-blue: rgba(92, 180, 255, 0.1);
      --fg-glitch-band-y: 38%;
      --fg-glitch-band-h: 10%;
      position: fixed;
      inset: 0;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      z-index: 20000;
      mix-blend-mode: soft-light;
      background:
        radial-gradient(circle at var(--fg-glitch-flare-x) var(--fg-glitch-flare-y), rgba(255,255,255,0.18) 0 1.8%, transparent 14%),
        linear-gradient(180deg, transparent 0 var(--fg-glitch-band-y), rgba(255,255,255,0.08) var(--fg-glitch-band-y) calc(var(--fg-glitch-band-y) + var(--fg-glitch-band-h)), transparent calc(var(--fg-glitch-band-y) + var(--fg-glitch-band-h)) 100%),
        linear-gradient(var(--fg-glitch-angle), transparent 0 46%, rgba(255,255,255,0.08) 49% 52%, transparent 55% 100%),
        linear-gradient(90deg, var(--fg-glitch-red), transparent 24%, transparent 76%, var(--fg-glitch-blue));
      background-size: 100% 100%;
      background-position: 0 0;
    }

    #foreground_glitch::before,
    #foreground_glitch::after {
      content: "";
      position: absolute;
      inset: 0;
      opacity: 0;
      pointer-events: none;
    }

    #foreground_glitch::before {
      background:
        linear-gradient(90deg, transparent 0 14%, rgba(255,255,255,0.08) 14% 18%, transparent 18% 100%),
        linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.06) 18%, transparent 38%, transparent 100%);
    }

    #foreground_glitch::after {
      background:
        linear-gradient(90deg, transparent 0 72%, rgba(92,180,255,0.1) 72% 76%, transparent 76% 100%),
        linear-gradient(90deg, transparent 0 8%, rgba(255,92,92,0.08) 8% 11%, transparent 11% 100%),
        linear-gradient(180deg, transparent 0%, transparent 56%, rgba(255,255,255,0.05) 72%, transparent 88%);
    }

    #foreground_glitch.is-playing {
      visibility: visible;
      animation: foreground-glitch-flash var(--fg-glitch-duration) cubic-bezier(0.22, 1, 0.36, 1) both, foreground-glitch-warp var(--fg-glitch-duration) cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    #foreground_glitch.is-playing::before {
      animation: foreground-glitch-slice-a var(--fg-glitch-duration) cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    #foreground_glitch.is-playing::after {
      animation: foreground-glitch-slice-b var(--fg-glitch-duration) cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    #mobile_hint {
      display: none;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    #mobile_hint * {
      opacity: 0;
    }

    video.active{
      opacity:1;
      filter: none;
      transform: scale(1);
      transition: filter 0.5s, transform 0.5s ease;
    }

    body[data-experience-mode="poster"] video,
    body[data-experience-mode="video"] video {
      transform: scale(var(--poster-scale)) translate3d(var(--drift-x), var(--drift-y), 0);
    }

    body[data-experience-mode="playing"] video.active {
      transform: scale(1.008);
      box-shadow: var(--section-glow);
    }

    body.has-portrait-video video.is-portrait {
      width: 100vw;
      height: 100vh;
      min-width: 0;
      min-height: 0;
      max-width: 100vw;
      max-height: 100vh;
      object-fit: contain;
      object-position: center center;
      filter: grayscale(0%) brightness(0.98);
      box-shadow: none;
    }

    body.has-portrait-video[data-experience-mode="playing"] video.active {
      box-shadow: none;
    }

    body.has-portrait-video[data-experience-mode="poster"] video.is-portrait,
    body.has-portrait-video[data-experience-mode="video"] video.is-portrait,
    body.has-portrait-video[data-experience-mode="playing"] video.is-portrait {
      transform: scale(1) translate3d(0, 0, 0);
    }

    #video_cover_stage {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      opacity: 0;
      z-index: 0;
      transform: translate3d(0, 0, 0);
      transition: opacity 0.28s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), padding-top 0.6s ease;
    }

    #video_cover_stage.is-visible {
      opacity: 1;
    }

    #video_cover_art {
      display: block;
      width: min(28vw, 360px);
      min-width: 500px;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      border-radius: 0;
      box-shadow: 0 34px 95px rgba(0, 0, 0, 0.46), 0 10px 28px rgba(0, 0, 0, 0.3);
      filter: grayscale(100%) blur(0.8px) brightness(0.46);
      transform: scale(calc(var(--poster-scale) * 0.96)) translate3d(calc(var(--drift-x) * 0.35), calc(var(--drift-y) * 0.35), 0);
      opacity: 1;
      transition: filter 0.42s ease, transform 0.46s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, opacity 0.46s ease;
    }

    #video_cover_art.is-hiding,
    body[data-experience-mode="video"] #video_cover_art.is-hiding,
    body[data-experience-mode="playing"] #video_cover_art.is-hiding {
      opacity: 0;
      filter: grayscale(100%) blur(2.8px) brightness(0.28);
      transform: scale(calc(var(--poster-scale) * 0.92)) translate3d(calc(var(--drift-x) * 0.18), calc(var(--drift-y) * 0.18 + 6px), 0);
    }

    #video_cover_art.is-revealing,
    body[data-experience-mode="video"] #video_cover_art.is-revealing,
    body[data-experience-mode="playing"] #video_cover_art.is-revealing {
      opacity: 0;
      filter: grayscale(100%) blur(7px) brightness(0.72) saturate(1.05);
      transform: scale(calc(var(--poster-scale) * 1.035)) translate3d(calc(var(--drift-x) * 0.52), calc(var(--drift-y) * 0.52 - 8px), 0);
    }

    #video_cover_art,
    #video_cover_art_buffer {
      position: absolute;
      inset: 50% auto auto 50%;
      translate: -50% -50%;
    }

    .title_text {
      display: inline;
      color: white;
    }

    .title_linkout {
      position: absolute;
      top: 50%;
      left: calc(100% + 14px);
      translate: 0 -50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border-radius: 999px;
      border: 1.5px solid color-mix(in srgb, var(--color) 72%, white 28%);
      background: rgba(0, 0, 0, 0.56);
      color: var(--color);
      text-decoration: none;
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      transition: opacity 0.28s ease, background-color 0.22s ease, border-color 0.22s ease;
    }

    .title_linkout:hover {
      background: rgba(0, 0, 0, 0.72);
      border-color: var(--color);
    }

    .title_linkout.is-hidden {
      display: none !important;
    }

    .title_linkout_mobile {
      display: none;
    }

    .title_linkout_desktop {
      display: inline-flex;
    }

    #title .title_text,
    #title .title_text * {
      color: white !important;
    }

    .title_linkout i {
      font-size: 18px;
    }

    #video_cover_art_buffer {
      display: block;
      width: min(28vw, 360px);
      min-width: 500px;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      border-radius: 0;
      box-shadow: 0 34px 95px rgba(0, 0, 0, 0.46), 0 10px 28px rgba(0, 0, 0, 0.3);
      filter: grayscale(100%) blur(2.8px) brightness(0.36);
      transform: scale(calc(var(--poster-scale) * 1.04)) translate3d(calc(var(--drift-x) * 0.42), calc(var(--drift-y) * 0.42), 0);
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
      z-index: 1;
      transition: opacity 0.56s ease, transform 0.68s cubic-bezier(0.22, 1, 0.36, 1), filter 0.56s ease;
    }

    #video_cover_art_buffer.is-ready {
      visibility: visible;
    }

    #video_cover_art_buffer.is-visible {
      opacity: 1;
      filter: grayscale(100%) blur(0.5px) brightness(0.52);
      transform: scale(calc(var(--poster-scale) * 0.978)) translate3d(calc(var(--drift-x) * 0.22), calc(var(--drift-y) * 0.22), 0);
    }

    #video_cover_stage.is-swapping #video_cover_art.is-fading {
      opacity: 0.16;
      filter: grayscale(100%) blur(2px) brightness(0.28);
      transform: scale(calc(var(--poster-scale) * 1.02)) translate3d(calc(var(--drift-x) * 0.48), calc(var(--drift-y) * 0.48), 0);
    }

    body[data-experience-mode="video"] #video_cover_stage.is-visible,
    body[data-experience-mode="playing"] #video_cover_stage.is-visible {
      opacity: 1;
    }

    body[data-experience-mode="poster"] #video_cover_stage,
    body[data-experience-mode="icon"] #video_cover_stage {
      opacity: 0;
    }

    body[data-experience-mode="video"] #video_cover_art {
      filter: grayscale(100%) blur(0.8px) brightness(0.46);
    }

    body[data-experience-mode="video"] #video_cover_art_buffer {
      filter: grayscale(100%) blur(0.8px) brightness(0.46);
    }

    body[data-experience-mode="playing"] #video_cover_art {
      filter: none;
      transform: scale(1.01);
      box-shadow: 0 38px 110px rgba(0, 0, 0, 0.52), var(--section-glow);
    }

    body[data-experience-mode="playing"] #video_cover_art_buffer {
      filter: none;
      transform: scale(1.02);
      box-shadow: 0 38px 110px rgba(0, 0, 0, 0.52), var(--section-glow);
    }

    #cover {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: none;
      width:45%;
      transition:0.5s;
      -webkit-box-shadow: 0px 0px 20px 5px var(--color); 
      box-shadow: 0px 0px 20px 5px var(--color);
    }

    #cover {
      pointer-events: none; /* clics passent à travers */
    }

    #main_cover,
    #main_cover * {
      pointer-events: auto; /* sauf le bouton central */
    }

    #cover.shht{
      opacity:0.35 !important;
      transition:0.5s;
    }

    #back_cover, #cover{
      position: fixed;
      display: block;
      width: 220px;
      height: 220px;
      border: 0;
      border-radius: 50%;
      overflow: hidden;
      left:calc(22.5% - 130px);
      top:calc(50% - 110px);
      transform: translate3d(0, 0, 0);
      transition: left 0.5s ease, top 0.5s ease, opacity 0.5s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    }

    #back_cover.shht, #cover.shht{
      left:calc(50% - 110px);
      transition:0.5s;
      opacity:0.35 !important;
    }

    #back_cover::before{
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%; 
      padding: 5px; 
      background:black;
      -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
              mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude; 
      background:linear-gradient(-270deg, var(--color) var(--progress), black var(--progress_2)) !important;
    }

    #audio_loader {
      position: absolute;
      inset: 7px;
      border-radius: 50%;
      opacity: 0;
      transform: scale(0.985);
      transition: opacity 0.28s ease, transform 0.28s ease;
      pointer-events: none;
    }

    #back_cover.is-loading #audio_loader {
      opacity: 1;
      transform: scale(1);
    }

    .audio-loader-ring,
    .audio-loader-ring::before {
      position: absolute;
      border-radius: 50%;
      inset: 0;
      box-sizing: border-box;
    }

    .audio-loader-ring {
      display: block;
      animation: audio-loader-spin 1.05s linear infinite;
      filter: drop-shadow(0 0 7px color-mix(in srgb, var(--color) 30%, transparent));
    }

    .audio-loader-ring::before {
      content: "";
      border: clamp(4px, 0.48vw, 5px) solid transparent;
      border-top-color: color-mix(in srgb, var(--color) 92%, white 8%);
      border-right-color: color-mix(in srgb, var(--color) 78%, white 22%);
      border-bottom-color: transparent;
      border-left-color: transparent;
      opacity: 0.92;
    }

    @keyframes audio-loader-spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    #cover.loaded {
      display: block;
    }

    #main_cover {
      position: relative;
      display: block;
      width: 220px;
      height: 220px;
      border: 0;
      border-radius: 50%;
      background-image: url(https://himalayasingh.github.io/audio-player-play-and-pause-animation-1/img/f1.gif);
      background-size: cover;
      background-position: 50%;
      background-repeat: no-repeat;
      cursor: pointer;
      overflow: hidden;
      transition: 0.14s ease transform, box-shadow 0.35s ease, filter 0.35s ease, opacity 0.35s ease;
      margin-top:0px;
      box-shadow: var(--section-glow);
      animation: cover-idle 5.5s ease-in-out infinite;
    }

    #main_cover.insta_discover{
      background-image:url("/static/img/icons/insta_discover.png") !important;
      background-size:70%;
    }
    #main_cover.album_discover{
      background-image:url("/static/img/icons/album_discover.png") !important;
      background-size:40%;
    }
    #main_cover.presskit_discover{
      background-image:url("/static/img/icons/presskit.png") !important;
      background-size:40%;
    }

    #main_cover.web_discover{
      background-image:url("/static/img/icons/web_discover.png") !important;
      background-size:40%;
    }

    .shht{
      opacity:0.6;
      transition: 0.3s;
    }

    #title.shht,
    #cat.shht, #personalized_greeting.shht, .swiper.shht, button.shht {
      opacity: 0;
      transition: 0.3s;
    }

    .swiper.shht{
      pointer-events:none;
    }

    #main_cover:active {
      transform: scale(0.85);
    }

    #main_cover.active {
      background-image: url(https://himalayasingh.github.io/audio-player-play-and-pause-animation-1/img/bg.gif);
      opacity:0.9;
      transform: scale(0.85);
      animation: cover-live 1.8s ease-in-out infinite;
    }

    #main_cover.inactive {
      background-image: url(https://himalayasingh.github.io/audio-player-play-and-pause-animation-1/img/f1.gif);
    }

    #main {
      width: 54px;
      height: 60px;
      overflow: hidden;
    }

    .bar {
      position: absolute;
      width: 8px;
      background-color: #fff;
      border-radius: 10px;
      transition: 0.4s ease transform, 0.4s ease top, 0.4s ease bottom;
    }

    #_1 {
      top: 0;
      bottom: 0;
    }

    #_2 {
      top: -13px;
      left: 23px;
      height: 60px;
      transform: rotateZ(-60deg) translateY(0px);
    }

    #_3 {
      top: 13px;
      left: 23px;
      height: 60px;
      transform: rotateZ(60deg) translateY(0);
    }

    #_4,
    #_5 {
      top: 27px;
      right: 0;
      bottom: 27px;
    }

    #main_cover.active #_2 {
      transform: rotateZ(-60deg) translateY(53px);
    }

    #main_cover.active #_3 {
      transform: rotateZ(60deg) translateY(-53px);
      transition-delay: 0.5s;
    }

    #main_cover.active #_4 {
      bottom: 0;
    }

    #main_cover.active #_5 {
      top: 0;
      transition-delay: 0.5s;
    }

    #main_cover.inactive #_2 {
      transform: rotateZ(-60deg) translateY(0);
    }

    #main_cover.inactive #_3 {
      transform: rotateZ(60deg) translateY(0);
      transition-delay: 0.5s;
    }

    #main_cover.inactive #_4 {
      bottom: 27px;
    }

    #main_cover.inactive #_5 {
      top: 27px;
      transition-delay: 0.5s;
    }

    .center {
      position: absolute;
      top: 50%;
      right: 0;
      left: 0;
      margin: 0 auto;
      transform: translateY(-50%);
    }

    @keyframes background-drift {
      0% {
        transform: scale(1.03) translate3d(-10px, -6px, 0);
        filter: saturate(0.86) brightness(0.72);
      }
      100% {
        transform: scale(1.08) translate3d(12px, 8px, 0);
        filter: saturate(0.98) brightness(0.8);
      }
    }

    @keyframes cover-idle {
      0%, 100% {
        transform: scale(1);
        filter: brightness(1);
      }
      50% {
        transform: scale(1.018);
        filter: brightness(1.04);
      }
    }

    @keyframes cover-live {
      0%, 100% {
        filter: brightness(1) saturate(1);
      }
      50% {
        filter: brightness(1.08) saturate(1.08);
      }
    }

    @keyframes shht-cover-float {
      0%, 100% {
        transform: translate3d(0px, var(--shht-cover-offset-y, 0px), 0) rotate(0deg) scale(1);
      }
      20% {
        transform: translate3d(-1px, calc(var(--shht-cover-offset-y, 0px) - 3px), 0) rotate(-0.35deg) scale(1.006);
      }
      50% {
        transform: translate3d(0px, calc(var(--shht-cover-offset-y, 0px) - 6px), 0) rotate(0deg) scale(1.01);
      }
      80% {
        transform: translate3d(1px, calc(var(--shht-cover-offset-y, 0px) - 2px), 0) rotate(0.35deg) scale(1.004);
      }
    }

    @keyframes shht-video-cover-float {
      0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
      }
      50% {
        transform: translate3d(0, -4px, 0) scale(1.008);
      }
    }

    @keyframes foreground-glitch-flash {
      0% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
        filter: none;
        background-position: 0 0;
      }
      24% {
        opacity: var(--fg-glitch-opacity);
        transform: translate3d(var(--fg-glitch-shift-x), 0, 0) skewX(var(--fg-glitch-skew));
        filter: saturate(1.12) contrast(1.08);
        background-position: 0 0, 0 10px, -6px 0, 0 0;
      }
      56% {
        opacity: calc(var(--fg-glitch-opacity) * 0.7);
        transform: translate3d(calc(var(--fg-glitch-shift-x) * -0.65), 0, 0) skewX(calc(var(--fg-glitch-skew) * -0.7));
        filter: saturate(1.06) contrast(1.04);
        background-position: 0 0, 0 -6px, 8px 0, 0 0;
      }
      100% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
        filter: none;
        background-position: 0 0;
      }
    }

    @keyframes foreground-glitch-warp {
      0% {
        transform: translate3d(0, 0, 0) scale(1);
      }
      34% {
        transform: translate3d(var(--fg-glitch-shift-x), var(--fg-glitch-shift-y), 0) scaleX(var(--fg-glitch-scale-x)) scaleY(var(--fg-glitch-scale-y)) skewX(var(--fg-glitch-skew));
      }
      68% {
        transform: translate3d(calc(var(--fg-glitch-shift-x) * -0.6), calc(var(--fg-glitch-shift-y) * -0.8), 0) scaleX(calc(2 - var(--fg-glitch-scale-x))) scaleY(calc(2 - var(--fg-glitch-scale-y))) skewX(calc(var(--fg-glitch-skew) * -0.55));
      }
      100% {
        transform: translate3d(0, 0, 0) scale(1);
      }
    }

    @keyframes foreground-glitch-slice-a {
      0% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
      }
      30% {
        opacity: 0.54;
        transform: translate3d(-10px, 0, 0) skewX(-0.8deg);
      }
      100% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
      }
    }

    @keyframes foreground-glitch-slice-b {
      0% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
      }
      38% {
        opacity: 0.44;
        transform: translate3d(12px, 0, 0) skewX(0.7deg);
      }
      100% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
      }
    }

    @keyframes glitch-in-soft {
      /* No transform here at all, on purpose — any translate/skew/scale on
         a video mid-crossfade turned out to be exactly what mobile was
         rendering as "the video jumps to the wrong spot before centering".
         Everything below only touches opacity/filter/clip-path, which
         can't move or resize the element, so the glitch punch (RGB split,
         scanline tears, brightness snaps) is safe to push harder than
         before. */
      0% {
        filter: blur(0.4px) contrast(1.3) brightness(1.15) saturate(1.3) hue-rotate(8deg) drop-shadow(7px 0 rgba(90, 170, 255, 0.4)) drop-shadow(-6px 0 rgba(255, 70, 70, 0.32));
        clip-path: inset(70% 0 4% 0);
        opacity: 0.5;
      }
      14% {
        filter: blur(0.6px) contrast(1.5) brightness(0.9) saturate(0.7) drop-shadow(-8px 0 rgba(255, 70, 70, 0.36));
        clip-path: inset(4% 0 82% 0);
        opacity: 0.7;
      }
      30% {
        filter: blur(0.25px) contrast(1.15) brightness(1.08) saturate(1.2) hue-rotate(-6deg) drop-shadow(5px 0 rgba(90, 170, 255, 0.28));
        clip-path: inset(46% 0 20% 0);
        opacity: 0.9;
      }
      46% {
        filter: blur(0.45px) contrast(1.25) brightness(0.95) drop-shadow(-4px 0 rgba(255, 70, 70, 0.2));
        clip-path: inset(18% 0 52% 0);
        opacity: 0.8;
      }
      64% {
        filter: blur(0.12px) contrast(1.08) brightness(1.02) saturate(1.05);
        clip-path: inset(58% 0 10% 0);
        opacity: 0.97;
      }
      100% {
        filter: none;
        clip-path: inset(0 0 0 0);
        opacity: 1;
      }
    }

    @keyframes glitch-out-soft {
      0% {
        filter: none;
        clip-path: inset(0 0 0 0);
        opacity: 0.96;
      }
      18% {
        filter: blur(0.5px) contrast(1.3) brightness(1.05) saturate(1.15) drop-shadow(-6px 0 rgba(255, 90, 90, 0.3));
        clip-path: inset(8% 0 74% 0);
        opacity: 0.82;
      }
      38% {
        filter: blur(0.7px) contrast(1.15) brightness(0.85) saturate(0.7) hue-rotate(6deg) drop-shadow(6px 0 rgba(90, 170, 255, 0.28));
        clip-path: inset(62% 0 12% 0);
        opacity: 0.55;
      }
      60% {
        filter: blur(1px) contrast(1.05) brightness(0.68) saturate(0.5) drop-shadow(-5px 0 rgba(255, 90, 90, 0.2));
        clip-path: inset(22% 0 60% 0);
        opacity: 0.3;
      }
      100% {
        filter: blur(1.4px) contrast(0.96) brightness(0.58) saturate(0.28);
        clip-path: inset(70% 0 6% 0);
        opacity: 0;
      }
    }

    @keyframes cover-glitch-in-soft {
      0% {
        transform: scale(calc(var(--poster-scale) * 0.972)) translate3d(calc(var(--drift-x) * 0.28 + 8px), calc(var(--drift-y) * 0.28), 0);
        filter: grayscale(100%) blur(1.25px) brightness(0.34) contrast(1.18);
        clip-path: inset(58% 0 10% 0);
        opacity: 0.66;
      }
      36% {
        transform: scale(calc(var(--poster-scale) * 0.964)) translate3d(calc(var(--drift-x) * 0.34 - 5px), calc(var(--drift-y) * 0.35), 0);
        filter: grayscale(100%) blur(0.9px) brightness(0.42) contrast(1.08);
        clip-path: inset(16% 0 60% 0);
        opacity: 0.9;
      }
      100% {
        transform: scale(calc(var(--poster-scale) * 0.96)) translate3d(calc(var(--drift-x) * 0.35), calc(var(--drift-y) * 0.35), 0);
        filter: grayscale(100%) blur(0.8px) brightness(0.46);
        clip-path: inset(0 0 0 0);
        opacity: 1;
      }
    }

    @keyframes cover-glitch-out-soft {
      0% {
        transform: scale(calc(var(--poster-scale) * 0.96)) translate3d(calc(var(--drift-x) * 0.35), calc(var(--drift-y) * 0.35), 0);
        filter: grayscale(100%) blur(0.8px) brightness(0.46);
        clip-path: inset(0 0 0 0);
        opacity: 1;
      }
      40% {
        transform: scale(calc(var(--poster-scale) * 0.968)) translate3d(calc(var(--drift-x) * 0.32 - 6px), calc(var(--drift-y) * 0.35), 0);
        filter: grayscale(100%) blur(1.15px) brightness(0.34) contrast(1.06);
        clip-path: inset(12% 0 64% 0);
        opacity: 0.56;
      }
      100% {
        transform: scale(calc(var(--poster-scale) * 0.978)) translate3d(calc(var(--drift-x) * 0.24 + 10px), calc(var(--drift-y) * 0.28), 0);
        filter: grayscale(100%) blur(1.5px) brightness(0.24);
        clip-path: inset(68% 0 8% 0);
        opacity: 0;
      }
    }

    video.glitch-in,
    video.glitch-out,
    video.glitch-effect {
      will-change: transform, filter, opacity;
      backface-visibility: hidden;
      transform-origin: center center;
    }

    video.glitch-in {
      animation: none !important;
      clip-path: none !important;
      filter: grayscale(0%) blur(0px) brightness(100%) !important;
      opacity: 1;
      transition: opacity 0.34s ease, transform 0.42s ease, filter 0.34s ease !important;
    }

    video.glitch-out {
      animation: none !important;
      clip-path: none !important;
      opacity: 0;
      filter: grayscale(0%) blur(1.8px) brightness(68%) !important;
      transition: opacity 0.34s ease, transform 0.42s ease, filter 0.34s ease !important;
    }

    video.glitch-poster.glitch-in {
      animation: none !important;
      clip-path: none !important;
      filter: none !important;
    }

    video.glitch-poster.glitch-out {
      animation: none !important;
      clip-path: none !important;
      filter: none !important;
    }

    video.glitch-video.glitch-in {
      animation: glitch-in-soft 0.32s cubic-bezier(0.22, 1, 0.36, 1) both !important;
    }

    video.glitch-video.glitch-out {
      animation: glitch-out-soft 0.32s cubic-bezier(0.22, 1, 0.36, 1) both !important;
    }

    #video_cover_stage.glitch-in #video_cover_art,
    #video_cover_stage.glitch-out #video_cover_art {
      will-change: transform, filter, opacity;
      backface-visibility: hidden;
      transform-origin: center center;
    }

    #video_cover_stage.glitch-in #video_cover_art {
      animation: cover-glitch-in-soft 0.3s cubic-bezier(0.22, 1, 0.36, 1) both !important;
      transition: filter 0.34s ease, transform 0.45s ease, opacity 0.3s ease !important;
    }

    #video_cover_stage.glitch-out #video_cover_art {
      animation: cover-glitch-out-soft 0.26s cubic-bezier(0.22, 1, 0.36, 1) both !important;
      transition: filter 0.3s ease, transform 0.4s ease, opacity 0.26s ease !important;
    }

    body[data-experience-mode="icon"] #icon {
      opacity: 0.18;
      transform: scale(1.02);
      filter: drop-shadow(0 0 24px color-mix(in srgb, var(--color) 45%, transparent));
    }

    body[data-experience-mode="poster"] #icon,
    body[data-experience-mode="video"] #icon {
      opacity: 0.1;
    }

    body[data-experience-mode="playing"] #icon {
      opacity: 0.06;
    }

    body[data-experience-mode="icon"] #main_cover {
      box-shadow: 0 0 30px color-mix(in srgb, var(--color) 22%, transparent);
      animation: none;
    }

    body[data-experience-mode="poster"] #title,
    body[data-experience-mode="poster"] #cat {
      transform: translateX(0);
    }

    body[data-experience-mode="playing"] #title,
    body[data-experience-mode="playing"] #cat {
      transform: translateX(4px);
    }

    #hd_toggle {
      position: fixed;
      bottom: 15px;
      right: 15px;
      color: white;
      font-family: "Oswald", sans-serif;
      font-size: 14px;
      font-weight: bold;
      padding: 5px 10px;
      border: 2px solid var(--color);
      border-radius: 6px;
      cursor: pointer;
      z-index: 2000;
      user-select: none;
      transition: 0.3s;
    }
    #contact_trigger{
      position: fixed;
      bottom: 15px;
      left: 15px;
      width: 42px;
      height: 42px;
      border: 2px solid rgba(255, 255, 255, 0.78);
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.32);
      background-position: center;
      background-repeat: no-repeat;
      cursor: pointer;
      z-index: 2000;
      user-select: none;
      transition: background-color 0.24s ease, border-color 0.24s ease, transform 0.24s ease, opacity 0.24s ease;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
      padding: 0;
    }

    #expand_trigger{
      position: fixed;
      bottom: 15px;
      left: 66px;
      width: 42px;
      height: 42px;
      border: 2px solid rgba(255, 255, 255, 0.78);
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.32) url("/static/img/icons/expand.png") center / 58% no-repeat;
      cursor: pointer;
      z-index: 2000;
      user-select: none;
      transition: background-color 0.24s ease, border-color 0.24s ease, transform 0.24s ease, opacity 0.24s ease, visibility 0.24s ease;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
      padding: 0;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    body.curated-selected-stage #expand_trigger {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    #expand_trigger.is-fading {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    #contact_trigger[data-trending-network="presskit"] {
      background-image: url("/static/img/icons/presskit.png");
      background-size: 58%;
    }

    #contact_trigger[data-trending-network="presskit"].is-curated-stage {
      background-image: url("/static/img/icons/presskit.png");
      background-size: 58%;
    }

    #contact_trigger[data-trending-network="instagram"] {
      background-image: url("/static/img/icons/insta_discover.png");
      background-size: 62%;
    }

    #contact_trigger:hover,
    #expand_trigger:hover {
      background-color: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.96);
      transform: translateY(-1px);
    }
    #hd_toggle.active {
      background: var(--color);
      color: black;
    }

    @media screen and (max-width: 389px) {
      #hd_toggle,
      #contact_trigger,
      #expand_trigger {
        bottom: 34px;
      }
    }

    #await{
      z-index:999;
      background-color:rgba(0,0,0,0.2);
      position:fixed;
      top:0px;
      left:0px;
      width:100%;
      height:100%;
      display:none;
      backdrop-filter: blur(3px);
    }

    .button_cust{
  padding:10px;
  color:white;
  border:solid 1px white;
  cursor:pointer;
  width:120px;
  font-size:12px;
  text-align:center;
  margin-right:10px;
  display:inline-block;
}

.button_cust.white{
  color:black;
  background-color:white;
  width:120px;
}

    .orient{
      position:fixed;
      top:15px;
      left:15px;
      background-color:rgba(0,0,0,0.8);
      z-index:1000;
      display:none;
      text-align:center;
      border-radius:8px;
      width:calc(100% - 30px);
      -webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.28); 
      box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.28);
      transition:0.5s;
    }

    .orient.hide, #await.hide{
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      display:none !important;
    }

    .rotate-phone-please {
      color: #fff;
      font-family: 'Roboto', sans-serif;
      margin:auto;
      text-align:left;
    }

    .rotate-phone-please table td{
      padding-left: 30px;
      padding-right: 30px;
      padding-top:10px;
      padding-bottom:10px;
    }

    .phone {
      display: inline-block;
      width: 30px;
      height: 60px;
      border: 3px solid #fff;
      border-radius: 5px;
      position: relative;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-name: anim-rotate;
      animation-duration: 2s;
    }

    .phone:after {
      content:'';
      width: 110%;
      border-bottom: 3px solid #fff;
      position: absolute;
      top: 4px;
      left: -1px;
    }

    .phone:before {
      content:'';
      width: 110%;
      border-bottom: 3px solid #fff;
      position: absolute;
      bottom: 6px;
      left: -1px;
    }

    .message{
      margin-top: 10px;
    }

    @keyframes anim-rotate {
      0%, 10% { transform: rotate(0deg) }
      40%, 60% { transform: rotate(90deg) }
      95%, 100% { transform: rotate(0deg) }
    }

    .rotate-device-overlay {
      display: none;
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 999999;
      background:
        radial-gradient(120% 90% at 50% 38%, rgba(156, 199, 255, 0.14), transparent 60%),
        rgba(0,0,0, 0.94);
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 26px;
      backdrop-filter: blur(5px);
      text-align: center;
      padding: 24px;
    }

    .rotate-device-overlay__icon {
      position: relative;
      width: 108px;
      height: 108px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .rotate-device-overlay__phone {
      display: block;
      width: 42px;
      height: 78px;
      border: 2.5px solid rgba(255, 255, 255, 0.92);
      border-radius: 11px;
      position: relative;
      background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.01));
      box-shadow: 0 0 26px rgba(156, 199, 255, 0.28), inset 0 0 10px rgba(255, 255, 255, 0.06);
      animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
      animation-iteration-count: infinite;
      animation-name: anim-rotate;
      animation-duration: 2.4s;
    }

    .rotate-device-overlay__notch {
      position: absolute;
      top: 6px;
      left: 50%;
      transform: translateX(-50%);
      width: 10px;
      height: 2px;
      border-radius: 2px;
      background: rgba(255, 255, 255, 0.55);
    }

    .rotate-device-overlay__screen {
      position: absolute;
      inset: 13px 5px 11px;
      border-radius: 5px;
      background: linear-gradient(160deg, var(--color, #9cc7ff), transparent 72%);
      opacity: 0.4;
    }

    .rotate-device-overlay__home {
      position: absolute;
      bottom: 4px;
      left: 50%;
      transform: translateX(-50%);
      width: 14px;
      height: 2px;
      border-radius: 2px;
      background: rgba(255, 255, 255, 0.45);
    }

    .rotate-device-overlay__message {
      color: #fff;
      font-family: 'Roboto', sans-serif;
      font-size: 15px;
      letter-spacing: 0.01em;
      max-width: 260px;
      opacity: 0.92;
    }

    @media screen and (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) and (pointer: coarse) and (hover: none) {
      .rotate-device-overlay {
        display: flex;
      }
    }

    @media only screen and (max-width: 800px) {
      #main_cover {
        width: 180px;
        height: 180px;
        margin-top:0px;
      }

      #back_cover, #cover{
        width: 180px;
        height: 180px;
        left:calc(20% - 90px);
        top:calc(50% - 100px);
      }

      #back_cover.shht, #cover.shht{
        left:calc(50% - 90px);
      }
    }

    @media screen and (orientation:portrait) and (max-width: 650px) {
      #video_mobile_ghost_canvas,
      #video_mobile_ghost_fallback {
        display: block;
        z-index: 0;
        object-fit: cover;
        object-position: center 23%;
      }

      #video_mobile_ghost_canvas.active,
      #video_mobile_ghost_fallback.active {
        opacity: 0.8;
      }

      #personalized_greeting {
        top: 14px;
        left: 16px;
      }

      #personalized_greeting_label {
        font-size: 9px;
        letter-spacing: 2px;
      }

      #personalized_greeting_name {
        font-size: 18px;
        letter-spacing: 0.5px;
      }

      #personalized_greeting_photo {
        width: 30px;
        height: 30px;
      }


      #mobile_hint {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        background:
          radial-gradient(circle at 50% 79%, rgba(255, 255, 255, 0.09), transparent 28%),
          linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.34));
        transition: opacity 0.38s ease, visibility 0.38s ease;
        z-index: 10000;
      }

      #mobile_hint.is-visible {
        opacity: 1;
        visibility: visible;
      }

      .mobile-hint-arrow {
        position: fixed;
        width: min(42vw, 160px);
        opacity: 0;
        filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.32));
        will-change: transform, clip-path, opacity;
      }

      .mobile-hint-puck {
        position: fixed;
        width: 18px;
        height: 18px;
        border-radius: 999px;
        opacity: 0;
        background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.72) 42%, rgba(255, 255, 255, 0.14) 100%);
        box-shadow:
          0 0 0 10px rgba(255, 255, 255, 0.06),
          0 10px 24px rgba(0, 0, 0, 0.32);
        will-change: transform, opacity;
      }

      .mobile-hint-arrow-right {
        left: 50%;
        bottom: 22%;
        transform: translateX(-50%);
      }

      .mobile-hint-arrow-bottom {
        left: 50%;
        bottom: 12%;
        transform: translate(-50%, 0) rotate(90deg);
      }

      .mobile-hint-puck-right {
        left: 50%;
        bottom: calc(22% + 8px);
        transform: translateX(calc(-50% - 44px));
      }

      .mobile-hint-puck-bottom {
        left: 50%;
        bottom: calc(12% + 74px);
        transform: translate(-50%, -26px);
      }

      .mobile-hint-arrow-right.is-playing {
        animation: mobile-hint-sweep-right 0.92s cubic-bezier(0.22, 1, 0.36, 1) forwards;
      }

      .mobile-hint-arrow-bottom.is-playing {
        animation: mobile-hint-sweep-down 0.92s cubic-bezier(0.22, 1, 0.36, 1) forwards;
      }

      .mobile-hint-puck-right.is-playing {
        animation: mobile-hint-puck-right 0.92s cubic-bezier(0.22, 1, 0.36, 1) forwards;
      }

      .mobile-hint-puck-bottom.is-playing {
        animation: mobile-hint-puck-down 0.92s cubic-bezier(0.22, 1, 0.36, 1) forwards;
      }

      @keyframes mobile-hint-sweep-right {
        0% {
          opacity: 0;
          clip-path: inset(0 100% 0 0);
          transform: translateX(calc(-50% - 22px));
        }
        18% {
          opacity: 0.56;
          clip-path: inset(0 60% 0 0);
          transform: translateX(calc(-50% - 10px));
        }
        58% {
          opacity: 0.56;
          clip-path: inset(0 0 0 0);
          transform: translateX(-50%);
        }
        100% {
          opacity: 0;
          clip-path: inset(0 0 0 100%);
          transform: translateX(calc(-50% + 22px));
        }
      }

      @keyframes mobile-hint-sweep-down {
        0% {
          opacity: 0;
          clip-path: inset(100% 0 0 0);
          transform: translate(-50%, -22px) rotate(90deg);
        }
        18% {
          opacity: 0.56;
          clip-path: inset(60% 0 0 0);
          transform: translate(-50%, -10px) rotate(90deg);
        }
        58% {
          opacity: 0.56;
          clip-path: inset(0 0 0 0);
          transform: translate(-50%, 0) rotate(90deg);
        }
        100% {
          opacity: 0;
          clip-path: inset(0 0 100% 0);
          transform: translate(-50%, 22px) rotate(90deg);
        }
      }

      @keyframes mobile-hint-puck-right {
        0% {
          opacity: 0;
          transform: translateX(calc(-50% - 50px)) scale(0.86);
        }
        20% {
          opacity: 1;
        }
        62% {
          opacity: 1;
          transform: translateX(calc(-50% + 6px)) scale(1);
        }
        100% {
          opacity: 0;
          transform: translateX(calc(-50% + 38px)) scale(0.94);
        }
      }

      @keyframes mobile-hint-puck-down {
        0% {
          opacity: 0;
          transform: translate(-50%, -34px) scale(0.86);
        }
        20% {
          opacity: 1;
        }
        62% {
          opacity: 1;
          transform: translate(-50%, 4px) scale(1);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, 34px) scale(0.94);
        }
      }

      .orient{
        display:table !important;
      }

      #await{
        display:block;
      }

      body.force {
        --mobile-stage-top: 13svh;
        --mobile-carousel-height: 50%;
        --mobile-title-bottom: 37%;
        --mobile-cover-shht-lift: 3.4svh;
      }

      .swiper-vertical {
        width: 100%;
        bottom: -8svh;
        top: unset;
        height: var(--mobile-carousel-height);
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.22) 18%, rgba(0, 0, 0, 0.52) 100%) !important;
        padding: 4vh 0 13vh;
        z-index: 2;
        overflow: visible;
        -webkit-mask-image: linear-gradient(to bottom,
          transparent 0%,
          transparent 10%,
          black 18%,
          black 86%,
          transparent 100%     /* invisible en bas */
        );
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;

        mask-image: linear-gradient(to bottom,
          transparent 0%,
          transparent 10%,
          black 18%,
          black 86%,
          transparent 100%
        );
        mask-repeat: no-repeat;
        mask-size: 100% 100%;
      }

      .swiper-vertical .swiper-slide {
        opacity: 0.2;
        filter: grayscale(0.88);
        transform: none;
        transition: opacity 0.32s ease, filter 0.32s ease;
      }

      .swiper-vertical .swiper-slide-active {
        opacity: 1;
        filter: grayscale(0);
        transform: none;
      }

      .swiper-vertical .swiper-slide-prev {
        opacity: 0.26;
        filter: grayscale(0.72);
        transform: none;
      }

      .swiper-vertical .swiper-slide-next {
        opacity: 0.48;
        filter: grayscale(0.45);
        transform: none;
      }

      .swiper-vertical .swiper-slide-active ~ .swiper-slide:not(.swiper-slide-next) {
        opacity: 0.16;
        filter: grayscale(0.82);
        transform: none;
      }

      .swiper-horizontal {
        padding: 0 28px;
      }

      .swiper-horizontal .swiper-slide {
        height: 92px;
        width: 128px;
      }

      .swiper-slide.square {
        width: 92px !important;
      }

      .swiper-horizontal .swiper-slide.title-cell {
        width: 92px;
        height: 92px;
      }

      .curated-reveal-slide,
      .swiper-horizontal .swiper-slide.title-cell.curated-reveal-slide {
        width: 128px !important;
        min-width: 128px !important;
        max-width: 128px !important;
        height: 92px !important;
        min-height: 92px !important;
        max-height: 92px !important;
        padding: 0 8px !important;
      }

      .nav-left {
        left: 20px;
        bottom: 13%;
        top:unset;
        right:unset;
      }
      .nav-right {
        right: 20px;
        bottom: 13%;
        top:unset;
      }

      .nav-button {
        width: 58px;
        height: 58px;
        background-size: 62%;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
      }

      #title{
        left:50%;
        transform: translateX(-50%);
        width: max-content;
        max-width: calc(100vw - 74px);
        bottom: var(--mobile-title-bottom);
        top: unset;
        padding: 12px 18px 13px;
        border-radius: 22px;
        font-size: clamp(18px, 5.4vw, 28px);
        line-height: 1.02;
        text-align:center;
        letter-spacing: 1px;
        z-index: 4;
        white-space: normal;
        overflow-wrap: anywhere;
        text-wrap: balance;
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
        margin-inline: auto;
      }

      body[data-experience-mode="poster"] #title,
      body[data-experience-mode="video"] #title,
      body[data-experience-mode="playing"] #title,
      body[data-experience-mode="poster"] #cat,
      body[data-experience-mode="video"] #cat,
      body[data-experience-mode="playing"] #cat {
        transform: translateX(-50%);
      }

      body.force #title.shht{
        bottom: calc(11% + 29px + 18px);
        opacity:0.84 !important;
        transform: translate(-50%, 50%);
        width: auto;
        max-width: calc(100vw - 132px);
        display: inline-flex;
        inline-size: fit-content;
        white-space: nowrap;
        padding-left: 18px;
        padding-right: 18px;
        pointer-events: none;
      }

      body.force #cat.shht{
        bottom: calc(11% + 29px + 62px);
        opacity:0.68 !important;
        transform: translateX(-50%) scale(0.94);
      }

      body.force video {  
        width: calc(100vw + 72px);
        height: auto;
        min-width: calc(100vw + 72px);
        min-height: 0;
        max-width: none;
        max-height: none;
        aspect-ratio: 16 / 9;
        top: 44%;
        left: 50%;
        margin-left: 0;
        transform: translate3d(-50%, -50%, 0);
        object-fit: cover;
        object-position: center;
        box-shadow: 0 22px 60px rgba(0, 0, 0, 0.34);
        transition: top 0.82s cubic-bezier(0.28, 0.08, 0.22, 1), transform 0.82s cubic-bezier(0.28, 0.08, 0.22, 1), filter 0.5s ease, opacity 0.35s ease !important;
        transition-delay: 0s !important;
      }

      body.force.has-portrait-video video.is-portrait {
        width: 100vw;
        height: 100vh;
        min-width: 0;
        min-height: 0;
        max-width: 100vw;
        max-height: 100vh;
        aspect-ratio: auto;
        top: 50%;
        left: 50%;
        object-fit: contain;
        object-position: center center;
        transform: translate3d(-50%, -50%, 0);
        box-shadow: none;
      }

      body.force.has-portrait-video video.active,
      body.force.has-portrait-video[data-experience-mode="poster"] video.is-portrait,
      body.force.has-portrait-video[data-experience-mode="video"] video.is-portrait,
      body.force.has-portrait-video[data-experience-mode="playing"] video.active.is-portrait {
        top: 50%;
        transform: translate3d(-50%, -50%, 0);
      }

      body.force.has-portrait-video.is-shht video.is-portrait,
      body.force.has-portrait-video.is-shht video.active.is-portrait {
        top: 50%;
        transform: translate3d(-50%, -50%, 0);
        object-position: center center;
      }

      body.force #video_mobile_ghost_canvas,
      body.force #video_mobile_ghost_fallback {
        width: 100vw;
        height: 100vh;
        min-width: 100vw;
        min-height: 100vh;
        top: 0;
        left: 0;
        margin-left: 0;
        aspect-ratio: auto;
        object-fit: cover;
        object-position: center 23%;
      }

      body.force[data-experience-mode="poster"] video {
        object-fit: cover;
        object-position: center center;
      }

      body.force video.active,
      body.force[data-experience-mode="poster"] video,
      body.force[data-experience-mode="video"] video,
      body.force[data-experience-mode="playing"] video.active {
        top: 44%;
        transform: translate3d(-50%, -50%, 0);
      }

      body.force.is-shht video {
        top: 10%;
        transform: translate3d(-50%, 0, 0);
        object-position: center 19%;
        transition-delay: 0s !important;
      }

      body.force.is-shht video.active,
      body.force.is-shht[data-experience-mode="video"] video,
      body.force.is-shht[data-experience-mode="playing"] video.active {
        top: 10%;
        transform: translate3d(-50%, 0, 0);
      }

      body.force #check_quality.shht, body.force #presskit.shht{
        opacity:0.3 !important;
      }

      body.force #title.shht h1, body.force #title.shht span {
        padding:0px !important;
        background-color:transparent !important;
      }
      #cat{
        left:50%;
        transform: translateX(-50%);
        bottom: calc(var(--mobile-title-bottom) + 60px);
        top: unset;
        font-size: 11px;
        letter-spacing: 0.16em;
        white-space: nowrap;
        z-index: 4;
      }

      #cover, #back_cover{
        left:calc(50% - 90px);
        top: var(--mobile-stage-top);
        z-index: 3;
        transform: translate3d(0, 0, 0);
        transition: left 0.52s ease, top 0.82s cubic-bezier(0.28, 0.08, 0.22, 1), opacity 0.5s ease, transform 0.82s cubic-bezier(0.28, 0.08, 0.22, 1);
      }

      #video_cover_stage {
        align-items: flex-start;
        padding-top: 21svh;
        transform: translate3d(0, 0, 0);
        z-index: 1;
        transition: opacity 0.34s ease, transform 0.82s cubic-bezier(0.28, 0.08, 0.22, 1), padding-top 0.82s cubic-bezier(0.28, 0.08, 0.22, 1);
        transition-delay: 0s;
      }

      body.force #title,
      body.force #cat {
        transition: bottom 0.8s cubic-bezier(0.28, 0.08, 0.22, 1), opacity 0.34s ease, transform 0.8s cubic-bezier(0.28, 0.08, 0.22, 1), max-width 0.5s ease, width 0.5s ease;
      }

      #video_cover_art {
        width: min(60vw, 340px);
        min-width: 220px;
        max-width: 78vw;
      }

      body.force:not(.is-shht) #video_cover_art,
      body.force:not(.is-shht) #video_cover_art_buffer {
        opacity: 0 !important;
        transition-delay: 0s !important;
      }

      body.force:not(.is-shht) #title,
      body.force:not(.is-shht) #cat,
      body.force:not(.is-shht) #video_cover_stage {
        transition-delay: 0s !important;
      }

      body.force.is-shht #title,
      body.force.is-shht #cat {
        transition-delay: 0s !important;
      }

      body.force.is-shht #video_cover_stage {
        transition-delay: 0.42s !important;
      }

      body.force.is-shht #video_cover_art,
      body.force.is-shht #video_cover_art_buffer {
        transition-delay: 0.42s !important;
      }

      body.force.is-shht #video_cover_art {
        animation: shht-video-cover-float 4.8s ease-in-out infinite;
      }

    body.force.is-shht #video_cover_stage {
        padding-top: 15.6svh;
        transform: translate3d(0, calc(var(--mobile-cover-shht-lift) * -1), 0);
        z-index: 5;
      }

      #back{
        background-image: url("/static/img/backgrounds/back_tmv.jpg");
        background-position:center;
        background-size:cover;
      }

      #cover.shht, #back_cover.shht{
        --shht-cover-offset-y: calc(var(--mobile-cover-shht-lift) * -1);
        opacity: 0 !important;
        transform: translate3d(0, calc(var(--mobile-cover-shht-lift) * -1), 0) scale(0.965);
      }

      body.force #cover.hey{
        top: var(--mobile-stage-top) !important;
      }

      body.force .swiper-vertical.shht {
        opacity: 0 !important;
      }

      body.force .swiper-horizontal.shht {
        opacity: 0.26 !important;
      }

      body.force button.shht,
      body.force #hd_toggle.shht,
      body.force #contact_trigger.shht {
        opacity: 0.32 !important;
      }

      body.force.expand-experience-active #hd_toggle,
      body.force.expand-experience-active #contact_trigger {
        opacity: 0 !important;
        pointer-events: none !important;
      }

      .title_linkout_desktop {
        display: none !important;
      }

      .title_linkout_mobile {
        display: inline-flex;
      }

      body.force:not(.is-shht) .title_linkout_mobile {
        opacity: 1;
        pointer-events: auto;
      }

      body.force.is-shht .title_linkout_mobile {
        opacity: 0;
        pointer-events: none;
      }

    }

    #expand_trigger.shht {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    @media screen and (orientation:portrait) and (max-width: 650px) {

      .video_cover_linkout {
        transition:
          opacity 0.32s ease,
          background-color 0.22s ease,
          border-color 0.22s ease;
        will-change: opacity;
      }

      .title_linkout_mobile {
        transition: opacity 0.22s ease, background-color 0.22s ease, border-color 0.22s ease;
      }

      body.force #expand_trigger.shht {
        opacity: 0.32 !important;
        visibility: visible !important;
        pointer-events: none !important;
      }
    }

    @media screen and (orientation:portrait) and (max-width: 650px) and (max-height: 780px) {

      body.force {
        --mobile-stage-top: 13svh;
        --mobile-title-bottom: 37%;
        --mobile-carousel-height: 52%;
      }

    }

    @media screen and (orientation:portrait) and (max-width: 650px) and (max-height: 740px) {

      body.force {
        --mobile-stage-top: 13svh;
        --mobile-title-bottom: 35%;
        --mobile-carousel-height: 54%;
      }
    }