/* =========================================================================
   miris.works -- light-academia dreamscape
   palette: aurora-gradient on warm parchment
   typography: playful-rounded (Quicksand / Nunito / Nunito Sans / Architects Daughter)
   ========================================================================= */

:root {
    --bg-parchment: #F8F4EE;
    --bg-linen: #EDE7DD;
    --ink: #3D3A38;
    --ink-mauve: #8B7E85;
    --aurora-teal: #4ECDC4;
    --aurora-rose: #E8A0B5;
    --aurora-violet: #B8A9D4;
    --aurora-sage: #A8D5BA;

    --aurora-wash: linear-gradient(135deg, #4ECDC4 0%, #E8A0B5 50%, #B8A9D4 100%);

    --col-width: 680px;

    --font-display: "Quicksand", "Nunito", sans-serif;
    --font-secondary: "Nunito", "Quicksand", sans-serif;
    --font-body: "Nunito Sans", "Nunito", sans-serif;
    --font-hand: "Architects Daughter", "Nunito", cursive;

    --ease-soft: cubic-bezier(0.25, 0.1, 0.25, 1);
}

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

html {
    scroll-behavior: smooth;
}

html, body {
    background: var(--bg-parchment);
    color: var(--ink);
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 17px;
    line-height: 28px;
    overflow-x: hidden;
}

body {
    position: relative;
    min-height: 100vh;
}

/* Slow warm gradient ground -- the parchment that breathes between entries */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(60vw 50vh at 18% 18%, rgba(78,205,196,0.06) 0%, transparent 70%),
        radial-gradient(70vw 60vh at 82% 70%, rgba(232,160,181,0.07) 0%, transparent 72%),
        radial-gradient(80vw 65vh at 50% 110%, rgba(184,169,212,0.06) 0%, transparent 70%),
        linear-gradient(180deg, #F8F4EE 0%, #F4EFE6 50%, #EDE7DD 100%);
    pointer-events: none;
}

/* Procedural film-grain overlay using SVG fractal noise (no PNG needed) */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.06;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.239   0 0 0 0 0.227   0 0 0 0 0.219   0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-repeat: repeat;
    mix-blend-mode: multiply;
}

/* =========================================================================
   Blob field -- aurora colored light seeping in from beyond the frame
   ========================================================================= */
