/* =========================================================
   CLASTIE V40
   - V14 auth restored
   - static premium hero
   - compact story caption
   ========================================================= */

/* HERO: more realistic animated fox/video area */
.cl9-hero{
    isolation:isolate!important;
}
.cl9-hero-video{
    display:block!important;
    object-fit:cover!important;
    object-position:center center!important;
    filter:saturate(1.06) contrast(1.08) brightness(.82)!important;
    transform:scale(1.035)!important;
    animation:cl41HeroVideoMotion 18s ease-in-out infinite alternate!important;
}
.cl9-hero-image{
    display:none!important;
}
.cl9-hero::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    pointer-events:none!important;
    background:
      radial-gradient(circle at 78% 34%, rgba(255,145,46,.18), transparent 24%),
      radial-gradient(circle at 74% 52%, rgba(255,114,24,.14), transparent 20%),
      radial-gradient(circle at 18% 24%, rgba(45,199,255,.12), transparent 18%);
    mix-blend-mode:screen!important;
    animation:cl41HeroGlow 14s ease-in-out infinite alternate!important;
}
.cl9-hero::after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    pointer-events:none!important;
    background:
      linear-gradient(90deg, rgba(6,11,20,.92) 0%, rgba(6,11,20,.62) 38%, rgba(6,11,20,.22) 68%, rgba(6,11,20,.48) 100%),
      linear-gradient(180deg, rgba(6,11,20,.08) 0%, rgba(6,11,20,.30) 42%, rgba(6,11,20,.74) 100%);
}
.cl9-hero-overlay{
    z-index:1!important;
    background:
      radial-gradient(circle at 70% 26%, rgba(255,143,34,.10), transparent 18%),
      linear-gradient(90deg,rgba(6,11,20,.78) 0%,rgba(6,11,20,.36) 45%,rgba(6,11,20,.08) 72%,rgba(6,11,20,.22) 100%),
      linear-gradient(180deg,rgba(6,11,20,.10),rgba(6,11,20,.54))!important;
}
.cl9-hero-inner{
    position:relative!important;
    z-index:3!important;
}
@keyframes cl41HeroVideoMotion{
    0%{transform:scale(1.03) translate3d(0,0,0)}
    50%{transform:scale(1.055) translate3d(0,-6px,0)}
    100%{transform:scale(1.04) translate3d(6px,-10px,0)}
}
@keyframes cl41HeroGlow{
    0%{opacity:.62; transform:translate3d(0,0,0) scale(1)}
    100%{opacity:1; transform:translate3d(-8px,-6px,0) scale(1.03)}
}

/* Story: eliminate the large black caption rectangle */
.cl36-stage{
    background:#0c0c0d!important;
}
.cl36-media{
    top:184px!important;
    height:485px!important;
    border-radius:12px!important;
}
.cl36-caption{
    left:10px!important;
    right:10px!important;
    bottom:10px!important;
    min-height:0!important;
    max-height:105px!important;
    padding:35px 14px 12px!important;
    border-radius:0 0 12px 12px!important;
    background:
      linear-gradient(180deg,transparent 0%,rgba(9,9,10,.76) 34%,rgba(9,9,10,.96) 100%)!important;
    overflow-y:auto!important;
    pointer-events:none!important;
}
#cl14-story-text,
#cl25-story-tags,
#cl25-story-music{
    pointer-events:auto!important;
}
#cl14-story-text{
    margin:0!important;
    padding:0!important;
    color:#fff!important;
    font-size:15px!important;
    line-height:1.38!important;
    font-weight:700!important;
}
#cl25-story-tags{
    margin-top:5px!important;
}
#cl25-story-tags span{
    font-size:12px!important;
}
#cl25-story-music{
    margin-top:6px!important;
}

/* Keep caption visually attached to the image instead of a separate box */
.cl36-media:after{
    content:""!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    height:105px!important;
    pointer-events:none!important;
    background:linear-gradient(180deg,transparent,rgba(0,0,0,.54))!important;
    z-index:1!important;
}
#cl14-story-media{
    position:relative!important;
    z-index:0!important;
}
.cl36-nav{
    z-index:4!important;
}

/* mobile */
@media(max-width:620px){
    .cl36-media{
        top:18%!important;
        height:64%!important;
    }
    .cl36-caption{
        left:0!important;
        right:0!important;
        bottom:0!important;
        padding:42px 14px 14px!important;
        border-radius:0!important;
    }
}

