/* ============================================
   aiice.dev -- Holographic Wonderland
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
    /* Color Palette */
    --canyon-clay: #C2694F;
    --burnt-sienna: #8B4513;
    --sandstone-cream: #F5E6D0;
    --obsidian-warm: #2C1810;
    --parchment-white: #FBF7F2;
    --prism-violet: #9B7ED8;
    --aurora-teal: #5BCFCF;
    --solar-pink: #E87FA0;
    --glacier-blue: #A8D8EA;
    --celestial-amber: #D4A247;

    /* Typography */
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-accent: 'Cormorant Garamond', serif;

    /* Easings */
    --ease-standard: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-bouncy: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

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

body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    line-height: 1.7;
    color: var(--obsidian-warm);
    background: var(--sandstone-cream);
    overflow-x: hidden;
}

/* --- Noise Overlay (watercolor paper texture) --- */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.03;
    filter: url(#noise);
    background: white;
}

/* --- Holographic Gradient Keyframes --- */
@keyframes holographic-shift {
    0% { background-position: 0% 50%; }
    25% { background-position: 100% 0%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
    100% { background-position: 0% 50%; }
}

@keyframes star-rotate-cw {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes star-rotate-ccw {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

@keyframes constellation-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.9; }
}

@keyframes line-draw {
    from { stroke-dashoffset: 500; }
    to { stroke-dashoffset: 0; }
}

@keyframes float-gentle {
    0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
    50% { transform: translateY(-15px) rotate(var(--rot, 0deg)); }
}

@keyframes fade-up-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes wipe-in-left {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}

/* --- Holographic gradient mixin via class --- */
.holo-gradient {
    background: linear-gradient(135deg, #9B7ED8, #5BCFCF, #E87FA0, #D4A247, #9B7ED8);
    background-size: 300% 300%;
    animation: holographic-shift 8s ease-in-out infinite;
}

/* --- Scene Base --- */
.scene {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}

.watercolor-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.scene-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 4rem 2rem;
}

/* ============================================
   SCENE 1: EMERGENCE
   ============================================ */

.scene-1-bg {
    background:
        radial-gradient(ellipse 80% 60% at 35% 50%, rgba(194, 105, 79, 0.4) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 50% 50%, rgba(245, 230, 208, 0.35) 0%, transparent 65%),
        radial-gradient(ellipse 90% 80% at 60% 60%, rgba(194, 105, 79, 0.25) 0%, transparent 80%);
    background-color: var(--canyon-clay);
    animation: bg-drift-1 20s ease-in-out infinite alternate;
}

@keyframes bg-drift-1 {
    0% { background-position: 0% 0%, 0% 0%, 0% 0%; }
    100% { background-position: 5% 3%, -3% 2%, 2% -2%; }
}

.scene-1-content {
    text-align: center;
}

/* Title letters */
.title-aiice {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(3rem, 10vw, 8rem);
    letter-spacing: -0.02em;
    line-height: 1;
    display: inline-flex;
    margin-bottom: 1.5rem;
}

.letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: holographic-shift 8s ease-in-out infinite;
}

.letter.animate-in {
    animation: fade-up-in 0.6s var(--ease-bouncy) forwards, holographic-shift 8s ease-in-out infinite;
}

