/* Trade-In hero — detailed iPhone whirlwind */
.tradein-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(135deg, #0058b8 0%, #0071e3 42%, #2f9bff 100%);
    color: #fff;
    padding: 88px 20px 92px;
    text-align: center;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tradein-hero__inner {
    position: relative;
    z-index: 3;
    max-width: 640px;
    margin: 0 auto;
    pointer-events: none;
}

.tradein-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    font-weight: 600;
    margin: 0 0 12px;
    letter-spacing: -0.04em;
    color: #fff !important;
    text-shadow: 0 2px 24px rgba(0, 40, 100, 0.45);
}

.tradein-hero p {
    font-size: clamp(1rem, 2.4vw, 1.2rem);
    color: rgba(255, 255, 255, 0.92) !important;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.45;
    text-shadow: 0 1px 14px rgba(0, 40, 100, 0.35);
}

.tradein-hero__storm {
    position: absolute;
    inset: -12% -8%;
    z-index: 1;
    pointer-events: none;
    transform: translate3d(var(--dm-wind-x, 0px), var(--dm-wind-y, 0px), 0);
    transition: transform 0.35s ease-out;
    will-change: transform;
}

.tradein-hero__glow {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70% 55% at 50% 45%, rgba(0, 60, 140, 0.28) 0%, transparent 70%),
        linear-gradient(90deg, rgba(0, 40, 110, 0.38) 0%, transparent 16%, transparent 84%, rgba(0, 40, 110, 0.32) 100%);
}

/* —— Phone shell —— */
.dm-ti-phone {
    --dm-ph-w: 24px;
    --dm-body: #f2f2f7;
    --dm-body-2: #c8c8ce;
    --dm-island: #2a2a2e;
    --dm-lens: #111114;
    --dm-ring: #5a5a60;

    position: absolute;
    width: var(--dm-ph-w);
    height: calc(var(--dm-ph-w) * 2.08);
    left: -14%;
    top: var(--dm-ph-top, 40%);
    opacity: 0;
    animation: dm-ti-whirl var(--dm-ph-dur, 7s) linear infinite;
    animation-delay: var(--dm-ph-delay, 0s);
    transform-origin: center center;
    will-change: transform, opacity;
    filter: drop-shadow(0 8px 14px rgba(0, 20, 60, 0.32));
}

.dm-ti-phone__shell {
    position: absolute;
    inset: 0;
    border-radius: calc(var(--dm-ph-w) * 0.22);
    overflow: hidden;
    background: linear-gradient(155deg, var(--dm-body) 0%, var(--dm-body-2) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.35),
        inset 0 -2px 4px rgba(0, 0, 0, 0.12);
}

/* side buttons hint */
.dm-ti-phone__shell::before {
    content: "";
    position: absolute;
    left: -1.5px;
    top: 22%;
    width: 2px;
    height: 10%;
    border-radius: 1px;
    background: rgba(0, 0, 0, 0.18);
}
.dm-ti-phone__shell::after {
    content: "";
    position: absolute;
    right: -1.5px;
    top: 28%;
    width: 2px;
    height: 14%;
    border-radius: 1px;
    background: rgba(0, 0, 0, 0.16);
}

