/* ============================================================
   haru.plus — CSS
   Palette: #FF6B35 #E8455A #C4A882 #2D1B4E #1A0A2E #F5ECD7 #7B2FBE #FFD166
   Fonts: Fraunces (display), Syne (headings), DM Sans (body)
   ============================================================ */

/* ---------- CSS Custom Properties ---------- */
:root {
    --c-sunset-amber:    #FF6B35;
    --c-deep-rose:       #E8455A;
    --c-dusty-gold:      #C4A882;
    --c-deep-indigo:     #2D1B4E;
    --c-void-violet:     #1A0A2E;
    --c-warm-cream:      #F5ECD7;
    --c-electric-violet: #7B2FBE;
    --c-star-gold:       #FFD166;

    --font-display: 'Fraunces', Georgia, serif;
    --font-heading: 'Syne', system-ui, sans-serif;
    --font-body:    'DM Sans', system-ui, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: var(--c-void-violet);
    color: var(--c-warm-cream);
    font-family: var(--font-body);
    overflow-x: hidden;
}

/* ---------- Navigation ---------- */
#site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 28px;
    pointer-events: none;
}

.nav-symbol {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 400;
    color: var(--c-dusty-gold);
    pointer-events: all;
    letter-spacing: 0.02em;
}

.nav-action {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 500;
    color: var(--c-dusty-gold);
    text-decoration: none;
    pointer-events: all;
    letter-spacing: 0.12em;
    transition: color 0.3s ease, opacity 0.3s ease;
    opacity: 0.75;
}

.nav-action:hover {
    color: var(--c-star-gold);
    opacity: 1;
}