.letter-a {
    background-image: linear-gradient(135deg, #9B7ED8, #c4aef0, #9B7ED8);
    background-size: 300% 300%;
}

.letter-i1 {
    background-image: linear-gradient(135deg, #5BCFCF, #8eeded, #5BCFCF);
    background-size: 300% 300%;
}

.letter-i2 {
    background-image: linear-gradient(135deg, #E87FA0, #f5b3c6, #E87FA0);
    background-size: 300% 300%;
}

.letter-c {
    background-image: linear-gradient(135deg, #D4A247, #ecc77a, #D4A247);
    background-size: 300% 300%;
}

.letter-e {
    background-image: linear-gradient(135deg, #A8D8EA, #d0ecf5, #A8D8EA);
    background-size: 300% 300%;
}

/* Tagline */
.tagline {
    font-family: var(--font-accent);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.2rem, 2vw, 2rem);
    color: var(--parchment-white);
    opacity: 0;
    transition: opacity 0.8s var(--ease-standard);
}

.tagline.visible {
    opacity: 1;
}

/* Hero constellation */
.constellation-hero {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    max-width: 800px;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.5s var(--ease-standard);
}

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

.constellation-echo {
    opacity: 0.15;
}

.constellation-echo.visible {
    opacity: 0.15;
}

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

.constellation-line {
    stroke: var(--aurora-teal);
    stroke-width: 1;
    opacity: 0.3;
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    fill: none;
}

.constellation-hero.visible .constellation-line {
    animation: line-draw 2s var(--ease-standard) forwards;
}

.constellation-star {
    fill: var(--aurora-teal);
    opacity: 0.6;
    animation: constellation-pulse 3s ease-in-out infinite;
}

.constellation-star:nth-child(6) { animation-delay: 0s; }
.constellation-star:nth-child(7) { animation-delay: 0.6s; }
.constellation-star:nth-child(8) { animation-delay: 1.2s; }
.constellation-star:nth-child(9) { animation-delay: 1.8s; }
.constellation-star:nth-child(10) { animation-delay: 2.4s; }

/* ============================================
   SCENE 2: REFRACTION
   ============================================ */

.scene-2-bg {
    background:
        linear-gradient(180deg, rgba(155, 126, 216, 0.3) 0%, transparent 40%),
        linear-gradient(180deg, rgba(91, 207, 207, 0.2) 10%, transparent 50%),
        linear-gradient(190deg, rgba(155, 126, 216, 0.15) 20%, transparent 60%),
        linear-gradient(170deg, rgba(91, 207, 207, 0.15) 5%, transparent 45%);
    background-color: var(--sandstone-cream);
    animation: bg-drift-2 25s ease-in-out infinite alternate;
}

@keyframes bg-drift-2 {
    0% { background-position: 0% 0%, 10% 0%, 0% 0%, 5% 0%; }
    100% { background-position: 3% 5%, 7% 3%, 5% 2%, 0% 4%; }
}

.scene-2-content {
    align-items: flex-start;
    padding-left: 8%;
    padding-right: 15%;
}

.heading-refraction {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.5rem, 6vw, 5rem);
    color: var(--obsidian-warm);
    letter-spacing: -0.02em;
    margin-bottom: 3rem;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--ease-standard), transform 0.8s var(--ease-standard);
}

.heading-refraction.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.text-blocks-refraction {
    max-width: 65ch;
}

.text-blocks-refraction .stagger-text {
    color: var(--obsidian-warm);
    margin-bottom: 1.8rem;
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.7s var(--ease-standard), transform 0.7s var(--ease-standard);
}

.text-blocks-refraction .stagger-text.animate-in {
    opacity: 1;
    transform: translateX(0);
}

/* Orbiting stars in Scene 2 */
.star-orbit-1, .star-orbit-2, .star-orbit-3 {
    position: absolute;
    right: 8%;
    z-index: 2;
}

.star-orbit-1 { top: 20%; animation: star-rotate-cw 35s linear infinite, float-gentle 6s ease-in-out infinite; }
.star-orbit-2 { top: 50%; animation: star-rotate-ccw 45s linear infinite, float-gentle 8s ease-in-out infinite; }
.star-orbit-3 { top: 75%; animation: star-rotate-cw 55s linear infinite, float-gentle 7s ease-in-out infinite; }

.constellation-lines-2 {
    position: absolute;
    right: 6%;
    top: 10%;
    width: 12%;
    height: 80%;
    z-index: 1;
    opacity: 0.3;
}

.constellation-lines-2 .constellation-line {
    stroke: var(--aurora-teal);
    stroke-width: 1;
    opacity: 0.3;
    stroke-dasharray: 500;
    stroke-dashoffset: 0;
}

/* ============================================
   SCENE 3: CRYSTALLIZE
   ============================================ */

.scene-3-bg {
    background:
        radial-gradient(circle 200px at 20% 30%, rgba(155, 126, 216, 0.2) 0%, transparent 100%),
        radial-gradient(circle 150px at 70% 60%, rgba(91, 207, 207, 0.15) 0%, transparent 100%),
        radial-gradient(circle 180px at 50% 80%, rgba(232, 127, 160, 0.15) 0%, transparent 100%),
        radial-gradient(circle 120px at 85% 20%, rgba(212, 162, 71, 0.12) 0%, transparent 100%),
        radial-gradient(circle 100px at 10% 70%, rgba(168, 216, 234, 0.1) 0%, transparent 100%);
    background-color: var(--burnt-sienna);
}

.scene-3-content {
    text-align: center;
    max-width: 60ch;
    margin: 0 auto;
    color: var(--parchment-white);
}

.pull-quote {
    font-family: var(--font-accent);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    line-height: 1.4;
    color: var(--parchment-white);
    margin-bottom: 3rem;
    padding: 0 5%;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    opacity: 0;
    transition: opacity 1s var(--ease-standard);
}

.pull-quote.animate-in {
    opacity: 1;
}

.crystallize-body {
    max-width: 60ch;
    margin: 0 auto;
}

.crystallize-body .stagger-text {
    color: var(--parchment-white);
    margin-bottom: 1.8rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s var(--ease-standard), transform 0.7s var(--ease-standard);
}

.crystallize-body .stagger-text.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Landmark stars in Scene 3 */
.star-landmark-1 {
    position: absolute;
    top: 15%;
    left: 10%;
    width: 64px;
    height: 64px;
    z-index: 2;
    animation: star-rotate-cw 50s linear infinite;
}

.star-landmark-2 {
    position: absolute;
    bottom: 20%;
    right: 12%;
    width: 48px;
    height: 48px;
    z-index: 2;
    animation: star-rotate-ccw 40s linear infinite;
}

.star-landmark-3 {
    position: absolute;
    top: 55%;
    right: 25%;
    width: 56px;
    height: 56px;
    z-index: 2;
    animation: star-rotate-cw 60s linear infinite;
}

/* ============================================
   SCENE 4: BLOOM
   ============================================ */

.scene-4-bg {
    background:
        linear-gradient(135deg, rgba(232, 127, 160, 0.35) 0%, transparent 50%),
        linear-gradient(315deg, rgba(212, 162, 71, 0.3) 0%, transparent 50%),
        linear-gradient(225deg, rgba(232, 127, 160, 0.2) 10%, transparent 60%),
        linear-gradient(45deg, rgba(212, 162, 71, 0.15) 20%, transparent 55%);
    background-color: var(--canyon-clay);
    animation: bg-drift-4 22s ease-in-out infinite alternate;
}

@keyframes bg-drift-4 {
    0% { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%; }
    100% { background-position: 5% 5%, -5% 3%, 3% -3%, -2% 4%; }
}

.scene-4-content {
    padding: 6rem 8%;
}

.heading-bloom {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.5rem, 6vw, 5rem);
    color: var(--parchment-white);
    letter-spacing: -0.02em;
    margin-bottom: 4rem;
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--ease-standard), transform 0.8s var(--ease-standard);
}