/* === V42 story viewer beautify + more realistic hero === */
.cl36-stage{
    background:linear-gradient(180deg,#0a0d12 0%,#0b1018 100%)!important;
    border:1px solid rgba(255,255,255,.08)!important;
    box-shadow:0 28px 100px rgba(0,0,0,.68)!important;
}
.cl36-media{
    top:170px!important;
    left:12px!important;
    right:12px!important;
    height:520px!important;
    border-radius:18px!important;
    background:#06080d!important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)!important;
}
#cl14-story-media{
    width:100%!important;
    height:100%!important;
    display:grid!important;
    place-items:center!important;
    background:
        radial-gradient(circle at center, rgba(255,255,255,.045), transparent 42%),
        linear-gradient(180deg, rgba(10,14,22,.96), rgba(5,7,11,.98))!important;
}
#cl14-story-media img,
#cl14-story-media video{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
    border-radius:18px!important;
    background:#07090d!important;
}
.cl36-media:after{
    content:""!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    height:172px!important;
    pointer-events:none!important;
    background:linear-gradient(180deg, rgba(3,5,8,0) 0%, rgba(3,5,8,.08) 18%, rgba(3,5,8,.44) 52%, rgba(3,5,8,.88) 86%, rgba(3,5,8,.97) 100%)!important;
    z-index:2!important;
}
.cl36-caption{
    position:absolute!important;
    left:20px!important;
    right:20px!important;
    bottom:18px!important;
    min-height:0!important;
    max-height:120px!important;
    padding:0!important;
    overflow:visible!important;
    background:transparent!important;
    border-radius:0!important;
    z-index:5!important;
    pointer-events:none!important;
}
#cl14-story-text,
#cl25-story-tags,
#cl25-story-music{
    pointer-events:auto!important;
}
#cl14-story-text{
    display:inline-block!important;
    max-width:100%!important;
    margin:0!important;
    padding:11px 14px!important;
    border-radius:16px!important;
    background:rgba(9,12,18,.74)!important;
    border:1px solid rgba(255,255,255,.08)!important;
    backdrop-filter:blur(12px)!important;
    -webkit-backdrop-filter:blur(12px)!important;
    color:#ffffff!important;
    font-size:15px!important;
    line-height:1.42!important;
    font-weight:700!important;
    box-shadow:0 14px 34px rgba(0,0,0,.26)!important;
    white-space:pre-wrap!important;
    overflow-wrap:anywhere!important;
}
#cl14-story-text:empty{
    display:none!important;
}
#cl25-story-tags{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:8px!important;
    margin-top:8px!important;
}
#cl25-story-tags:empty{
    display:none!important;
}
#cl25-story-tags span{
    display:inline-flex!important;
    align-items:center!important;
    padding:6px 10px!important;
    border-radius:999px!important;
    background:rgba(255,151,43,.14)!important;
    border:1px solid rgba(255,151,43,.28)!important;
    color:#ffb66d!important;
    font-size:12px!important;
    font-weight:800!important;
    line-height:1!important;
    letter-spacing:.02em!important;
    box-shadow:none!important;
}
#cl25-story-music{
    display:inline-flex!important;
    align-items:center!important;
    gap:6px!important;
    width:auto!important;
    margin-top:8px!important;
    padding:7px 10px!important;
    border-radius:999px!important;
    background:rgba(20,26,35,.84)!important;
    border:1px solid rgba(255,255,255,.08)!important;
    color:#dce5f5!important;
    font-size:11px!important;
    box-shadow:0 10px 26px rgba(0,0,0,.18)!important;
}
.cl36-nav{
    width:48px!important;
    height:48px!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.18)!important;
    backdrop-filter:blur(8px)!important;
    -webkit-backdrop-filter:blur(8px)!important;
    font-size:28px!important;
}
.cl36-prev{left:10px!important}
.cl36-next{right:10px!important}
.cl36-header{
    left:18px!important;
    right:18px!important;
}
.cl36-views{
    background:rgba(11,14,20,.74)!important;
    border:1px solid rgba(255,255,255,.08)!important;
    backdrop-filter:blur(10px)!important;
    -webkit-backdrop-filter:blur(10px)!important;
}
@media(max-width:620px){
    .cl36-stage{
        width:100vw!important;
        max-width:none!important;
        height:100dvh!important;
        border-radius:0!important;
        border:0!important;
    }
    .cl36-media{
        top:18%!important;
        left:0!important;
        right:0!important;
        height:66%!important;
        border-radius:0!important;
    }
    #cl14-story-media img,
    #cl14-story-media video{
        border-radius:0!important;
    }
    .cl36-caption{
        left:14px!important;
        right:14px!important;
        bottom:14px!important;
        max-height:126px!important;
    }
    #cl14-story-text{
        font-size:14px!important;
        padding:10px 12px!important;
    }
}

/* Hero video — make it feel more natural/cinematic, not artificial */
.cl9-hero-video{
    object-fit:cover!important;
    object-position:center center!important;
    filter:saturate(1.02) contrast(1.09) brightness(.76) sepia(.04)!important;
    transform:scale(1.02)!important;
    animation:cl42HeroNatural 20s ease-in-out infinite alternate!important;
}
.cl9-hero::before{
    background:
        radial-gradient(circle at 76% 36%, rgba(255,149,64,.13), transparent 21%),
        radial-gradient(circle at 70% 54%, rgba(255,126,42,.10), transparent 18%),
        radial-gradient(circle at 20% 28%, rgba(52,168,255,.08), transparent 16%)!important;
    opacity:.9!important;
}
.cl9-hero::after{
    background:
      linear-gradient(90deg, rgba(6,11,20,.92) 0%, rgba(6,11,20,.60) 36%, rgba(6,11,20,.18) 68%, rgba(6,11,20,.44) 100%),
      linear-gradient(180deg, rgba(6,11,20,.12) 0%, rgba(6,11,20,.24) 40%, rgba(6,11,20,.72) 100%)!important;
}
@keyframes cl42HeroNatural{
    0%{transform:scale(1.02) translate3d(0,0,0)}
    25%{transform:scale(1.035) translate3d(0,-4px,0)}
    50%{transform:scale(1.045) translate3d(5px,-7px,0)}
    75%{transform:scale(1.035) translate3d(2px,-3px,0)}
    100%{transform:scale(1.025) translate3d(-4px,-8px,0)}
}



