/* =====================================================
   shinonome.monster — sepia-nostalgic art-deco
   Dawn: 東雲 — the pre-dawn amber interval
   ===================================================== */

/* CSS Custom Properties — color architecture */
:root {
    --color-inkwell:      #1a1108;
    --color-tobacco:      #2e1f0a;
    --color-sienna:       #5c3a1e;
    --color-leather:      #8b5e3c;
    --color-gold:         #c9922a;
    --color-pale-gold:    #d4a853;
    --color-parchment:    #e8c9a0;
    --color-cream:        #f2e8ce;
    --color-dawn-blush:   #e8d4c0;

    --font-display:  'Cinzel Decorative', serif;
    --font-body:     'IM Fell English', serif;
    --font-jp:       'Noto Serif JP', serif;

    --transition-slow: 800ms ease;
    --transition-medium: 500ms ease;
    --transition-fast: 300ms ease;
}

/* =====================================================
   RESET & BASE
   ===================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 18px;
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-cream);
    color: var(--color-inkwell);
    font-family: var(--font-body);
    line-height: 1.8;
    overflow-x: hidden;
}

/* =====================================================
   FIXED ELEMENTS
   ===================================================== */

/* Vertical nav label */
#vertical-nav {
    position: fixed;
    left: 18px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: center center;
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.25em;
    color: var(--color-gold);
    opacity: 0.4;
    z-index: 100;
    pointer-events: none;
    white-space: nowrap;
}

/* Triptych vertical hairline rules */
.triptych-rule {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--color-gold);
    opacity: 0.2;
    z-index: 50;
    pointer-events: none;
}

#triptych-rule-left {
    left: 30vw;
}

#triptych-rule-right {
    left: 75vw;
}

/* =====================================================
   TRIPTYCH GRID
   ===================================================== */
.triptych-grid {
    display: grid;
    grid-template-columns: 30vw 45vw 25vw;
    min-height: inherit;
    position: relative;
    z-index: 2;
}

.triptych-left {
    padding: 4rem 2rem 4rem 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.triptych-center {
    padding: 4rem 3rem 4rem 3rem;
    position: relative;
}

.triptych-right {
    padding: 4rem 2rem 4rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
}

/* Left column decorative border: thick-thin-thick 3/1/3 px */
.deco-border-left {
    position: absolute;
    left: 1.5rem;
    top: 0;
    bottom: 0;
    display: flex;
    gap: 4px;
}

.deco-border-left::before,
.deco-border-left::after {
    content: '';
    display: block;
    width: 3px;
    height: 100%;
    background-color: var(--color-gold);
    opacity: 0.35;
}

.deco-border-left::after {
    width: 1px;
    margin: 0 1px;
}

/* =====================================================
   BANDS
   ===================================================== */
.band {
    position: relative;
    overflow: hidden;
}

/* =====================================================
   BAND 1: HERO — DAWN ARRIVAL
   ===================================================== */
.band-hero {
    min-height: 100vh;
    background: linear-gradient(180deg,
        var(--color-inkwell) 0%,
        var(--color-tobacco) 25%,
        var(--color-sienna) 60%,
        var(--color-dawn-blush) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 10vw, 10vw);
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--color-gold);
    line-height: 1.1;
    opacity: 0;
    animation: fadeIn 1400ms ease 200ms forwards;
}

.hero-kanji {
    font-family: var(--font-jp);
    font-size: clamp(2rem, 6vw, 6vw);
    font-weight: 300;
    letter-spacing: 0.5em;
    color: var(--color-parchment);
    opacity: 0;
    animation: fadeIn 1000ms ease 1800ms forwards;
}

/* After animation fills to 0.7 opacity */
.hero-kanji.animated {
    opacity: 0.7;
}

.hero-subtitle {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 22px;
    color: var(--color-dawn-blush);
    opacity: 0;
    animation: fadeIn 800ms ease 2600ms forwards;
}

/* Blob in hero */
.blob-hero {
    position: absolute;
    top: 10%;
    right: -5%;
    width: 400px;
    height: 400px;
    opacity: 0.06;
    z-index: 1;
}