.heading-bloom.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.bloom-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

.bloom-block {
    position: relative;
    padding: 2rem;
    padding-top: 3rem;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s var(--ease-bouncy), transform 0.7s var(--ease-bouncy);
}

.bloom-block.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.bloom-block-1 { transition-delay: 0ms; }
.bloom-block-2 { transition-delay: 150ms; }
.bloom-block-3 { transition-delay: 300ms; }

.bloom-block h3 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    color: var(--parchment-white);
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
}

.bloom-block p {
    color: var(--sandstone-cream);
    font-size: clamp(0.9rem, 1.1vw, 1rem);
    line-height: 1.7;
}

.star-bullet {
    position: absolute;
    top: 0.5rem;
    left: 2rem;
    width: 20px;
    height: 20px;
}

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

.scene-5-bg {
    background-color: var(--sandstone-cream);
}

.scene-5-content {
    text-align: center;
}

.star-hero-center {
    width: 120px;
    height: 120px;
    margin: 0 auto 3rem;
    animation: star-rotate-cw 30s linear infinite;
}

.site-name-final {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3.5rem);
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #9B7ED8, #5BCFCF, #E87FA0, #D4A247, #9B7ED8);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: holographic-shift 8s ease-in-out infinite;
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s var(--ease-standard), transform 0.8s var(--ease-standard);
}

.site-name-final.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.horizon-closing {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    color: var(--obsidian-warm);
    opacity: 0;
    transition: opacity 1s var(--ease-standard);
}

.horizon-closing.animate-in {
    opacity: 1;
}

/* ============================================
   STAR SHAPES (CSS clip-path)
   ============================================ */