/* === V43 Instagram story popup + realistic hero + volume controls === */
.cl36-stage{
    width:min(430px,96vw)!important;
    height:min(860px,94vh)!important;
    border-radius:28px!important;
    background:#07090d!important;
    border:1px solid rgba(255,255,255,.08)!important;
    box-shadow:0 36px 120px rgba(0,0,0,.76)!important;
}
.cl36-body{
    position:absolute!important;
    inset:0!important;
    padding:0!important;
}
.cl36-media{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    background:#06090f!important;
    border-radius:28px!important;
    overflow:hidden!important;
}
#cl14-story-media{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    background:#06090f!important;
}
#cl14-story-media::before{
    content:''!important;
    position:absolute!important;
    inset:0!important;
    pointer-events:none!important;
    background:
        linear-gradient(180deg, rgba(3,5,8,.72) 0%, rgba(3,5,8,.26) 18%, rgba(3,5,8,0) 38%, rgba(3,5,8,0) 58%, rgba(3,5,8,.30) 76%, rgba(3,5,8,.88) 100%),
        radial-gradient(circle at top right, rgba(255,153,68,.14), transparent 23%);
    z-index:2!important;
}
#cl14-story-media img,
#cl14-story-media video{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
    display:block!important;
    border-radius:28px!important;
}
.cl36-header{
    top:20px!important;
    left:16px!important;
    right:16px!important;
    z-index:6!important;
}
.cl36-avatar{
    width:44px!important;
    height:44px!important;
    border-radius:14px!important;
    border:1px solid rgba(255,255,255,.16)!important;
    box-shadow:0 8px 20px rgba(0,0,0,.28)!important;
}
.cl36-userinfo b{font-size:16px!important;color:#fff!important}
.cl36-userinfo small{font-size:13px!important;color:rgba(255,255,255,.78)!important}
.cl36-progress{
    top:12px!important;
    left:12px!important;
    right:12px!important;
    z-index:8!important;
}
.cl36-progress-segment{
    background:rgba(255,255,255,.20)!important;
    overflow:hidden!important;
    border-radius:999px!important;
    height:3px!important;
}
.cl36-progress-segment i{
    background:#fff!important;
    border-radius:999px!important;
}
.cl36-views,
.cl36-close,
.cl36-nav,
.cl43-story-volume-btn{
    background:rgba(12,16,24,.62)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    border:1px solid rgba(255,255,255,.10)!important;
    box-shadow:0 10px 24px rgba(0,0,0,.24)!important;
}
.cl36-views{
    display:inline-flex!important;
    align-items:center!important;
    gap:7px!important;
    border-radius:999px!important;
    padding:9px 12px!important;
    color:#fff!important;
}
.cl36-close{
    width:40px!important;
    height:40px!important;
    border-radius:999px!important;
    color:#fff!important;
    font-size:30px!important;
    line-height:1!important;
}
.cl36-nav{
    width:52px!important;
    height:52px!important;
    border-radius:999px!important;
    color:#fff!important;
    z-index:5!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    font-size:30px!important;
}
.cl36-prev{left:12px!important}
.cl36-next{right:12px!important}
.cl36-caption{
    position:absolute!important;
    left:16px!important;
    right:16px!important;
    bottom:18px!important;
    z-index:6!important;
    min-height:0!important;
    max-height:none!important;
    padding:0!important;
    background:transparent!important;
    overflow:visible!important;
}
#cl14-story-text{
    display:inline-block!important;
    max-width:min(100%, 92%)!important;
    margin:0 0 10px 0!important;
    padding:12px 14px!important;
    border-radius:18px!important;
    background:rgba(9,12,18,.72)!important;
    color:#fff!important;
    border:1px solid rgba(255,255,255,.09)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    font-size:15px!important;
    line-height:1.42!important;
    font-weight:700!important;
    box-shadow:0 12px 24px rgba(0,0,0,.24)!important;
}
#cl14-story-text:empty{display:none!important}
#cl25-story-tags{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:8px!important;
    margin-top:0!important;
}
#cl25-story-tags:empty{display:none!important}
#cl25-story-tags span{
    display:inline-flex!important;
    align-items:center!important;
    gap:6px!important;
    padding:8px 12px!important;
    border-radius:999px!important;
    background:rgba(255,142,53,.14)!important;
    border:1px solid rgba(255,165,90,.32)!important;
    color:#ffbe7a!important;
    font-size:12px!important;
    font-weight:800!important;
    letter-spacing:.02em!important;
}
#cl25-story-music{
    display:inline-flex!important;
    align-items:center!important;
    gap:8px!important;
    margin-top:10px!important;
    padding:8px 12px!important;
    border-radius:999px!important;
    background:rgba(9,12,18,.72)!important;
    border:1px solid rgba(255,255,255,.08)!important;
    color:#eef3ff!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
}
#cl25-story-music[hidden]{display:none!important}
.cl43-story-volume{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    width:min(280px,100%)!important;
    margin-top:10px!important;
    padding:10px 12px!important;
    border-radius:18px!important;
    background:rgba(9,12,18,.72)!important;
    border:1px solid rgba(255,255,255,.08)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    box-shadow:0 12px 24px rgba(0,0,0,.18)!important;
}
.cl43-story-volume[hidden]{display:none!important}
.cl43-story-volume-btn{
    width:40px!important;
    height:40px!important;
    border-radius:999px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    color:#fff!important;
    flex:0 0 40px!important;
}
.cl43-story-volume-range{
    appearance:none!important;
    -webkit-appearance:none!important;
    flex:1 1 auto!important;
    height:4px!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.22)!important;
    outline:none!important;
}
.cl43-story-volume-range::-webkit-slider-thumb{
    -webkit-appearance:none!important;
    appearance:none!important;
    width:16px!important;
    height:16px!important;
    border-radius:999px!important;
    background:#fff!important;
    box-shadow:0 0 0 3px rgba(255,153,68,.24)!important;
    cursor:pointer!important;
}
.cl43-story-volume-range::-moz-range-thumb{
    width:16px!important;
    height:16px!important;
    border:none!important;
    border-radius:999px!important;
    background:#fff!important;
    box-shadow:0 0 0 3px rgba(255,153,68,.24)!important;
    cursor:pointer!important;
}
.cl43-story-volume-value{
    min-width:42px!important;
    text-align:right!important;
    color:#dce5f5!important;
    font-size:12px!important;
    font-weight:800!important;
}
@media(max-width:640px){
    .cl36-stage{
        width:100vw!important;
        max-width:none!important;
        height:100dvh!important;
        max-height:none!important;
        border-radius:0!important;
        border:0!important;
    }
    .cl36-media,
    #cl14-story-media img,
    #cl14-story-media video{border-radius:0!important}
    .cl36-caption{
        left:12px!important;
        right:12px!important;
        bottom:12px!important;
    }
    .cl36-header{
        left:12px!important;
        right:12px!important;
    }
    .cl36-prev{left:8px!important}
    .cl36-next{right:8px!important}
    .cl43-story-volume{width:min(100%,300px)!important}
}

