/* ==========================================================================
   ThorDrone DJI-Style Theme — Homepage Styles
   Hero carousel, product showcase cards, product grid, brand value band, CTA.
   All tokens are --td-* (see DJI-Style-Design-Spec.md).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero Carousel
   -------------------------------------------------------------------------- */
.td-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    background: var(--td-bg-dark);
}

.td-hero__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity var(--td-hero-fade) var(--td-ease);
    pointer-events: none;
}

.td-hero__slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.td-hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transform: scale(1);
}

.td-hero__slide.is-active .td-hero__bg {
    animation: kenburns 20s linear forwards;
}

@keyframes kenburns {
    from { transform: scale(1) translate(0, 0); }
    to   { transform: scale(1.08) translate(-1%, -1%); }
}

.td-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--td-gradient-hero-left), var(--td-gradient-hero-bottom);
}

.td-hero__content {
    position: absolute;
    bottom: 120px;
    left: var(--td-space-5);
    max-width: 720px;
    z-index: 2;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.td-hero__label {
    display: block;
    font-size: var(--td-fs-label);
    font-weight: var(--td-fw-medium);
    text-transform: uppercase;
    letter-spacing: var(--td-ls-wide);
    color: var(--td-text-inverse-muted);
    margin-bottom: var(--td-space-2);
}

.td-hero__title {
    font-size: clamp(40px, 6vw, 76px);
    font-weight: var(--td-fw-bold);
    line-height: var(--td-lh-tight);
    letter-spacing: -0.03em;
    color: var(--td-text-inverse);
    margin-bottom: var(--td-space-3);
}

.td-hero__tagline {
    font-size: clamp(16px, 1.6vw, 22px);
    font-weight: var(--td-fw-light);
    line-height: var(--td-lh-normal);
    color: var(--td-text-inverse-muted);
    margin-bottom: var(--td-space-4);
    max-width: 560px;
}

.td-hero__links {
    display: flex;
    gap: var(--td-space-5);
    flex-wrap: wrap;
}

/* Hero dots */
.td-hero__dots {
    position: absolute;
    bottom: 40px;
    left: var(--td-space-5);
    display: flex;
    gap: var(--td-space-2);
    z-index: 3;
}

.td-hero__dot {
    width: 32px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.35);
    padding: 0;
    border: none;
    cursor: pointer;
    transition: background var(--td-duration-base) var(--td-ease),
                width var(--td-duration-base) var(--td-ease);
}

.td-hero__dot.is-active {
    background: #FFFFFF;
}

/* --------------------------------------------------------------------------
   Product Showcase — Large image cards (DJI-style category grid)
   -------------------------------------------------------------------------- */
.td-showcase {
    padding: var(--td-space-8) 0;
    background: var(--td-bg-primary);
}

.td-showcase__header {
    text-align: center;
    margin-bottom: var(--td-space-6);
    padding-inline: var(--td-container-padding);
}

.td-showcase__header h2 {
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: var(--td-fw-bold);
    letter-spacing: var(--td-ls-tight);
    line-height: var(--td-lh-tight);
    margin-bottom: var(--td-space-2);
}

.td-showcase__header p {
    font-size: clamp(16px, 1.4vw, 20px);
    font-weight: var(--td-fw-light);
    color: var(--td-text-secondary);
    max-width: 640px;
    margin: 0 auto;
}

.td-showcase__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--td-space-3);
    padding-inline: var(--td-container-padding);
}

.td-showcase__card {
    position: relative;
    min-height: 560px;
    overflow: hidden;
    background: var(--td-bg-dark);
    display: flex;
    align-items: flex-end;
    cursor: pointer;
}

.td-showcase__card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1);
    transition: transform var(--td-duration-slow) var(--td-ease);
}

.td-showcase__card:hover .td-showcase__card-bg {
    transform: scale(1.05);
}

.td-showcase__card-overlay {
    position: absolute;
    inset: 0;
    background: var(--td-gradient-card-bottom);
    transition: background var(--td-duration-base) var(--td-ease);
}

.td-showcase__card:hover .td-showcase__card-overlay {
    background: linear-gradient(to bottom, transparent 0%, transparent 25%, rgba(10, 10, 10, 0.75) 65%, rgba(10, 10, 10, 0.95) 100%);
}

.td-showcase__card-content {
    position: relative;
    z-index: 2;
    padding: var(--td-space-5);
    color: var(--td-text-inverse);
    width: 100%;
}

.td-showcase__card-label {
    display: block;
    font-size: 11px;
    font-weight: var(--td-fw-medium);
    text-transform: uppercase;
    letter-spacing: var(--td-ls-wide);
    color: var(--td-text-inverse-muted);
    margin-bottom: var(--td-space-1);
}

.td-showcase__card-title {
    font-size: clamp(22px, 2vw, 30px);
    font-weight: var(--td-fw-bold);
    line-height: var(--td-lh-tight);
    letter-spacing: var(--td-ls-tight);
    color: var(--td-text-inverse);
    margin-bottom: var(--td-space-2);
}

.td-showcase__card-desc {
    font-size: 15px;
    font-weight: var(--td-fw-regular);
    line-height: var(--td-lh-normal);
    color: var(--td-text-inverse-muted);
    margin-bottom: var(--td-space-3);
    max-width: 360px;
}

