/* ============================================================
   simai.day — Art Deco × Dopamine Neon
   Palette: Lacquer Black / Electric Violet / Gold Leaf / Neon Magenta
   ============================================================ */

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

/* ---- CUSTOM PROPERTIES ---- */
:root {
    --black:    #0A0A12;
    --indigo:   #1A1A2E;
    --violet:   #7B2FFF;
    --gold:     #D4AF37;
    --magenta:  #FF3EA5;
    --ivory:    #F5F0E8;
    --silver:   #C8C0B4;
    --teal:     #00F5D4;
    --gutter:   80px;
    --rhythm:   16px;
    --spring:   cubic-bezier(0.16, 1, 0.3, 1);
    --smooth:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---- BASE ---- */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--black);
    color: var(--ivory);
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.01em;
    overflow-x: hidden;
}

/* ---- TYPOGRAPHY UTILITIES ---- */
.cormorant-italic {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 700;
}

/* ---- SECTION BASE ---- */
section {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

/* ---- SCROLL REVEAL ---- */
.section-reveal {
    opacity: 0;
    transform: scaleY(0.92);
    transform-origin: center center;
    transition: opacity 0.6s var(--spring),
                transform 0.6s var(--spring);
}
.section-reveal.visible {
    opacity: 1;
    transform: scaleY(1);
}

/* ---- LIFT CARD ---- */
.lift-card {
    transition: transform 0.3s var(--smooth),
                box-shadow 0.3s var(--smooth);
    cursor: pointer;
}
.lift-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 24px 48px rgba(123, 47, 255, 0.4),
                0 8px 16px rgba(212, 175, 55, 0.2);
}

/* ---- GOLD RULE ---- */
.hero-rule,
.prop-rule,
.section-rule,
.cultural-rule,
.closing-rule {
    height: 1px;
    background-color: var(--gold);
    opacity: 0.7;
}

/* ============================================================
   SECTION I: ENTRY PORTAL
   ============================================================ */
#hero {
    background-color: var(--black);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 var(--gutter);
}

