/* =========================================
   Designs Gallery – Sub-page styles
   ========================================= */

body {
    background:
        radial-gradient(circle at 16% 14%, rgba(109, 170, 247, 0.16), transparent 24%),
        radial-gradient(circle at 84% 12%, rgba(241, 181, 95, 0.2), transparent 28%),
        radial-gradient(circle at 50% 58%, rgba(20, 49, 81, 0.5), transparent 56%),
        linear-gradient(180deg, #081321 0%, #091726 52%, #081321 100%);
    max-width: 100%;
    overflow-x: hidden;
}

main {
    position: relative;
    isolation: isolate;
    overflow-x: hidden;
}

.designs-section {
    overflow-x: hidden;
}

@supports (overflow: clip) {
    html,
    body,
    main,
    .designs-section {
        overflow-x: clip;
    }
}

main::before,
main::after {
    content: "";
    position: absolute;
    left: 50%;
    pointer-events: none;
    z-index: 0;
}

main::before {
    width: min(112vw, 920px);
    height: min(112vw, 920px);
    top: -360px;
    transform: translateX(-50%);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 205, 136, 0.18) 0%, rgba(115, 173, 248, 0.12) 36%, transparent 72%);
    opacity: 0.72;
}

main::after {
    width: min(126vw, 1120px);
    height: min(126vw, 1120px);
    top: -470px;
    transform: translateX(-50%) rotate(12deg);
    border-radius: 50%;
    background:
        radial-gradient(circle, transparent 55%, rgba(255, 255, 255, 0.06) 55.4%, transparent 57.4%),
        radial-gradient(circle at 50% 50%, rgba(255, 204, 132, 0.08) 0%, rgba(117, 176, 251, 0.06) 42%, transparent 72%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 0 72px rgba(101, 160, 236, 0.08);
    opacity: 0.42;
}

/* Hero */
.designs-hero {
    padding: calc(env(safe-area-inset-top, 0px) + 7rem) 0 3rem;
    text-align: center;
    position: relative;
}

.designs-hero .container,
.designs-section > .container,
.footer {
    position: relative;
    z-index: 1;
}

.designs-hero .section-kicker {
    margin-bottom: 0.6rem;
}

.designs-hero .section-title {
    margin-bottom: 0.6rem;
}

.designs-hero .section-lead {
    max-width: 640px;
    margin: 0 auto 1rem;
}

.designs-hero .section-lead.section-lead--typewriter {
    white-space: pre-line;
}

.designs-hero .section-lead-typed {
    display: inline;
}

.designs-hero .section-lead-caret {
    display: inline-block;
    width: 2px;
    height: 1.08em;
    margin-left: 0.08em;
    background: var(--accent-color);
    vertical-align: -0.12em;
    opacity: 0;
}

/* Section title within gallery */
.designs-section-title {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.8vw, 2rem);
    margin-bottom: 1.5rem;
    padding-bottom: 0.6rem;
    border-bottom: none;
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
}

/* #3 Section title line animation */
.designs-section-title::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--line-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.designs-section-title.is-visible::before {
    transform: scaleX(1);
}

.designs-section-title .title-text {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s ease 0.4s, transform 0.5s ease 0.4s;
}

.designs-section-title.is-visible:not(.is-blasted) .title-text {
    opacity: 1;
    transform: translateY(0);
}

.designs-section-title.is-blasted .title-text,
.designs-section-title.is-blasted .designs-count-wrap {
    opacity: 0;
    transform: none;
    transition: none;
}

.title-glyph {
    display: inline-block;
    white-space: pre;
}

.title-floating-layer {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 120;
}

.title-floating-glyph {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    white-space: pre;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    transform-origin: center center;
    user-select: none;
    will-change: transform;
}

/* #9 Count-up badge */
.designs-count-wrap {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: var(--text-muted);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease 0.7s, transform 0.4s ease 0.7s;
    white-space: nowrap;
    display: inline-flex;
    align-items: baseline;
    gap: 0.32rem;
}

.designs-section-title.is-visible:not(.is-blasted) .designs-count-wrap {
    opacity: 1;
    transform: translateY(0);
}

.designs-count-wrap .designs-count-label {
    letter-spacing: 0.08em;
}

.designs-count-label .title-glyph:not(:last-child) {
    margin-right: 0.08em;
}

.designs-count {
    font-weight: 700;
    color: var(--accent-color);
    font-size: 1.1rem;
}