.td-showcase__card-link {
    display: inline-flex;
    align-items: center;
    gap: var(--td-space-1);
    font-size: 15px;
    font-weight: var(--td-fw-medium);
    color: var(--td-text-inverse);
    transition: color var(--td-duration-base) var(--td-ease);
}

.td-showcase__card-link:hover {
    color: #FFFFFF;
}

.td-showcase__card-link svg,
.td-showcase__card-link .td-link__arrow {
    transition: transform var(--td-duration-fast) var(--td-ease);
}

.td-showcase__card:hover .td-showcase__card-link svg,
.td-showcase__card:hover .td-showcase__card-link .td-link__arrow {
    transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   Product Grid Section
   -------------------------------------------------------------------------- */
.td-grid-section {
    padding: var(--td-space-8) 0;
    background: var(--td-bg-secondary);
}

.td-grid-header {
    text-align: center;
    margin-bottom: var(--td-space-6);
    padding-inline: var(--td-container-padding);
}

.td-grid-header h2 {
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: var(--td-fw-bold);
    line-height: var(--td-lh-tight);
    letter-spacing: var(--td-ls-tight);
    margin-bottom: var(--td-space-2);
}

.td-grid-header p {
    font-size: clamp(16px, 1.4vw, 20px);
    font-weight: var(--td-fw-light);
    color: var(--td-text-secondary);
    max-width: 640px;
    margin: 0 auto;
}

.td-filter-bar {
    display: flex;
    justify-content: center;
    gap: var(--td-space-4);
    flex-wrap: wrap;
    margin-bottom: var(--td-space-6);
    padding-inline: var(--td-container-padding);
}

.td-filter {
    font-size: var(--td-fs-label);
    font-weight: var(--td-fw-medium);
    text-transform: uppercase;
    letter-spacing: var(--td-ls-wide);
    color: var(--td-text-secondary);
    padding: var(--td-space-1) 0;
    position: relative;
    cursor: pointer;
    background: none;
    border: none;
    font-family: var(--td-font-body);
    transition: color var(--td-duration-base) var(--td-ease);
}

.td-filter::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: var(--td-text-primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--td-duration-base) var(--td-ease);
}

.td-filter:hover {
    color: var(--td-text-primary);
}

.td-filter.is-active {
    color: var(--td-text-primary);
}

.td-filter.is-active::after {
    transform: scaleX(1);
}

.td-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--td-grid-gap);
    padding-inline: var(--td-container-padding);
}

.td-grid-section__more {
    text-align: center;
    margin-top: var(--td-space-6);
}

/* --------------------------------------------------------------------------
   Brand Value Band
   -------------------------------------------------------------------------- */
.td-values {
    padding: var(--td-space-8) 0;
    background: var(--td-bg-primary);
    text-align: center;
}

.td-values__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--td-space-5);
    margin-bottom: var(--td-space-7);
}

.td-stat__number {
    font-size: clamp(32px, 4vw, 56px);
    font-weight: var(--td-fw-bold);
    line-height: var(--td-lh-tight);
    letter-spacing: var(--td-ls-tight);
    color: var(--td-text-primary);
}

.td-stat__label {
    font-size: 12px;
    font-weight: var(--td-fw-medium);
    text-transform: uppercase;
    letter-spacing: var(--td-ls-wide);
    color: var(--td-text-secondary);
    margin-top: var(--td-space-1);
}

.td-values__tagline {
    font-size: clamp(18px, 1.8vw, 24px);
    font-weight: var(--td-fw-light);
    line-height: var(--td-lh-normal);
    color: var(--td-text-secondary);
    max-width: 720px;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   CTA Section
   -------------------------------------------------------------------------- */
.td-cta {
    padding: var(--td-space-8) var(--td-container-padding);
    background: var(--td-bg-dark);
    text-align: center;
    color: var(--td-text-inverse);
}

.td-cta h2 {
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: var(--td-fw-bold);
    line-height: var(--td-lh-tight);
    letter-spacing: var(--td-ls-tight);
    margin-bottom: var(--td-space-3);
    color: var(--td-text-inverse);
}

.td-cta p {
    font-size: clamp(16px, 1.4vw, 20px);
    font-weight: var(--td-fw-light);
    color: var(--td-text-inverse-muted);
    margin-bottom: var(--td-space-5);
    max-width: 640px;
    margin-inline: auto;
}

.td-cta__contact {
    font-size: var(--td-fs-body);
    color: var(--td-text-inverse-dim);
    margin-top: var(--td-space-4);
}

.td-cta__contact a {
    color: var(--td-text-inverse-muted);
    transition: color var(--td-duration-base) var(--td-ease);
}

.td-cta__contact a:hover {
    color: var(--td-text-inverse);
}

.td-cta__actions {
    display: flex;
    gap: var(--td-space-4);
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: var(--td-space-4);
}

.td-cta__actions .btn {
    min-width: 200px;
}

/* --------------------------------------------------------------------------
   Scroll fade-in animation
   -------------------------------------------------------------------------- */
.td-fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--td-duration-slow) var(--td-ease),
                transform var(--td-duration-slow) var(--td-ease);
}

.td-fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.td-fade-in--left {
    transform: translateX(-30px);
}

.td-fade-in--left.is-visible {
    transform: translateX(0);
}

.td-fade-in--right {
    transform: translateX(30px);
}

.td-fade-in--right.is-visible {
    transform: translateX(0);
}