/* Standalone copy of the approved landing artwork styles and section palette. */
:root {
    color-scheme: dark;
    --color-background: #3E3E3E;
    --color-text: #E6E6E6;
    --tebla-section-art: #ddd78c;
    --tebla-section-making: #b5e1b8;
    --tebla-section-coding: #9bb9da;
    --tebla-section-personal: #b8a4d5;
    --tebla-section-music: #da8e8e;
    --tebla-section-shop: #d4b07b;
    --tebla-section-art-bright: #ece358;
    --tebla-section-art-highlight: #e1dea5;
    --tebla-section-making-bright: #7cd783;
    --tebla-section-making-highlight: #cce2cd;
    --tebla-section-coding-bright: #70a2d9;
    --tebla-section-coding-highlight: #bacbde;
    --tebla-section-personal-bright: #9770d9;
    --tebla-section-personal-highlight: #cabde1;
    --tebla-section-music-bright: #de6b6b;
    --tebla-section-music-highlight: #ddb7b7;
    --tebla-section-shop-bright: #dca945;
    --tebla-section-shop-highlight: #e9d9b1;
}
body { margin: 0; min-height: 100svh; background: var(--color-background); color: var(--color-text); font-family: system-ui, sans-serif; }
.tebla-landing-header { padding: 24px 20px 0; text-align: center; }
.tebla-landing-header h1 { margin: 0; font-size: clamp(1.85rem, 3vw, 2.5rem); font-weight: 400; line-height: 1.2; }
.tebla-hex-menu {
    /* Invitation timing is configured here; JS reads these values in milliseconds. */
    --hex-idle-delay: 4000;
    --hex-breathe-duration: 560ms;
    --hex-breathe-step: 180ms;
    box-sizing: border-box;
    padding: 20px 16px 64px;
    text-align: center;
}
.tebla-hex-menu .tebla-hex-svg { display: block; width: min(100%, 680px, max(320px, calc(100svh - 220px))); height: auto; margin: 0 auto; overflow: visible; }
.tebla-hex-menu .hex-art { --hex-colour: var(--tebla-section-art); --hex-bright: var(--tebla-section-art-bright); --hex-highlight: var(--tebla-section-art-highlight); --hex-in-x: 1px; --hex-in-y: 1.732px; --hex-order: 0; }
.tebla-hex-menu .hex-making { --hex-colour: var(--tebla-section-making); --hex-bright: var(--tebla-section-making-bright); --hex-highlight: var(--tebla-section-making-highlight); --hex-in-x: -1px; --hex-in-y: 1.732px; --hex-order: 1; }
.tebla-hex-menu .hex-coding { --hex-colour: var(--tebla-section-coding); --hex-bright: var(--tebla-section-coding-bright); --hex-highlight: var(--tebla-section-coding-highlight); --hex-in-x: -2px; --hex-in-y: 0px; --hex-order: 2; }
.tebla-hex-menu .hex-personal { --hex-colour: var(--tebla-section-personal); --hex-bright: var(--tebla-section-personal-bright); --hex-highlight: var(--tebla-section-personal-highlight); --hex-in-x: -1px; --hex-in-y: -1.732px; --hex-order: 3; }
.tebla-hex-menu .hex-music { --hex-colour: var(--tebla-section-music); --hex-bright: var(--tebla-section-music-bright); --hex-highlight: var(--tebla-section-music-highlight); --hex-in-x: 1px; --hex-in-y: -1.732px; --hex-order: 4; }
.tebla-hex-menu .hex-shop { --hex-colour: var(--tebla-section-shop); --hex-bright: var(--tebla-section-shop-bright); --hex-highlight: var(--tebla-section-shop-highlight); --hex-in-x: 2px; --hex-in-y: 0px; --hex-order: 5; }
.tebla-hex-menu .hex-backing { fill: #fff; }
.tebla-hex-menu .hex-wedge, .tebla-hex-menu .hex-facet { fill: var(--hex-colour); }
.tebla-hex-menu .hex-bright { fill: var(--hex-bright); }
.tebla-hex-menu .hex-highlight { fill: var(--hex-highlight); }
/* Artwork rotates independently; the unchanged backing remains the hit target. */
.tebla-hex-menu .hex-artwork { pointer-events: none; }
.tebla-hex-menu .hex-control, .tebla-hex-menu .hex-outer { cursor: default; -webkit-tap-highlight-color: transparent; }
.tebla-hex-menu .hex-bridge { fill: transparent; pointer-events: none; }
.tebla-hex-menu .hex-wedge { transition: filter 150ms ease; }
.tebla-hex-menu .hex-section:hover .hex-wedge { filter: saturate(1.3) brightness(1.05); }
.tebla-hex-menu .hex-outer {
    opacity: 1;
    visibility: visible;
    transform-box: fill-box;
    transform-origin: center;
    transform: none;
    filter: none;
}

@media (any-hover: hover) and (any-pointer: fine) {
    .tebla-hex-menu .hex-outer {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(var(--hex-in-x), var(--hex-in-y)) scale(.96);
        filter: blur(2px);
        transition: opacity 220ms ease, transform 260ms cubic-bezier(.2,.9,.2,1), filter 260ms ease, visibility 0s linear 260ms;
    }
    .tebla-hex-menu .hex-section:hover .hex-outer {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(0, 0) scale(1);
        filter: none;
        transition-delay: 0s;
    }
    /* A narrow transparent corridor joins each wedge to its outer hex. It only
       accepts pointer events while that section is open, including without JS. */
    .tebla-hex-menu .hex-section:hover .hex-bridge { pointer-events: fill; }
}
@keyframes tebla-hex-breathe {
    0%, 100% { filter: none; }
    45% { filter: brightness(1.16) saturate(1.25); }
}
.tebla-hex-menu.is-inviting .hex-wedge { animation: tebla-hex-breathe var(--hex-breathe-duration) ease-in-out calc(var(--hex-order) * var(--hex-breathe-step)) 1; }
@media (prefers-reduced-motion: reduce) {
    .tebla-hex-menu .hex-outer, .tebla-hex-menu .hex-wedge,
    .tebla-hex-menu.is-inviting .hex-wedge { transition: none; animation: none; }
    .tebla-hex-menu .hex-outer { transform: none; filter: none; }
}