/* SidePulse — shared styles. Edit HERE; every page links this file. */

/* --- view transitions (root) --- */
        html {
            view-transition-name: root;
        }

/* --- base + layout + components --- */
        body {
            font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, sans-serif;
            font-optical-sizing: auto;
            font-size: 16px;
            color: #1a1d21;
            opacity: 0;
            animation: fadeIn 0.3s ease forwards;
        }

        h1,h2,h3,h4,h5,h6{
            font-weight: 600;
            font-family: "Noto Sans", sans-serif;
            font-optical-sizing: auto;
        }

        h1 { font-size: 2.4em; letter-spacing: -0.02em; }
        h5 + h1 { margin-top: 0em; }
        h5{ margin-bottom: 0px; font-size: 1.1em; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; }

        :root {
            --accent: #ff5a3c; /* fallback */
            /* Brand rainbow — same palette as the SidePulse LEDs, so the
               accent literally moves like the hardware. First & last color
               match for a seamless loop. */
            --rainbow: linear-gradient(90deg,
                #64d2ff, #5e5ce6, #bf5af2, #ff375f,
                #ff9f0a, #ffd60a, #30d158, #64d2ff);
            /* Darker jewel-tone variant for TEXT — the bright LED colors
               (cyan/yellow) fail contrast on white; these all clear ~4.5:1
               while keeping the rainbow read. */
            --rainbow-text: linear-gradient(90deg,
                #1668dc, #6d3bd4, #b5179e, #d11149,
                #b45309, #1a7a3a, #1668dc);
        }
        @keyframes rainbowShift { to { background-position: 200% center; } }

        /* Animated rainbow text (clipped gradient) */
        .rainbow-text, h5, .learn-more {
            background: var(--rainbow-text);
            background-size: 200% auto;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            animation: rainbowShift 6s linear infinite;
        }

        div.main {
            max-width: 600px;
            padding: 0px 13px;
            padding-bottom: 120px;
            margin: auto;
        }

        .products-header + .content {
            margin-top: 90px;
        }

        .content img {
            width: 100%;
            aspect-ratio: 4/3;
            object-fit: cover;
        }

        img.hero{ aspect-ratio: 3/2; }

        .content video {
            width: 100%;
            aspect-ratio: 16 / 9;
            object-fit: cover;
            margin: 10px 0px;
            border-radius: 10px;
            overflow: hidden;
        }

        .content img,
        .content video {
            mix-blend-mode: darken;
        }

        .content .image-wrapper {
            background-color: rgb(237, 237, 237);
            border-radius: 6px;
            overflow: clip;
            display: inline-flex;
        }

        .choose-style, .image-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .choose-style a, .choose-style a:visited{
            color: black;
        }

        .floatbuy {
            position: fixed;
            bottom: 0;
            right: 0;
            left: 0;
            padding: 17px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            text-align: center;
            vertical-align: middle;
        }
        .buy-subtitle{ margin-top: 5px; color: #6b7280; font-size: 0.9em; }
        .footer { margin-top: 3em; color: #6b7280; font-size: 0.92em; }
        li { margin-bottom: 0.5em; }

        .price {
            display: inline-block;
            font-size: 1.6em;
            padding-top: 4px;
            padding-left: 10px;
            vertical-align: top;
        }

        .thankyou {
            z-index: 100;
            position: fixed;
            top: 0; bottom: 0; left: 0; right: 0;
            height: 100vh; width: 100vw;
            background-color: rgba(255, 255, 255, 0.95);
            text-align: center;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            display: none;
        }

        a { text-decoration: none; }
        a, a:visited { color: #0067d6; } /* darkened from #007bff for WCAG AA (4.6:1) */

        /* Primary CTA: near-black "device body" with an animated rainbow
           LED strip along the bottom edge — the product, as a button. */
        .blue-button, .blue-button:visited {
            position: relative;
            background: #15161a;
            border: none;
            color: #fff;
            padding: 0px 10px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 18px;
            font-weight: 600;
            letter-spacing: 0.01em;
            margin: 0px 10px;
            transition: transform 0.2s ease, box-shadow 0.3s ease;
            cursor: pointer;
            border-radius: 12px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
            width: 200px !important;
            line-height: 46px;
            overflow: hidden;
        }
        .blue-button::after {
            content: "";
            position: absolute;
            left: 0; right: 0; bottom: 0;
            height: 4px;
            background: var(--rainbow);
            background-size: 200% auto;
            animation: rainbowShift 6s linear infinite;
        }
        .blue-button:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
        }

        .learn-more{
            color: var(--accent);
            font-weight: 600;
            display: block;
            line-height: 2em;
            cursor: pointer;
        }

        .price-main{
            font-weight: 600;
            font-size: 1.2em;
            line-height: 2em;
        }

        /* Inline LED demo strip — placeholder visual until photos drop in */
        .led-demo {
            display: flex;
            gap: 8px;
            justify-content: center;
            align-items: center;
            padding: 26px;
            margin: 14px 0;
            border-radius: 10px;
            background: #15161a;
        }
        .led-demo.two { gap: 22px; }
        .led-demo .led {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--led-color, #64d2ff);
            box-shadow: 0 0 16px var(--led-color, #64d2ff);
            animation: ledPulse 3.4s ease-in-out infinite;
            animation-delay: var(--delay, 0s);
        }
        .led-demo .led:nth-child(1){ --led-color:#64d2ff; --delay:0s; }
        .led-demo .led:nth-child(2){ --led-color:#5e5ce6; --delay:.12s; }
        .led-demo .led:nth-child(3){ --led-color:#bf5af2; --delay:.24s; }
        .led-demo .led:nth-child(4){ --led-color:#ff375f; --delay:.36s; }
        .led-demo .led:nth-child(5){ --led-color:#ff9f0a; --delay:.48s; }
        .led-demo .led:nth-child(6){ --led-color:#ffd60a; --delay:.6s; }
        .led-demo .led:nth-child(7){ --led-color:#30d158; --delay:.72s; }
        .led-demo .led:nth-child(8){ --led-color:#64d2ff; --delay:.84s; }
        @keyframes ledPulse {
            0%,100% { filter: brightness(0.7); transform: scale(0.92); }
            45% { filter: brightness(1.3); transform: scale(1); }
        }

        /* 8-LED "scenes" — each demos a real LEDS.TXT program */
        .scenes { margin: 14px 0; }
        .scene {
            display: flex;
            align-items: center;
            gap: 16px;
            margin: 12px 0;
            flex-wrap: wrap;
        }
        .scene-copy { flex: 1 1 220px; min-width: 220px; }
        .scene-copy strong { font-weight: 600; }
        .scene-copy code {
            display: block;
            margin-top: 5px;
            color: #8a8a90;
            background: none;
            padding: 0;
            font-size: 0.8em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .leds8 {
            flex: 0 0 auto;
            display: flex;
            gap: 7px;
            padding: 13px 15px;
            border-radius: 10px;
            background: #15161a;
        }
        .leds8 span {
            width: 17px;
            height: 17px;
            border-radius: 50%;
            background: #222;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
        }
        /* 2-LED scenes for SidePulse Dot */
        .leds2 {
            flex: 0 0 auto;
            display: flex;
            gap: 24px;
            padding: 13px 22px;
            border-radius: 10px;
            background: #15161a;
        }
        .leds2 span {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #222;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
        }
        .leds2.working span { animation: comet 1.2s linear infinite; }
        .leds2.working span:nth-child(2){ animation-delay: .6s; }
        .leds2.done span { animation: build 3s ease-out infinite; }
        .leds2.done span:nth-child(2){ animation-delay: .12s; }
        .leds2.needs span { background:#3a0d0d; animation: alert 1.15s ease-out infinite; }
        /* ---- Agent thinking: a hue comet streaks across with a fading tail ---- */
        .leds8.thinking span { animation: comet 1.8s linear infinite; }
        .leds8.thinking span:nth-child(1){ animation-delay: 0s; }
        .leds8.thinking span:nth-child(2){ animation-delay: .225s; }
        .leds8.thinking span:nth-child(3){ animation-delay: .45s; }
        .leds8.thinking span:nth-child(4){ animation-delay: .675s; }
        .leds8.thinking span:nth-child(5){ animation-delay: .9s; }
        .leds8.thinking span:nth-child(6){ animation-delay: 1.125s; }
        .leds8.thinking span:nth-child(7){ animation-delay: 1.35s; }
        .leds8.thinking span:nth-child(8){ animation-delay: 1.575s; }
        @keyframes comet {
            0%   { background:#26d8ff; box-shadow:0 0 18px #26d8ff, 0 0 6px #fff; transform:scale(1.28); }
            14%  { background:#6a7cff; box-shadow:0 0 10px #6a7cff; transform:scale(1.05); }
            34%  { background:#201a2e; box-shadow:none; transform:scale(.88); }
            100% { background:#201a2e; box-shadow:none; transform:scale(.88); }
        }

        /* ---- Done: green wipes in left-to-right with a sparkle, then holds solid ---- */
        .leds8.done span { animation: build 3.2s ease-out infinite; }
        .leds8.done span:nth-child(1){ animation-delay: 0s; }
        .leds8.done span:nth-child(2){ animation-delay: .09s; }
        .leds8.done span:nth-child(3){ animation-delay: .18s; }
        .leds8.done span:nth-child(4){ animation-delay: .27s; }
        .leds8.done span:nth-child(5){ animation-delay: .36s; }
        .leds8.done span:nth-child(6){ animation-delay: .45s; }
        .leds8.done span:nth-child(7){ animation-delay: .54s; }
        .leds8.done span:nth-child(8){ animation-delay: .63s; }
        @keyframes build {
            0%   { background:#0c2a16; box-shadow:none; transform:scale(.8); }
            8%   { background:#7cffb0; box-shadow:0 0 20px #6dffa0, 0 0 6px #fff; transform:scale(1.32); }
            18%  { background:#30d158; box-shadow:0 0 12px #30d158; transform:scale(1); }
            90%  { background:#30d158; box-shadow:0 0 10px #30d158; transform:scale(1); }
            100% { background:#0c2a16; box-shadow:none; transform:scale(.8); }
        }

        /* ---- Needs you: urgent double-blink alarm in unison ---- */
        .leds8.needs span { background:#3a0d0d; animation: alert 1.15s ease-out infinite; }
        @keyframes alert {
            0%   { background:#ff2d20; box-shadow:0 0 22px #ff2d20; transform:scale(1.2); }
            10%  { background:#3a0d0d; box-shadow:none; transform:scale(1); }
            18%  { background:#ff2d20; box-shadow:0 0 22px #ff2d20; transform:scale(1.2); }
            28%  { background:#3a0d0d; box-shadow:none; transform:scale(1); }
            100% { background:#3a0d0d; box-shadow:none; transform:scale(1); }
        }

        /* ---- Lid closed: a slow aurora wave drifts in cool tones ---- */
        .leds8.idle span { animation: aurora 4s ease-in-out infinite; }
        .leds8.idle span:nth-child(even){ animation-name: aurora2; }
        .leds8.idle span:nth-child(1){ animation-delay: 0s; }
        .leds8.idle span:nth-child(2){ animation-delay: .5s; }
        .leds8.idle span:nth-child(3){ animation-delay: 1s; }
        .leds8.idle span:nth-child(4){ animation-delay: 1.5s; }
        .leds8.idle span:nth-child(5){ animation-delay: 2s; }
        .leds8.idle span:nth-child(6){ animation-delay: 2.5s; }
        .leds8.idle span:nth-child(7){ animation-delay: 3s; }
        .leds8.idle span:nth-child(8){ animation-delay: 3.5s; }
        @keyframes aurora {
            0%,100% { background:#0c2440; box-shadow:none; }
            50%     { background:#2e9bff; box-shadow:0 0 14px #2e9bff; }
        }
        @keyframes aurora2 {
            0%,100% { background:#0c2440; box-shadow:none; }
            50%     { background:#27d3c0; box-shadow:0 0 14px #27d3c0; }
        }

        @media (prefers-reduced-motion: reduce) {
            .leds8 span, .leds2 span { animation: none !important; box-shadow: none; transform: none; }
            h5, .learn-more, .blue-button, .blue-button::after, .products-header a.selected { animation: none !important; }
            .leds8.thinking span { background:#26d8ff; }
            .leds8.done span, .leds2.done span { background:#30d158; }
            .leds8.needs span, .leds2.needs span { background:#ff2d20; }
            .leds8.idle span { background:#2e9bff; }
            .leds2.working span { background:#26d8ff; }
        }

        pre, code {
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        }
        .content pre {
            background: #15161a;
            color: #f5f5f7;
            padding: 16px 18px;
            border-radius: 10px;
            overflow: auto;
            font-size: 13px;
            line-height: 1.6;
        }
        .content :not(pre) > code {
            background: #f0f0f3;
            padding: 1px 6px;
            border-radius: 5px;
            font-size: 0.9em;
        }
        .content blockquote {
            margin: 18px 0;
            padding: 14px 18px;
            border-left: 3px solid transparent;
            border-image: var(--rainbow) 1;
            border-radius: 0 8px 8px 0;
            background: rgba(120, 120, 140, 0.06);
            color: #3a3d42;
        }
        .content blockquote p { margin: 0; }

        @keyframes fadeIn { to { opacity: 1; } }

/* --- lightbox + nav header + status LEDs --- */
        .overlay {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background-color: rgba(255, 255, 255, 1);
            display: none;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        .lightbox-content {
            text-align: center;
            max-width: 600px;
            width: 100%;
            max-height: 80%;
            box-sizing: border-box;
            background-color: #fff;
            position: relative;
        }
        .overlay.displayed { display: flex; }
        #lightbox-image { width: 100%; display: block; margin-bottom: 10px; }
        .lightbox-caption { font-size: 16px; margin: 10px 0; }
        .close-btn {
            position: absolute;
            top: 15px; right: 15px;
            font-size: 24px;
            font-weight: bold;
            cursor: pointer;
        }
        .progress-bar {
            height: 5px;
            background-color: #ddd;
            position: absolute;
            bottom: 0; left: 0;
            width: 100%;
        }

        .products-header a, .products-header a:visited{
            color: #1a1d21;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 0px 16px;
            line-height: 50px;
            height: 50px;
            border: 2.5px solid #ffffff;
            view-transition-name: menu-item;
            transition: border 0.3s ease, box-shadow 0.3s ease;
            font-weight: 600;
            flex: 0 0 auto;
        }
        .navicon { height: 15px; width: auto; display: block; }
        .products-header{
            font-size: 1.05em;
            text-align: center;
            box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            white-space: nowrap;
            max-width: calc(100vw - 16px);
            margin: 0 auto;
            border-radius: 27px;
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: white;
            z-index: 100;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .products-header::-webkit-scrollbar { display: none; }
        @media (max-width: 460px) {
            .products-header { font-size: 0.95em; }
            .products-header a, .products-header a:visited { padding: 0px 11px; gap: 5px; }
            .navicon { height: 13px; }
        }
        .products-header a.selected{
            border-radius: 27px;
            border: 2.5px solid transparent;
            background:
                linear-gradient(#fff, #fff) padding-box,
                var(--rainbow) border-box;
            background-size: 100% 100%, 200% auto;
            animation: rainbowShift 6s linear infinite;
        }

        .slot {
            display: inline-block;
            width: 28px;
            height: 16px;
            border: 1px solid gray;
            border-radius: 8px;
            line-height: 1em;
            vertical-align: middle;
        }
        .pulsing-orange { background-color: orange; animation: pulse-orange 2s infinite ease-in-out; }
        @keyframes pulse-orange { 0%,100% { background-color: transparent; } 50% { background-color: orange; } }
        .pulsing-green { background-color:#00ff00; animation: pulse-green 2s infinite ease-in-out; }
        @keyframes pulse-green { 0%,100% { background-color: transparent; } 50% { background-color: #00ff00; } }
        .blinking-red { background-color: red; animation: blink-red 0.8s infinite; }
        @keyframes blink-red { 0% { background-color: red; } 20% { background-color: red; } 21%,100% { background-color: transparent; } }
        .solid-red { background-color: red; }
        .solid-green { background-color: #00ff00; }
        .solid-blue { background-color: #2e9bff; }

/* --- view-transition animation --- */
        ::view-transition-old(root),
        ::view-transition-new(root) { animation: fade 150ms ease both; }
        @keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } }