/**

* SUNOSUNAO — CINEMATIC ANIMATION SYSTEM
* Design Version: 2.0
* File: public_html/assets/css/animations.css
* 
* PURPOSE
* ---
* Premium cinematic motion system for SunoSunao.
* 
* AUDITED AGAINST
* ---
* - core.css
* - layout.css
* - components.css
* - responsive.css
* 
* DESIGN RULES
* ---
* - No story-specific content.
* - No backend assumptions.
* - No JavaScript dependency.
* - No layout ownership.
* - No legacy animation reuse.
* - Prefer transform + opacity for performance.
* - Respect prefers-reduced-motion.
* - Avoid excessive movement.
    */

/* =========================================================

1. ANIMATION TOKENS
   ========================================================= */

:root {

--anim-duration-instant: 100ms;
--anim-duration-fast: 180ms;
--anim-duration-normal: 300ms;
--anim-duration-medium: 500ms;
--anim-duration-slow: 800ms;
--anim-duration-cinematic: 1200ms;
--anim-duration-dramatic: 1800ms;

--anim-ease-standard:
    cubic-bezier(0.2, 0, 0, 1);

--anim-ease-smooth:
    cubic-bezier(0.22, 1, 0.36, 1);

--anim-ease-enter:
    cubic-bezier(0.16, 1, 0.3, 1);

--anim-ease-exit:
    cubic-bezier(0.7, 0, 0.84, 0);

--anim-ease-cinematic:
    cubic-bezier(0.19, 1, 0.22, 1);

--anim-distance-xs: 4px;
--anim-distance-sm: 8px;
--anim-distance-md: 16px;
--anim-distance-lg: 28px;
--anim-distance-xl: 48px;

--anim-scale-hover: 1.015;
--anim-scale-press: 0.985;

}

/* =========================================================
02. GLOBAL MOTION FOUNDATION
========================================================= */

.animatable,
[data-motion] {
will-change: transform, opacity;
}

.motion-transform {
transform: translate3d(0, 0, 0);
}

.motion-layer {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translateZ(0);
}

/* =========================================================
03. FADE SYSTEM
========================================================= */

@keyframes ss-fade-in {

from {
    opacity: 0;
}

to {
    opacity: 1;
}

}

@keyframes ss-fade-out {

from {
    opacity: 1;
}

to {
    opacity: 0;
}

}

@keyframes ss-fade-up {

from {
    opacity: 0;
    transform: translate3d(
        0,
        var(--anim-distance-md),
        0
    );
}

to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

}

@keyframes ss-fade-down {

from {
    opacity: 0;
    transform: translate3d(
        0,
        calc(var(--anim-distance-md) * -1),
        0
    );
}

to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

}

@keyframes ss-fade-left {

from {
    opacity: 0;
    transform: translate3d(
        var(--anim-distance-md),
        0,
        0
    );
}

to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

}

@keyframes ss-fade-right {

from {
    opacity: 0;
    transform: translate3d(
        calc(var(--anim-distance-md) * -1),
        0,
        0
    );
}

to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

}

/* =========================================================
04. SCALE / REVEAL
========================================================= */

@keyframes ss-scale-in {

from {
    opacity: 0;
    transform: scale(0.96);
}

to {
    opacity: 1;
    transform: scale(1);
}

}

@keyframes ss-scale-out {

from {
    opacity: 1;
    transform: scale(1);
}

to {
    opacity: 0;
    transform: scale(0.96);
}

}

@keyframes ss-reveal-up {

from {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translate3d(
        0,
        var(--anim-distance-md),
        0
    );
}

to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0);
}

}

@keyframes ss-reveal-down {

from {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translate3d(
        0,
        calc(var(--anim-distance-md) * -1),
        0
    );
}

to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0);
}

}

/* =========================================================
05. PUBLIC MOTION UTILITIES
========================================================= */

.motion-fade-in {
animation:
ss-fade-in
var(--anim-duration-normal)
var(--anim-ease-standard)
both;
}

.motion-fade-up {
animation:
ss-fade-up
var(--anim-duration-medium)
var(--anim-ease-enter)
both;
}

