/* ===========================================================================
   nonri.xyz — Coastal-Blend Luxury / Z-Pattern / Glitch-Art / Underline-Draw
   =========================================================================== */

:root {
    --azure: #0A3058;
    --sand: #D0B888;
    --coastal-white: #F5F0E8;
    --teal: #2898A0;
    --gold: #C8A038;
    --rose: #E84878;
    --foam: #E0E8E8;

    --font-display: "Space Grotesk", sans-serif;
    --font-body: "Space Grotesk", "Inter", sans-serif;

    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 32px;
    --space-lg: 64px;
    --space-xl: 96px;
    --space-xxl: 128px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--azure);
    background: var(--coastal-white);
    overflow-x: hidden;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===========================================================================
   Shared Type
   =========================================================================== */

.accent-tag {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--coastal-white);
    opacity: 0.78;
    margin-bottom: var(--space-md);
    display: inline-block;
}

.accent-tag-gold { color: var(--gold); opacity: 1; }
.accent-tag-teal { color: var(--teal); opacity: 1; }
.accent-tag-rose { color: var(--rose); opacity: 1; }

/* ===========================================================================
   Grand Entrance — 100vh coastal gradient hero
   =========================================================================== */

.grand-entrance {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0A3058 0%, #0A3058 25%, #2898A0 55%, #D0B888 100%);
    background-size: 200% 200%;
    background-position: 0% 0%;
    color: var(--coastal-white);
    overflow: hidden;
    padding: var(--space-xl) var(--space-md);
    animation: coastal-drift 22s ease-in-out infinite alternate;
}

@keyframes coastal-drift {
    0%   { background-position: 0% 0%; }
    50%  { background-position: 60% 40%; }
    100% { background-position: 100% 100%; }
}

.grand-content {
    position: relative;
    z-index: 5;
    max-width: 980px;
    text-align: center;
}

#entrance-tag {
    color: var(--gold);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 700ms ease 200ms, transform 700ms ease 200ms;
}

.grand-domain {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(48px, 9vw, 132px);
    letter-spacing: -0.03em;
    line-height: 0.95;
    color: var(--coastal-white);
    text-shadow: 0 0 0 rgba(200, 160, 56, 0);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 800ms ease 300ms, transform 800ms ease 300ms, text-shadow 800ms ease 300ms;
    position: relative;
    display: inline-block;
}

.grand-domain.is-glitching::before,
.grand-domain.is-glitching::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.grand-domain.is-glitching::before {
    color: var(--rose);
    transform: translate(-3px, 0);
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
    mix-blend-mode: screen;
    opacity: 0.85;
}

.grand-domain.is-glitching::after {
    color: var(--teal);
    transform: translate(3px, 0);
    clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
    mix-blend-mode: screen;
    opacity: 0.85;
}

.grand-tagline {
    margin-top: var(--space-md);
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    color: var(--coastal-white);
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 800ms ease 700ms, transform 800ms ease 700ms;
}

.grand-meta {
    margin-top: var(--space-lg);
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 700ms ease 1000ms, transform 700ms ease 1000ms;
}

.meta-divider {
    color: var(--coastal-white);
    opacity: 0.5;
}

/* Animated reveal trigger via .is-loaded on <body> */
body.is-loaded #entrance-tag,
body.is-loaded .grand-domain,
body.is-loaded .grand-tagline,
body.is-loaded .grand-meta {
    opacity: 1;
    transform: translateY(0);
}

body.is-loaded .grand-domain {
    text-shadow: 0 0 18px rgba(200, 160, 56, 0.45), 0 0 1px rgba(200, 160, 56, 0.6);
}

/* Cultural calligraphic strokes */
.cultural-stroke {
    position: absolute;
    width: 520px;
    height: 520px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1200ms ease;
}
.stroke-1 { top: -10%; left: -8%; transform: rotate(-12deg); }
.stroke-2 { bottom: -12%; right: -10%; transform: rotate(28deg); width: 600px; height: 600px; }
.stroke-3 { top: 40%; right: 12%; transform: rotate(-40deg); width: 360px; height: 360px; }

body.is-loaded .stroke-1 { opacity: 0.08; transition-delay: 800ms; }
body.is-loaded .stroke-2 { opacity: 0.10; transition-delay: 950ms; }
body.is-loaded .stroke-3 { opacity: 0.07; transition-delay: 1100ms; }

