/* =====================================================
   ANTIK DRESDEN — Animations Stylesheet
   Elegant, historic motion design
   ===================================================== */

/* ─────────────────────────────────────────────
   Keyframe Definitions
   ───────────────────────────────────────────── */

/* Basic Fade */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Gear Rotation */
@keyframes gearRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* gearRotateSlow removed — identical to gearRotate; use gearRotate with a longer duration instead */

/* Scroll indicator pulse */
@keyframes scrollPulse {
    0%   { opacity: 1;    transform: scaleY(1);     }
    50%  { opacity: 0.3;  transform: scaleY(0.6);   }
    100% { opacity: 1;    transform: scaleY(1);     }
}

/* Pulse glow */
@keyframes pulseGold {
    0%   { box-shadow: 0 0 0 0 rgba(184, 32, 48, 0.3); }
    50%  { box-shadow: 0 0 0 12px rgba(184, 32, 48, 0); }
    100% { box-shadow: 0 0 0 0 rgba(184, 32, 48, 0); }
}

/* Spinning (loading) */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Pendulum swing */
@keyframes pendulumSwing {
    0%   { transform: rotate(-8deg); }
    50%  { transform: rotate( 8deg); }
    100% { transform: rotate(-8deg); }
}

/* Camera shutter */
@keyframes shutterClose {
    0%   { clip-path: inset(0 0 0 0); }
    50%  { clip-path: inset(50% 0 50% 0); }
    100% { clip-path: inset(0 0 0 0); }
}

/* Dust motes floating */
@keyframes floatUp {
    0%   { opacity: 0; transform: translateY(0) translateX(0); }
    10%  { opacity: 0.6; }
    90%  { opacity: 0.2; }
    100% { opacity: 0; transform: translateY(-120px) translateX(20px); }
}

/* Gold shimmer scan line */
@keyframes shimmer {
    0%   { transform: translateX(-100%) skewX(-15deg); }
    100% { transform: translateX(300%) skewX(-15deg); }
}

/* Subtle breathing scale */
@keyframes breathe {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* Title reveal (clip-path) */
@keyframes revealRight {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0% 0 0); }
}

/* Ornament line draw */
@keyframes drawLine {
    from { transform: scaleX(0); transform-origin: left; }
    to   { transform: scaleX(1); transform-origin: left; }
}

/* Tick (clock hand) */
@keyframes clockTick {
    0%   { transform: rotate(0deg); }
    8%   { transform: rotate(6deg); }
    16%  { transform: rotate(6deg); }
    24%  { transform: rotate(12deg); }
    100% { transform: rotate(360deg); }
}

/* Float (gentle hover bob) */
@keyframes float {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-8px); }
    100% { transform: translateY(0px); }
}

/* Number counter rollup */
@keyframes numberRoll {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* ─────────────────────────────────────────────
   Clock Mechanism Animations
   ───────────────────────────────────────────── */
.clock-mechanism {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Animated SVG Clock Face */
.animated-clock {
    position: relative;
    width: 200px;
    height: 200px;
}

.clock-face {
    fill: none;
    stroke: var(--clr-gold-dim);
    stroke-width: 1.5;
}

.clock-face--outer {
    stroke: var(--clr-border);
}

.clock-hand {
    stroke: var(--clr-gold);
    stroke-linecap: round;
    transform-origin: center;
    transform-box: fill-box;
}

.clock-hand--hour {
    stroke-width: 3;
    animation: clockTick 43200s linear infinite;
}

.clock-hand--minute {
    stroke-width: 2;
    animation: clockTick 3600s linear infinite;
}

.clock-hand--second {
    stroke: var(--clr-red);
    stroke-width: 1;
    animation: clockTick 60s linear infinite;
}

/* Gear system */
.gear-system {
    position: relative;
}

.gear-cw {
    animation: gearRotate var(--gear-duration, 20s) linear infinite;
}

.gear-ccw {
    animation: gearRotate var(--gear-duration, 15s) linear infinite reverse;
}

.gear-system .gear-lg { --gear-duration: 30s; }
.gear-system .gear-md { --gear-duration: 20s; }
.gear-system .gear-sm { --gear-duration: 12s; }

/* ─────────────────────────────────────────────
   Pendulum Clock Component
   ───────────────────────────────────────────── */
.pendulum-clock {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.pendulum {
    width: 2px;
    height: 80px;
    background: linear-gradient(180deg, var(--clr-gold-dark), var(--clr-gold));
    position: relative;
    transform-origin: top center;
    animation: pendulumSwing 2s ease-in-out infinite;
}

.pendulum-bob {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--clr-gold-light), var(--clr-gold-dark));
    border: 1px solid var(--clr-gold);
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 2px 8px rgba(184,32,48,0.3);
}

/* ─────────────────────────────────────────────
   Camera Shutter Animation
   ───────────────────────────────────────────── */
.camera-shutter {
    position: relative;
    overflow: hidden;
}

.camera-shutter::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(42, 31, 20, 0.95);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.05s ease;
    z-index: 10;
}