/* Gallery section spacing */
.designs-section {
    --section-accent: rgba(255, 203, 130, 0.34);
    --section-glow: rgba(113, 173, 248, 0.24);
    --parallax-before-x: 0px;
    --parallax-before-y: 0px;
    padding: 3rem 0;
    position: relative;
}

.designs-section + .designs-section {
    padding-top: 1.5rem;
}

.designs-section:nth-of-type(1) {
    --section-accent: rgba(255, 208, 142, 0.36);
    --section-glow: rgba(103, 162, 238, 0.22);
}

.designs-section:nth-of-type(2) {
    --section-accent: rgba(255, 190, 102, 0.28);
    --section-glow: rgba(124, 186, 255, 0.3);
}

/* #5 Parallax background decorations */
.designs-section::before,
.designs-section::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.designs-section::before {
    width: clamp(320px, 38vw, 520px);
    height: clamp(320px, 38vw, 520px);
    top: -18%;
    right: -14%;
    border-radius: 38% 62% 57% 43% / 44% 41% 59% 56%;
    background:
        radial-gradient(circle at 50% 50%, var(--section-accent) 0%, rgba(255, 255, 255, 0.06) 22%, transparent 66%);
    box-shadow:
        0 0 64px var(--section-glow);
    opacity: 0.72;
    transform: translate3d(var(--parallax-before-x), var(--parallax-before-y), 0) rotate(-10deg);
    will-change: transform;
}

.designs-section::after {
    width: clamp(180px, 22vw, 300px);
    height: clamp(180px, 22vw, 300px);
    bottom: 4%;
    left: 2%;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(113, 173, 248, 0.14) 0%, transparent 68%);
    opacity: 0.38;
    transform: rotate(12deg);
}

/* #8 Scale bounce for card reveal */
.designs-section .design-item.reveal {
    opacity: 0;
    transform: translateY(30px) scale(0.92);
    transition: opacity 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.designs-section .design-item.reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* #10 Page intro animation */
.page-loading {
    opacity: 0;
    transform: translateY(10px);
}

.page-loading main,
.page-loading footer {
    opacity: 0;
}

body:not(.page-loading) main,
body:not(.page-loading) footer {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* #2 Hero staggered text */
.designs-hero .section-kicker {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.designs-hero .section-title {
    overflow: hidden;
}

.designs-hero .section-title .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.designs-hero .section-lead {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.hero-animated .section-kicker {
    opacity: 1;
    transform: translateY(0);
}

.hero-animated .section-title .char {
    opacity: 1;
    transform: translateY(0);
}

.hero-animated .section-lead {
    opacity: 1;
    transform: translateY(0);
}

.hero-animated .section-lead.is-typing .section-lead-caret {
    opacity: 1;
    animation: blinkCaret 0.9s steps(1, end) infinite;
}

.hero-animated .section-lead.is-complete .section-lead-caret {
    opacity: 0;
    animation: none;
}

@keyframes blinkCaret {
    0%, 45% {
        opacity: 1;
    }
    46%, 100% {
        opacity: 0;
    }
}

/* #6 Scroll progress bar */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 9999;
    pointer-events: none;
}

.scroll-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-color), var(--accent-strong));
    transform: scaleX(0);
    transform-origin: left;
    will-change: transform;
}

/* #7 Floating decorations */
.floating-decor {
    position: fixed;
    pointer-events: none;
    z-index: 0;
    opacity: var(--decor-opacity, 0.14);
}

.floating-decor__shape {
    position: relative;
    display: block;
    color: var(--decor-color, rgba(255, 204, 132, 0.92));
    animation-duration: var(--decor-duration, 20s);
    animation-delay: var(--decor-delay, 0s);
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    will-change: transform;
}

.floating-decor__shape--gold {
    --decor-color: rgba(255, 204, 132, 0.92);
    --decor-glow: rgba(255, 204, 132, 0.28);
}

.floating-decor__shape--blue {
    --decor-color: rgba(127, 190, 255, 0.92);
    --decor-glow: rgba(127, 190, 255, 0.26);
}

.floating-decor__shape--soft {
    --decor-color: rgba(226, 234, 245, 0.78);
    --decor-glow: rgba(255, 255, 255, 0.18);
}

.floating-decor__shape--circle {
    width: var(--decor-size, 84px);
    height: var(--decor-size, 84px);
    border: var(--decor-stroke, 2px) solid currentColor;
    border-radius: 50%;
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.04);
    animation-name: floatA;
}

