/* ssettl.com — a quiet room. cool grays, ma negative space, bounce-enter */

:root {
    /* Palette — Cool Grays in Pale Air */
    --porcelain-mist: #F2F4F7;
    --pearl-hush:     #E6EAF0;
    --stone-vapor:    #D5DBE3;
    --mist-cool:      #A8B0BC;
    --slate-whisper:  #707684;
    --charcoal-frost: #2C313A;
    --marine-shade:   #4A5260;
    --iced-lavender:  #C8CFE0;

    /* Bounce easing — softened cubic */
    --soft-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --slow-ease:   cubic-bezier(0.22, 0.61, 0.36, 1);
    --bounce-duration: 950ms;

    /* Ma grid (latent 9-col / 12-row) */
    --ma-cols: 9;
    --ma-rows: 12;
}

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

html {
    background: var(--porcelain-mist);
    scroll-behavior: smooth;
}

body {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 300;
    color: var(--charcoal-frost);
    background: var(--porcelain-mist);
    overflow-x: hidden;
    min-height: 100vh;
    line-height: 1.85;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ============================================================
   SPINE WAVE — single 1px sinuous SVG path traced down full doc
   ============================================================ */
.spine-wave {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}

.spine-wave path {
    stroke: var(--mist-cool);
    stroke-width: 1;
    fill: none;
    stroke-linecap: round;
    /* drawn progressively via stroke-dashoffset bound to scrollY */
}

/* ============================================================
   PARTICULATE DRIFT — incense smoke in still air
   ============================================================ */
.particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--iced-lavender);
    opacity: 0.08;
    filter: blur(4px);
    will-change: transform, opacity;
}

/* ============================================================
   MIST WIPE — pearl hush band that sweeps between sections
   ============================================================ */
.mist-wipe {
    position: fixed;
    left: 0;
    top: -20vh;
    width: 100vw;
    height: 14vh;
    pointer-events: none;
    z-index: 3;
    background: linear-gradient(
        to bottom,
        rgba(230, 234, 240, 0) 0%,
        rgba(230, 234, 240, 0.62) 50%,
        rgba(230, 234, 240, 0) 100%
    );
    opacity: 0;
    transform: translateY(0);
}

.mist-wipe.active {
    animation: mist-sweep 2400ms var(--slow-ease) forwards;
}

@keyframes mist-sweep {
    0%   { opacity: 0; transform: translateY(0); }
    18%  { opacity: 1; }
    82%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(140vh); }
}

/* ============================================================
   OPENING — held breath, knot, wordmark
   ============================================================ */
.opening {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    background: var(--porcelain-mist);
    overflow: hidden;
}

.opening-stage {
    position: relative;
    width: min(700px, 90vw);
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.opening-knot {
    position: absolute;
    width: 56px;
    height: 56px;
    color: var(--slate-whisper);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(-32px) scale(0.4);
    opacity: 0;
    transition: opacity 1100ms var(--slow-ease);
}

.opening-knot.appear {
    animation: knot-bounce-in 1100ms var(--soft-bounce) forwards;
}

@keyframes knot-bounce-in {
    0%   { opacity: 0; transform: translate(-50%, -50%) translateY(-80px) scale(0.5); }
    55%  { opacity: 1; transform: translate(-50%, -50%) translateY(8px) scale(1.06); }
    78%  { transform: translate(-50%, -50%) translateY(-4px) scale(0.99); }
    100% { opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1); }
}

.opening-knot.glide-up {
    animation: knot-glide-up 1200ms var(--slow-ease) forwards;
}

@keyframes knot-glide-up {
    0%   { transform: translate(-50%, -50%) translateY(0) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) translateY(-92px) scale(0.18); opacity: 0.9; }
}

.wordmark {
    font-family: 'Comfortaa', 'Quicksand', sans-serif;
    font-weight: 300;
    font-size: clamp(3.4rem, 9vw, 7.8rem);
    letter-spacing: 0.18em;
    color: var(--charcoal-frost);
    text-transform: lowercase;
    display: flex;
    gap: 0.02em;
    position: relative;
    line-height: 1;
}

.wm-letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(60px) scale(0.95);
    position: relative;
}

.wm-letter.appear {
    animation: wm-bounce-in 1000ms var(--soft-bounce) forwards;
}

.wm-second-s {
    position: relative;
}