/* Art Deco Sunburst — CSS conic-gradient, asymmetric */
.sunburst {
    position: absolute;
    inset: 0;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg 4deg,
        rgba(212, 175, 55, 0.10) 4deg 5deg,
        transparent 5deg 14deg,
        rgba(212, 175, 55, 0.10) 14deg 15deg,
        transparent 15deg 24deg,
        rgba(212, 175, 55, 0.10) 24deg 25deg,
        transparent 25deg 34deg,
        rgba(212, 175, 55, 0.10) 34deg 35deg,
        transparent 35deg 44deg,
        rgba(212, 175, 55, 0.10) 44deg 45deg,
        transparent 45deg 54deg,
        rgba(212, 175, 55, 0.10) 54deg 55deg,
        transparent 55deg 64deg,
        rgba(212, 175, 55, 0.10) 64deg 65deg,
        transparent 65deg 74deg,
        rgba(212, 175, 55, 0.10) 74deg 75deg,
        transparent 75deg 84deg,
        rgba(212, 175, 55, 0.10) 84deg 85deg,
        transparent 85deg 94deg,
        rgba(212, 175, 55, 0.10) 94deg 95deg,
        transparent 95deg 104deg,
        rgba(212, 175, 55, 0.10) 104deg 105deg,
        transparent 105deg 114deg,
        rgba(212, 175, 55, 0.10) 114deg 115deg,
        transparent 115deg 124deg,
        rgba(212, 175, 55, 0.10) 124deg 125deg,
        transparent 125deg 134deg,
        rgba(212, 175, 55, 0.10) 134deg 135deg,
        transparent 135deg 144deg,
        rgba(212, 175, 55, 0.10) 144deg 145deg,
        transparent 145deg 154deg,
        rgba(212, 175, 55, 0.10) 154deg 155deg,
        transparent 155deg 164deg,
        rgba(212, 175, 55, 0.10) 164deg 165deg,
        transparent 165deg 174deg,
        rgba(212, 175, 55, 0.10) 174deg 175deg,
        transparent 175deg 184deg,
        rgba(212, 175, 55, 0.10) 184deg 185deg,
        transparent 185deg 194deg,
        rgba(212, 175, 55, 0.10) 194deg 195deg,
        transparent 195deg 204deg,
        rgba(212, 175, 55, 0.10) 204deg 205deg,
        transparent 205deg 214deg,
        rgba(212, 175, 55, 0.10) 214deg 215deg,
        transparent 215deg 224deg,
        rgba(212, 175, 55, 0.10) 224deg 225deg,
        transparent 225deg 234deg,
        rgba(212, 175, 55, 0.12) 234deg 235deg,
        transparent 235deg 243deg,
        rgba(212, 175, 55, 0.12) 243deg 244deg,
        transparent 244deg 252deg,
        rgba(212, 175, 55, 0.14) 252deg 253deg,
        transparent 253deg 260deg,
        rgba(212, 175, 55, 0.14) 260deg 261deg,
        transparent 261deg 268deg,
        rgba(212, 175, 55, 0.16) 268deg 269deg,
        transparent 269deg 275deg,
        rgba(212, 175, 55, 0.16) 275deg 276deg,
        transparent 276deg 282deg,
        rgba(212, 175, 55, 0.16) 282deg 283deg,
        transparent 283deg 289deg,
        rgba(212, 175, 55, 0.14) 289deg 290deg,
        transparent 290deg 296deg,
        rgba(212, 175, 55, 0.12) 296deg 297deg,
        transparent 297deg 304deg,
        rgba(212, 175, 55, 0.10) 304deg 305deg,
        transparent 305deg 314deg,
        rgba(212, 175, 55, 0.10) 314deg 315deg,
        transparent 315deg 324deg,
        rgba(212, 175, 55, 0.10) 324deg 325deg,
        transparent 325deg 334deg,
        rgba(212, 175, 55, 0.10) 334deg 335deg,
        transparent 335deg 344deg,
        rgba(212, 175, 55, 0.10) 344deg 345deg,
        transparent 345deg 354deg,
        rgba(212, 175, 55, 0.10) 354deg 360deg
    );
    pointer-events: none;
    z-index: 0;
}

/* Horizontal gold bisector at vertical midpoint */
.hero-rule {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    z-index: 1;
}

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

.hero-label {
    margin-bottom: calc(var(--rhythm) * 2);
}

.label-tag {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 13px;
    letter-spacing: 0.2em;
    color: var(--gold);
}

.hero-domain {
    display: flex;
    flex-direction: column;
    line-height: 0.92;
}

.domain-line-1,
.domain-line-2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18vw;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--ivory);
    display: block;
    text-transform: uppercase;
}

.domain-line-2 {
    color: var(--gold);
    margin-left: 2vw;
}

.hero-sub {
    margin-top: calc(var(--rhythm) * 2);
    font-size: 16px;
    letter-spacing: 0.15em;
    color: var(--silver);
}

/* Scroll indicator */
.hero-scroll-indicator {
    position: absolute;
    bottom: calc(var(--rhythm) * 3);
    left: var(--gutter);
    z-index: 2;
}

.chevron-down {
    display: block;
    width: 24px;
    height: 24px;
    position: relative;
    animation: chevron-pulse 2s infinite;
}
.chevron-down::before,
.chevron-down::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 1px;
    background-color: var(--violet);
    top: 50%;
}
.chevron-down::before {
    left: 0;
    transform: rotate(45deg);
    transform-origin: right center;
}
.chevron-down::after {
    right: 0;
    transform: rotate(-45deg);
    transform-origin: left center;
}

@keyframes chevron-pulse {
    0%, 100% { opacity: 0.3; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(6px); }
}

/* ============================================================
   SECTION II: THE PROPOSITION
   ============================================================ */
#proposition {
    background-color: var(--indigo);
    display: flex;
    align-items: center;
}

.prop-inner {
    display: grid;
    grid-template-columns: 40% 60%;
    height: 100%;
    width: 100%;
}