/* =====================================================
   BAND 2: TRIPTYCH BODY
   ===================================================== */
.band-triptych {
    min-height: 80vh;
    background-color: var(--color-cream);
    position: relative;
}

.blob-triptych {
    position: absolute;
    top: -5%;
    right: 5%;
    width: 500px;
    height: 500px;
    opacity: 0.08;
    z-index: 1;
    pointer-events: none;
}

/* Section label in Japanese — vertical orientation */
.section-label-jp {
    font-family: var(--font-jp);
    font-size: 3rem;
    font-weight: 300;
    color: var(--color-leather);
    writing-mode: vertical-rl;
    letter-spacing: 0.3em;
    margin: auto 0;
    opacity: 0.7;
}

/* Section headings */
.section-heading {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3vw, 3vw);
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--color-sienna);
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

/* Deco diamond rule */
.deco-rule {
    margin: 1.5rem 0;
    width: 100%;
}

.deco-rule svg {
    width: 100%;
    height: 12px;
    overflow: visible;
}

.deco-rule.wide svg {
    width: 100%;
}

/* Body text */
.body-text {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.8;
    color: var(--color-inkwell);
    margin-bottom: 1.5rem;
}

/* Marginalia */
.marginalia {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-leather);
    opacity: 0.8;
    max-width: 200px;
    margin-top: auto;
}

/* Chevron corner marks */
.chevron-mark {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.chevron-mark.top {
    align-self: flex-start;
}

.chevron-mark.bottom {
    align-self: flex-end;
    margin-top: auto;
}

/* Sunburst container */
.sunburst-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: 2rem 0;
}

.sunburst {
    width: 80px;
    height: 80px;
}

/* Intersection Observer animation classes */
.band-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms ease, transform 600ms ease;
}

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

/* =====================================================
   BAND 3: PULL-QUOTE STRIP
   ===================================================== */
.band-pullquote {
    min-height: 60vh;
    background-color: var(--color-parchment);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem 0;
    position: relative;
}

.blob-pullquote {
    position: absolute;
    bottom: -10%;
    left: 10%;
    width: 350px;
    height: 350px;
    opacity: 0.1;
    z-index: 1;
    pointer-events: none;
}

.pullquote-inner {
    padding: 3rem 10vw 3rem 6vw;
    max-width: 75vw;
    position: relative;
    z-index: 2;
}

.pull-quote {
    font-family: var(--font-body);
    font-style: italic;
    font-size: clamp(1.4rem, 2.5vw, 2.5vw);
    line-height: 1.5;
    color: var(--color-inkwell);
    quotes: none;
    margin-bottom: 1rem;
}

.pull-cite {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-leather);
    letter-spacing: 0.05em;
    font-style: normal;
}

/* =====================================================
   BAND 4: MARBLE FOCUS
   ===================================================== */
.band-marble {
    min-height: 80vh;
    background-color: var(--color-tobacco);
    position: relative;
}

.band-marble .triptych-left .section-label-jp {
    color: var(--color-leather);
}

.marble-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 4rem 3rem;
}

#marble-panel {
    width: 100%;
    max-width: 60vw;
    aspect-ratio: 8/5;
    overflow: hidden;
    position: relative;
    /* Initial state: clip-path oval mask */
    clip-path: ellipse(50% 45% at 50% 50%);
    transform: translateY(40px);
    opacity: 0;
    transition:
        clip-path 1200ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 800ms ease,
        opacity 800ms ease;
}

#marble-panel.revealed {
    clip-path: inset(0% 0% 0% 0%);
    transform: translateY(0);
    opacity: 1;
}

.marble-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Marble breathing zoom — applied after reveal */
#marble-panel.zooming .marble-svg {
    animation: marbleZoom 6s ease-in-out infinite;
}

.marble-caption {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 14px;
    color: var(--color-parchment);
    margin-top: 1rem;
    opacity: 0.6;
    letter-spacing: 0.04em;
}

/* Organic blob for marble section — fades in with panel */
.blob-marble {
    position: absolute;
    top: 5%;
    right: 0;
    width: 350px;
    height: 350px;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    transition: opacity 1000ms ease 600ms;
}