/* The knot will land as the dot of the second 's' */
.wm-second-s::after {
    content: "";
    position: absolute;
    top: -0.18em;
    left: 50%;
    width: 0.18em;
    height: 0.18em;
    transform: translateX(-50%) scale(0);
    background: transparent;
    border: 1px solid var(--slate-whisper);
    border-radius: 50%;
    opacity: 0;
    transition: transform 700ms var(--soft-bounce), opacity 700ms var(--slow-ease);
}

.wm-second-s.dotted::after {
    transform: translateX(-50%) scale(1);
    opacity: 0.85;
}

@keyframes wm-bounce-in {
    0%   { opacity: 0; transform: translateY(60px) scale(0.95); }
    60%  { opacity: 1; transform: translateY(-8px) scale(1.02); }
    78%  { transform: translateY(3px) scale(0.998); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   MA SECTIONS — 160-220vh tall, sparse content vignettes
   ============================================================ */
.ma-section {
    position: relative;
    width: 100vw;
    min-height: 180vh;
    z-index: 4;
}

#sect-invitation { min-height: 160vh; }
#sect-ethos      { min-height: 200vh; }
#sect-practice   { min-height: 200vh; }
#sect-figures    { min-height: 170vh; }
#sect-room       { min-height: 220vh; }
#sect-contact    { min-height: 160vh; }

.ma-grid {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
    display: grid;
    grid-template-columns: repeat(var(--ma-cols), 1fr);
    grid-template-rows: repeat(var(--ma-rows), 1fr);
    padding: 0 4vw;
    pointer-events: none;
}

.ma-grid > * {
    pointer-events: auto;
}

/* Negative-space radial glows — breathing voids */
.ma-section::before {
    content: "";
    position: absolute;
    width: 60vw;
    height: 60vw;
    max-width: 900px;
    max-height: 900px;
    border-radius: 50%;
    background: radial-gradient(
        circle at center,
        rgba(200, 207, 224, 0.18) 0%,
        rgba(200, 207, 224, 0.06) 40%,
        rgba(200, 207, 224, 0) 70%
    );
    top: 30%;
    left: 18%;
    pointer-events: none;
    animation: void-breathe 72s ease-in-out infinite;
    z-index: 0;
}

#sect-ethos::before     { top: 22%; left: 56%; width: 50vw; height: 50vw; }
#sect-practice::before  { top: 40%; left: 10%; width: 64vw; height: 64vw; animation-duration: 84s; }
#sect-figures::before   { top: 50%; left: 60%; width: 48vw; height: 48vw; animation-duration: 66s; }
#sect-room::before      { top: 28%; left: 24%; width: 70vw; height: 70vw; animation-duration: 90s; }
#sect-contact::before   { top: 50%; left: 30%; width: 56vw; height: 56vw; animation-duration: 78s; }

@keyframes void-breathe {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.85; }
    33%      { transform: translate(4vw, -3vh) scale(1.06); opacity: 1; }
    66%      { transform: translate(-3vw, 4vh) scale(0.96); opacity: 0.7; }
}

/* ============================================================
   VIGNETTES — asymmetric placements within the 9x12 ma grid
   ============================================================ */
.vignette {
    z-index: 5;
    max-width: 38ch;
}

/* Top right — heading high on right side */
.v-top-right     { grid-column: 6 / 9;  grid-row: 2 / 4;  text-align: right; justify-self: end; }
/* Bottom left — heading low on left side */
.v-bottom-left   { grid-column: 2 / 5;  grid-row: 9 / 11; text-align: left; }
/* Mid left */
.v-mid-left      { grid-column: 1 / 4;  grid-row: 4 / 6; }
/* Far right (image) */
.v-far-right     { grid-column: 5 / 10; grid-row: 6 / 11; }
/* Bottom mid (paragraph) */
.v-bottom-mid    { grid-column: 3 / 6;  grid-row: 11 / 13; }
/* Top mid */
.v-top-mid       { grid-column: 4 / 7;  grid-row: 2 / 4; }
/* Far left (image) */
.v-far-left      { grid-column: 1 / 6;  grid-row: 5 / 10; }
/* Bottom right */
.v-bottom-right  { grid-column: 6 / 10; grid-row: 10 / 13; text-align: right; justify-self: end; }
/* Top left */
.v-top-left      { grid-column: 1 / 4;  grid-row: 2 / 4; }
/* Center right */
.v-center-right  { grid-column: 5 / 10; grid-row: 6 / 10; text-align: right; justify-self: end; }
/* Mid right (image) */
.v-mid-right     { grid-column: 5 / 10; grid-row: 3 / 9; }
/* Mid bottom (paragraph) */
.v-mid-bottom    { grid-column: 2 / 5;  grid-row: 9 / 12; }
/* Center */
.v-center        { grid-column: 3 / 8;  grid-row: 5 / 8; text-align: center; justify-self: center; }
/* Far bottom */
.v-far-bottom    { grid-column: 3 / 8;  grid-row: 11 / 13; text-align: center; justify-self: center; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.eyebrow {
    font-family: 'Nunito', sans-serif;
    font-weight: 300;
    font-size: 0.78rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--slate-whisper);
}

.display-line {
    font-family: 'Quicksand', sans-serif;
    font-weight: 300;
    font-size: clamp(4rem, 11vw, 11rem);
    letter-spacing: 0.08em;
    line-height: 0.95;
    color: var(--charcoal-frost);
    text-transform: lowercase;
}

.display-mid {
    font-family: 'Quicksand', sans-serif;
    font-weight: 300;
    font-size: clamp(2.4rem, 6.4vw, 5.6rem);
    letter-spacing: 0.06em;
    line-height: 1.04;
    color: var(--charcoal-frost);
    text-transform: lowercase;
}

.body-passage {
    font-family: 'Nunito', sans-serif;
    font-weight: 300;
    font-size: 17px;
    line-height: 1.85;
    letter-spacing: 0.01em;
    color: var(--marine-shade);
    max-width: 34ch;
}

.big-numeral {
    font-family: 'Quicksand', sans-serif;
    font-weight: 300;
    font-size: clamp(5rem, 14vw, 14rem);
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--charcoal-frost);
    font-variant-numeric: tabular-nums;
    display: block;
}