/* More realistic hero / fox motion */
.cl9-hero{overflow:hidden!important}
.cl9-hero-video{
    object-fit:cover!important;
    object-position:62% center!important;
    transform:scale(1.06)!important;
    filter:saturate(1.04) contrast(1.08) brightness(.82) blur(.15px)!important;
    animation:cl43HeroFox 22s ease-in-out infinite alternate!important;
}
.cl9-hero-overlay{
    background:
        linear-gradient(90deg, rgba(4,10,18,.92) 0%, rgba(4,10,18,.68) 35%, rgba(4,10,18,.22) 72%, rgba(4,10,18,.44) 100%),
        linear-gradient(180deg, rgba(4,10,18,.08) 0%, rgba(4,10,18,.32) 52%, rgba(4,10,18,.82) 100%)!important;
}
.cl9-hero::before{
    content:''!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    pointer-events:none!important;
    background:
        radial-gradient(circle at 72% 34%, rgba(255,165,90,.18), transparent 18%),
        radial-gradient(circle at 68% 56%, rgba(255,120,56,.12), transparent 22%),
        radial-gradient(circle at 18% 18%, rgba(68,146,255,.08), transparent 20%);
}
@keyframes cl43HeroFox{
    0%{transform:scale(1.06) translate3d(0,0,0)}
    24%{transform:scale(1.08) translate3d(-10px,-4px,0)}
    50%{transform:scale(1.10) translate3d(-18px,-8px,0)}
    76%{transform:scale(1.08) translate3d(-10px,-6px,0)}
    100%{transform:scale(1.07) translate3d(0,-10px,0)}
}




/* === V44 story duration + volume interaction fix === */
.cl44-duration-label{
    display:block!important;
}
.cl44-duration-select{
    width:100%!important;
    min-height:46px!important;
    padding:0 13px!important;
    border:1px solid rgba(255,255,255,.10)!important;
    border-radius:12px!important;
    outline:none!important;
    background:#101826!important;
    color:#eef4ff!important;
    font:700 13px/1 Inter,Arial,sans-serif!important;
    cursor:pointer!important;
}
.cl44-duration-select:focus{
    border-color:rgba(255,147,63,.60)!important;
    box-shadow:0 0 0 3px rgba(255,147,63,.10)!important;
}

.cl43-story-volume{
    position:relative!important;
    z-index:30!important;
    pointer-events:auto!important;
    touch-action:none!important;
    user-select:none!important;
}
.cl43-story-volume *{
    pointer-events:auto!important;
}
.cl43-story-volume-range{
    touch-action:none!important;
    cursor:pointer!important;
}
.cl43-story-volume-btn{
    cursor:pointer!important;
}