.grand-entrance:hover .cultural-stroke { opacity: 0.15; }

/* Glitch-art decorations */
.glitch-deco {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transition: opacity 600ms ease 1300ms;
    mix-blend-mode: screen;
}
.glitch-deco-1 { top: 18%; left: 8%; width: 220px; height: 64px; }
.glitch-deco-2 { bottom: 15%; right: 9%; width: 64px; height: 220px; }
body.is-loaded .glitch-deco { opacity: 0.45; }

/* Z-guide diagonal lines (entrance) */
.z-guides {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1200ms ease 1200ms;
}
body.is-loaded .z-guides { opacity: 0.55; }

.z-guide-line {
    stroke-dashoffset: 200;
    stroke-dasharray: 200;
    animation: draw-z-guide 2200ms ease forwards;
    animation-delay: 1200ms;
}
.z-guide-line-2 { animation-delay: 1500ms; }

@keyframes draw-z-guide {
    to { stroke-dashoffset: 0; }
}

/* Scroll prompt */
.scroll-prompt {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--coastal-white);
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 700ms ease 1500ms;
}
body.is-loaded .scroll-prompt { opacity: 0.85; }

.scroll-prompt-line {
    width: 1px;
    height: 56px;
    background: linear-gradient(to bottom, var(--gold) 0%, transparent 100%);
    animation: scroll-pulse 2200ms ease-in-out infinite;
    transform-origin: top;
}

@keyframes scroll-pulse {
    0%, 100% { transform: scaleY(0.6); opacity: 0.6; }
    50%      { transform: scaleY(1.0); opacity: 1.0; }
}

/* ===========================================================================
   Z-Pattern Showcase
   =========================================================================== */

.z-showcase {
    position: relative;
    padding: var(--space-xxl) var(--space-md);
    background:
        linear-gradient(180deg, var(--coastal-white) 0%, var(--foam) 50%, var(--coastal-white) 100%);
    background-size: 100% 200%;
    background-position: 0% 0%;
    animation: foam-drift 28s ease-in-out infinite alternate;
    overflow: hidden;
}

@keyframes foam-drift {
    0%   { background-position: 0% 0%; }
    100% { background-position: 0% 100%; }
}

.z-pattern-container {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: var(--space-xl);
    padding-block: var(--space-lg);
}

.z-connecting-guides {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.18;
}

.z-connector {
    stroke-dashoffset: 1200;
    stroke-dasharray: 1200;
    transition: stroke-dashoffset 2200ms ease;
}
.z-pattern-container.is-revealed .z-connector { stroke-dashoffset: 0; }

.z-node {
    position: relative;
    width: 100%;
    max-width: 560px;
    grid-column: 1 / 2;
    justify-self: start;
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 700ms ease, transform 700ms ease;
}

.z-node-right {
    grid-column: 2 / 3;
    justify-self: end;
    transform: translateX(60px);
}

.z-node.is-revealed { opacity: 1; transform: translateX(0); }

.z-node-marker {
    position: absolute;
    top: -22px;
    left: -22px;
    width: 64px;
    height: 64px;
    background: var(--azure);
    color: var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0.04em;
    box-shadow: 0 12px 32px rgba(10, 48, 88, 0.18);
    border: 1px solid rgba(200, 160, 56, 0.45);
    z-index: 4;
}
.z-node-right .z-node-marker { left: auto; right: -22px; }

.z-node-numeral {
    transform: translateY(-1px);
}

.z-node-panel {
    position: relative;
    background: linear-gradient(135deg, var(--coastal-white) 0%, var(--foam) 100%);
    padding: var(--space-lg) var(--space-lg);
    border-radius: 4px;
    box-shadow:
        0 1px 0 rgba(10, 48, 88, 0.06),
        0 24px 60px -22px rgba(10, 48, 88, 0.18);
    border-top: 1px solid rgba(200, 160, 56, 0.3);
    transition: box-shadow 500ms ease, transform 500ms ease;
}

.z-node-panel:hover {
    box-shadow:
        0 0 0 1px rgba(200, 160, 56, 0.4),
        0 30px 70px -20px rgba(200, 160, 56, 0.35);
    transform: translateY(-3px);
}

.z-node-panel .accent-tag {
    color: var(--gold);
    opacity: 1;
}
.z-node-panel .accent-tag-rose { color: var(--rose); }
.z-node-panel .accent-tag-teal { color: var(--teal); }