.star {
    background: linear-gradient(135deg, #9B7ED8, #5BCFCF, #E87FA0, #D4A247, #9B7ED8);
    background-size: 300% 300%;
    animation: holographic-shift 8s ease-in-out infinite;
}

/* 4-pointed star */
.star-4pt {
    clip-path: polygon(
        50% 0%, 61% 35%, 100% 50%, 61% 65%,
        50% 100%, 39% 65%, 0% 50%, 39% 35%
    );
}

/* 6-pointed star */
.star-6pt {
    clip-path: polygon(
        50% 0%, 61% 28%, 93% 25%, 72% 50%,
        93% 75%, 61% 72%, 50% 100%, 39% 72%,
        7% 75%, 28% 50%, 7% 25%, 39% 28%
    );
}

/* 8-pointed star */
.star-8pt {
    clip-path: polygon(
        50% 0%, 59% 28%, 85% 15%, 72% 41%,
        100% 50%, 72% 59%, 85% 85%, 59% 72%,
        50% 100%, 41% 72%, 15% 85%, 28% 59%,
        0% 50%, 28% 41%, 15% 15%, 41% 28%
    );
}

/* Floating stars in Scene 1 */
.star-float-1 {
    position: absolute;
    top: 18%;
    left: 12%;
    width: 24px;
    height: 24px;
    z-index: 2;
    animation: star-rotate-cw 30s linear infinite, holographic-shift 8s ease-in-out infinite, float-gentle 5s ease-in-out infinite;
}

.star-float-2 {
    position: absolute;
    bottom: 22%;
    right: 15%;
    width: 32px;
    height: 32px;
    z-index: 2;
    animation: star-rotate-ccw 40s linear infinite, holographic-shift 8s ease-in-out infinite, float-gentle 7s ease-in-out infinite;
}

.star-float-3 {
    position: absolute;
    top: 30%;
    right: 20%;
    width: 20px;
    height: 20px;
    z-index: 2;
    animation: star-rotate-cw 50s linear infinite, holographic-shift 8s ease-in-out infinite, float-gentle 6s ease-in-out infinite;
}

/* ============================================
   HOLOGRAPHIC DIVIDERS
   ============================================ */

.holo-divider {
    width: 100%;
    height: 2px;
    background: linear-gradient(135deg, #9B7ED8, #5BCFCF, #E87FA0, #D4A247, #9B7ED8);
    background-size: 300% 300%;
    animation: holographic-shift 8s ease-in-out infinite;
    position: relative;
    z-index: 5;
}

/* ============================================
   FLOATING NAVIGATION PILL
   ============================================ */

.nav-pill {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 100;
    display: flex;
    gap: 0;
    padding: 0.5rem 0.3rem;
    border-radius: 30px;
    border: 2px solid transparent;
    background-image:
        linear-gradient(var(--obsidian-warm), var(--obsidian-warm)),
        linear-gradient(135deg, #9B7ED8, #5BCFCF, #E87FA0, #D4A247, #9B7ED8);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-size: 100% 100%, 300% 300%;
    animation: holographic-shift 8s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.8s var(--ease-standard);
    backdrop-filter: blur(10px);
}

.nav-pill.visible {
    opacity: 1;
}

.nav-glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.7rem;
    color: var(--parchment-white);
    text-decoration: none;
    border-radius: 50%;
    opacity: 0.5;
    transition: opacity 0.3s, transform 0.3s var(--ease-bouncy), background-color 0.3s;
    overflow: hidden;
}

.nav-glyph:hover {
    opacity: 1;
    transform: scale(1.2);
    background: rgba(155, 126, 216, 0.3);
}

.nav-glyph.active {
    opacity: 1;
}

/* ============================================
   STAR TRAIL (mouse cursor effect)
   ============================================ */

#star-trail-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
}

.trail-star {
    position: absolute;
    background: linear-gradient(135deg, #9B7ED8, #5BCFCF, #E87FA0, #D4A247, #9B7ED8);
    background-size: 300% 300%;
    animation: holographic-shift 8s ease-in-out infinite;
    clip-path: polygon(
        50% 0%, 61% 35%, 100% 50%, 61% 65%,
        50% 100%, 39% 65%, 0% 50%, 39% 35%
    );
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

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

@media (max-width: 768px) {
    .scene-2-content {
        padding-left: 5%;
        padding-right: 5%;
    }

    .bloom-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .bloom-block-1, .bloom-block-2, .bloom-block-3 {
        transition-delay: 0ms;
    }

    .star-orbit-1, .star-orbit-2, .star-orbit-3 {
        display: none;
    }

    .constellation-lines-2 {
        display: none;
    }

    .star-landmark-3 {
        display: none;
    }

    .nav-pill {
        bottom: 1rem;
        right: 1rem;
    }

    .pull-quote {
        font-size: clamp(1.2rem, 2.5vw, 2rem);
    }

    .scene-4-content {
        padding: 4rem 5%;
    }

    .title-aiice {
        font-size: clamp(2.5rem, 12vw, 5rem);
    }
}

@media (max-width: 480px) {
    .star-float-1, .star-float-2, .star-float-3 {
        display: none;
    }

    .star-hero-center {
        width: 80px;
        height: 80px;
    }
}

/* --- Stagger animation timing for Scene 2 text --- */
.stagger-1 { transition-delay: 0ms; }
.stagger-2 { transition-delay: 200ms; }
.stagger-3 { transition-delay: 400ms; }