/* === V45 hero video realism + no popout fix === */
.cl9-hero{overflow:hidden!important;background:#07111d!important;}
.cl9-hero-video{
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:scale(1.045)!important;
  filter:brightness(.76) saturate(1.08) contrast(1.06)!important;
  animation:cl45HeroCinema 18s ease-in-out infinite alternate!important;
}
@keyframes cl45HeroCinema{
  0%{transform:scale(1.045) translate3d(0,0,0)}
  50%{transform:scale(1.075) translate3d(-1.2%,0,0)}
  100%{transform:scale(1.06) translate3d(1.1%,-0.6%,0)}
}
.cl9-hero-overlay{
  background:
    radial-gradient(circle at 72% 34%,rgba(255,148,63,.12),transparent 24%),
    radial-gradient(circle at 18% 24%,rgba(30,120,255,.10),transparent 28%),
    linear-gradient(180deg,rgba(4,9,17,.36),rgba(4,9,17,.58))!important;
  backdrop-filter:saturate(1.03)!important;
}
.cl9-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(7,17,29,.38) 0%,rgba(7,17,29,.12) 42%,rgba(7,17,29,.32) 100%);
  z-index:1;
  pointer-events:none;
}
.cl9-hero-inner{position:relative;z-index:2;}
.cl9-copy h1,.cl9-copy p,.cl9-kicker{position:relative;z-index:2;}
.cl9-hero video::-webkit-media-controls,
.cl9-hero video::-webkit-media-controls-panel,
.cl9-hero video::-webkit-media-controls-enclosure,
.cl9-hero video::-webkit-media-controls-start-playback-button,
.cl9-hero video::-webkit-media-controls-play-button,
.cl9-hero video::-webkit-media-controls-picture-in-picture-button,
.cl9-hero video::-webkit-media-controls-fullscreen-button{
  display:none!important;
  -webkit-appearance:none!important;
  opacity:0!important;
  visibility:hidden!important;
}
.cl9-hero video::-internal-media-controls-overlay-cast-button{display:none!important;}



/* =========================================================
   V46 REALISTIC NON-VIDEO HERO
   No video => no picture-in-picture / pop-out buttons.
   ========================================================= */
.cl9-hero{
    position:relative!important;
    overflow:hidden!important;
    min-height:650px!important;
    background:#07111c!important;
    isolation:isolate!important;
}
.cl9-hero-video{display:none!important}

.cl46-hero-bg{
    position:absolute!important;
    inset:-24px!important;
    z-index:0!important;
    background-size:cover!important;
    background-position:center 48%!important;
    transform:translate3d(var(--bgx,0px),var(--bgy,0px),0) scale(1.055)!important;
    filter:saturate(.96) contrast(1.08) brightness(.72)!important;
    transition:transform .35s cubic-bezier(.2,.7,.2,1)!important;
    animation:cl46BgBreath 18s ease-in-out infinite alternate!important;
}
@keyframes cl46BgBreath{
    from{filter:saturate(.94) contrast(1.06) brightness(.70)}
    to{filter:saturate(1.02) contrast(1.09) brightness(.76)}
}