.camera-shutter.is-triggered::after {
    animation: shutterFlash 0.3s ease forwards;
}

@keyframes shutterFlash {
    0%   { opacity: 0; }
    20%  { opacity: 1; }
    100% { opacity: 0; }
}

/* Camera product card hover */
.product-card[data-category="camera"]:hover .product-card__image-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        transparent 45%,
        rgba(184, 32, 48, 0.15) 50%,
        transparent 55%
    );
    background-size: 200% 200%;
    animation: shimmerLens 0.8s ease;
    z-index: 1;
    pointer-events: none;
}

@keyframes shimmerLens {
    0%   { background-position: 200% 200%; opacity: 0; }
    20%  { opacity: 1; }
    100% { background-position: -200% -200%; opacity: 0; }
}

/* ─────────────────────────────────────────────
   Gold Shimmer Effect (on hover)
   ───────────────────────────────────────────── */
.shimmer-on-hover {
    position: relative;
    overflow: hidden;
}

.shimmer-on-hover::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(184, 32, 48, 0.12),
        transparent
    );
    transform: skewX(-15deg);
    opacity: 0;
    transition: opacity 0.1s;
}

.shimmer-on-hover:hover::after {
    opacity: 1;
    animation: shimmer 0.7s ease forwards;
}

/* ─────────────────────────────────────────────
   Particle / Dust Motes (decorative)
   ───────────────────────────────────────────── */
.dust-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.dust-particle {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--clr-gold);
    opacity: 0;
    animation: floatUp var(--duration, 8s) var(--delay, 0s) ease-in-out infinite;
}

.dust-particle:nth-child(1)  { left: 10%; --duration: 9s;  --delay: 0s;   }
.dust-particle:nth-child(2)  { left: 20%; --duration: 7s;  --delay: 1s;   }
.dust-particle:nth-child(3)  { left: 35%; --duration: 11s; --delay: 2s;   }
.dust-particle:nth-child(4)  { left: 50%; --duration: 8s;  --delay: 0.5s; }
.dust-particle:nth-child(5)  { left: 65%; --duration: 10s; --delay: 3s;   }
.dust-particle:nth-child(6)  { left: 75%; --duration: 6s;  --delay: 1.5s; }
.dust-particle:nth-child(7)  { left: 85%; --duration: 12s; --delay: 0.8s; }
.dust-particle:nth-child(8)  { left: 92%; --duration: 9s;  --delay: 2.5s; }

/* ─────────────────────────────────────────────
   Hero Section Animations
   ───────────────────────────────────────────── */
.hero__gear--1 { animation: gearRotate 40s linear infinite; }
.hero__gear--2 { animation: gearRotate 25s linear infinite reverse; }
.hero__gear--3 { animation: gearRotate 18s linear infinite; }

/* Parallax text layers */
.hero__title-word {
    display: inline-block;
    overflow: hidden;
}

.hero__title-word-inner {
    display: inline-block;
    animation: fadeInUp 1s var(--ease-out) both;
}

.hero__title-word:nth-child(1) .hero__title-word-inner { animation-delay: 0.5s; }
.hero__title-word:nth-child(2) .hero__title-word-inner { animation-delay: 0.7s; }
.hero__title-word:nth-child(3) .hero__title-word-inner { animation-delay: 0.9s; }

/* ─────────────────────────────────────────────
   Gold Line Separator Animation
   ───────────────────────────────────────────── */
.ornament.is-visible .ornament__line {
    animation: drawLine 1s var(--ease-out) both;
}

.ornament.is-visible .ornament__line:last-child {
    animation-delay: 0.1s;
    transform-origin: right;
}

/* ─────────────────────────────────────────────
   Animated Number Counter
   ───────────────────────────────────────────── */
.counter-value {
    display: inline-block;
    overflow: hidden;
}

.counter-value.is-counting {
    animation: numberRoll 0.6s var(--ease-out) forwards;
}

/* ─────────────────────────────────────────────
   Page Transition
   ───────────────────────────────────────────── */
.page-transition {
    position: fixed;
    inset: 0;
    background: var(--clr-bg);
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
}

