/* simulai.dev - Fairycore Developer Tale */

:root {
    --sunset-peach: #FFB088;
    --honey-blush: #FFD4A8;
    --cream-parchment: #FFF8F0;
    --ember-orange: #E85D26;
    --rose-quartz: #E8A0BF;
    --deep-umber: #3A2518;
    --warm-ivory: #FFF0E0;
    --peach-halo: rgba(255, 176, 136, 0.25);
}

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

html {
    scroll-behavior: smooth;
}

body {
    background: linear-gradient(180deg, var(--sunset-peach) 0%, var(--honey-blush) 40%, var(--warm-ivory) 100%);
    color: var(--deep-umber);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    overflow-x: hidden;
}

/* Noise texture overlay */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: url(#noise-filter);
    opacity: 0.06;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 9999;
}

/* Content column */
.content-column {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 8vw;
}

/* Sections */
.section {
    padding: 10vh 0;
    position: relative;
}

/* Hero */
.section-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.hero-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

.hero-lockup {
    line-height: 1.1;
}

.hero-name {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    color: var(--deep-umber);
    display: inline;
}

.hero-tld {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    color: var(--ember-orange);
    display: inline;
}

.hero-desc {
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    line-height: 1.85;
    color: var(--deep-umber);
    margin-top: 2rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* Floating bubbles */
.bubble-float {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.bf1 { top: 15vh; left: 8vw; }
.bf2 { top: 40vh; right: 10vw; }
.bf3 { bottom: 20vh; left: 15vw; }

.bubble-y {
    animation: float-y 6s ease-in-out infinite alternate;
}

.bubble-x {
    animation: float-x 8s ease-in-out infinite alternate;
}

@keyframes float-y {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

@keyframes float-x {
    0% { transform: translateX(0); }
    100% { transform: translateX(15px); }
}

/* Bubbles */
.bubble {
    border-radius: 50%;
    position: relative;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.5) 0%, transparent 50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bubble::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #FFB088, #E8A0BF, #7EC8E8, #FFD4A8, #FFB088);
    -webkit-mask: radial-gradient(transparent calc(100% - 3px), black calc(100% - 2px));
    mask: radial-gradient(transparent calc(100% - 3px), black calc(100% - 2px));
    z-index: -1;
}

.bubble-sm {
    width: 50px;
    height: 50px;
    box-shadow: 0 0 20px var(--peach-halo);
}

.bubble-md {
    width: 70px;
    height: 70px;
    box-shadow: 0 0 25px var(--peach-halo);
}

.bubble-lg {
    width: 120px;
    height: 120px;
    box-shadow: 0 0 30px var(--peach-halo);
    animation: pulse-bubble 3s ease-in-out infinite;
}

.bubble-xl {
    width: 200px;
    height: 200px;
    box-shadow: 0 0 40px var(--peach-halo);
    opacity: 0;
    transition: opacity 3s ease;
}

.bubble-xl.visible {
    opacity: 1;
}

@keyframes pulse-bubble {
    0%, 100% { transform: scale(1) translateY(0); }
    50% { transform: scale(1.03) translateY(-5px); }
}

.bubble-word {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--deep-umber);
    position: relative;
    z-index: 1;
}

/* Spell Book */
.section-spellbook {
    padding: 10vh 0;
}

.spell-paragraph {
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    line-height: 1.85;
    color: var(--deep-umber);
    margin-bottom: 2rem;
}

.drop-cap {
    float: left;
    font-family: 'Fraunces', serif;
    font-weight: 800;
    font-size: 4rem;
    line-height: 0.8;
    margin-right: 0.5rem;
    margin-top: 0.1rem;
    color: var(--ember-orange);
}

.circle-divider {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 4rem 0;
}

.div-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: block;
}

/* Workshop */
.section-workshop {
    padding: 10vh 0;
}

.workshop-card {
    background: var(--cream-parchment);
    padding: 3rem;
    border-radius: 8px;
    position: relative;
}

.workshop-card.glitching {
    animation: glitch 400ms ease-out forwards;
}

@keyframes glitch {
    0% { transform: translate(0); filter: none; }
    10% { transform: translateX(-3px); filter: hue-rotate(20deg); }
    20% { transform: translateX(2px); filter: hue-rotate(-15deg); }
    30% { transform: translate(0); filter: none; }
    100% { transform: translate(0); filter: none; }
}

.workshop-title {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    color: var(--deep-umber);
    margin-bottom: 1.5rem;
}

.workshop-text {
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    line-height: 1.85;
    margin-bottom: 1.2rem;
}

.workshop-code {
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    line-height: 1.85;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.code-inline {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--ember-orange);
}

/* Bubble Garden */
.section-bubbles {
    padding: 10vh 0;
}

.garden-bubble {
    display: flex;
    justify-content: center;
    margin-bottom: 6rem;
}

/* Closing */
.section-closing {
    background: linear-gradient(180deg, var(--warm-ivory) 0%, var(--honey-blush) 50%, var(--sunset-peach) 100%);
    padding: 10vh 0 15vh;
    text-align: center;
}

.closing-text {
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    line-height: 1.85;
    color: var(--deep-umber);
    margin-bottom: 2rem;
}

.closing-domain {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--ember-orange);
    margin-bottom: 3rem;
}

.closing-bubble {
    display: flex;
    justify-content: center;
}