/**
 * SCW Identity & Motion Layer
 * ---------------------------------------------------------------
 * Super Clone Watches — "Midnight Steel in Motion"
 * Additive layer on top of main.css. Uses the theme's CSS tokens
 * (var(--color-*)) so light/dark [data-theme] switching keeps working.
 *
 * Principles:
 *  - transform/opacity only (GPU-safe, no layout thrash)
 *  - nothing is hidden without JS: reveal states are applied by
 *    scw-motion.js only to below-fold elements
 *  - prefers-reduced-motion: reduce  =>  motion off, content visible
 */

/* ═══════════════════════════════════════════════════════
   1. IDENTITY POLISH — steel gradients & surface depth
   ═══════════════════════════════════════════════════════ */

/* Aurora-steel ambient behind the hero */
.home-category-hero {
    position: relative;
    overflow: hidden;
}
.home-category-hero::before {
    content: "";
    position: absolute;
    inset: -20% -10%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(42% 55% at 18% 12%, color-mix(in srgb, var(--color-gold) 14%, transparent), transparent 70%),
        radial-gradient(38% 48% at 85% 20%, color-mix(in srgb, var(--color-gold-light) 12%, transparent), transparent 70%),
        radial-gradient(50% 60% at 55% 95%, color-mix(in srgb, var(--color-gold-dark) 9%, transparent), transparent 72%);
    opacity: .9;
}
.scw-motion .home-category-hero::before {
    animation: scw-aurora 26s ease-in-out infinite alternate;
}
@keyframes scw-aurora {
    0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
    50%  { transform: translate3d(2%, 1.5%, 0) scale(1.06); }
    100% { transform: translate3d(-1%, 2%, 0) scale(1.02); }
}
.home-category-hero > .container { position: relative; z-index: 1; }

/* Fine engraving grid over the hero — horological texture */
.home-category-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(color-mix(in srgb, var(--color-text) 4%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--color-text) 4%, transparent) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(80% 70% at 50% 30%, #000 0%, transparent 85%);
            mask-image: radial-gradient(80% 70% at 50% 30%, #000 0%, transparent 85%);
    opacity: .5;
}

/* Section rhythm: alternate tint + generous air */
.home-section {
    position: relative;
}
.home-section--mens,
.home-section--blog {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--color-bg-alt) 55%, var(--color-bg)),
            var(--color-bg));
}

/* Section title — underline draws itself in when revealed */
.section-title {
    position: relative;
    display: inline-block;
    padding-bottom: .35em;
}
.section-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    height: 2px;
    width: 64px;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
    transition: transform .9s cubic-bezier(.22, 1, .36, 1) .15s;
}
.scw-in .section-title::after,
.no-js .section-title::after {
    transform: translateX(-50%) scaleX(1);
}

/* ═══════════════════════════════════════════════════════
   2. REVEAL SYSTEM — applied by scw-motion.js
   .scw-io  = registered (hidden, waiting)
   .scw-in  = intersected (plays in)
   --scw-d  = per-element stagger delay set by JS
   ═══════════════════════════════════════════════════════ */

.scw-motion .scw-io {
    opacity: 0;
    transform: translate3d(0, 26px, 0) scale(.985);
    filter: blur(6px);
    transition:
        opacity   .7s cubic-bezier(.22, 1, .36, 1),
        transform .7s cubic-bezier(.22, 1, .36, 1),
        filter    .7s cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--scw-d, 0ms);
    will-change: opacity, transform, filter;
}
.scw-motion .scw-in,
.scw-motion .scw-io.scw-in {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}
/* free the compositor after the entrance */
.scw-motion .scw-io.scw-done {
    will-change: auto;
    filter: none;
    transition: none;
}

/* ═══════════════════════════════════════════════════════
   3. HERO ENTRANCE — plays immediately on load
   ═══════════════════════════════════════════════════════ */