.motion-fade-down {
animation:
ss-fade-down
var(--anim-duration-medium)
var(--anim-ease-enter)
both;
}

.motion-fade-left {
animation:
ss-fade-left
var(--anim-duration-medium)
var(--anim-ease-enter)
both;
}

.motion-fade-right {
animation:
ss-fade-right
var(--anim-duration-medium)
var(--anim-ease-enter)
both;
}

.motion-scale-in {
animation:
ss-scale-in
var(--anim-duration-medium)
var(--anim-ease-enter)
both;
}

.motion-reveal-up {
animation:
ss-reveal-up
var(--anim-duration-cinematic)
var(--anim-ease-cinematic)
both;
}

/* =========================================================
06. STAGGER SYSTEM
========================================================= */

.motion-stagger > * {
--motion-index: 0;

animation-delay:
    calc(var(--motion-index) * 70ms);

}

.motion-stagger > :nth-child(1) {
--motion-index: 1;
}

.motion-stagger > :nth-child(2) {
--motion-index: 2;
}

.motion-stagger > :nth-child(3) {
--motion-index: 3;
}

.motion-stagger > :nth-child(4) {
--motion-index: 4;
}

.motion-stagger > :nth-child(5) {
--motion-index: 5;
}

.motion-stagger > :nth-child(6) {
--motion-index: 6;
}

.motion-stagger > :nth-child(7) {
--motion-index: 7;
}

.motion-stagger > :nth-child(8) {
--motion-index: 8;
}

.motion-stagger > :nth-child(9) {
--motion-index: 9;
}

.motion-stagger > :nth-child(10) {
--motion-index: 10;
}

/* =========================================================
07. HERO CINEMATIC MOTION
========================================================= */

@keyframes ss-hero-drift {

from {
    transform: scale(1.025) translate3d(0, 0, 0);
}

to {
    transform: scale(1.075) translate3d(-0.5%, -0.5%, 0);
}

}

@keyframes ss-hero-overlay {

from {
    opacity: 0.35;
}

to {
    opacity: 0.55;
}

}

.hero__backdrop {
transform-origin: center center;
animation:
ss-hero-drift
18s
var(--anim-ease-standard)
alternate
infinite;
}

.hero__overlay,
.cinematic-overlay {
animation:
ss-hero-overlay
8s
ease-in-out
alternate
infinite;
}

/* =========================================================
08. STORY CARD INTERACTION
========================================================= */

.story-card,
.portrait-story-card,
.interactive-surface {
transition:
transform var(--anim-duration-normal)
var(--anim-ease-smooth),
border-color var(--anim-duration-normal)
var(--anim-ease-standard),
box-shadow var(--anim-duration-normal)
var(--anim-ease-standard);
}

@media (hover: hover) and (pointer: fine) {

.story-card:hover,
.portrait-story-card:hover,
.interactive-surface:hover {

    transform:
        translate3d(0, -4px, 0)
        scale(var(--anim-scale-hover));
}

.story-card:hover .story-card__media img,
.portrait-story-card:hover img {
    transform: scale(1.035);
}

}

.story-card__media img,
.portrait-story-card img {
transition:
transform
var(--anim-duration-cinematic)
var(--anim-ease-cinematic);
}

/* =========================================================
09. IMAGE REVEAL
========================================================= */

@keyframes ss-image-reveal {

from {
    opacity: 0;
    transform: scale(1.035);
}

to {
    opacity: 1;
    transform: scale(1);
}

}

.media-reveal,
.story-card__media img.is-loaded,
.hero__backdrop.is-loaded {
animation:
ss-image-reveal
var(--anim-duration-cinematic)
var(--anim-ease-cinematic)
both;
}

/* =========================================================
10. BUTTON MOTION
========================================================= */

.button,
.btn {
transition:
transform var(--anim-duration-fast)
var(--anim-ease-standard),
background-color var(--anim-duration-fast)
var(--anim-ease-standard),
border-color var(--anim-duration-fast)
var(--anim-ease-standard),
box-shadow var(--anim-duration-normal)
var(--anim-ease-standard),
color var(--anim-duration-fast)
var(--anim-ease-standard);
}

