:root {
    --glass-bg: rgba(255, 255, 255, 0.4);
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-shadow: rgba(0, 0, 0, 0.05);
    --text-primary: #1d1d1f;
    --text-secondary: #515154;
    --accent: #65C466;
    /* Green from particles */
    --accent-hover: #54a555;
}

body,
html {
    overflow-y: auto !important;
    /* override the overflow: hidden in root styles.css */
    height: auto !important;
    min-height: 100vh;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text-primary);
    scroll-behavior: smooth;
}

#particles-js {
    pointer-events: none;
}

.content-wrapper {
    position: relative;
    z-index: 10;
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    box-shadow: 0 8px 32px var(--glass-shadow);
    padding: 40px;
    transition: box-shadow 0.3s ease;
}

.glass-panel:hover {
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.1);
}

.hero {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 40px;
}

.app-icon {
    width: 128px;
    height: 128px;
    margin-bottom: 24px;
    border-radius: 36px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.hero h1 {
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.hero .tagline {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.hero .description {
    font-size: 1.1rem;
    max-width: 600px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 40px;
}

.download-btn {
    display: inline-block;
    background: var(--accent);
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 16px 32px;
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(101, 196, 102, 0.4);
}

.download-btn:hover {
    background: var(--accent-hover);
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(101, 196, 102, 0.5);
}

.download-btn.disabled {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    box-shadow: none;
    pointer-events: none;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 16px;
}

.footer-link {
    color: var(--text-secondary);
    text-decoration: underline;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: var(--accent);
}

.features {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    z-index: 30;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    user-select: none;
    -webkit-user-select: none;
}

.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-50%) scale(1.1);
}

.lightbox-nav:active {
    transform: translateY(-50%) scale(0.95);
}

.feature-card.expanded .lightbox-nav {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-prev {
    left: 40px;
}

.lightbox-next {
    right: 40px;
}

.lightbox-nav svg {
    pointer-events: none;
}

.feature-card {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 40px;
    position: relative;
    --expand-x: 55%;
    --expand-scale: 1.8;
}

.feature-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 5;
    backdrop-filter: blur(5px);
}

.feature-card.expanded {
    cursor: zoom-out;
}

.feature-card.expanded::after {
    opacity: 1;
}

.feature-card.expanded .image-stack {
    z-index: 10;
    cursor: zoom-out;
}

.feature-card.expanded .image-stack .stack-pos-0 {
    transform: translate(var(--expand-x), var(--expand-y, 0px)) scale(var(--expand-scale));
    z-index: 20;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
    cursor: grab;
}

.feature-card.expanded .image-stack.is-dragging .stack-pos-0 {
    cursor: grabbing !important;
}

.feature-card.expanded .feature-text {
    opacity: 0.2;
    filter: blur(4px);
}

.feature-card .feature-text {
    transition: opacity 0.4s ease, filter 0.4s ease;
}

.feature-card.reverse {
    flex-direction: row-reverse;
    --expand-x: -55%;
}

.image-stack {
    flex: 1;
    position: relative;
    width: 100%;
    height: 350px;
    cursor: pointer;
    perspective: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.image-stack .feature-image {
    position: absolute;
    width: 85%;
    max-width: 400px;
    height: auto;
    border-radius: 12px;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    transform-origin: center center;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
}

.stack-pos-0 {
    transform: translateY(0) scale(1);
    z-index: 4;
    opacity: 1;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.stack-pos-1 {
    transform: translateY(-25px) scale(0.9);
    z-index: 3;
    opacity: 0.8;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.stack-pos-2 {
    transform: translateY(-50px) scale(0.8);
    z-index: 2;
    opacity: 0.5;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
}

.stack-pos-3 {
    transform: translateY(-75px) scale(0.7);
    z-index: 1;
    opacity: 0.2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    pointer-events: none;
}

.stack-out-right {
    transform: translateX(120%) translateY(-20px) scale(0.9) rotate(10deg);
    z-index: 5;
    opacity: 0.0;
    pointer-events: none;
}

.stack-out-left {
    transform: translateX(-120%) translateY(-20px) scale(0.9) rotate(-10deg);
    z-index: 5;
    opacity: 0.0;
    pointer-events: none;
}

.stack-out-dynamic {
    z-index: 5;
    opacity: 0.0 !important;
    pointer-events: none;
}

.stack-in-back {
    transform: translateY(-100px) scale(0.5);
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: none !important;
}

.image-stack:hover .stack-pos-0 {
    transform: translateY(0px) scale(1.02);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.feature-text {
    flex: 1;
}

.feature-text h2 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}

.feature-text p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

footer {
    text-align: center;
    padding: 40px 20px 120px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scroll reveals */
.feature-card {
    animation: reveal 0.8s ease-out both;
    animation-timeline: view();
    animation-range: entry 5% cover 15%;
}

@keyframes reveal {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 768px) {

    .feature-card,
    .feature-card.reverse {
        flex-direction: column;
        text-align: center;
        gap: 20px;
        --expand-x: 0%;
        --expand-scale: 1.15;
    }

    .lightbox-prev {
        left: 10px;
    }

    .lightbox-next {
        right: 10px;
    }

    .image-stack,
    .feature-text {
        flex: none;
        width: 100%;
    }

    .image-stack {
        height: 280px;
        margin-top: 20px;
        margin-bottom: 0;
    }

    .hero h1 {
        font-size: 2.2rem;
    }

    .hero .tagline {
        font-size: 1.2rem;
    }
}

/* Interactive Demo Scene */
#interactive-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 20px 25% 20px;
    /* Fluid aspect-ratio padding (16.94% keyboard + 8% gap) */
    position: relative;
    overflow: hidden;
}

.demo-container {
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

#demo-screen-container {
    position: relative;
    width: 100%;
    max-width: 700px;
    border-radius: 12px;
    border-bottom-left-radius: 40px;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

#demo-screen-container img {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
}

#demo-screen-scaler {
    width: 100%;
    height: 100%;
    /* Translate offsets hide 100px of the 2560x1600 original image (3.9% X, 6.25% Y) */
    transform: scale(2) translate(3.90625%, -6.25%);
    transform-origin: top right;
}

#demo-screen {
    width: 100%;
    height: auto;
    display: block;
}

/* Menubar overlay */
#demo-menubar {
    --base-h: 50cqh;
    --h: var(--js-h, var(--base-h));

    position: absolute;
    top: 12%;
    right: 9%;
    height: 6%;
    width: 45%;
    /* Provide intrinsic width for size container query and clock */
    container-type: size;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Battery Icon CSS replicating swift logic */
#demo-battery {
    /* The base grid height from your container */
    --body-w: calc(var(--h) * 23.5 / 13);

    position: relative;
    width: calc(var(--h) * 27 / 13);
    height: calc(var(--h) * 22 / 13);
    display: flex;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (max-width: 768px),
(orientation: portrait) {
    /* Portrait specific overrides if necessary */
}

/* The 23.5x13 Body */
.battery-body {
    position: absolute;
    left: 0;
    width: var(--body-w);
    height: var(--h);
    border-radius: calc(var(--h) * 4.5 / 13);
    background: rgba(255, 255, 255, 0.5);
    /* Base Knockout background */
    overflow: hidden;
    transition: background-color 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}

/* The Fill */
.battery-fill {
    height: 100%;
    background: white;
    /* Controlled via JS */
    min-width: 5%;
    /* Prevent total disappearance > 0 */
    transition: width 0.1s linear,
        background-color 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}

/* The Tip (1pt gap, 1.5x4 tip) */
.battery-tip {
    position: absolute;
    left: calc(var(--body-w) + calc(var(--h) * 1 / 13));
    width: calc(var(--h) * 1.5 / 13);
    height: calc(var(--h) * 4 / 13);
    background: rgba(255, 255, 255, 0.5);
    /* Matches body background */
    border-radius: 0 calc(var(--h) * 2 / 13) calc(var(--h) * 2 / 13) 0;
    transition: background-color 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}

/* Text Layer */
.battery-text {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--body-w);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--h) * 11 / 13);
    font-weight: 600;

    /* Faked Knockout effect matching wallpaper color */
    color: #3972a7;
    mix-blend-mode: normal;

    /* -3% translation provides optical centering for SF Pro */
    transform: translateY(-3%) translateX(calc(var(--h) * -0.25 / 13));
    /* Unplugged offset */
    transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1),
        color 0.3s cubic-bezier(0.33, 1, 0.68, 1);
    z-index: 2;
}