.page-transition.is-transitioning {
    animation: pageSlide 0.4s var(--ease-out) forwards;
}

@keyframes pageSlide {
    0%   { opacity: 0;   clip-path: inset(0 100% 0 0); }
    50%  { opacity: 1;   clip-path: inset(0 0 0 0); }
    100% { opacity: 0;   clip-path: inset(0 0 0 100%); }
}

/* ─────────────────────────────────────────────
   Image Reveal (scroll-triggered)
   ───────────────────────────────────────────── */
.image-reveal-wrap {
    overflow: hidden;
    position: relative;
}

.image-reveal-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--clr-gold);
    transform: scaleX(1);
    transform-origin: left;
    transition: transform 0.8s var(--ease-out);
    z-index: 1;
}

.image-reveal-wrap.is-visible::after {
    transform: scaleX(0);
    transform-origin: right;
}

/* ─────────────────────────────────────────────
   Button Hover Animations
   ───────────────────────────────────────────── */
.btn {
    isolation: isolate;
}

.btn--primary:active {
    transform: translateY(-1px);
}

/* Arrow buttons */
.btn-arrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}

.btn-arrow .arrow {
    display: inline-block;
    width: 20px;
    height: 1px;
    background: currentColor;
    position: relative;
    transition: width var(--t-base);
}

.btn-arrow .arrow::after {
    content: '';
    position: absolute;
    right: 0;
    top: -3px;
    width: 7px;
    height: 7px;
    border-right: 1px solid currentColor;
    border-top: 1px solid currentColor;
    transform: rotate(45deg);
}

.btn-arrow:hover .arrow {
    width: 30px;
}

/* ─────────────────────────────────────────────
   Navigation Hover Line
   ───────────────────────────────────────────── */
.primary-nav__link::after {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─────────────────────────────────────────────
   Card Hover 3D Tilt (optional JS feature)
   ───────────────────────────────────────────── */
.card-tilt {
    transition: transform 0.4s var(--ease);
    transform-style: preserve-3d;
    will-change: transform;
}

/* ─────────────────────────────────────────────
   Sale Price Strikethrough Animation
   ───────────────────────────────────────────── */
.price-strike {
    position: relative;
    display: inline-block;
}

.price-strike::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--clr-red);
    transform: scaleX(0);
    transform-origin: left;
}

.price-strike.is-visible::after {
    animation: drawLine 0.5s 0.5s var(--ease-out) forwards;
}

/* ─────────────────────────────────────────────
   Scroll-Triggered Parallax (via CSS var)
   ───────────────────────────────────────────── */
.parallax {
    transform: translateY(calc(var(--scroll-y, 0) * 0.3px));
    will-change: transform;
}

.parallax--slow {
    transform: translateY(calc(var(--scroll-y, 0) * 0.15px));
}

/* ─────────────────────────────────────────────
   Logo Animation on Load
   ───────────────────────────────────────────── */
.site-logo {
    animation: fadeIn 0.8s var(--ease-out) 0.1s both;
}

.site-logo__icon {
    animation: gearRotate 60s linear infinite;
}

/* ─────────────────────────────────────────────
   Footer Gear Decoration
   ───────────────────────────────────────────── */
.footer-gear {
    position: absolute;
    color: rgba(184, 32, 48, 0.04);
    pointer-events: none;
    animation: gearRotate 80s linear infinite;
}

.footer-gear--1 {
    width: 200px;
    height: 200px;
    right: -50px;
    bottom: -50px;
}

.footer-gear--2 {
    width: 120px;
    height: 120px;
    left: 50px;
    bottom: -30px;
    animation-direction: reverse;
    animation-duration: 50s;
}

/* ─────────────────────────────────────────────
   Loading Bar (Page Load)
   ───────────────────────────────────────────── */
.loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--clr-gold-dark), var(--clr-gold), var(--clr-gold-dark));
    z-index: 9999;
    width: 0%;
    transition: width 0.3s ease;
}

.loading-bar.is-complete {
    width: 100%;
    opacity: 0;
    transition: width 0.3s ease, opacity 0.3s 0.3s ease;
}

/* ─────────────────────────────────────────────
   Reduced Motion Support
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .hero__bg-img {
        transform: none !important;
    }

    /* Suppress card tilt transitions */
    .product-card {
        transform: none !important;
        transition: none !important;
    }

    /* Suppress dust particle animations */
    .dust-particle {
        display: none;
    }

    /* Suppress parallax transforms */
    .parallax,
    .parallax--slow {
        transform: none !important;
    }

    html {
        scroll-behavior: auto;
    }
}