.floating-decor__shape--triangle {
    width: 0;
    height: 0;
    border-left: calc(var(--decor-size, 84px) * 0.38) solid transparent;
    border-right: calc(var(--decor-size, 84px) * 0.38) solid transparent;
    border-bottom: calc(var(--decor-size, 84px) * 0.66) solid currentColor;
    animation-name: floatB;
}

.floating-decor__shape--diamond {
    width: calc(var(--decor-size, 84px) * 0.58);
    height: calc(var(--decor-size, 84px) * 0.58);
    background: currentColor;
    transform: rotate(45deg);
    animation-name: floatC;
}

.floating-decor__shape--ring {
    width: var(--decor-size, 84px);
    height: var(--decor-size, 84px);
    border: var(--decor-stroke, 2px) solid currentColor;
    border-radius: 50%;
    box-shadow: inset 0 0 0 8px rgba(7, 19, 33, 0.32);
    animation-name: floatD;
}

.floating-decor__shape--dot {
    width: calc(var(--decor-size, 84px) * 0.24);
    height: calc(var(--decor-size, 84px) * 0.24);
    background: currentColor;
    border-radius: 50%;
    box-shadow: 0 0 16px currentColor;
    animation-name: floatE;
}

@keyframes floatA {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    25% { transform: translate3d(34px, -50px, 0) rotate(82deg) scale(1.06); }
    50% { transform: translate3d(-24px, -92px, 0) rotate(180deg) scale(0.96); }
    75% { transform: translate3d(44px, -34px, 0) rotate(272deg) scale(1.02); }
}

@keyframes floatB {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    33% { transform: translate3d(-46px, -54px, 0) rotate(118deg); }
    66% { transform: translate3d(38px, -76px, 0) rotate(244deg); }
}

@keyframes floatC {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(45deg) scale(1); }
    25% { transform: translate3d(56px, -34px, 0) rotate(134deg) scale(1.08); }
    50% { transform: translate3d(-36px, -72px, 0) rotate(226deg) scale(0.94); }
    75% { transform: translate3d(24px, -44px, 0) rotate(314deg) scale(1.02); }
}

@keyframes floatD {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    33% { transform: translate3d(-28px, -48px, 0) scale(1.06); }
    66% { transform: translate3d(38px, -28px, 0) scale(0.97); }
}

@keyframes floatE {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    20% { transform: translate3d(44px, -34px, 0) scale(1.05); }
    40% { transform: translate3d(-24px, -76px, 0) scale(0.95); }
    60% { transform: translate3d(34px, -54px, 0) scale(1.02); }
    80% { transform: translate3d(-42px, -22px, 0) scale(0.98); }
}

@media (max-width: 768px) {
    .designs-hero {
        padding-top: calc(env(safe-area-inset-top, 0px) + 5.5rem);
        padding-bottom: 2rem;
    }

    main::before {
        width: min(138vw, 720px);
        height: min(138vw, 720px);
        top: -250px;
    }

    main::after {
        width: min(156vw, 860px);
        height: min(156vw, 860px);
        top: -330px;
        opacity: 0.34;
    }

    .designs-section {
        padding: 2rem 0;
    }

    .designs-section::before {
        width: clamp(240px, 68vw, 360px);
        height: clamp(240px, 68vw, 360px);
        right: -22%;
        top: -10%;
    }

    .designs-section::after {
        width: clamp(140px, 36vw, 220px);
        height: clamp(140px, 36vw, 220px);
        left: -4%;
        bottom: 10%;
    }

}

@media (max-width: 480px) {
    main::before {
        top: -220px;
    }

    main::after {
        top: -290px;
    }

}

/* =========================================
   Accessibility: Reduced motion
   ========================================= */
@media (prefers-reduced-motion: reduce) {
    .page-loading {
        opacity: 1;
        transform: none;
    }

    body:not(.page-loading) main,
    body:not(.page-loading) footer {
        transition: none;
    }

    .designs-hero .section-kicker,
    .designs-hero .section-title .char,
    .designs-hero .section-lead {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .designs-hero .section-lead-caret {
        display: none;
        animation: none;
    }

    .designs-section .design-item.reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .designs-section-title::before {
        transform: scaleX(1);
        transition: none;
    }

    .designs-section-title .title-text {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .designs-count-wrap {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .title-floating-layer {
        display: none;
    }

    .scroll-progress {
        display: none;
    }

    .floating-decor {
        display: none;
    }

    .designs-section::before,
    .designs-section::after {
        display: none;
    }

}