/* Bolt Icon */
.battery-bolt {
    position: absolute;
    /* Aligned right of text center, accounting for swift boltX offset */
    left: calc(50% + calc(var(--h) * 3.0 / 13));
    height: calc(var(--h) * 8 / 13);
    /* Matched to text font-size */
    width: auto;
    object-fit: contain;

    /* Mask Hack for precise color control */
    background-color: #3972a7;
    -webkit-mask-image: url('../Resources/bolt.png');
    -webkit-mask-size: auto 95%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: url('../Resources/bolt.png');
    mask-size: auto 95%;
    mask-repeat: no-repeat;
    mask-position: center;
    object-position: -9999px -9999px;

    opacity: 0;
    transform: scale(1.2) translateY(-8.25%);
    transition: opacity 0.45s cubic-bezier(0.33, 1, 0.68, 1), transform 0.45s linear;
    z-index: 3;
}

#demo-battery.single-digit .battery-bolt {
    /* Pulls bolt closer when there's only 1 digit of text */
    left: calc(50% + calc(var(--h) * 1.0 / 13));
}

#demo-battery.ends-in-one .battery-bolt {
    /* Nudges bolt left proportionally to compensate for the narrower '1' glyph */
    margin-left: calc(var(--h) * -1.5 / 13);
}