.numeral-caption {
    font-family: 'Nunito', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.7;
    color: var(--slate-whisper);
    margin-top: 1.5em;
    max-width: 26ch;
    margin-left: auto;
}

.signature {
    font-family: 'Comfortaa', sans-serif;
    font-weight: 400;
    font-size: 0.92rem;
    letter-spacing: 0.24em;
    color: var(--slate-whisper);
    text-transform: lowercase;
}

/* ============================================================
   GLYPHS — micro-waves, mizuhiki seals
   ============================================================ */
.glyph-wave {
    width: 32px;
    height: 12px;
    color: var(--slate-whisper);
    grid-column: 4 / 6;
    grid-row: 6 / 7;
    align-self: center;
    justify-self: center;
    animation: glyph-breathe 8s ease-in-out infinite;
}

.glyph-wave-2 { grid-column: 5 / 7; grid-row: 4 / 5; animation-duration: 9s; }
.glyph-wave-3 { grid-column: 3 / 5; grid-row: 4 / 5; animation-duration: 7.5s; }

@keyframes glyph-breathe {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

.seal-glyph {
    width: 24px;
    height: 24px;
    color: var(--slate-whisper);
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    align-self: start;
    justify-self: start;
    opacity: 0.85;
}

.seal-glyph-2 {
    grid-column: 5 / 6;
    grid-row: 3 / 4;
    align-self: start;
    justify-self: center;
}

/* ============================================================
   DUOTONE FIGURES — abstract atmospheric duotone images
   ============================================================ */
.duotone-figure {
    width: 100%;
    max-width: 60vw;
}

.duotone-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--marine-shade);
}

.duotone-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    /* duotone implemented via CSS blend (mix-blend-mode: luminosity over marine-shade fill) */
    mix-blend-mode: luminosity;
    filter: contrast(1.05) brightness(1.04);
}

/* generated atmospheric "photograph" gradients (water, silk, marble) */
.duotone-water {
    background:
        radial-gradient(ellipse 90% 60% at 30% 40%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 60%),
        radial-gradient(ellipse 70% 50% at 70% 80%, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 60%),
        repeating-linear-gradient(
            8deg,
            #4a5260 0px,
            #5b6472 6px,
            #6e7787 14px,
            #5b6472 22px,
            #4a5260 30px
        );
}

.duotone-silk {
    background:
        radial-gradient(ellipse 80% 90% at 60% 30%, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 65%),
        radial-gradient(ellipse 60% 70% at 30% 75%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 60%),
        repeating-linear-gradient(
            -32deg,
            #3f4754 0px,
            #6e7787 12px,
            #8b94a3 22px,
            #6e7787 32px,
            #3f4754 44px
        );
}

