/* movir+ — shared styles.css | movir.pro */
:root {
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
    --sar: env(safe-area-inset-right, 0px);
    --bottom-nav-h: 68px;
    --touch-target: 48px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    background-color: #000;
    color: #f5f5f7;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
    touch-action: pan-y;
    overscroll-behavior-y: contain;
}
.hide-scroll::-webkit-scrollbar { display: none; }
.hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }
.nav-glass {
    background: rgba(18,18,20,0.82);
    backdrop-filter: saturate(180%) blur(28px);
    -webkit-backdrop-filter: saturate(180%) blur(28px);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.nav-transparent {
    background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, transparent 100%);
    border-bottom: 1px solid transparent;
}
.bottom-nav-glass {
    background: rgba(18,18,20,0.9);
    backdrop-filter: saturate(180%) blur(28px);
    -webkit-backdrop-filter: saturate(180%) blur(28px);
    border-top: 1px solid rgba(255,255,255,0.07);
    height: calc(var(--bottom-nav-h) + var(--sab));
    padding-bottom: var(--sab);
}
.nav-link-mobile.active-nav .nav-icon-wrap { background: rgba(41,151,255,0.18); border-radius: 12px; }
.nav-link-mobile.active-nav i, .nav-link-mobile.active-nav span { color: #2997ff; }
.skeleton {
    background: #1c1c1e;
    background-image: linear-gradient(to right,#1c1c1e 0%,#2c2c2e 20%,#1c1c1e 40%,#1c1c1e 100%);
    background-repeat: no-repeat;
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
}
.hero-gradient {
    background:
        linear-gradient(to top, #000 0%, rgba(0,0,0,0.65) 35%, transparent 100%),
        linear-gradient(to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 55%, transparent 100%);
}
.tv-card-wrapper { perspective: 1200px; transform-style: preserve-3d; }
.tv-card {
    transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.3s ease;
    transform-style: preserve-3d;
    border: 2px solid transparent;
    will-change: transform;
}
.tv-card.resetting {
    transition: transform 0.6s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.6s ease;
    transform: rotateX(0) rotateY(0) scale3d(1,1,1) !important;
}
@media (hover:hover) and (pointer:fine) {
    .tv-card:hover { border-color: rgba(255,255,255,0.65); box-shadow: 0 28px 56px -10px rgba(0,0,0,0.9); z-index: 20; }
}
@media (hover:none) {
    .tv-card-wrapper:active .tv-card { transform: scale(0.97); opacity: 0.85; transition: transform 0.12s ease,opacity 0.12s ease; }
}
#toast-container {
    position: fixed; top: calc(1.25rem + var(--sat)); left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; flex-direction: column; gap: 10px;
    pointer-events: none; width: max-content; max-width: calc(100vw - 2rem);
}
.toast {
    background: rgba(28,28,32,0.92);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.14); color: #fff;
    padding: 13px 24px; border-radius: 100px; font-size: 14px; font-weight: 600;
    box-shadow: 0 16px 40px rgba(0,0,0,0.7); display: flex; align-items: center; gap: 8px;
    animation: slideDownFadeIn 0.4s cubic-bezier(0.16,1,0.3,1) forwards;
}
.toast.hide { animation: slideUpFadeOut 0.3s cubic-bezier(0.16,1,0.3,1) forwards; }
@keyframes slideDownFadeIn { from{opacity:0;transform:translateY(-18px) scale(0.92)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes slideUpFadeOut  { from{opacity:1;transform:translateY(0) scale(1)} to{opacity:0;transform:translateY(-18px) scale(0.92)} }
@keyframes shimmer { 0%{background-position:-1000px 0} 100%{background-position:1000px 0} }
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes scaleIn { from{opacity:0;transform:scale(0.95)} to{opacity:1;transform:scale(1)} }
@keyframes spin    { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.animate-fade-in  { animation: fadeIn  0.5s ease-out forwards; }
.animate-slide-up { animation: slideUp 0.6s cubic-bezier(0.16,1,0.3,1) forwards; }
.animate-scale-in { animation: scaleIn 0.4s cubic-bezier(0.16,1,0.3,1) forwards; }
.animate-spin     { animation: spin 1s linear infinite; }
.animate-pulse    { animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }
@keyframes pulse  { 0%,100%{opacity:1} 50%{opacity:0.4} }
.slider-dot { transition: all 0.35s cubic-bezier(0.16,1,0.3,1); }
.slider-dot.active { width: 22px; background-color: #fff; }
.detail-fade-bottom { background: linear-gradient(to top, #000 0%, #000 8%, rgba(0,0,0,0.75) 28%, transparent 100%); }
.hero-btn-group { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width:640px) { .hero-btn-group { display: flex; } }
#search-input { font-size: 16px; -webkit-appearance: none; appearance: none; }
#search-input:focus { outline: none; }
#app-root { padding-bottom: calc(var(--bottom-nav-h) + var(--sab) + 8px); }
@media (min-width:768px) { #app-root { padding-bottom: 0; } }
.hero-title { font-size: clamp(2rem,10vw,5rem); font-weight:900; letter-spacing:-0.04em; line-height:1.05; }
@media (max-width:767px) {
    .carousel-fade-right {
        mask-image: linear-gradient(to right, black 80%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
    }
}