#demo-clock {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: calc(var(--h) * 11 / 13);
    font-weight: 500;
    color: white;
    margin-left: calc(var(--h) * 12 / 13);
    /* Space from battery */
    white-space: nowrap;
}

/* --- STATE: Plugged In --- */
#demo-battery.plugged-in .battery-body,
#demo-battery.plugged-in .battery-tip {
    /* Blended 25% with black */
    background: rgba(191, 191, 191, 0.5);
}

#demo-battery.plugged-in .battery-fill {
    background: #34c759;
    /* System Green */
}

#demo-battery.plugged-in .battery-text {
    color: white;
    mix-blend-mode: normal;
    transform: translateY(-3%) translateX(calc(var(--h) * -3.0 / 13));
    /* Plugged in offset */
}

#demo-battery.plugged-in .battery-bolt {
    opacity: 1;
    transform: scale(1.05) translateY(-8.25%);
    background-color: white;
}

/* --- STATE: Low Power Mode --- */
#demo-battery.low-power .battery-body,
#demo-battery.low-power .battery-tip {
    background: rgba(255, 255, 255, 0.62);
}

#demo-battery.low-power .battery-fill {
    background: #FFCC00;
}

#demo-battery.low-power .battery-text {
    color: black;
    mix-blend-mode: normal;
}

#demo-battery.low-power .battery-bolt {
    background-color: #000000;
}

/* --- STATE: Low Battery (<= 20%) --- */
#demo-battery.low-battery:not(.low-power) .battery-body,
#demo-battery.low-battery:not(.low-power) .battery-tip {
    background: rgba(191, 191, 191, 0.5);
    /* Same as Plugged In */
}

#demo-battery.low-battery:not(.low-power) .battery-fill {
    background: #FF3B30;
    /* macOS System Red */
}

#demo-battery.low-battery:not(.low-power) .battery-text {
    color: white;
    mix-blend-mode: normal;
}

/* --- STATE: Full (100%) --- */
#demo-battery.full:not(.low-power):not(.plugged-in) .battery-tip {
    background: white;
}

#demo-battery.full.plugged-in .battery-tip {
    background: #34c759;
}

#demo-battery.full.plugged-in .battery-text {
    transform: translateY(-3%) translateX(calc(var(--h) * -0.25 / 13));
    /* Return to normal center */
    transition: none;
    /* Instantly snap */
}

#demo-battery.full.plugged-in .battery-bolt {
    opacity: 0;
    transform: scale(1.15);
    background-color: #3972a7;
    transition: none;
    /* Instantly hide */
}