.scw-motion .home-category-hero .home-category-hero__grid > * {
    opacity: 0;
    transform: translate3d(0, 34px, 0);
    animation: scw-hero-in .85s cubic-bezier(.22, 1, .36, 1) forwards;
}
.scw-motion .home-category-hero__grid--primary > *:nth-child(1) { animation-delay: .08s; }
.scw-motion .home-category-hero__grid--primary > *:nth-child(2) { animation-delay: .20s; }
.scw-motion .home-category-hero__grid--brands  > *:nth-child(1) { animation-delay: .34s; }
.scw-motion .home-category-hero__grid--brands  > *:nth-child(2) { animation-delay: .44s; }
.scw-motion .home-category-hero__grid--brands  > *:nth-child(3) { animation-delay: .54s; }
@keyframes scw-hero-in {
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ═══════════════════════════════════════════════════════
   4. CARD PHYSICS — lift, glow, shine sweep
   ═══════════════════════════════════════════════════════ */

.product-card,
.bestseller-card,
.category-card,
.blog-card,
.gwc-review-card {
    transition:
        transform .45s cubic-bezier(.22, 1, .36, 1),
        box-shadow .45s cubic-bezier(.22, 1, .36, 1);
}
.scw-motion .product-card:hover,
.scw-motion .bestseller-card:hover,
.scw-motion .category-card:hover,
.scw-motion .blog-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 14px 40px color-mix(in srgb, var(--color-text) 14%, transparent),
        0 4px 14px color-mix(in srgb, var(--color-gold) 16%, transparent);
}
.scw-motion .gwc-review-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--color-text) 12%, transparent);
}

/* image zoom inside cards */
.product-card__image-wrap,
.bestseller-card__image-wrap,
.category-card__media,
.blog-card__image-wrap {
    overflow: hidden;
}
.product-card__image-wrap img,
.bestseller-card__image-wrap img,
.category-card__media img,
.blog-card__image-wrap img {
    transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}
.scw-motion .product-card:hover .product-card__image-wrap img,
.scw-motion .bestseller-card:hover .bestseller-card__image-wrap img,
.scw-motion .category-card:hover .category-card__media img,
.scw-motion .blog-card:hover .blog-card__image-wrap img {
    transform: scale(1.06);
}

/* shine sweep across card media on hover */
.product-card__image-wrap::after,
.bestseller-card__image-wrap::after,
.category-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        105deg,
        transparent 40%,
        color-mix(in srgb, #fff 45%, transparent) 50%,
        transparent 60%);
    transform: translateX(-120%);
    z-index: 2;
}
.product-card__image-wrap,
.bestseller-card__image-wrap,
.category-card__media { position: relative; }
.scw-motion .product-card:hover .product-card__image-wrap::after,
.scw-motion .bestseller-card:hover .bestseller-card__image-wrap::after,
.scw-motion .category-card:hover .category-card__media::after {
    transition: transform .9s ease;
    transform: translateX(120%);
}

/* ═══════════════════════════════════════════════════════
   5. TRUST PILLS & BRAND MARQUEE
   ═══════════════════════════════════════════════════════ */

.home-trust-authority__pill {
    transition:
        transform .35s cubic-bezier(.22, 1, .36, 1),
        box-shadow .35s cubic-bezier(.22, 1, .36, 1),
        border-color .35s ease;
}
.scw-motion .home-trust-authority__pill:hover {
    transform: translateY(-3px);
    border-color: var(--color-gold);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--color-gold) 20%, transparent);
}

/* marquee: silky and pausable */
.scw-motion .brand-marquee:hover .brand-marquee__track {
    animation-play-state: paused;
}
.brand-marquee__item {
    transition: transform .3s ease, opacity .3s ease;
    opacity: .75;
}
.scw-motion .brand-marquee__item:hover {
    transform: scale(1.08);
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════
   6. BUTTONS — sheen + focus polish
   ═══════════════════════════════════════════════════════ */

.btn {
    position: relative;
    overflow: hidden;
}
.btn::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: -30%;
    width: 26%;
    transform: skewX(-20deg) translateX(-140%);
    background: color-mix(in srgb, #fff 55%, transparent);
    opacity: .55;
    pointer-events: none;
}
.scw-motion .btn:hover::after {
    transition: transform .7s ease;
    transform: skewX(-20deg) translateX(560%);
}
.btn-gold,
.btn-outline-gold {
    transition: transform .25s cubic-bezier(.22, 1, .36, 1),
                box-shadow .25s ease,
                background-color .25s ease,
                color .25s ease;
}
.scw-motion .btn-gold:hover,
.scw-motion .btn-outline-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--color-gold) 30%, transparent);
}