.blob-field {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.blob {
    position: absolute;
    width: 720px;
    height: 720px;
    will-change: transform, opacity;
    transition: opacity 1.4s var(--ease-soft);
    opacity: 0;
}

.blob.visible {
    opacity: 1;
}

.blob-1 { top: -180px;  left: -240px; }
.blob-2 { top:  60vh;   right: -260px; width: 800px; height: 800px; }
.blob-3 { top: 130vh;   left: -220px; width: 660px; height: 660px; }
.blob-4 { top: 220vh;   right: -300px; width: 760px; height: 760px; }
.blob-5 { top: 320vh;   left: -260px; width: 700px; height: 700px; }
.blob-6 { top: 420vh;   right: -240px; width: 640px; height: 640px; }

/* =========================================================================
   Vertical dot navigation
   ========================================================================= */
.dot-nav {
    position: fixed;
    top: 50%;
    right: 28px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 18px;
    z-index: 100;
    padding: 14px 8px;
    border-radius: 24px;
    background: rgba(248, 244, 238, 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.dot {
    width: 8px;
    height: 8px;
    border: none;
    border-radius: 50%;
    background: var(--ink-mauve);
    opacity: 0.4;
    cursor: pointer;
    padding: 0;
    transition:
        width  0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
        height 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.4s var(--ease-soft),
        opacity 0.4s var(--ease-soft),
        transform 0.4s var(--ease-soft);
}

.dot:hover {
    width: 12px;
    height: 12px;
    opacity: 0.9;
}

.dot.active {
    background: var(--aurora-rose);
    opacity: 1;
    width: 12px;
    height: 12px;
}

.dot.pulse {
    animation: dotPulse 0.7s var(--ease-soft);
}

@keyframes dotPulse {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* =========================================================================
   Journal entries
   ========================================================================= */
.journal {
    position: relative;
    z-index: 1;
}

.entry {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 40px 80px;
}

.entry[data-grain="heavy"]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.4;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.239   0 0 0 0 0.227   0 0 0 0 0.219   0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.15'/></svg>");
}

.entry[data-grain="medium"] {
    background: linear-gradient(180deg, transparent 0%, rgba(237,231,221,0.35) 100%);
}

.entry-inner {
    width: 100%;
    max-width: var(--col-width);
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.kicker {
    font-family: var(--font-hand);
    font-size: 14px;
    color: var(--aurora-teal);
    letter-spacing: 0.04em;
    margin-bottom: 18px;
    transform: rotate(-1.5deg);
    display: inline-block;
    opacity: 0;
    transform-origin: left center;
}

.entry.in-view .kicker {
    animation: rise 0.8s var(--ease-soft) 0.05s forwards;
}

.entry-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 56px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 36px;
    position: relative;
    opacity: 0;
    transform: translateY(20px);
}

.entry-title.big { font-size: 64px; }

.entry.in-view .entry-title {
    animation: rise 0.7s var(--ease-soft) 0.15s forwards;
}

.entry-body {
    font-size: 17px;
    line-height: 28px;
    font-weight: 300;
    margin-bottom: 24px;
    color: var(--ink);
    opacity: 0;
    transform: translateY(20px);
    max-width: 600px;
}

.entry-body.soft {
    color: var(--ink-mauve);
    font-style: italic;
    font-weight: 300;
}

.entry.in-view .entry-body {
    animation: rise 0.7s var(--ease-soft) 0.32s forwards;
}

.entry.in-view .entry-body:nth-of-type(2) {
    animation-delay: 0.5s;
}

@keyframes rise {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Underline-draw decoration (SVG line drawn under headings on enter) */
.underline-target {
    display: inline-block;
    position: relative;
}

.underline-target .underline-svg {
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 100%;
    height: 8px;
    overflow: visible;
    pointer-events: none;
}

.underline-target .underline-svg path {
    stroke: url(#auroraStroke);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 0.9s var(--ease-soft);
}

.entry.in-view .underline-target .underline-svg path {
    stroke-dashoffset: 0;
}

/* Hand-written marginal note inside content column (italic ink) */
.hand-note {
    font-family: var(--font-hand);
    font-size: 15px;
    color: var(--aurora-teal);
    margin-top: 12px;
    transform: rotate(-1deg);
    display: inline-block;
    opacity: 0.75;
}

.hand-note.centered {
    display: block;
    text-align: center;
    margin-top: 32px;
}

/* =========================================================================
   Margin notes (handwritten annotations in the wide margins)
   ========================================================================= */
.margin-note {
    position: absolute;
    font-family: var(--font-hand);
    font-size: 14px;
    color: var(--aurora-teal);
    opacity: 0.5;
    pointer-events: none;
    user-select: none;
    will-change: transform, opacity;
}

.margin-note.margin-left  { left: clamp(20px, 6vw, 90px); }
.margin-note.margin-right { right: clamp(20px, 6vw, 90px); }

.margin-note.top     { top: 18%;    transform: rotate(-3deg); }
.margin-note.middle  { top: 50%;    transform: rotate(2deg); }
.margin-note.bottom  { bottom: 18%; transform: rotate(-2deg); }

/* =========================================================================
   Entry 1 — Opening
   ========================================================================= */
.entry-opening {
    min-height: 100vh;
    text-align: center;
}

.opening-inner {
    text-align: center;
}

.brand-write {
    position: relative;
    width: min(720px, 88vw);
    margin: 0 auto;
}

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

.brand-text {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: drawText 1.6s var(--ease-soft) 0.4s forwards,
               fillText 0.6s var(--ease-soft) 1.8s forwards;
}

@keyframes drawText {
    to { stroke-dashoffset: 0; }
}

@keyframes fillText {
    to {
        fill: #3D3A38;
        stroke-width: 0.6;
    }
}

.brand-underline {
    width: 56%;
    height: 14px;
    margin: 12px auto 0;
    display: block;
    overflow: visible;
}

.brand-underline path {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: drawText 1.4s var(--ease-soft) 1.6s forwards;
}

.opening-tagline {
    font-family: var(--font-secondary);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.5;
    color: var(--ink-mauve);
    margin-top: 56px;
    opacity: 0;
    transform: translateY(10px);
    animation: rise 0.9s var(--ease-soft) 2.2s forwards;
}

.scroll-cue {
    position: absolute;
    bottom: 56px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0;
    animation: fadeIn 1s var(--ease-soft) 3s forwards;
}

.cue-label {
    font-family: var(--font-hand);
    color: var(--ink-mauve);
    font-size: 13px;
    letter-spacing: 0.1em;
}

.cue-chevron {
    width: 22px;
    height: 14px;
    animation: chevronPulse 2.4s ease-in-out 3.2s infinite;
}

@keyframes fadeIn {
    to { opacity: 0.85; }
}

@keyframes chevronPulse {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50%      { transform: translateY(6px); opacity: 1; }
}

/* =========================================================================
   Entry 3 — Pages list (offerings)
   ========================================================================= */
.pages-list {
    list-style: none;
    margin-top: 48px;
}

.page-item {
    display: flex;
    gap: 28px;
    padding: 28px 0;
    border-bottom: 1px solid rgba(139, 126, 133, 0.18);
    opacity: 0;
    transform: translateY(20px);
}

.page-item:last-child { border-bottom: none; }

.entry.in-view .page-item {
    animation: rise 0.7s var(--ease-soft) forwards;
}

.entry.in-view .page-item:nth-child(1) { animation-delay: 0.35s; }
.entry.in-view .page-item:nth-child(2) { animation-delay: 0.50s; }
.entry.in-view .page-item:nth-child(3) { animation-delay: 0.65s; }
.entry.in-view .page-item:nth-child(4) { animation-delay: 0.80s; }

.page-index {
    font-family: var(--font-hand);
    font-size: 18px;
    color: var(--aurora-rose);
    line-height: 1.4;
    flex-shrink: 0;
    margin-top: 4px;
    width: 32px;
    transform: rotate(-2deg);
}

.page-body { flex: 1; }

.page-name {
    font-family: var(--font-secondary);
    font-weight: 600;
    font-size: 26px;
    line-height: 1.3;
    margin-bottom: 8px;
    color: var(--ink);
    display: inline-block;
    position: relative;
}

.page-desc {
    font-size: 17px;
    line-height: 28px;
    color: var(--ink-mauve);
    font-weight: 300;
    max-width: 560px;
}

/* =========================================================================
   Entry 4 — Process grid
   ========================================================================= */
.process-grid {
    margin-top: 56px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px 48px;
}

.process-card {
    position: relative;
    padding: 32px 28px;
    border-radius: 18px;
    background: rgba(237, 231, 221, 0.4);
    border: 1px solid rgba(139, 126, 133, 0.14);
    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.5s var(--ease-soft), background 0.4s var(--ease-soft);
}

.entry.in-view .process-card {
    animation: rise 0.7s var(--ease-soft) forwards;
}

.entry.in-view .process-card:nth-child(1) { animation-delay: 0.35s; }
.entry.in-view .process-card:nth-child(2) { animation-delay: 0.50s; }
.entry.in-view .process-card:nth-child(3) { animation-delay: 0.65s; }
.entry.in-view .process-card:nth-child(4) { animation-delay: 0.80s; }

.process-card:hover {
    background: rgba(232, 160, 181, 0.10);
    transform: translateY(-3px);
}

.process-num {
    font-family: var(--font-hand);
    font-size: 14px;
    color: var(--aurora-teal);
    letter-spacing: 0.1em;
    transform: rotate(-2deg);
    display: inline-block;
}

.process-name {
    font-family: var(--font-secondary);
    font-weight: 600;
    font-size: 24px;
    margin: 12px 0 10px;
    color: var(--ink);
}

.process-text {
    font-size: 16px;
    line-height: 26px;
    font-weight: 300;
    color: var(--ink-mauve);
}

/* =========================================================================
   Entry 5 — Inventory list (dotted leader rows)
   ========================================================================= */
.inventory {
    list-style: none;
    margin-top: 48px;
}

.inventory li {
    display: flex;
    align-items: baseline;
    padding: 14px 0;
    font-size: 18px;
    line-height: 1.4;
    color: var(--ink);
    opacity: 0;
    transform: translateY(12px);
}

.entry.in-view .inventory li {
    animation: rise 0.6s var(--ease-soft) forwards;
}
.entry.in-view .inventory li:nth-child(1) { animation-delay: 0.35s; }
.entry.in-view .inventory li:nth-child(2) { animation-delay: 0.45s; }
.entry.in-view .inventory li:nth-child(3) { animation-delay: 0.55s; }
.entry.in-view .inventory li:nth-child(4) { animation-delay: 0.65s; }
.entry.in-view .inventory li:nth-child(5) { animation-delay: 0.75s; }
.entry.in-view .inventory li:nth-child(6) { animation-delay: 0.85s; }

.inv-key {
    font-family: var(--font-secondary);
    font-weight: 500;
    color: var(--ink);
}

.inv-dots {
    flex: 1;
    margin: 0 14px;
    border-bottom: 1px dotted rgba(139, 126, 133, 0.45);
    transform: translateY(-4px);
}

.inv-val {
    font-family: var(--font-hand);
    color: var(--aurora-teal);
    font-size: 17px;
}

/* =========================================================================
   Entry 6 — Letters / blockquotes
   ========================================================================= */
.letter {
    margin: 36px 0;
    padding: 24px 0 24px 30px;
    border-left: 2px solid var(--aurora-rose);
    border-radius: 4px;
    opacity: 0;
    transform: translateY(20px);
}

.entry.in-view .letter {
    animation: rise 0.7s var(--ease-soft) forwards;
}
.entry.in-view .letter:nth-of-type(1) { animation-delay: 0.35s; }
.entry.in-view .letter:nth-of-type(2) { animation-delay: 0.55s; }
.entry.in-view .letter:nth-of-type(3) { animation-delay: 0.75s; }

.letter p {
    font-family: var(--font-secondary);
    font-size: 22px;
    line-height: 1.5;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 12px;
    font-style: italic;
}

.letter cite {
    font-family: var(--font-hand);
    font-style: normal;
    font-size: 15px;
    color: var(--ink-mauve);
}

/* =========================================================================
   Entry 7 — Closing
   ========================================================================= */
.entry-closing {
    text-align: left;
}

.closing-inner {
    text-align: left;
}

.closing-line {
    margin-top: 28px;
    font-size: 26px;
    font-family: var(--font-secondary);
    font-weight: 500;
}

.link-aurora {
    color: var(--ink);
    text-decoration: none;
    position: relative;
    display: inline-block;
    padding-bottom: 6px;
    transition: color 0.4s var(--ease-soft);
}

.link-aurora::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background: var(--aurora-wash);
    border-radius: 2px;
    transition: width 0.5s var(--ease-soft);
}

.link-aurora:hover {
    color: var(--aurora-teal);
}

.link-aurora:hover::after {
    width: 100%;
}

/* Default link (in-text) — same aurora draw */
a {
    color: var(--ink);
    text-decoration: none;
    background-image: linear-gradient(90deg, var(--aurora-teal), var(--aurora-rose), var(--aurora-violet));
    background-repeat: no-repeat;
    background-size: 0% 2px;
    background-position: 0 100%;
    transition: background-size 0.5s var(--ease-soft), color 0.4s var(--ease-soft);
    padding-bottom: 3px;
}

a:hover {
    color: var(--aurora-teal);
    background-size: 100% 2px;
}

.colophon {
    margin-top: 96px;
    padding-top: 36px;
    border-top: 1px solid rgba(139, 126, 133, 0.18);
}

.colophon-line {
    font-family: var(--font-secondary);
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink);
}

.colophon-line.soft {
    color: var(--ink-mauve);
    font-weight: 300;
}

.colophon-line.tiny {
    font-family: var(--font-hand);
    font-size: 14px;
    color: var(--ink-mauve);
    margin-top: 8px;
    opacity: 0.7;
}

/* =========================================================================
   Responsive — mobile
   ========================================================================= */
@media (max-width: 720px) {
    .entry { padding: 110px 22px 70px; }
    .entry-title { font-size: 38px; }
    .entry-title.big { font-size: 42px; }
    .opening-tagline { font-size: 18px; }
    .process-grid { grid-template-columns: 1fr; }
    .margin-note { display: none; }
    .dot-nav { right: 10px; gap: 14px; padding: 10px 6px; }
    .letter p { font-size: 18px; }
    .pages-list .page-item { gap: 16px; padding: 22px 0; }
    .page-name { font-size: 22px; }
    .blob { transform: scale(0.7); }
}

@media (max-width: 460px) {
    .entry-title { font-size: 32px; }
    .entry-title.big { font-size: 34px; }
    .closing-line { font-size: 20px; }
}