#demo-battery.full.low-power .battery-tip {
    background: #FFCC00;
}

.cc-wrapper {
    height: 100%;
    display: flex;
    align-items: center;
}

#demo-control-center {
    height: var(--h);
    width: auto;
    object-fit: contain;
    margin-left: calc(var(--h) * 12 / 13);
    /* Space from battery */
    cursor: pointer;
    transition: opacity 0.2s ease;
}

#demo-control-center:hover {
    opacity: 0.8;
}

/* Control Center Menu */
#demo-cc-menu {
    position: absolute;
    top: 150%;
    right: 0;
    left: auto;
    width: auto;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    z-index: 10;
    display: flex;
    flex-direction: row;
    gap: calc(100cqh * 0.5);
}

#demo-cc-menu.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.cc-toggle {
    position: relative;
    width: calc(100cqh * 5);
    cursor: pointer;
}

.cc-toggle img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.3s ease-out;
    /* Optional slight scale down on click */
    transform: scale(1);
    transition: opacity 0.3s ease-out, transform 0.1s ease;
}

.cc-toggle:active img {
    transform: scale(0.96);
}

.cc-on {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.cc-toggle.active .cc-on {
    opacity: 1;
}

.cc-toggle.active .cc-off {
    opacity: 0;
}

/* Keyboard and MagSafe Desk area */
#demo-desk {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 33.33%;
    filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.25));
    user-select: none;
    -webkit-user-select: none;
}

#demo-desk img {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
}

@media (max-width: 768px) {
    /* Mobile-specific adjustments can go here */
}

@media (max-width: 768px),
(orientation: portrait) {

    #demo-desk,
    .demo-instructions {
        display: none !important;
    }

    #interactive-demo {
        padding-bottom: 60px !important;
    }
}

#demo-keyboard {
    position: relative;
    z-index: 2;
    height: auto;
    width: 100%;
    display: block;
    user-select: none;
    pointer-events: none;
}

#demo-magsafe {
    position: absolute;
    right: 200%;
    /* Anchor exactly 1/3 from left of glass panel (200% of 1/3 desk width = 2/3 from right) */
    top: 49%;
    height: 33.33%;
    /* Scales perfectly with keyboard */
    width: auto;
    transform: translateY(-50%) translateX(0);
    cursor: grab;
    z-index: 1;
    user-select: none;
    transition: transform 0.1s ease-out;
    /* smooth follow */
    touch-action: none;

    /* Hardware acceleration to stabilize drop-shadow during drag */
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#demo-usbc {
    position: absolute;
    right: 500%;
    top: 83%;
    height: 19.44%;
    transform: translateY(-50%) translateX(0);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 0;
    pointer-events: none;
    will-change: transform;
}

#demo-usbc img,
#demo-magsafe img {
    height: 100%;
    width: auto;
    pointer-events: none;
}

.magsafe-base {
    display: block;
}

.magsafe-led {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

#demo-magsafe.plugged-in .magsafe-amber {
    opacity: 1;
}

#demo-magsafe.plugged-in.full-charge .magsafe-amber {
    opacity: 0;
}

#demo-magsafe.plugged-in.full-charge .magsafe-green {
    opacity: 1;
}

.cable-ext {
    position: absolute;
    right: 50%;
    /* Start exactly halfway from the right */
    top: 0;
    height: 100%;
    width: 3000px;
    /* Arbitrarily long to extend offscreen */
    background-repeat: repeat-x;
    background-size: auto 100%;
    /* Scale height perfectly to match the image */
    background-position: right top;
    /* Seamlessly align the right edge */
    pointer-events: none;
}

.charging-ext {
    opacity: 0;
    transition: opacity 0.4s ease-out;
}

#demo-magsafe.plugged-in .charging-ext {
    opacity: 1;
}

@media (max-width: 768px) {

    #demo-screen {
        border-bottom-left-radius: 24px;
    }


}

#demo-magsafe.dragging {
    cursor: grabbing;
    transition: none;
    /* instant follow when dragging */
}

#demo-magsafe.animating {
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.demo-instructions {
    margin-top: 20px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    pointer-events: none;
}