.prop-left {
    display: flex;
    align-items: center;
    padding: 0 var(--gutter);
    border-right: 1px solid rgba(212, 175, 55, 0.3);
    position: relative;
}

.prop-vertical-labels {
    position: absolute;
    left: calc(var(--gutter) / 2);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.vertical-label {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 13px;
    letter-spacing: 0.2em;
    color: var(--gold);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
}

.prop-text {
    padding-left: 48px;
}

.prop-heading {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 8vw;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--ivory);
    line-height: 0.92;
    margin-bottom: calc(var(--rhythm) * 3);
}

.prop-body {
    font-size: 15px;
    color: var(--silver);
    line-height: 1.65;
    max-width: 380px;
    margin-bottom: calc(var(--rhythm) * 2);
}

.prop-rule {
    width: 100%;
    margin-bottom: calc(var(--rhythm) * 2);
}

.prop-footnote {
    font-size: 13px;
    letter-spacing: 0.15em;
    color: var(--gold);
}

.prop-right {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--rhythm) * 4);
}

.prop-image-frame {
    position: relative;
    width: 100%;
    max-width: 480px;
}

.duotone-wrapper {
    position: relative;
    display: block;
    overflow: hidden;
}

.duotone-placeholder {
    width: 100%;
    height: 400px;
    background: linear-gradient(
        135deg,
        #1c1c2e 0%,
        #2a1a4a 30%,
        #1a0a2e 60%,
        #0d0d1e 100%
    );
}

.dp-tall {
    height: 280px;
}

.duotone-overlay {
    position: absolute;
    inset: 0;
    opacity: 0.65;
    mix-blend-mode: color;
    pointer-events: none;
}

.overlay-violet { background: #7B2FFF; }
.overlay-gold   { background: #D4AF37; }
.overlay-magenta{ background: #FF3EA5; }

/* Default duotone wrapper overlay (violet) */
.duotone-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--violet);
    opacity: 0.65;
    mix-blend-mode: color;
    pointer-events: none;
}

/* Override for panels that use explicit overlay elements */
.discipline-panel .duotone-wrapper::after {
    display: none;
}

.prop-image-border {
    position: absolute;
    top: -8px;
    right: -8px;
    bottom: 8px;
    left: 8px;
    border: 1px solid var(--gold);
    pointer-events: none;
    z-index: -1;
}

/* ============================================================
   SECTION III: THE DISCIPLINES
   ============================================================ */
#disciplines {
    background-color: var(--black);
    display: flex;
    flex-direction: column;
}

.disciplines-header {
    padding: calc(var(--rhythm) * 3) var(--gutter) calc(var(--rhythm) * 2);
    display: flex;
    align-items: center;
    gap: 32px;
}

.section-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 4vw;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--ivory);
    white-space: nowrap;
}

.section-rule {
    flex: 1;
    height: 1px;
    background-color: var(--gold);
    opacity: 0.4;
}

.disciplines-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    flex: 1;
    overflow: hidden;
}

.discipline-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--black);
    overflow: hidden;
}

/* Gold vertical dividers */
.panel-divider-right {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--gold);
    opacity: 0.4;
}

/* Art Deco Arch Motifs */
.panel-arch {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 80px;
    padding-top: calc(var(--rhythm) * 2);
    flex-shrink: 0;
}

.arch-primary,
.arch-secondary,
.arch-keystone {
    position: absolute;
    border: 2px solid var(--gold);
    border-bottom: none;
    border-radius: 50% 50% 0 0;
}

.arch-primary   { width: 120px; height: 60px; bottom: 0; opacity: 0.7; }
.arch-secondary { width: 80px;  height: 40px; bottom: 0; opacity: 0.6; }
.arch-keystone  { width: 40px;  height: 20px; bottom: 0; opacity: 0.5; }

.arch-gold    { border-color: var(--gold); }
.arch-magenta { border-color: var(--magenta); opacity: 0.6; }