.z-node-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(26px, 2.4vw, 36px);
    letter-spacing: -0.02em;
    line-height: 1.18;
    color: var(--azure);
    margin-bottom: var(--space-md);
}

.z-node-body {
    font-size: clamp(15px, 1vw, 17px);
    line-height: 1.85;
    color: var(--azure);
    opacity: 0.86;
    margin-bottom: var(--space-md);
}

.z-node-quote {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(16px, 1.1vw, 19px);
    letter-spacing: -0.01em;
    color: var(--azure);
    line-height: 1.5;
    padding-top: var(--space-md);
    border-top: 1px solid rgba(10, 48, 88, 0.12);
    font-style: italic;
}

/* Underline-draw animation */
.underline-draw {
    position: relative;
    display: inline;
    background-image: linear-gradient(to right, var(--gold), var(--gold));
    background-size: 0% 1.5px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 900ms cubic-bezier(0.22, 1, 0.36, 1), text-shadow 400ms ease;
    padding-bottom: 4px;
}
.underline-draw.is-drawn { background-size: 100% 1.5px; }
.underline-draw.is-drawn:hover {
    text-shadow: 0 0 14px rgba(200, 160, 56, 0.55);
}

/* Glitch on panels */
.glitch-target.is-glitching .z-node-panel,
.archive-card.glitch-target.is-glitching {
    animation: panel-glitch 360ms steps(2, end);
}

@keyframes panel-glitch {
    0%   { transform: translate(0,0); filter: none; }
    20%  { transform: translate(-2px, 1px); filter: hue-rotate(8deg) saturate(1.4); }
    40%  { transform: translate(2px, -1px); filter: hue-rotate(-12deg) saturate(1.2); }
    60%  { transform: translate(-1px, 2px); filter: hue-rotate(20deg); }
    80%  { transform: translate(1px, -2px); filter: hue-rotate(-6deg); }
    100% { transform: translate(0,0); filter: none; }
}

.z-node-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 6px,
            rgba(232, 72, 120, 0.05) 7px,
            rgba(40, 152, 160, 0.04) 8px,
            transparent 9px
        );
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease;
    border-radius: 4px;
    mix-blend-mode: multiply;
}
.glitch-target.is-glitching .z-node-panel::before { opacity: 1; }

/* ===========================================================================
   Cultural Archive — Horizontal Drift Band
   =========================================================================== */

.cultural-archive {
    position: relative;
    padding: var(--space-xxl) 0 var(--space-xl);
    background: linear-gradient(180deg, var(--coastal-white) 0%, var(--foam) 100%);
}

.archive-header {
    max-width: 880px;
    margin: 0 auto var(--space-xl);
    padding: 0 var(--space-md);
    text-align: center;
}

.archive-header .accent-tag {
    color: var(--teal);
    opacity: 1;
}

.archive-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(28px, 3vw, 44px);
    letter-spacing: -0.02em;
    line-height: 1.18;
    color: var(--azure);
    margin-bottom: var(--space-md);
}

.archive-subtitle {
    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.7;
    color: var(--azure);
    opacity: 0.78;
    max-width: 620px;
    margin: 0 auto;
}

.archive-band {
    position: relative;
    overflow: hidden;
    cursor: grab;
    padding: var(--space-md) 0;
    user-select: none;
}
.archive-band.is-dragging { cursor: grabbing; }

.archive-track {
    display: flex;
    gap: var(--space-md);
    padding: 0 var(--space-md);
    transition: transform 80ms linear;
    will-change: transform;
}

.archive-card {
    flex: 0 0 auto;
    width: clamp(260px, 24vw, 340px);
    background: linear-gradient(160deg, var(--coastal-white) 0%, #FFFFFF 100%);
    border-radius: 4px;
    border-top: 2px solid var(--gold);
    box-shadow: 0 18px 48px -22px rgba(10, 48, 88, 0.22);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    transition: transform 350ms ease, box-shadow 350ms ease;
}

.archive-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 0 0 1px rgba(200, 160, 56, 0.4),
        0 28px 60px -22px rgba(200, 160, 56, 0.35);
}

.archive-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--azure);
}

.card-num { color: var(--gold); font-weight: 500; }
.card-tag { opacity: 0.7; }

.archive-card-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.01em;
    color: var(--azure);
    line-height: 1.2;
}