@media (hover: hover) and (pointer: fine) {

.button:hover,
.btn:hover {
    transform:
        translate3d(0, -1px, 0);
}

}

.button:active,
.btn:active {
transform:
translate3d(0, 1px, 0)
scale(var(--anim-scale-press));
}

.button:focus-visible,
.btn:focus-visible {
transition:
box-shadow var(--anim-duration-fast)
var(--anim-ease-standard);
}

/* =========================================================
11. ICON BUTTON MOTION
========================================================= */

.cinematic-icon-button,
.icon-button {
transition:
transform var(--anim-duration-fast)
var(--anim-ease-smooth),
background-color var(--anim-duration-fast)
var(--anim-ease-standard),
border-color var(--anim-duration-fast)
var(--anim-ease-standard);
}

@media (hover: hover) and (pointer: fine) {

.cinematic-icon-button:hover,
.icon-button:hover {
    transform:
        translate3d(0, -2px, 0);
}

}

.cinematic-icon-button:active,
.icon-button:active {
transform:
scale(0.94);
}

/* =========================================================
12. SEARCH MOTION
========================================================= */

.search-field,
.cinematic-search {
transition:
border-color var(--anim-duration-fast)
var(--anim-ease-standard),
box-shadow var(--anim-duration-normal)
var(--anim-ease-standard),
background-color var(--anim-duration-normal)
var(--anim-ease-standard);
}

.search-field:focus-within,
.cinematic-search:focus-within {
box-shadow:
0 0 0 3px
rgba(255, 32, 43, 0.08),
var(--shadow-soft);
}

/* =========================================================
13. CHIP / FILTER MOTION
========================================================= */

.chip,
.filter-chip {
transition:
background-color var(--anim-duration-fast)
var(--anim-ease-standard),
border-color var(--anim-duration-fast)
var(--anim-ease-standard),
color var(--anim-duration-fast)
var(--anim-ease-standard),
transform var(--anim-duration-fast)
var(--anim-ease-standard);
}

@media (hover: hover) and (pointer: fine) {

.chip:hover,
.filter-chip:hover {
    transform:
        translate3d(0, -1px, 0);
}

}

.chip:active,
.filter-chip:active {
transform: scale(0.97);
}

/* =========================================================
14. MOOD CARD MOTION
========================================================= */

.mood-card {
overflow: hidden;
transition:
transform var(--anim-duration-medium)
var(--anim-ease-smooth),
border-color var(--anim-duration-normal)
var(--anim-ease-standard),
box-shadow var(--anim-duration-medium)
var(--anim-ease-standard);
}

.mood-card::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.08),
transparent 55%
);
transition:
opacity var(--anim-duration-normal)
var(--anim-ease-standard);
}

@media (hover: hover) and (pointer: fine) {

.mood-card:hover {
    transform:
        translate3d(0, -4px, 0);
}

.mood-card:hover::after {
    opacity: 1;
}

}

/* =========================================================
15. FEATURE PANEL MOTION
========================================================= */

.feature-panel {
transition:
transform var(--anim-duration-medium)
var(--anim-ease-smooth),
border-color var(--anim-duration-normal)
var(--anim-ease-standard),
box-shadow var(--anim-duration-medium)
var(--anim-ease-standard);
}

@media (hover: hover) and (pointer: fine) {

.feature-panel:hover {
    transform:
        translate3d(0, -3px, 0);
}

}

/* =========================================================
16. AUDIO CINEMA MOTION
========================================================= */

@keyframes ss-audio-pulse {

0%,
100% {
    transform: scale(1);
    opacity: 0.72;
}

50% {
    transform: scale(1.025);
    opacity: 1;
}

}

@keyframes ss-audio-orbit {

from {
    transform:
        rotate(0deg)
        translate3d(0, 0, 0);
}

to {
    transform:
        rotate(360deg)
        translate3d(0, 0, 0);
}

}