/* ═══════════════════════════════════════════════════════
   7. HEADER — condensing glass header on scroll
   ═══════════════════════════════════════════════════════ */

.site-header {
    transition: box-shadow .3s ease, background-color .3s ease,
                backdrop-filter .3s ease;
}
.scw-scrolled .site-header {
    background-color: color-mix(in srgb, var(--color-bg) 86%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
            backdrop-filter: saturate(1.4) blur(14px);
    box-shadow: 0 1px 0 var(--color-border),
                0 8px 24px color-mix(in srgb, var(--color-text) 8%, transparent);
}

/* ═══════════════════════════════════════════════════════
   8. NEWSLETTER & DEALS — living accents
   ═══════════════════════════════════════════════════════ */

.newsletter-standalone { position: relative; overflow: hidden; }
.newsletter-standalone::before {
    content: "";
    position: absolute;
    inset: -40%;
    pointer-events: none;
    background: conic-gradient(
        from 0deg,
        transparent 0 72%,
        color-mix(in srgb, var(--color-gold) 20%, transparent) 86%,
        transparent 100%);
    opacity: .5;
}
.scw-motion .newsletter-standalone::before {
    animation: scw-rotate 24s linear infinite;
}
@keyframes scw-rotate { to { transform: rotate(360deg); } }
.newsletter-standalone > .container { position: relative; z-index: 1; }

.scw-motion .home-deals__badge {
    animation: scw-float 4.5s ease-in-out infinite;
}
@keyframes scw-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* ═══════════════════════════════════════════════════════
   8b. SCW EDITORIAL — visible homepage copy block
   ═══════════════════════════════════════════════════════ */

.scw-editorial {
    padding: var(--space-3xl) 0;
    background:
        linear-gradient(180deg,
            var(--color-bg),
            color-mix(in srgb, var(--color-bg-alt) 60%, var(--color-bg)));
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.scw-editorial__inner {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}
.scw-editorial__inner .seo-intro {
    font-family: var(--font-display);
    font-size: 1.35rem;
    line-height: 1.65;
    color: var(--color-text);
    margin-bottom: var(--space-xl);
}
.scw-editorial__inner h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--color-text);
    margin: var(--space-xl) 0 var(--space-sm);
    position: relative;
    padding-left: 18px;
}
.scw-editorial__inner h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: .18em;
    bottom: .18em;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--color-gold), var(--color-gold-light));
}
.scw-editorial__inner p {
    color: var(--color-text-light);
    line-height: 1.75;
    margin-bottom: var(--space-md);
}
.scw-editorial__inner a {
    color: var(--color-gold);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--color-gold) 40%, transparent);
    transition: color .2s ease, border-color .2s ease;
}
.scw-editorial__inner a:hover {
    color: var(--color-gold-dark);
    border-bottom-color: var(--color-gold-dark);
}

/* ═══════════════════════════════════════════════════════
   9. ACCESSIBILITY & PERFORMANCE GUARDS
   ═══════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .scw-motion .scw-io,
    .scw-motion .home-category-hero .home-category-hero__grid > * {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
        transition: none !important;
    }
    .scw-motion .home-category-hero::before,
    .scw-motion .newsletter-standalone::before,
    .scw-motion .home-deals__badge {
        animation: none !important;
    }
}

/* touch devices: skip hover lifts (they stick) */
@media (hover: none) {
    .scw-motion .product-card:hover,
    .scw-motion .bestseller-card:hover,
    .scw-motion .category-card:hover,
    .scw-motion .blog-card:hover {
        transform: none;
        box-shadow: none;
    }
}

/* Yeni renkli logo (2026-09-17): tema eski tek renk SVG'yi siyaha boyuyordu;
   lacivert logo oldugu gibi kalmali. Koyu temada beyaz silueta dusurulur. */
:root .site-logo img,
:root .footer-logo img,
[data-theme="light"] .site-logo img,
[data-theme="light"] .footer-logo img {
    filter: none;
}
[data-theme="dark"] .site-logo img,
[data-theme="dark"] .footer-logo img {
    filter: brightness(0) invert(1);
}
/* Yeni logo mobilde para birimi secicisine giriyordu; biraz kucultuldu. */
@media (max-width: 576px) {
    .site-logo img { max-height: 34px; }
}