.cl46-hero-depth{
    position:absolute!important;
    z-index:1!important;
    pointer-events:none!important;
    border-radius:50%!important;
    filter:blur(34px)!important;
    opacity:.45!important;
    mix-blend-mode:screen!important;
}
.cl46-hero-depth-a{
    width:340px!important;
    height:210px!important;
    right:8%!important;
    top:16%!important;
    background:radial-gradient(circle,#ff8b32 0%,rgba(255,139,50,.35) 24%,transparent 70%)!important;
    animation:cl46GlowA 8s ease-in-out infinite alternate!important;
}
.cl46-hero-depth-b{
    width:410px!important;
    height:260px!important;
    right:22%!important;
    bottom:6%!important;
    background:radial-gradient(circle,#247dff 0%,rgba(36,125,255,.22) 26%,transparent 72%)!important;
    animation:cl46GlowB 10s ease-in-out infinite alternate!important;
}
@keyframes cl46GlowA{to{transform:translate3d(-18px,14px,0) scale(1.08);opacity:.58}}
@keyframes cl46GlowB{to{transform:translate3d(16px,-12px,0) scale(1.06);opacity:.36}}

.cl46-hero-fox{
    --mx:0px;
    --my:0px;
    --rx:0deg;
    --ry:0deg;
    position:absolute!important;
    right:6.5%!important;
    top:50%!important;
    z-index:3!important;
    width:min(520px,38vw)!important;
    aspect-ratio:1/1!important;
    transform:
        translate3d(var(--mx),calc(-50% + var(--my)),0)
        perspective(900px)
        rotateX(var(--rx))
        rotateY(var(--ry))!important;
    transform-origin:center!important;
    transition:transform .28s cubic-bezier(.2,.75,.2,1)!important;
    pointer-events:none!important;
    animation:cl46FoxFloat 5.8s ease-in-out infinite!important;
}
.cl46-hero-fox img{
    position:relative!important;
    z-index:2!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    filter:
        drop-shadow(0 26px 34px rgba(0,0,0,.50))
        drop-shadow(0 0 18px rgba(255,137,36,.22))!important;
}
.cl46-fox-glow{
    position:absolute!important;
    z-index:1!important;
    left:14%!important;
    right:10%!important;
    top:17%!important;
    bottom:13%!important;
    border-radius:50%!important;
    background:radial-gradient(circle,rgba(255,148,48,.24),rgba(255,148,48,.06) 46%,transparent 72%)!important;
    filter:blur(30px)!important;
    animation:cl46FoxGlow 4.2s ease-in-out infinite alternate!important;
}
@keyframes cl46FoxFloat{
    0%,100%{margin-top:0;filter:brightness(1)}
    50%{margin-top:-9px;filter:brightness(1.035)}
}
@keyframes cl46FoxGlow{
    from{opacity:.56;transform:scale(.97)}
    to{opacity:.82;transform:scale(1.05)}
}

.cl9-hero-overlay{
    position:absolute!important;
    inset:0!important;
    z-index:2!important;
    pointer-events:none!important;
    background:
      linear-gradient(90deg,rgba(4,10,18,.94) 0%,rgba(4,10,18,.72) 34%,rgba(4,10,18,.28) 62%,rgba(4,10,18,.12) 78%,rgba(4,10,18,.46) 100%),
      linear-gradient(180deg,rgba(4,10,18,.06),rgba(4,10,18,.20) 48%,rgba(4,10,18,.82) 100%)!important;
}
.cl9-hero-inner{
    position:relative!important;
    z-index:4!important;
}

/* no native hero media controls can appear */
.cl9-hero video,
.cl9-hero video *{
    display:none!important;
}

@media(max-width:900px){
    .cl46-hero-fox{
        right:-3%!important;
        width:min(440px,52vw)!important;
        opacity:.76!important;
    }
}
@media(max-width:650px){
    .cl9-hero{min-height:610px!important}
    .cl46-hero-fox{
        right:-18%!important;
        top:44%!important;
        width:390px!important;
        opacity:.48!important;
    }
    .cl9-hero-overlay{
        background:
          linear-gradient(90deg,rgba(4,10,18,.94),rgba(4,10,18,.62) 70%,rgba(4,10,18,.45)),
          linear-gradient(180deg,rgba(4,10,18,.08),rgba(4,10,18,.78))!important;
    }
}



/* =========================================================
   V47 BRAND LOGO PLACEMENT
   The supplied fox is for navbar/footer/logo slots, not hero.
   ========================================================= */
.cl-brand-mark.cl47-brand-mark{
    display:grid!important;
    width:58px!important;
    height:58px!important;
    flex:0 0 58px!important;
    place-items:center!important;
    padding:5px!important;
    border-radius:15px!important;
    overflow:visible!important;
    background:
      radial-gradient(circle at 50% 45%,rgba(255,137,36,.14),rgba(13,26,45,.95) 72%)!important;
    border:1px solid rgba(255,255,255,.07)!important;
    box-shadow:
      inset 0 0 0 1px rgba(255,139,37,.05),
      0 8px 22px rgba(0,0,0,.28)!important;
}
.cl-brand-mark.cl47-brand-mark img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    filter:drop-shadow(0 3px 5px rgba(0,0,0,.28))!important;
}
.cl-brand:hover .cl47-brand-mark img,
.cl13-footer-logo:hover .cl47-brand-mark img{
    transform:scale(1.045)!important;
}
.cl47-brand-mark img{
    transition:transform .18s ease!important;
}

.cl13-footer .cl47-brand-mark{
    width:54px!important;
    height:54px!important;
    flex-basis:54px!important;
}

/* V46 had the supplied logo in hero; V47 explicitly removes it. */
.cl46-hero-fox,
.cl46-fox-glow{
    display:none!important;
}

@media(max-width:700px){
    .cl-brand-mark.cl47-brand-mark{
        width:50px!important;
        height:50px!important;
        flex-basis:50px!important;
    }
}



/* =========================================================
   V48 PROFILE CLICK EFFECT
   Keep global ripple, but make profile-button effect compact.
   ========================================================= */
.cl-user-btn{
    overflow:hidden!important;
    position:relative!important;
}
.cl-user-btn .cl-ripple{
    width:8px!important;
    height:8px!important;
    background:rgba(255,145,52,.30)!important;
    box-shadow:0 0 12px rgba(255,130,35,.20)!important;
    animation:cl48ProfileRipple .34s ease-out!important;
}
@keyframes cl48ProfileRipple{
    from{
        transform:translate(-50%,-50%) scale(0)!important;
        opacity:.75;
    }
    to{
        transform:translate(-50%,-50%) scale(7)!important;
        opacity:0;
    }
}



/* =========================================================
   V49 SEAMLESS TOP ANNOUNCEMENT
   Kesintisiz akar: hover'da durmaz, başa sıçrama görünmez.
   ========================================================= */
.cl49-marquee{
    overflow:hidden!important;
    position:relative!important;
    flex:1!important;
    min-width:0!important;
    mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent)!important;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent)!important;
}
.cl49-marquee-track{
    display:flex!important;
    align-items:center!important;
    width:max-content!important;
    min-width:0!important;
    animation:cl49MarqueeContinuous var(--cl49-marquee-duration,24s) linear infinite!important;
    animation-play-state:running!important;
    will-change:transform!important;
}
.cl49-marquee:hover .cl49-marquee-track,
.cl49-marquee-track:hover,
.cl49-marquee-group:hover{
    animation-play-state:running!important;
}
.cl49-marquee-group{
    display:flex!important;
    align-items:center!important;
    flex:0 0 auto!important;
    color:#ffd3a2!important;
    text-decoration:none!important;
    white-space:nowrap!important;
}
.cl49-marquee-copy{
    display:inline-flex!important;
    align-items:center!important;
    gap:30px!important;
    padding-right:30px!important;
    color:#ffd3a2!important;
    font-family:'Inter',sans-serif!important;
    font-size:14px!important;
    font-weight:700!important;
}
.cl49-marquee-copy i{
    color:#ff7f22!important;
    font-style:normal!important;
    font-size:16px!important;
}
@keyframes cl49MarqueeContinuous{
    from{transform:translate3d(0,0,0)}
    to{transform:translate3d(-50%,0,0)}
}