.archive-card-text {
    font-size: 14px;
    line-height: 1.7;
    color: var(--azure);
    opacity: 0.85;
}

.archive-card-swatch {
    margin-top: auto;
    height: 80px;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.swatch-azure  { background: var(--azure); }
.swatch-sand   { background: var(--sand); }
.swatch-gold   { background: var(--gold); }
.swatch-rose   { background: var(--rose); }
.swatch-teal   { background: var(--teal); }
.swatch-foam   { background: var(--foam); border: 1px solid rgba(10, 48, 88, 0.08); }
.swatch-stroke,
.swatch-zguide { background: var(--coastal-white); border: 1px solid rgba(10, 48, 88, 0.08); }

.swatch-stroke svg,
.swatch-zguide svg { width: 100%; height: 100%; }

.archive-progress {
    max-width: 880px;
    margin: var(--space-lg) auto 0;
    padding: 0 var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--azure);
}

.progress-rail {
    flex: 1 1 auto;
    height: 1px;
    background: rgba(10, 48, 88, 0.15);
    position: relative;
    overflow: hidden;
}

.progress-bar {
    position: absolute;
    inset: 0;
    width: 0%;
    background: linear-gradient(to right, var(--gold), var(--teal));
    transition: width 220ms ease;
}

.progress-count {
    color: var(--gold);
    font-weight: 500;
}

/* ===========================================================================
   Prestige Footer — 100vh dark monogram
   =========================================================================== */

.prestige-footer {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl) var(--space-md);
    background:
        radial-gradient(circle at 20% 10%, rgba(40, 152, 160, 0.18) 0%, transparent 55%),
        radial-gradient(circle at 80% 90%, rgba(200, 160, 56, 0.20) 0%, transparent 50%),
        linear-gradient(180deg, var(--azure) 0%, #061E38 100%);
    color: var(--coastal-white);
    overflow: hidden;
}

.footer-rule {
    position: absolute;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(to right, transparent 0%, var(--gold) 50%, transparent 100%);
    opacity: 0.55;
}
.footer-rule-top    { top: 12%; }
.footer-rule-bottom { bottom: 12%; }

.prestige-content {
    position: relative;
    text-align: center;
    max-width: 880px;
}

.monogram {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(56px, 11vw, 168px);
    letter-spacing: -0.04em;
    line-height: 0.95;
    color: var(--coastal-white);
    text-shadow: 0 0 28px rgba(200, 160, 56, 0.35);
    margin: var(--space-md) 0;
    position: relative;
    display: inline-block;
}

.monogram.is-glitching::before,
.monogram.is-glitching::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.monogram.is-glitching::before {
    color: var(--rose);
    transform: translate(-2px, 1px);
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
    mix-blend-mode: screen;
    opacity: 0.85;
}

.monogram.is-glitching::after {
    color: var(--teal);
    transform: translate(2px, -1px);
    clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
    mix-blend-mode: screen;
    opacity: 0.85;
}

.footer-tagline {
    font-size: clamp(14px, 1.05vw, 17px);
    line-height: 1.8;
    color: var(--coastal-white);
    opacity: 0.82;
    max-width: 620px;
    margin: 0 auto var(--space-lg);
}

.footer-coordinates {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    display: inline-flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-mark {
    margin-top: var(--space-lg);
    width: 56px;
    height: 56px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.85;
    animation: mark-spin 32s linear infinite;
}

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

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

@media (max-width: 880px) {
    .z-pattern-container {
        grid-template-columns: 1fr;
        row-gap: var(--space-lg);
    }
    .z-node, .z-node-right {
        grid-column: 1 / 2;
        justify-self: stretch;
        max-width: 100%;
    }
    .z-node-right .z-node-marker {
        left: -22px;
        right: auto;
    }
    .z-connecting-guides { display: none; }
    .z-node-panel { padding: var(--space-md); }
    .grand-meta { gap: 8px; font-size: 10px; }
    .grand-meta .meta-divider { display: none; }
    .archive-header { padding: 0 var(--space-md); }
    .footer-rule-top { top: 8%; }
    .footer-rule-bottom { bottom: 8%; }
}

@media (max-width: 520px) {
    :root { --space-xl: 64px; --space-xxl: 96px; }
    .grand-domain { font-size: clamp(40px, 14vw, 72px); }
    .monogram { font-size: clamp(40px, 16vw, 88px); }
    .archive-card { width: clamp(220px, 80vw, 280px); }
}