/* Panel color backgrounds */
.discipline-panel[data-tone="violet"] { background-color: rgba(123, 47, 255, 0.04); }
.discipline-panel[data-tone="gold"]   { background-color: rgba(212, 175, 55, 0.04); }
.discipline-panel[data-tone="magenta"]{ background-color: rgba(255, 62, 165, 0.04); }

.panel-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: calc(var(--rhythm) * 2) calc(var(--rhythm) * 2);
}

.panel-text {
    margin-top: auto;
    padding-top: calc(var(--rhythm) * 2);
}

.panel-label {
    font-size: 13px;
    letter-spacing: 0.2em;
    color: var(--gold);
    display: block;
    margin-bottom: var(--rhythm);
}

.panel-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.4vw;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--ivory);
    line-height: 0.92;
    margin-bottom: var(--rhythm);
}

.panel-body {
    font-size: 13px;
    color: var(--silver);
    line-height: 1.65;
}

/* ============================================================
   SECTION IV: CULTURAL RESONANCE
   ============================================================ */
#cultural {
    background-color: var(--indigo);
    display: flex;
    align-items: center;
    overflow: hidden;
}

.cultural-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Chevron grid texture */
.chevron-grid {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 14px,
            rgba(212, 175, 55, 0.06) 14px,
            rgba(212, 175, 55, 0.06) 16px
        ),
        repeating-linear-gradient(
            135deg,
            transparent,
            transparent 14px,
            rgba(212, 175, 55, 0.06) 14px,
            rgba(212, 175, 55, 0.06) 16px
        );
}

/* Art Deco Medallions — concentric circles asymmetrically placed */
.medallion {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.medallion::before,
.medallion::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.12);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.medallion-1 {
    width: 400px; height: 400px;
    top: -100px; left: 60%;
}
.medallion-1::before { width: 280px; height: 280px; }
.medallion-1::after  { width: 160px; height: 160px; }

.medallion-2 {
    width: 240px; height: 240px;
    bottom: -40px; left: 25%;
    border-color: rgba(123, 47, 255, 0.2);
}
.medallion-2::before {
    width: 160px; height: 160px;
    border-color: rgba(123, 47, 255, 0.15);
}
.medallion-2::after {
    width: 80px; height: 80px;
    border-color: rgba(123, 47, 255, 0.1);
}

.medallion-3 {
    width: 180px; height: 180px;
    top: 30%; right: 5%;
    border-color: rgba(255, 62, 165, 0.15);
}
.medallion-3::before {
    width: 120px; height: 120px;
    border-color: rgba(255, 62, 165, 0.1);
}
.medallion-3::after {
    width: 60px; height: 60px;
    border-color: rgba(255, 62, 165, 0.08);
}

.cultural-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 0 calc(var(--rhythm) * 4);
    padding: 0 var(--gutter);
    align-items: center;
    width: 100%;
}

.cultural-left {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vl-cultural {
    font-size: 11px;
    letter-spacing: 0.25em;
    color: var(--gold);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
}

.cultural-text {
    max-width: 560px;
}

.cultural-heading {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 8vw;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--ivory);
    line-height: 0.92;
    margin-bottom: calc(var(--rhythm) * 2);
}

.cultural-rule {
    width: 200px;
    margin-bottom: calc(var(--rhythm) * 2);
}

.cultural-body {
    font-size: 15px;
    color: var(--silver);
    line-height: 1.65;
    max-width: 440px;
    margin-bottom: calc(var(--rhythm) * 3);
}

.cultural-quote {
    font-size: 18px;
    color: var(--gold);
    border-left: 2px solid var(--gold);
    padding-left: calc(var(--rhythm) * 2);
    font-style: italic;
}

.cultural-right {
    display: flex;
    flex-direction: column;
    gap: calc(var(--rhythm) * 3);
}

.cultural-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-number {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3.5vw;
    color: var(--violet);
    letter-spacing: 0.05em;
    line-height: 1;
}

.stat-label {
    font-size: 13px;
    color: var(--silver);
    letter-spacing: 0.1em;
}

