/* ========================================
   bada.moe — styles.css
   Palette: "Unbleached"
   ======================================== */

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

/* Scrollbar styling */
html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #DDD5CB #F7F3ED;
}

html::-webkit-scrollbar {
    width: 4px;
}

html::-webkit-scrollbar-track {
    background: #F7F3ED;
}

html::-webkit-scrollbar-thumb {
    background: #DDD5CB;
}

/* Dot-grid background */
body {
    background-color: #F7F3ED;
    background-image: radial-gradient(circle, #8A7E72 1px, transparent 1px);
    background-size: 48px 48px;
    background-position: 0 0;
    font-family: 'Karla', sans-serif;
    color: #6B6157;
    cursor: default;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Dot-grid at 1.5% opacity via pseudo-element approach */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: radial-gradient(circle, #8A7E72 1px, transparent 1px);
    background-size: 48px 48px;
    opacity: 0.015;
    pointer-events: none;
    z-index: -1;
}

body {
    background-image: none;
}

/* ========================================
   Typography
   ======================================== */

h1, h2, h3, .domain-name, .footer-domain {
    font-family: 'Jost', sans-serif;
    letter-spacing: 0.12em;
    text-transform: lowercase;
}

/* ========================================
   Layout — Single Column
   ======================================== */

.column {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ========================================
   Hero Region
   ======================================== */

.hero {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.hero-content {
    text-align: center;
}

.domain-name {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 300;
    letter-spacing: 0.18em;
    color: #8A7E72;
    line-height: 1;
}

.subtitle {
    margin-top: 3rem;
    font-family: 'Karla', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: #A89E94;
    letter-spacing: 0.01em;
    line-height: 1.85;
}

.scroll-indicator {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
    transition: opacity 600ms ease;
}

.scroll-indicator.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ========================================
   Content Beats
   ======================================== */

.content-beat {
    padding: 10vh 0;
}

/* ========================================
   Photograph Presentation
   ======================================== */

.photo-wrapper {
    position: relative;
    overflow: hidden;
}

.photo-wrapper.mode-a {
    width: 100%;
    aspect-ratio: 4 / 5;
}

.photo-wrapper.mode-b {
    width: 360px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}

.photo {
    width: 100%;
    height: 100%;
    position: relative;
    filter: saturate(0.25) brightness(1.06) contrast(0.92);
    mix-blend-mode: multiply;
}

/* Morning Light Protocol overlay */
.photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #F5EDE3;
    opacity: 0.08;
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* Placeholder photo treatments — gentle gradients suggesting still-life compositions */
#photo-1 {
    background: linear-gradient(170deg, #DDD5CB 0%, #EDE7DF 40%, #C4BAB0 70%, #DDD5CB 100%);
}

#photo-2 {
    background: linear-gradient(200deg, #EDE7DF 0%, #DDD5CB 35%, #A89E94 65%, #EDE7DF 100%);
}

#photo-3 {
    background: linear-gradient(150deg, #C4BAB0 0%, #EDE7DF 45%, #DDD5CB 75%, #A89E94 100%);
}

#photo-4 {
    background: linear-gradient(180deg, #DDD5CB 0%, #C4BAB0 30%, #EDE7DF 60%, #DDD5CB 100%);
}

/* ========================================
   Text Blocks
   ======================================== */

.text-block p {
    font-family: 'Karla', sans-serif;
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    font-weight: 400;
    line-height: 1.85;
    letter-spacing: 0.01em;
    color: #6B6157;
    margin-bottom: 1.5rem;
}

.text-block p:last-child {
    margin-bottom: 0;
}

/* ========================================
   Section End Marker
   ======================================== */

.section-end-marker {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #C4BAB0;
    margin: 4rem auto 0;
}

/* ========================================
   Breathing Pause / Divider
   ======================================== */

.pause {
    height: 45vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.divider {
    width: 40%;
    max-width: 240px;
    height: 1px;
    background-color: #DDD5CB;
}

/* ========================================
   Footer Region
   ======================================== */

.footer {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-content {
    text-align: center;
}

.footer-domain {
    font-family: 'Jost', sans-serif;
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 300;
    letter-spacing: 0.18em;
    color: #8A7E72;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    display: inline-block;
}

.footer-domain::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #C4836A;
    transition: width 400ms ease;
}

.footer-domain:hover::after {
    width: 100%;
}

.footer-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #C4BAB0;
    margin: 2rem auto 0;
}

/* ========================================
   Fade-Reveal Animation
   ======================================== */

.fade-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 900ms cubic-bezier(0.25, 0.1, 0.25, 1.0),
                transform 900ms cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

.fade-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 768px) {
    body::before {
        display: none;
    }

    .column {
        max-width: calc(100vw - 48px);
        padding: 0 24px;
    }
}

@media (max-width: 600px) {
    .photo-wrapper.mode-b {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .column {
        max-width: calc(100vw - 32px);
        padding: 0 16px;
    }
}