.audio-cinema__visual.is-playing {
animation:
ss-audio-pulse
4s
ease-in-out
infinite;
}

.audio-cinema__ambient.is-active {
animation:
ss-audio-orbit
24s
linear
infinite;
}

/* =========================================================
17. AUDIO PLAYER MOTION
========================================================= */

.audio-player {
transition:
box-shadow var(--anim-duration-medium)
var(--anim-ease-standard),
border-color var(--anim-duration-normal)
var(--anim-ease-standard);
}

.audio-player.is-active {
box-shadow:
var(--shadow-elevated);
}

.audio-player__progress {
transition:
width 120ms linear;
}

.audio-player__buffer {
transition:
width 300ms ease;
}

/* =========================================================
18. PLAY STATE
========================================================= */

@keyframes ss-playing-indicator {

0%,
100% {
    transform: scaleY(0.45);
}

50% {
    transform: scaleY(1);
}

}

.audio-playing-indicator span {
transform-origin: center bottom;
}

.audio-playing-indicator.is-playing span:nth-child(1) {
animation:
ss-playing-indicator
800ms
ease-in-out
infinite;
}

.audio-playing-indicator.is-playing span:nth-child(2) {
animation:
ss-playing-indicator
650ms
ease-in-out
120ms
infinite;
}

.audio-playing-indicator.is-playing span:nth-child(3) {
animation:
ss-playing-indicator
900ms
ease-in-out
220ms
infinite;
}

/* =========================================================
19. MODAL MOTION
========================================================= */

@keyframes ss-modal-backdrop {

from {
    opacity: 0;
}

to {
    opacity: 1;
}

}

@keyframes ss-modal-enter {

from {
    opacity: 0;
    transform:
        translate3d(0, 18px, 0)
        scale(0.985);
}

to {
    opacity: 1;
    transform:
        translate3d(0, 0, 0)
        scale(1);
}

}

.modal.is-open,
.modal[data-state="open"] {
animation:
ss-modal-backdrop
var(--anim-duration-normal)
var(--anim-ease-standard)
both;
}

.modal__content {
animation:
ss-modal-enter
var(--anim-duration-medium)
var(--anim-ease-enter)
both;
}

/* =========================================================
20. DRAWER MOTION
========================================================= */

@keyframes ss-drawer-left {

from {
    transform: translate3d(-100%, 0, 0);
}

to {
    transform: translate3d(0, 0, 0);
}

}

@keyframes ss-drawer-right {

from {
    transform: translate3d(100%, 0, 0);
}

to {
    transform: translate3d(0, 0, 0);
}

}

.drawer[data-direction="left"] {
animation:
ss-drawer-left
var(--anim-duration-medium)
var(--anim-ease-enter)
both;
}

.drawer[data-direction="right"] {
animation:
ss-drawer-right
var(--anim-duration-medium)
var(--anim-ease-enter)
both;
}

/* =========================================================
21. MOBILE NAVIGATION
========================================================= */

@keyframes ss-mobile-nav-enter {

from {
    opacity: 0;
    transform:
        translate3d(0, -8px, 0);
}

to {
    opacity: 1;
    transform:
        translate3d(0, 0, 0);
}

}

.mobile-nav.is-open,
.mobile-nav[data-state="open"] {
animation:
ss-mobile-nav-enter
var(--anim-duration-normal)
var(--anim-ease-enter)
both;
}

/* =========================================================
22. PAGE TRANSITION
========================================================= */

@keyframes ss-page-enter {

from {
    opacity: 0;
    transform:
        translate3d(0, 8px, 0);
}

to {
    opacity: 1;
    transform:
        translate3d(0, 0, 0);
}

}

@keyframes ss-page-exit {

from {
    opacity: 1;
}

to {
    opacity: 0;
}

}

.page.is-entering {
animation:
ss-page-enter
var(--anim-duration-medium)
var(--anim-ease-enter)
both;
}

.page.is-exiting {
animation:
ss-page-exit
var(--anim-duration-normal)
var(--anim-ease-exit)
both;
}

/* =========================================================
23. LOADING SKELETON
========================================================= */