/* ============================================================
   SECTION V: CONTACT / CLOSING
   ============================================================ */
#closing {
    background-color: var(--black);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 var(--gutter);
    overflow: hidden;
}

/* Ghost text — outline only, 25vw Bebas Neue */
.closing-ghost {
    position: absolute;
    bottom: -0.1em;
    left: -0.02em;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

.ghost-text {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 25vw;
    color: transparent;
    -webkit-text-stroke: 1px rgba(212, 175, 55, 0.3);
    letter-spacing: 0.04em;
    display: block;
}

.closing-content {
    position: relative;
    z-index: 1;
}

.closing-main {
    padding-top: calc(var(--rhythm) * 4);
}

.closing-domain {
    font-size: 22px;
    color: var(--ivory);
    letter-spacing: 0.15em;
    margin-bottom: calc(var(--rhythm) * 2);
}

.closing-rule {
    width: 160px;
    margin-bottom: calc(var(--rhythm) * 2);
}

.closing-contact {
    font-family: 'Cormorant Garamond', serif;
    font-size: 13px;
    letter-spacing: 0.2em;
    color: var(--silver);
    text-transform: uppercase;
    margin-bottom: var(--rhythm);
}

.contact-email {
    color: var(--teal);
    font-style: italic;
}

.closing-location {
    font-size: 15px;
    color: var(--gold);
    letter-spacing: 0.1em;
}

/* Animated closing chevron */
.closing-chevron {
    position: absolute;
    bottom: calc(var(--rhythm) * 6);
    left: var(--gutter);
    z-index: 2;
}

.chevron-animated {
    width: 32px;
    height: 32px;
    position: relative;
    animation: chevron-pulse 2s infinite;
}
.chevron-animated::before,
.chevron-animated::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 1px;
    background-color: var(--violet);
    top: 50%;
}
.chevron-animated::before {
    left: 0;
    transform: rotate(45deg);
    transform-origin: right center;
}
.chevron-animated::after {
    right: 0;
    transform: rotate(-45deg);
    transform-origin: left center;
}

.closing-footer {
    position: absolute;
    bottom: calc(var(--rhythm) * 2);
    left: var(--gutter);
    right: var(--gutter);
    z-index: 1;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    padding-top: var(--rhythm);
}

.footer-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 11px;
    letter-spacing: 0.2em;
    color: rgba(200, 192, 180, 0.5);
}

/* ============================================================
   PANEL HOVER — Arch brightening
   ============================================================ */
.discipline-panel:hover .arch-primary,
.discipline-panel:hover .arch-secondary,
.discipline-panel:hover .arch-keystone {
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.6));
    transition: opacity 0.3s var(--smooth), filter 0.3s var(--smooth);
}

.discipline-panel {
    transition: transform 0.3s var(--smooth),
                box-shadow 0.3s var(--smooth);
}
.discipline-panel:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(123, 47, 255, 0.3),
                0 4px 12px rgba(212, 175, 55, 0.15);
    z-index: 1;
}

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    :root {
        --gutter: 24px;
    }

    .domain-line-1,
    .domain-line-2 {
        font-size: 22vw;
    }

    .prop-inner {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }
    .prop-left {
        border-right: none;
        border-bottom: 1px solid rgba(212, 175, 55, 0.3);
        padding: calc(var(--rhythm) * 3) var(--gutter);
    }
    .prop-vertical-labels {
        display: none;
    }
    .prop-text { padding-left: 0; }

    .prop-heading { font-size: 16vw; }

    .disciplines-grid {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }

    .disciplines-header { padding: var(--rhythm) var(--gutter); }
    .section-title { font-size: 8vw; }
    .panel-title { font-size: 6vw; }

    .cultural-content {
        grid-template-columns: 1fr;
        padding: var(--rhythm) var(--gutter);
    }
    .cultural-left { display: none; }
    .cultural-right { flex-direction: row; gap: calc(var(--rhythm) * 2); }
    .cultural-heading { font-size: 14vw; }
    .stat-number { font-size: 8vw; }
}