.blob-marble.visible {
    opacity: 0.1;
}

.marble-marginalia {
    color: var(--color-parchment);
    opacity: 0.5;
    margin-top: 2rem;
    max-width: 180px;
}

/* =====================================================
   BAND 5: CLOSING
   ===================================================== */
.band-closing {
    min-height: 60vh;
    background-color: var(--color-inkwell);
    padding-bottom: 4rem;
}

.band-closing .triptych-left .section-label-jp {
    color: var(--color-leather);
}

.closing-text-block {
    display: flex;
    align-items: stretch;
    padding: 4rem 0;
    position: relative;
    z-index: 2;
}

.closing-vborder-left,
.closing-vborder-right {
    width: 1px;
    background-color: var(--color-gold);
    opacity: 0.3;
    flex-shrink: 0;
    margin: 0 2rem;
}

.closing-content {
    flex: 1;
}

.closing-heading {
    color: var(--color-parchment);
    margin-bottom: 2rem;
}

.closing-body {
    color: var(--color-dawn-blush);
    font-size: clamp(0.9rem, 1.4vw, 1.4vw);
    line-height: 1.9;
}

.band-closing .triptych-right .marginalia {
    color: var(--color-leather);
}

/* Footer ornament */
.footer-ornament {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 0 4rem;
    position: relative;
    z-index: 2;
}

.sunburst-footer {
    width: 80px;
    height: 80px;
    margin-bottom: 1.5rem;
}

.footer-domain {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 3vw);
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--color-gold);
    opacity: 0.6;
}

/* =====================================================
   KEYFRAME ANIMATIONS
   ===================================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Hero kanji fades to 0.7 opacity */
.hero-kanji {
    animation: fadeInKanji 1000ms ease 1800ms forwards;
}

@keyframes fadeInKanji {
    from { opacity: 0; }
    to   { opacity: 0.7; }
}

/* Marble breathing zoom */
@keyframes marbleZoom {
    0%   { transform: scale(1.0); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1.0); }
}

/* =====================================================
   SCROLL-REVEAL STAGGER
   ===================================================== */
.reveal-item {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 600ms ease, transform 600ms ease;
}

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

.reveal-item:nth-child(2) { transition-delay: 200ms; }
.reveal-item:nth-child(3) { transition-delay: 400ms; }
.reveal-item:nth-child(4) { transition-delay: 600ms; }

/* =====================================================
   DECO BORDER SYSTEM (left column)
   ===================================================== */
.triptych-left .deco-border-left {
    position: absolute;
    left: 1.2rem;
    top: 0;
    bottom: 0;
    width: 10px;
    display: flex;
    flex-direction: row;
    gap: 3px;
    align-items: stretch;
}

/* Thick-thin-thick via pseudo-elements won't work in column flex — use explicit divs */
/* Use the pseudo-element approach on a wrapper */
.band-triptych .deco-border-left::before {
    background-color: var(--color-gold);
    opacity: 0.4;
    width: 3px;
    content: '';
    display: block;
    height: 100%;
}

.band-triptych .deco-border-left::after {
    content: '';
    display: block;
    height: 100%;
    width: 1px;
    background-color: var(--color-gold);
    opacity: 0.2;
    margin: 0 2px;
}

/* Extra thickness stripe via box-shadow */
.band-marble .deco-border-left::before {
    background-color: var(--color-gold);
    opacity: 0.3;
    width: 3px;
    content: '';
    display: block;
    height: 100%;
}

.band-marble .deco-border-left::after {
    content: '';
    display: block;
    height: 100%;
    width: 1px;
    background-color: var(--color-gold);
    opacity: 0.15;
    margin: 0 2px;
}

.band-closing .deco-border-left::before {
    background-color: var(--color-gold);
    opacity: 0.2;
    width: 3px;
    content: '';
    display: block;
    height: 100%;
}

.band-closing .deco-border-left::after {
    content: '';
    display: block;
    height: 100%;
    width: 1px;
    background-color: var(--color-gold);
    opacity: 0.1;
    margin: 0 2px;
}