.duotone-marble {
    background:
        radial-gradient(ellipse 100% 70% at 40% 30%, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 60%),
        radial-gradient(ellipse 60% 60% at 80% 80%, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 60%),
        linear-gradient(115deg, #545b6a 0%, #707684 35%, #8b94a3 55%, #707684 75%, #4a5260 100%);
    /* faint vein lines */
    box-shadow: inset 0 0 0 1px rgba(200, 207, 224, 0.08);
}

.duotone-marble::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(118deg, transparent 38%, rgba(200,207,224,0.18) 39%, rgba(200,207,224,0) 41%, transparent 60%),
        linear-gradient(68deg, transparent 60%, rgba(200,207,224,0.10) 61%, rgba(200,207,224,0) 63%, transparent 80%);
    pointer-events: none;
}

/* second-bounce lavender tint that animates in after photo settles */
.duotone-tint {
    position: absolute;
    inset: 0;
    background: var(--iced-lavender);
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 1100ms var(--slow-ease);
}

.bounce-target.appear .duotone-tint {
    opacity: 0.55;
    transition-delay: 950ms;
}

/* ============================================================
   BOUNCE-ENTER — sole motion vocabulary
   ============================================================ */
.bounce-target {
    opacity: 0;
    transform: translateY(28px);
    will-change: transform, opacity;
}

.bounce-target.appear {
    animation: bounce-enter var(--bounce-duration) var(--soft-bounce) forwards;
    animation-delay: calc(var(--bounce-delay, 0) * 1ms);
}

@keyframes bounce-enter {
    0%   { opacity: 0; transform: translateY(36px) scale(0.985); }
    55%  { opacity: 1; transform: translateY(-12px) scale(1.012); }
    78%  { transform: translateY(4px) scale(0.997); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   QUIET LINK — hover as tonal shift
   ============================================================ */
.quiet-link {
    position: relative;
    display: inline-block;
    font-family: 'Quicksand', sans-serif;
    font-weight: 300;
    font-size: clamp(1.6rem, 3.6vw, 2.8rem);
    letter-spacing: 0.08em;
    color: var(--charcoal-frost);
    text-decoration: none;
    text-transform: lowercase;
    padding-bottom: 0.18em;
    transition: color 600ms var(--slow-ease);
    cursor: pointer;
}

.quiet-link-text {
    display: inline-block;
}

.quiet-link-underline {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--iced-lavender);
    transition: width 600ms var(--slow-ease);
}

.quiet-link:hover {
    color: var(--marine-shade);
}

.quiet-link:hover .quiet-link-underline {
    width: 100%;
}

/* ============================================================
   FINAL SECTION — slightly different ground tone
   ============================================================ */
.ma-section-final {
    background: linear-gradient(
        to bottom,
        var(--porcelain-mist) 0%,
        var(--pearl-hush) 100%
    );
}

/* ============================================================
   Responsive — stay quiet on narrow screens
   ============================================================ */
@media (max-width: 720px) {
    .ma-grid {
        padding: 0 6vw;
    }

    .v-top-right     { grid-column: 4 / 10; grid-row: 2 / 4; }
    .v-bottom-left   { grid-column: 1 / 8;  grid-row: 9 / 11; }
    .v-mid-left      { grid-column: 1 / 9; }
    .v-far-right     { grid-column: 1 / 10; }
    .v-bottom-mid    { grid-column: 2 / 9; }
    .v-top-mid       { grid-column: 2 / 9; }
    .v-far-left      { grid-column: 1 / 10; }
    .v-bottom-right  { grid-column: 2 / 10; }
    .v-top-left      { grid-column: 1 / 9; }
    .v-center-right  { grid-column: 2 / 10; }
    .v-mid-right     { grid-column: 1 / 10; }
    .v-mid-bottom    { grid-column: 1 / 9; }
    .v-center        { grid-column: 1 / 10; }
    .v-far-bottom    { grid-column: 1 / 10; }

    .duotone-figure { max-width: 100%; }

    .display-line { font-size: clamp(3rem, 14vw, 5rem); }
    .display-mid  { font-size: clamp(2rem, 9vw, 3.4rem); }
    .big-numeral  { font-size: clamp(4rem, 22vw, 7rem); }
}