@keyframes ss-skeleton-shimmer {

from {
    background-position:
        200% 0;
}

to {
    background-position:
        -200% 0;
}

}

.skeleton,
.loading-skeleton {
background-image:
linear-gradient(
90deg,
rgba(255, 255, 255, 0.035) 0%,
rgba(255, 255, 255, 0.08) 50%,
rgba(255, 255, 255, 0.035) 100%
);

background-size:
    200% 100%;

animation:
    ss-skeleton-shimmer
    1.8s
    linear
    infinite;

}

/* =========================================================
24. PROGRESS / LOADING INDICATOR
========================================================= */

@keyframes ss-progress-pulse {

0%,
100% {
    opacity: 0.65;
}

50% {
    opacity: 1;
}

}

.progress.is-loading,
.loading-indicator {
animation:
ss-progress-pulse
1.4s
ease-in-out
infinite;
}

/* =========================================================
25. FLOATING CINEMATIC ELEMENT
========================================================= */

@keyframes ss-soft-float {

0%,
100% {
    transform:
        translate3d(0, 0, 0);
}

50% {
    transform:
        translate3d(0, -6px, 0);
}

}

.soft-float {
animation:
ss-soft-float
5s
ease-in-out
infinite;
}

/* =========================================================
26. AMBIENT GLOW
========================================================= */

@keyframes ss-ambient-glow {

0%,
100% {
    opacity: 0.45;
    transform: scale(1);
}

50% {
    opacity: 0.72;
    transform: scale(1.035);
}

}

.ambient-glow {
animation:
ss-ambient-glow
8s
ease-in-out
infinite;
}

/* =========================================================
27. FOCUS MOTION
========================================================= */

:focus-visible {
transition:
outline-offset var(--anim-duration-fast)
var(--anim-ease-standard);
}

/* =========================================================
28. HOVER IMAGE LIGHT
========================================================= */

.image-hover-light {
position: relative;
overflow: hidden;
}

.image-hover-light::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;

background:
    linear-gradient(
        120deg,
        transparent 20%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 80%
    );

transform:
    translate3d(-120%, 0, 0);

transition:
    transform
    var(--anim-duration-cinematic)
    var(--anim-ease-cinematic);

}

@media (hover: hover) and (pointer: fine) {

.image-hover-light:hover::after {
    transform:
        translate3d(120%, 0, 0);
}

}

/* =========================================================
29. RESPONSIVE MOTION REDUCTION
========================================================= */

@media (max-width: 720px) {

.hero__backdrop {
    animation-duration: 24s;
}

.soft-float {
    animation-duration: 7s;
}

.ambient-glow {
    animation-duration: 10s;
}

}

/* =========================================================
30. TOUCH DEVICE SAFETY
========================================================= */

@media (hover: none) and (pointer: coarse) {

.story-card:hover,
.portrait-story-card:hover,
.interactive-surface:hover,
.feature-panel:hover,
.mood-card:hover,
.button:hover,
.btn:hover,
.cinematic-icon-button:hover,
.icon-button:hover,
.chip:hover,
.filter-chip:hover {
    transform: none;
}

.image-hover-light::after {
    display: none;
}

}

/* =========================================================
31. REDUCED MOTION ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

*,
*::before,
*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

.hero__backdrop,
.hero__overlay,
.cinematic-overlay,
.audio-cinema__visual.is-playing,
.audio-cinema__ambient.is-active,
.audio-playing-indicator span,
.skeleton,
.loading-skeleton,
.soft-float,
.ambient-glow {
    animation: none !important;
}

.story-card:hover,
.portrait-story-card:hover,
.interactive-surface:hover,
.feature-panel:hover,
.mood-card:hover {
    transform: none !important;
}

}

/* =========================================================
32. PERFORMANCE SAFETY
========================================================= */

@media (prefers-reduced-motion: no-preference) {

.hero__backdrop,
.story-card__media img,
.portrait-story-card img,
.audio-cinema__visual,
.audio-cinema__ambient {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

}

/* =========================================================
END OF SUNOSUNAO ANIMATION SYSTEM
========================================================= */