/* ---------- Scenes (Sections) ---------- */
.scene {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scene-dark {
    background-color: var(--c-void-violet);
}

.scene-warm {
    background-color: var(--c-warm-cream);
}

.scene-dark-mid {
    background-color: var(--c-deep-indigo);
}

.scene-horizon {
    background: linear-gradient(
        180deg,
        var(--c-sunset-amber) 0%,
        #D4503A 25%,
        #7B2FBE 60%,
        var(--c-void-violet) 100%
    );
}

/* ============================================================
   SCENE 1: THE PLATFORM
   ============================================================ */

/* --- Star Field --- */
.star-field {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.star-dot {
    position: absolute;
    border-radius: 50%;
    background: var(--c-star-gold);
    animation: twinkle var(--tw-dur, 3s) ease-in-out infinite alternate;
    animation-delay: var(--tw-delay, 0s);
}

@keyframes twinkle {
    from { opacity: 0.4; transform: scale(1); }
    to   { opacity: 1.0; transform: scale(1.3); }
}

/* --- Horizon Glow --- */
.horizon-glow {
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 200px;
    background: radial-gradient(
        ellipse at center bottom,
        rgba(255, 107, 53, 0.35) 0%,
        rgba(232, 69, 90, 0.15) 40%,
        transparent 70%
    );
    z-index: 2;
    pointer-events: none;
}

/* --- Horizon Line --- */
.horizon-line {
    position: absolute;
    bottom: 30%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--c-sunset-amber);
    opacity: 0.3;
    z-index: 3;
}

/* --- Isometric Platform --- */
.iso-platform-wrapper {
    position: absolute;
    left: 50%;
    top: 55%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 4;
    /* Animation: rise from below on load */
    animation: platform-rise 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

@keyframes platform-rise {
    from {
        transform: translateX(-50%) translateY(calc(-50% + 80px));
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(-50%);
        opacity: 1;
    }
}

.iso-platform {
    position: relative;
    width: 360px;
    height: 180px;
    transform-style: preserve-3d;
}

/* Top face: rotated isometric */
.iso-top {
    position: absolute;
    width: 320px;
    height: 160px;
    background: var(--c-dusty-gold);
    top: 0;
    left: 20px;
    transform: rotate(-30deg) skewX(-30deg) scaleY(0.866);
    transform-origin: top left;
}

/* Left face */
.iso-left {
    position: absolute;
    width: 100px;
    height: 80px;
    background: var(--c-sunset-amber);
    bottom: 0;
    left: 0;
    transform: skewY(-30deg);
    transform-origin: top left;
}

/* Right face */
.iso-right {
    position: absolute;
    width: 260px;
    height: 80px;
    background: var(--c-deep-rose);
    bottom: 0;
    right: 0;
    filter: brightness(0.6);
    transform: skewY(30deg);
    transform-origin: top right;
}

/* --- Hero Title --- */
.hero-title-wrapper {
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    text-align: center;
    animation: hero-title-enter 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
}

@keyframes hero-title-enter {
    from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(56px, 8vw, 96px);
    font-weight: 300;
    color: var(--c-sunset-amber);
    letter-spacing: -0.02em;
    line-height: 1.0;
    animation: weight-breath 10s ease-in-out infinite;
    /* Variable font weight animation */
    font-variation-settings: 'wght' 300, 'opsz' 144;
}

@keyframes weight-breath {
    0%, 100% {
        font-variation-settings: 'wght' 100, 'opsz' 144;
        letter-spacing: 0.06em;
    }
    50% {
        font-variation-settings: 'wght' 900, 'opsz' 9;
        letter-spacing: -0.04em;
    }
}

.hero-sub {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.3em;
    color: var(--c-dusty-gold);
    text-transform: uppercase;
    margin-top: 12px;
    opacity: 0.8;
}

/* ============================================================
   SCENE 2: THE FIRST SHELF (WARM)
   ============================================================ */

#scene-shelf-1 {
    justify-content: flex-end;
    align-items: center;
}

/* --- Constellation: Left Side --- */
.constellation-wrapper {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.left-constellation {
    left: 3%;
    top: 50%;
    transform: translateY(-50%);
    width: 280px;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.left-constellation.visible {
    opacity: 1;
}

.constellation-svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

.const-line {
    stroke: var(--c-deep-rose);
    stroke-width: 1.5;
    fill: none;
    filter: drop-shadow(0 0 4px var(--c-electric-violet));
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    transition: stroke-dashoffset 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.const-line.drawn {
    stroke-dashoffset: 0;
}

.const-node {
    fill: var(--c-star-gold);
    filter: drop-shadow(0 0 6px var(--c-electric-violet)) drop-shadow(0 0 12px var(--c-star-gold));
    opacity: 0;
    transition: opacity 0.4s ease 1.5s;
}

.const-node.drawn {
    opacity: 1;
}

/* --- Shelf: Right-Projecting --- */
.shelf-wrapper {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
}

.shelf-right {
    flex-direction: row;
    justify-content: flex-end;
    width: 100%;
    padding-right: 6%;
    transform: translateX(60px);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.8s ease;
}

.shelf-right.visible {
    transform: translateX(0);
    opacity: 1;
}

.iso-shelf {
    position: relative;
    flex-shrink: 0;
}

.iso-shelf-right {
    width: 200px;
    height: 140px;
}

/* Shelf faces: right-projecting (left side visible) */
.shelf-top {
    position: absolute;
    width: 180px;
    height: 80px;
    background: var(--c-dusty-gold);
    top: 0;
    left: 10px;
    transform: rotate(-30deg) skewX(-30deg) scaleY(0.866);
    transform-origin: top left;
}

.shelf-front-right {
    position: absolute;
    width: 180px;
    height: 50px;
    background: var(--c-sunset-amber);
    bottom: 10px;
    left: 10px;
    transform: skewY(0deg);
}

.shelf-side-right {
    position: absolute;
    width: 60px;
    height: 50px;
    background: var(--c-deep-rose);
    bottom: 10px;
    right: 0;
    transform: skewY(30deg);
    transform-origin: top right;
    filter: brightness(0.65);
}

/* Shelf content */
.shelf-content {
    padding: 20px 30px;
    max-width: 420px;
}

.shelf-content-right {
    text-align: left;
    margin-right: 20px;
}

.shelf-heading {
    font-family: var(--font-heading);
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 500;
    color: var(--c-deep-indigo);
    line-height: 1.2;
    position: relative;
    display: inline-block;
}

/* Underline-draw SVG */
.underline-draw {
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 4px;
    overflow: visible;
}

.underline-line {
    stroke: var(--c-deep-rose);
    stroke-width: 2.5;
    fill: none;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 0.3s ease-out;
}

.underline-line.drawn {
    stroke-dashoffset: 0;
}

.feature-star {
    display: inline-block;
    font-size: 24px;
    color: var(--c-star-gold);
    filter: drop-shadow(0 0 8px var(--c-sunset-amber)) drop-shadow(0 0 20px var(--c-deep-rose));
    margin-left: 10px;
    vertical-align: middle;
    animation: star-glow-pulse 3s ease-in-out infinite alternate;
}

@keyframes star-glow-pulse {
    from { filter: drop-shadow(0 0 5px var(--c-sunset-amber)) drop-shadow(0 0 12px var(--c-deep-rose)); }
    to   { filter: drop-shadow(0 0 12px var(--c-sunset-amber)) drop-shadow(0 0 28px var(--c-deep-rose)); }
}

.shelf-body {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    color: var(--c-deep-indigo);
    line-height: 1.7;
    margin-top: 18px;
}

/* ============================================================
   SCENE 3: THE STAR CHART
   ============================================================ */

#scene-star-chart {
    flex-direction: column;
    justify-content: center;
    padding: 60px 0 40px;
}

.star-chart-wrapper {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.star-chart-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Chart constellation lines */
.chart-line {
    stroke: var(--c-deep-rose);
    stroke-width: 1.5;
    fill: none;
    filter: drop-shadow(0 0 4px var(--c-electric-violet));
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
}

.chart-line.drawn {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Staggered constellation groups */
#const-chart-1 .chart-line.drawn { transition-delay: 0s; }
#const-chart-2 .chart-line.drawn { transition-delay: 0.6s; }
#const-chart-3 .chart-line.drawn { transition-delay: 1.2s; }

.chart-node {
    fill: var(--c-star-gold);
    filter: drop-shadow(0 0 6px var(--c-electric-violet)) drop-shadow(0 0 14px var(--c-star-gold));
    opacity: 0;
}

.chart-node.drawn {
    opacity: 1;
    transition: opacity 0.5s ease;
}

#const-chart-1 .chart-node.drawn { transition-delay: 1.6s; }
#const-chart-2 .chart-node.drawn { transition-delay: 2.2s; }
#const-chart-3 .chart-node.drawn { transition-delay: 2.8s; }

.chart-label {
    font-family: var(--font-body);
    font-size: 13px;
    fill: var(--c-dusty-gold);
    font-weight: 400;
    letter-spacing: 0.1em;
    text-anchor: middle;
    opacity: 0;
    text-transform: uppercase;
}

.chart-label.drawn {
    opacity: 0.7;
    transition: opacity 0.5s ease;
}

#const-chart-1 .chart-label.drawn { transition-delay: 1.8s; }
#const-chart-2 .chart-label.drawn { transition-delay: 2.4s; }
#const-chart-3 .chart-label.drawn { transition-delay: 3.0s; }

.chart-caption {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    color: var(--c-warm-cream);
    text-align: center;
    opacity: 0.7;
    margin-top: 24px;
    letter-spacing: 0.04em;
    padding: 0 20px;
}

/* ============================================================
   SCENE 4: THE FEATURE SHELF
   ============================================================ */

#scene-shelf-2 {
    justify-content: flex-start;
    align-items: center;
}

.shelf-left {
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    padding-left: 6%;
    transform: translateX(-60px);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.8s ease;
}

.shelf-left.visible {
    transform: translateX(0);
    opacity: 1;
}

.iso-shelf-left {
    width: 200px;
    height: 140px;
}

.shelf-front-left {
    position: absolute;
    width: 180px;
    height: 50px;
    background: var(--c-sunset-amber);
    bottom: 10px;
    right: 10px;
    transform: skewY(0deg);
}

.shelf-side-left {
    position: absolute;
    width: 60px;
    height: 50px;
    background: var(--c-deep-rose);
    bottom: 10px;
    left: 0;
    transform: skewY(-30deg);
    transform-origin: top left;
    filter: brightness(0.65);
}

.shelf-content-left {
    text-align: left;
    margin-left: 40px;
}

/* Cube group on the left shelf */
.cube-group {
    position: absolute;
    top: -80px;
    left: 30px;
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

/* Base isometric cube */
.iso-cube {
    position: relative;
    display: inline-block;
}

.cube-tall { width: 40px; height: 100px; }
.cube-mid  { width: 40px; height: 70px; }
.cube-short{ width: 40px; height: 45px; }

/* Cube faces via pseudo-elements approach - use absolute divs */
.cube-face {
    position: absolute;
}

.cube-top {
    width: 36px;
    height: 18px;
    background: var(--c-dusty-gold);
    top: 0;
    left: 2px;
    transform: rotate(-30deg) skewX(-30deg) scaleY(0.866);
    transform-origin: top left;
}

.cube-left {
    width: 36px;
    height: 100%;
    background: var(--c-sunset-amber);
    bottom: 0;
    left: 2px;
}

.cube-mid .cube-left,
.cube-mid .cube-right { height: 100%; }
.cube-short .cube-left,
.cube-short .cube-right { height: 100%; }

.cube-right {
    width: 22px;
    height: 100%;
    background: var(--c-deep-rose);
    bottom: 0;
    right: 0;
    filter: brightness(0.6);
    transform: skewY(30deg);
    transform-origin: top right;
}

/* ============================================================
   SCENE 5: THE HORIZON
   ============================================================ */

#scene-horizon {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.star-burst-cluster {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    pointer-events: none;
    z-index: 1;
}

.burst {
    position: absolute;
    color: var(--c-star-gold);
    font-family: var(--font-heading);
    filter: drop-shadow(0 0 8px var(--c-sunset-amber)) drop-shadow(0 0 20px var(--c-deep-rose));
    animation: burst-twinkle var(--b-dur, 4s) ease-in-out infinite alternate;
    animation-delay: var(--b-delay, 0s);
    opacity: 0;
}

.burst.visible {
    opacity: 1;
}

@keyframes burst-twinkle {
    from { opacity: 0.5; transform: scale(1); filter: drop-shadow(0 0 5px var(--c-sunset-amber)); }
    to   { opacity: 1.0; transform: scale(1.2); filter: drop-shadow(0 0 16px var(--c-sunset-amber)) drop-shadow(0 0 32px var(--c-deep-rose)); }
}

.burst-1  { top: 20%; left: 30%; font-size: 28px; --b-dur: 3.2s; --b-delay: 0.0s; }
.burst-2  { top: 15%; left: 60%; font-size: 18px; --b-dur: 4.1s; --b-delay: 0.3s; }
.burst-3  { top: 35%; left: 15%; font-size: 14px; --b-dur: 3.7s; --b-delay: 0.6s; }
.burst-4  { top: 40%; left: 75%; font-size: 22px; --b-dur: 4.5s; --b-delay: 0.9s; }
.burst-5  { top: 55%; left: 25%; font-size: 20px; --b-dur: 3.4s; --b-delay: 1.2s; }
.burst-6  { top: 60%; left: 65%; font-size: 16px; --b-dur: 4.8s; --b-delay: 0.4s; }
.burst-7  { top: 70%; left: 45%; font-size: 12px; --b-dur: 3.9s; --b-delay: 0.7s; }
.burst-8  { top: 25%; left: 48%; font-size: 24px; --b-dur: 4.3s; --b-delay: 1.0s; }

.horizon-brand {
    position: relative;
    z-index: 5;
    text-align: center;
}

.horizon-title {
    font-family: var(--font-display);
    font-size: clamp(48px, 6vw, 72px);
    font-weight: 100;
    color: var(--c-warm-cream);
    letter-spacing: 0.04em;
    font-variation-settings: 'wght' 100, 'opsz' 144;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
}

.horizon-title.visible {
    opacity: 1;
    transform: translateY(0);
}

.horizon-tagline {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    color: var(--c-dusty-gold);
    margin-top: 16px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 1s ease 0.4s;
}

.horizon-tagline.visible {
    opacity: 1;
}

/* ============================================================
   STAR GLOW ANIMATION (Neon-glow pulsing)
   ============================================================ */

@keyframes neon-glow-pulse {
    0%, 100% {
        filter: drop-shadow(0 0 5px var(--c-sunset-amber)) drop-shadow(0 0 12px var(--c-deep-rose));
    }
    50% {
        filter: drop-shadow(0 0 10px var(--c-sunset-amber)) drop-shadow(0 0 28px var(--c-electric-violet));
    }
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */

@media (max-width: 768px) {
    .iso-platform-wrapper {
        transform: translateX(-50%) translateY(-50%) scale(0.65);
    }

    .shelf-right,
    .shelf-left {
        flex-direction: column;
        padding: 60px 20px 20px;
        align-items: center;
    }

    .shelf-content-right,
    .shelf-content-left {
        margin: 20px 0 0;
        text-align: center;
        max-width: 100%;
    }

    .left-constellation {
        display: none;
    }

    .cube-group {
        position: relative;
        top: auto;
        left: auto;
        margin-bottom: 20px;
    }

    .star-chart-svg {
        height: 300px;
    }
}