/* —— BACK: Pro camera island —— */
.dm-ti-phone--back .dm-ti-phone__island {
    position: absolute;
    left: 9%;
    top: 7%;
    width: 44%;
    height: 30%;
    border-radius: 22%;
    background: linear-gradient(160deg, var(--dm-island) 0%, #1a1a1e 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.12),
        0 2px 4px rgba(0, 0, 0, 0.25);
}

/* Classic Pro triangle: 2 vertical on left, 1 diagonal right */
.dm-ti-phone__lens {
    position: absolute;
    width: 34%;
    height: 0;
    padding-bottom: 34%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 40% 35%, rgba(120, 160, 220, 0.45) 0%, transparent 35%),
        radial-gradient(circle at 50% 50%, #1c2a44 28%, var(--dm-lens) 55%, #0a0a0c 100%);
    box-shadow:
        0 0 0 1.2px var(--dm-ring),
        inset 0 0 2px rgba(255, 255, 255, 0.25);
}

.dm-ti-phone__lens--1 { left: 12%; top: 12%; }   /* top of vertical pair */
.dm-ti-phone__lens--2 { left: 12%; top: 52%; }   /* bottom of vertical pair */
.dm-ti-phone__lens--3 { right: 12%; top: 32%; }  /* diagonal / right */

.dm-ti-phone__flash {
    position: absolute;
    right: 18%;
    top: 14%;
    width: 14%;
    height: 0;
    padding-bottom: 14%;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #fff6d0 0%, #f0c85a 45%, #b8860b 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.dm-ti-phone__mic {
    position: absolute;
    right: 22%;
    bottom: 16%;
    width: 8%;
    height: 0;
    padding-bottom: 8%;
    border-radius: 50%;
    background: #0e0e10;
    opacity: 0.9;
}

/* Single camera (non-Pro) — small square island, one lens */
.dm-ti-phone--cam-single .dm-ti-phone__island {
    width: 28%;
    height: 14%;
    left: 10%;
    top: 8%;
    border-radius: 28%;
}
.dm-ti-phone__lens--solo {
    left: 18%;
    top: 18%;
    width: 58%;
    padding-bottom: 58%;
}
.dm-ti-phone__flash--solo {
    right: 14%;
    top: auto;
    bottom: 16%;
    width: 18%;
    padding-bottom: 18%;
}

/* Dual camera — vertical pair */
.dm-ti-phone--cam-dual .dm-ti-phone__island {
    width: 30%;
    height: 28%;
    left: 10%;
    top: 7.5%;
    border-radius: 32%;
}
.dm-ti-phone__lens--d1 {
    left: 22%;
    top: 12%;
    width: 52%;
    padding-bottom: 52%;
}
.dm-ti-phone__lens--d2 {
    left: 22%;
    top: 52%;
    width: 52%;
    padding-bottom: 52%;
}
.dm-ti-phone__flash--dual {
    right: -28%;
    top: 38%;
    width: 22%;
    padding-bottom: 22%;
}

.dm-ti-phone__apple {
    position: absolute;
    left: 50%;
    top: 52%;
    width: 12%;
    height: 0;
    padding-bottom: 14%;
    transform: translateX(-50%);
    border-radius: 40% 40% 45% 45%;
    background: rgba(0, 0, 0, 0.14);
    opacity: 0.55;
}

/* —— FRONT —— */
.dm-ti-phone--front .dm-ti-phone__shell {
    background: linear-gradient(160deg, #2c2c2e 0%, #111113 100%);
    padding: 3.5%;
    box-sizing: border-box;
}

.dm-ti-phone--front .dm-ti-phone__shell::before,
.dm-ti-phone--front .dm-ti-phone__shell::after {
    background: rgba(255, 255, 255, 0.12);
}

.dm-ti-phone__screen {
    position: absolute;
    inset: 3.5%;
    border-radius: calc(var(--dm-ph-w) * 0.16);
    background:
        linear-gradient(165deg, #1a2744 0%, #0b1220 55%, #152038 100%);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.dm-ti-phone__dynamic {
    position: absolute;
    left: 50%;
    top: 5.5%;
    transform: translateX(-50%);
    width: 34%;
    height: 6.5%;
    border-radius: 999px;
    background: #050507;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.dm-ti-phone__dynamic::after {
    content: "";
    position: absolute;
    right: 14%;
    top: 50%;
    transform: translateY(-50%);
    width: 18%;
    height: 0;
    padding-bottom: 18%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #2a4060 0%, #0a1018 70%);
}

.dm-ti-phone__homebar {
    position: absolute;
    left: 50%;
    bottom: 4%;
    transform: translateX(-50%);
    width: 28%;
    height: 2.2%;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.35);
}

/* colored front chrome frame (thin outer ring) */
.dm-ti-phone--front .dm-ti-phone__chrome {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--dm-body) 70%, #000 30%);
    pointer-events: none;
}

/* —— Color finishes (iPhone lineup) —— */
.dm-ti-phone--orange {
    /* Cosmic Orange — iPhone 17 Pro Max */
    --dm-body: #ff6b2c;
    --dm-body-2: #e04510;
    --dm-island: #3a2218;
    --dm-ring: #8a5a40;
}
.dm-ti-phone--desert {
    --dm-body: #c4a484;
    --dm-body-2: #9a7b58;
    --dm-island: #3a3228;
    --dm-ring: #7a6850;
}
.dm-ti-phone--natural {
    --dm-body: #b0aaa0;
    --dm-body-2: #817c74;
    --dm-island: #2e2c2a;
    --dm-ring: #6a6660;
}
.dm-ti-phone--white-ti {
    --dm-body: #e8e6e1;
    --dm-body-2: #c2bfb8;
    --dm-island: #2c2c2e;
    --dm-ring: #7a7874;
}
.dm-ti-phone--black-ti {
    --dm-body: #3a3a3c;
    --dm-body-2: #1c1c1e;
    --dm-island: #0e0e10;
    --dm-ring: #555558;
}
.dm-ti-phone--ultramarine {
    --dm-body: #3b6ef5;
    --dm-body-2: #1f4fd0;
    --dm-island: #162848;
    --dm-ring: #4a6aaa;
}
.dm-ti-phone--teal {
    --dm-body: #4ecdc4;
    --dm-body-2: #2a9e96;
    --dm-island: #163836;
    --dm-ring: #4a8a84;
}
.dm-ti-phone--pink {
    --dm-body: #f7b6c8;
    --dm-body-2: #e089a4;
    --dm-island: #3a2430;
    --dm-ring: #8a6070;
}
.dm-ti-phone--black {
    --dm-body: #2c2c2e;
    --dm-body-2: #111113;
    --dm-island: #0a0a0c;
    --dm-ring: #4a4a4e;
}
.dm-ti-phone--white {
    --dm-body: #f5f5f7;
    --dm-body-2: #d2d2d7;
    --dm-island: #2c2c2e;
    --dm-ring: #6a6a70;
}
.dm-ti-phone--blue {
    --dm-body: #a8c8f0;
    --dm-body-2: #6a9ad4;
    --dm-island: #1e2a40;
    --dm-ring: #5a7aaa;
}
.dm-ti-phone--green {
    --dm-body: #a8e0b8;
    --dm-body-2: #5aaf78;
    --dm-island: #1e3228;
    --dm-ring: #5a8a68;
}

@keyframes dm-ti-whirl {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) rotate(var(--dm-ph-rot0, -20deg)) scale(var(--dm-ph-scale, 1));
    }
    7% {
        opacity: var(--dm-ph-op, 0.92);
    }
    50% {
        transform: translate3d(55vw, var(--dm-ph-mid, -18px), 0)
            rotate(calc(var(--dm-ph-rot0, -20deg) + var(--dm-ph-spin, 180deg)))
            scale(calc(var(--dm-ph-scale, 1) * 1.06));
    }
    93% {
        opacity: var(--dm-ph-op, 0.92);
    }
    100% {
        opacity: 0;
        transform: translate3d(122vw, var(--dm-ph-end, 24px), 0)
            rotate(calc(var(--dm-ph-rot0, -20deg) + var(--dm-ph-spin, 360deg)))
            scale(var(--dm-ph-scale, 1));
    }
}

.tradein-hero.is-boost .dm-ti-phone {
    animation-duration: calc(var(--dm-ph-dur, 7s) * 0.55);
}

.tradein-hero__hint {
    display: none !important;
}

@media (max-width: 767px) {
    .tradein-hero {
        padding: 72px 16px 78px;
        min-height: 240px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dm-ti-phone {
        animation: none !important;
        opacity: 0.4;
        left: 50%;
        transform: translateX(-50%) rotate(-12deg);
    }
    .tradein-hero__storm {
        transition: none;
    }
}

[data-theme="dark"] .tradein-hero {
    background: linear-gradient(135deg, #003d82 0%, #0a5ec8 45%, #1a7fff 100%);
}