/* ========================================================================
   cafesweets.net — pop-art confection broadcast
   Dopamine-neon palette, hero-dominant, duotone-photo, crystalline shards.
   ======================================================================== */

:root {
    --magenta: #ff2e88;
    --yellow: #ffe600;
    --cyan: #00f0ff;
    --orange: #ff5c00;
    --violet: #9b00ff;
    --ink: #0a0a0f;
    --paper: #fafafa;
    --deep-ink: #1a1a1a;

    --shard-poly: polygon(50% 0%, 90% 30%, 100% 70%, 60% 100%, 10% 80%, 0% 35%, 30% 5%);
    --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    overflow-x: hidden;
    background: var(--magenta);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    font-family: 'Space Grotesk', sans-serif;
}

body { min-height: 100vh; }

.broadcast {
    display: block;
    width: 100%;
}

/* ============================ SCENE BASE ============================== */
.scene {
    position: relative;
    min-height: 100vh;
    width: 100%;
    background: var(--bg, var(--magenta));
    overflow: hidden;
    isolation: isolate;
    display: grid;
}

/* =========================== DUOTONE STACK ============================ */
.duotone {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.duotone__inner {
    position: relative;
    width: 100%;
    height: 100%;
    filter: grayscale(1) contrast(1.6) brightness(0.95);
}
.duotone::after {
    content: "";
    position: absolute;
    inset: 0;
    mix-blend-mode: lighten;
    background: linear-gradient(135deg, var(--duo-shadow) 0%, var(--duo-light) 100%);
    pointer-events: none;
    z-index: 2;
}
.duotone--magenta-yellow { --duo-shadow: #ff2e88; --duo-light: #ffe600; }
.duotone--violet-cyan    { --duo-shadow: #9b00ff; --duo-light: #00f0ff; }
.duotone--orange-cyan    { --duo-shadow: #ff5c00; --duo-light: #00f0ff; }

/* ===================== CONFECTION (pure CSS art) ====================== */
.confection {
    position: absolute;
    inset: 0;
    display: block;
}
.conf-shape {
    position: absolute;
    display: block;
}

/* --- macaron --- */
.confection--macaron .conf-shape--macaron-top {
    left: 8%; right: 8%; top: 12%;
    height: 38%;
    background: radial-gradient(ellipse at 35% 40%, #fff 0%, #d8d8d8 40%, #6a6a6a 100%);
    border-radius: 50% 50% 18% 18% / 60% 60% 18% 18%;
    box-shadow: inset 0 -10px 16px rgba(0,0,0,0.25);
}
.confection--macaron .conf-shape--macaron-filling {
    left: 6%; right: 6%; top: 46%;
    height: 14%;
    background: linear-gradient(180deg, #f0f0f0 0%, #aaa 50%, #555 100%);
    border-radius: 6px;
    box-shadow: inset 0 -3px 6px rgba(0,0,0,0.4);
}
.confection--macaron .conf-shape--macaron-bottom {
    left: 8%; right: 8%; top: 56%;
    height: 36%;
    background: radial-gradient(ellipse at 60% 60%, #fff 0%, #c8c8c8 40%, #4a4a4a 100%);
    border-radius: 18% 18% 50% 50% / 18% 18% 60% 60%;
    box-shadow: inset 0 8px 14px rgba(0,0,0,0.2);
}

/* --- donut --- */
.confection--donut .conf-shape--donut-ring {
    left: 10%; top: 12%; width: 80%; height: 80%;
    background: radial-gradient(circle at 40% 35%, #fff 0%, #cfcfcf 40%, #555 80%, #2a2a2a 100%);
    border-radius: 50%;
    box-shadow: inset 0 -16px 30px rgba(0,0,0,0.35);
}
.confection--donut .conf-shape--donut-glaze {
    left: 14%; top: 16%; width: 72%; height: 72%;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.6) 0%, transparent 35%),
        radial-gradient(circle at center, transparent 28%, #999 30%, #777 50%, #444 80%);
    border-radius: 50%;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.confection--donut .conf-shape--donut-glaze::before {
    content:"";
    position: absolute;
    left: 32%; top: 32%; width: 36%; height: 36%;
    border-radius: 50%;
    background: var(--bg, #ffe600);
    box-shadow: inset 0 4px 10px rgba(0,0,0,0.3);
}
.confection--donut .conf-shape--sprinkle {
    width: 14px; height: 5px;
    background: #fff;
    border-radius: 3px;
}
.confection--donut .conf-shape--sprinkle.s1 { left: 30%; top: 24%; transform: rotate(35deg); background: #ddd; }
.confection--donut .conf-shape--sprinkle.s2 { left: 60%; top: 30%; transform: rotate(-20deg); background: #999; }
.confection--donut .conf-shape--sprinkle.s3 { left: 70%; top: 60%; transform: rotate(50deg); background: #fff; }
.confection--donut .conf-shape--sprinkle.s4 { left: 22%; top: 64%; transform: rotate(-40deg); background: #bbb; }
.confection--donut .conf-shape--sprinkle.s5 { left: 50%; top: 18%; transform: rotate(10deg); background: #eee; }

/* --- eclair --- */
.confection--eclair .conf-shape--eclair-body {
    left: 6%; top: 38%; right: 6%; height: 28%;
    background: linear-gradient(180deg, #d2d2d2 0%, #888 50%, #3a3a3a 100%);
    border-radius: 60px;
    box-shadow: inset 0 -10px 20px rgba(0,0,0,0.3);
}
.confection--eclair .conf-shape--eclair-glaze {
    left: 8%; top: 38%; right: 8%; height: 14%;
    background: linear-gradient(180deg, #f0f0f0 0%, #aaa 60%, #444 100%);
    border-radius: 60px 60px 30px 30px / 50px 50px 20px 20px;
    box-shadow: inset 0 -4px 8px rgba(0,0,0,0.4);
}
.confection--eclair .conf-shape--eclair-shine {
    left: 18%; top: 41%; width: 22%; height: 5%;
    background: linear-gradient(90deg, rgba(255,255,255,0.9), rgba(255,255,255,0));
    border-radius: 50%;
    filter: blur(2px);
}

/* --- parfait --- */
.confection--parfait .conf-shape--parfait-glass {
    left: 26%; top: 14%; width: 48%; height: 76%;
    background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.1) 100%);
    border: 3px solid rgba(255,255,255,0.6);
    border-radius: 8px 8px 28px 28px;
    backdrop-filter: blur(2px);
    box-shadow: inset 0 0 30px rgba(255,255,255,0.15);
}
.confection--parfait .conf-shape--parfait-layer-1 {
    left: 28%; top: 22%; width: 44%; height: 22%;
    background: linear-gradient(180deg, #f0f0f0 0%, #b8b8b8 100%);
}
.confection--parfait .conf-shape--parfait-layer-2 {
    left: 28%; top: 44%; width: 44%; height: 22%;
    background: linear-gradient(180deg, #999 0%, #555 100%);
}
.confection--parfait .conf-shape--parfait-layer-3 {
    left: 28%; top: 66%; width: 44%; height: 22%;
    background: linear-gradient(180deg, #d8d8d8 0%, #888 100%);
}
.confection--parfait .conf-shape--parfait-cherry {
    left: 44%; top: 8%; width: 14%; height: 14%;
    background: radial-gradient(circle at 35% 35%, #fff 0%, #888 40%, #2a2a2a 100%);
    border-radius: 50%;
    box-shadow: inset 0 -3px 6px rgba(0,0,0,0.3);
}

/* ============================ SHARDS ================================ */
.shard {
    position: absolute;
    display: block;
    clip-path: var(--shard-poly);
    background: conic-gradient(from 45deg, #00f0ff, #ff2e88, #ffe600, #9b00ff, #00f0ff);
    pointer-events: none;
    z-index: 6;
}

/* ----- HERO scene ----- */
.scene--hero {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    place-items: stretch;
}
.hero__photo {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 78vw;
    height: 78vh;
    z-index: 1;
}
.hero__headline {
    position: relative;
    z-index: 5;
    font-family: 'Archivo Black', sans-serif;
    font-weight: 900;
    font-size: clamp(8rem, 14vw, 20rem);
    line-height: 0.85;
    letter-spacing: -0.04em;
    color: var(--ink);
    text-transform: uppercase;
    align-self: center;
    justify-self: end;
    padding: 0 4vw 0 0;
    text-align: right;
    margin: auto 0 auto auto;
    margin-top: 18vh;
    mix-blend-mode: normal;
}
.hero__headline .line {
    display: block;
}
.hero__headline .line--loud {
    position: relative;
    display: inline-block;
}

.shard--period {
    position: relative;
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    margin-left: 0.04em;
    vertical-align: -0.05em;
    animation: pulseScale 1.4s ease-in-out infinite;
}

.shard--hero-1 { top: 8vh;  left: 6vw;  width: 64px;  height: 64px;  animation: rotate 3.7s linear infinite, pulseScale 1.9s ease-in-out infinite; }
.shard--hero-2 { top: 22vh; right: 8vw; width: 92px;  height: 92px;  animation: rotate 4.2s linear reverse infinite, pulseScale 2.4s ease-in-out infinite; }
.shard--hero-3 { bottom: 14vh; right: 18vw; width: 48px; height: 48px; animation: rotate 2.4s linear infinite, pulseScale 1.1s ease-in-out infinite; }

.domain-mark {
    position: absolute;
    right: 2.4vw;
    bottom: 2.4vh;
    z-index: 7;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 400;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink);
}

/* ============================ PANELS ================================== */
.scene--panel {
    grid-template-columns: 1fr;
    align-items: center;
}
.panel__photo {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 70vw;
    max-width: 880px;
    aspect-ratio: 4 / 3;
    z-index: 1;
}
.panel__photo--right {
    left: auto;
    right: 0;
}
.panel__slogan {
    position: relative;
    z-index: 5;
    font-family: 'Archivo Black', sans-serif;
    font-weight: 900;
    font-size: clamp(4rem, 8vw, 11rem);
    line-height: 0.86;
    letter-spacing: -0.04em;
    color: var(--ink);
    text-transform: uppercase;
    justify-self: end;
    align-self: center;
    padding: 0 4vw 0 4vw;
    text-align: right;
}
.panel__slogan--right {
    justify-self: start;
    text-align: left;
}
.panel__meta {
    position: absolute;
    right: 4vw;
    top: 4vh;
    z-index: 5;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink);
    text-align: right;
}
.panel__meta--right {
    right: auto;
    left: 4vw;
    text-align: left;
}
.panel__index {
    position: absolute;
    left: 4vw;
    bottom: 3vh;
    z-index: 7;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink);
}
.panel__index--right {
    left: auto;
    right: 4vw;
}

/* ===================== Lottie-aesthetic SVG orbits ==================== */
.orbit {
    position: absolute;
    width: 80px;
    height: 80px;
    z-index: 6;
    pointer-events: none;
    overflow: visible;
}
.orbit--sprinkle {
    right: 14vw;
    top: 22vh;
    animation: orbit-sprinkle 3.4s var(--bounce) infinite;
}
.orbit--sprinkle .orbit__group {
    transform-origin: 40px 40px;
    animation: spin-glyph 1.8s var(--bounce) infinite;
}
.orbit--cherry {
    width: 110px;
    height: 110px;
    left: 12vw;
    bottom: 16vh;
}
.orbit--cherry .orbit__group {
    transform-origin: 50px 8px;
    animation: pendulum 2.2s var(--bounce) infinite;
}
.orbit--splash {
    width: 110px;
    height: 110px;
    right: 18vw;
    bottom: 14vh;
    animation: orbit-splash 1.8s var(--bounce) infinite;
}
.orbit--splash .splash-path {
    transform-origin: 50px 50px;
    animation: morph-splash 1.8s var(--bounce) infinite, spin-glyph 5s linear infinite;
}

/* ----- panel-specific shards ----- */
.shard--panel-1 { top: 60vh; left: 50vw; width: 36px; height: 36px; animation: rotate 1.6s linear infinite, pulseScale 1.0s ease-in-out infinite; z-index: 4; }
.shard--panel-2 { top: 14vh; left: 38vw; width: 56px; height: 56px; animation: rotate 2.8s linear reverse infinite, pulseScale 1.7s ease-in-out infinite; }
.shard--panel-3 { top: 70vh; right: 40vw; width: 40px; height: 40px; animation: rotate 0.9s linear infinite, pulseScale 1.3s ease-in-out infinite; }
.shard--transition { top: 90vh; left: 8vw; width: 28px; height: 28px; animation: rotate 4.0s linear infinite, pulseScale 2.1s ease-in-out infinite; }

/* ============================ CLOSING ================================ */
.scene--closing {
    place-items: center;
    background: #ffe600;
}
.dot-field {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: radial-gradient(circle at 50% 50%, #ff2e88 4px, transparent 5px);
    background-size: 14px 14px;
    background-color: #ffe600;
}
.shard--closing-hero {
    position: relative;
    z-index: 5;
    width: 12vw;
    height: 12vw;
    min-width: 140px;
    min-height: 140px;
    animation: rotate 18s linear infinite;
    align-self: center;
    justify-self: center;
    margin-top: -4vh;
}
.shard--closing-secondary {
    width: 6vw;
    height: 6vw;
    min-width: 60px;
    min-height: 60px;
    bottom: 22vh;
    right: 22vw;
    animation: rotate 7.4s linear reverse infinite, pulseScale 2.7s ease-in-out infinite;
}
.closing__caption {
    position: relative;
    z-index: 5;
    margin-top: 6vh;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 400;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink);
    align-self: center;
    justify-self: center;
}
.domain-mark--closing {
    color: var(--ink);
}

/* ============================ ANIMATIONS ============================== */
@keyframes pulseScale {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
@keyframes rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes spin-glyph {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes orbit-sprinkle {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(60px, -40px); }
    50%  { transform: translate(0, -90px); }
    75%  { transform: translate(-60px, -40px); }
    100% { transform: translate(0, 0); }
}
@keyframes pendulum {
    0%, 100% { transform: rotate(-25deg); }
    50%      { transform: rotate(25deg); }
}
@keyframes orbit-splash {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(40px, -30px); }
    100% { transform: translate(0, 0); }
}
@keyframes morph-splash {
    0%, 100% { d: path("M50 20 Q 70 30, 75 50 Q 70 70, 50 80 Q 30 70, 25 50 Q 30 30, 50 20 Z"); }
    50%      { d: path("M50 14 Q 78 24, 82 52 Q 76 78, 50 88 Q 22 76, 18 50 Q 24 22, 50 14 Z"); }
}

/* ============================ RESPONSIVE ============================== */
@media (max-width: 768px) {
    .hero__headline {
        font-size: clamp(4rem, 18vw, 8rem);
        text-align: left;
        padding: 12vh 6vw 0 6vw;
        margin: 0;
        justify-self: start;
        align-self: start;
    }
    .hero__photo {
        width: 100vw;
        height: 60vh;
    }
    .panel__photo,
    .panel__photo--right {
        width: 100vw;
        max-width: none;
        left: 0;
        right: auto;
    }
    .panel__slogan,
    .panel__slogan--right {
        font-size: clamp(3rem, 14vw, 6rem);
        text-align: left;
        justify-self: start;
        padding: 6vh 6vw;
    }
    .panel__meta,
    .panel__meta--right {
        left: 6vw;
        right: auto;
        text-align: left;
        top: 3vh;
    }
    .orbit { transform: scale(0.6); }
    .orbit--sprinkle { right: 8vw; top: 14vh; }
    .orbit--cherry   { left: 8vw;  bottom: 10vh; }
    .orbit--splash   { right: 8vw; bottom: 10vh; }
    .shard--hero-1, .shard--hero-2, .shard--hero-3 { transform: scale(0.7); }
}