.cl14-launcher-btn{
    gap:8px!important;
}
.cl14-launcher-btn small{
    display:inline-flex!important;
    align-items:center!important;
    color:#71809a!important;
    font-size:9px!important;
    font-weight:800!important;
    letter-spacing:.09em!important;
    white-space:nowrap!important;
}



/* =========================================================
   V52 RESTORED + PREMIUM HOME
   Keeps all V49 buttons/logic, adds only visual polish.
   ========================================================= */

.cl9-hero{
    position:relative!important;
    min-height:690px!important;
    overflow:hidden!important;
    isolation:isolate!important;
    background:#06101a!important;
}
.cl46-hero-bg{
    inset:-28px!important;
    transform:
      translate3d(var(--cl52-bg-x,0px),var(--cl52-bg-y,0px),0)
      scale(1.065)!important;
    transition:transform .32s cubic-bezier(.2,.75,.2,1)!important;
    filter:saturate(.97) contrast(1.08) brightness(.69)!important;
    animation:cl52BgBreath 14s ease-in-out infinite alternate!important;
}
@keyframes cl52BgBreath{
    from{filter:saturate(.94) contrast(1.06) brightness(.66)}
    to{filter:saturate(1.02) contrast(1.09) brightness(.73)}
}

.cl52-hero-decor{
    --cl52-dec-x:0px;
    --cl52-dec-y:0px;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    pointer-events:none!important;
    transform:translate3d(var(--cl52-dec-x),var(--cl52-dec-y),0)!important;
    transition:transform .32s cubic-bezier(.2,.75,.2,1)!important;
}
.cl52-glow{
    position:absolute!important;
    border-radius:50%!important;
    filter:blur(44px)!important;
    mix-blend-mode:screen!important;
    opacity:.42!important;
}
.cl52-glow-a{
    width:360px!important;
    height:280px!important;
    right:7%!important;
    top:8%!important;
    background:radial-gradient(circle,#ff8a2a 0%,rgba(255,138,42,.22) 30%,transparent 72%)!important;
    animation:cl52GlowA 8s ease-in-out infinite alternate!important;
}
.cl52-glow-b{
    width:430px!important;
    height:330px!important;
    right:20%!important;
    bottom:-10%!important;
    background:radial-gradient(circle,#2c73ff 0%,rgba(44,115,255,.15) 28%,transparent 72%)!important;
    animation:cl52GlowB 10s ease-in-out infinite alternate!important;
}
@keyframes cl52GlowA{to{transform:translate3d(-18px,16px,0) scale(1.08);opacity:.58}}
@keyframes cl52GlowB{to{transform:translate3d(14px,-14px,0) scale(1.06);opacity:.34}}

.cl52-glass{
    position:absolute!important;
    border:1px solid rgba(255,153,66,.20)!important;
    background:linear-gradient(145deg,rgba(255,159,72,.07),rgba(255,255,255,.015))!important;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.025),
      0 16px 38px rgba(0,0,0,.20)!important;
    backdrop-filter:blur(3px)!important;
    -webkit-backdrop-filter:blur(3px)!important;
    transform:rotate(35deg)!important;
}
.cl52-glass-a{
    width:78px!important;
    height:78px!important;
    right:24%!important;
    top:18%!important;
    animation:cl52GlassA 7s ease-in-out infinite!important;
}
.cl52-glass-b{
    width:46px!important;
    height:46px!important;
    right:10%!important;
    top:52%!important;
    opacity:.52!important;
    animation:cl52GlassB 8.5s ease-in-out infinite!important;
}
@keyframes cl52GlassA{
    0%,100%{transform:translateY(0) rotate(35deg)}
    50%{transform:translateY(-15px) rotate(45deg)}
}
@keyframes cl52GlassB{
    0%,100%{transform:translateY(0) rotate(18deg)}
    50%{transform:translateY(12px) rotate(30deg)}
}

.cl52-line{
    position:absolute!important;
    height:1px!important;
    background:linear-gradient(90deg,transparent,rgba(255,151,62,.34),transparent)!important;
    opacity:.34!important;
}
.cl52-line-a{
    width:340px!important;
    right:8%!important;
    top:34%!important;
    transform:rotate(-10deg)!important;
}
.cl52-line-b{
    width:260px!important;
    right:25%!important;
    bottom:28%!important;
    transform:rotate(7deg)!important;
}

.cl9-hero-overlay{
    z-index:2!important;
    background:
      linear-gradient(90deg,rgba(4,10,17,.95) 0%,rgba(4,10,17,.78) 34%,rgba(4,10,17,.43) 59%,rgba(4,10,17,.17) 78%,rgba(4,10,17,.45) 100%),
      linear-gradient(180deg,rgba(4,10,17,.05),rgba(4,10,17,.20) 48%,rgba(4,10,17,.80) 100%)!important;
}
.cl9-hero-inner{
    position:relative!important;
    z-index:3!important;
}
.cl9-copy{
    transform:translate3d(var(--cl52-copy-x,0px),var(--cl52-copy-y,0px),0)!important;
    transition:transform .28s ease!important;
}

/* entrance animation — buttons stay intact and clickable */
.cl52-home-ready .cl9-kicker,
.cl52-home-ready .cl9-copy h1,
.cl52-home-ready .cl9-copy p,
.cl52-home-ready .cl9-actions,
.cl52-home-ready .cl12-vote-wrap,
.cl52-home-ready .cl9-info-row{
    opacity:0;
    transform:translateY(16px);
}
.cl52-home-enter .cl9-kicker{animation:cl52Reveal .55s .04s ease forwards!important}
.cl52-home-enter .cl9-copy h1{animation:cl52Reveal .62s .10s ease forwards!important}
.cl52-home-enter .cl9-copy p{animation:cl52Reveal .60s .18s ease forwards!important}
.cl52-home-enter .cl9-actions{animation:cl52Reveal .60s .25s ease forwards!important}
.cl52-home-enter .cl12-vote-wrap{animation:cl52Reveal .60s .31s ease forwards!important}
.cl52-home-enter .cl9-info-row{animation:cl52Reveal .62s .37s ease forwards!important}
@keyframes cl52Reveal{
    to{opacity:1;transform:translateY(0)}
}

/* headline / text */
.cl9-copy h1{
    font-size:clamp(58px,6vw,94px)!important;
    line-height:.98!important;
    letter-spacing:-.035em!important;
    text-shadow:0 12px 36px rgba(0,0,0,.28)!important;
}
.cl9-copy p{
    max-width:780px!important;
    color:#c9d3e2!important;
    font-size:clamp(17px,1.45vw,21px)!important;
    line-height:1.58!important;
}

/* restore and polish all primary controls */
.cl9-actions{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:14px!important;
    visibility:visible!important;
    pointer-events:auto!important;
}
.cl9-actions .cl9-btn,
.cl12-vote-button,
.cl9-info-card{
    visibility:visible!important;
    pointer-events:auto!important;
}
.cl9-btn{
    min-height:62px!important;
    padding:0 28px!important;
    border-radius:14px!important;
    transition:transform .18s ease,filter .18s ease,box-shadow .18s ease!important;
}
.cl9-btn:hover{
    transform:translateY(-3px)!important;
    filter:brightness(1.08)!important;
}
.cl9-btn-primary{
    box-shadow:0 14px 34px rgba(255,128,28,.20)!important;
}
.cl9-btn-discord{
    box-shadow:0 14px 34px rgba(78,98,255,.18)!important;
}
.cl9-btn-store{
    box-shadow:0 14px 34px rgba(28,184,92,.16)!important;
}

.cl12-vote-button{
    border-radius:14px!important;
    box-shadow:0 14px 34px rgba(0,0,0,.16)!important;
    transition:transform .18s ease,border-color .18s ease!important;
}
.cl12-vote-button:hover{
    transform:translateY(-2px)!important;
    border-color:rgba(255,139,42,.32)!important;
}

/* stats/info cards */
.cl9-info-row{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:14px!important;
}
.cl9-info-card{
    background:linear-gradient(180deg,rgba(20,35,58,.92),rgba(12,24,42,.94))!important;
    border:1px solid rgba(255,255,255,.07)!important;
    box-shadow:0 18px 42px rgba(0,0,0,.12)!important;
    backdrop-filter:blur(10px)!important;
    -webkit-backdrop-filter:blur(10px)!important;
    transition:transform .18s ease,border-color .18s ease!important;
}
.cl9-info-card:hover{
    transform:translateY(-4px)!important;
    border-color:rgba(255,140,44,.22)!important;
}

/* section polish without changing layout */
.cl13-section,
.cl14-stories-section,
.cl11-mode-card{
    border-color:rgba(255,255,255,.07)!important;
    box-shadow:0 20px 48px rgba(0,0,0,.10)!important;
}

@media(max-width:900px){
    .cl9-hero{min-height:650px!important}
    .cl52-glass-b{display:none!important}
    .cl52-glow-a{right:-4%!important}
}
@media(max-width:650px){
    .cl9-hero{min-height:620px!important}
    .cl9-copy h1{font-size:clamp(44px,13vw,66px)!important}
    .cl52-glass-a{opacity:.30!important}
    .cl52-glow-b{right:-28%!important}
}