/* erikacary.com — /work pages (gate + locked audience pages)
   Same tokens as style.css, kept separate so these pages don't inherit the home layout. */
:root {
    --paper: #F9F4F6;
    --ink: #2B2130;
    --rose: #B4547E;
    --muted: #6E6072;
    --subtle: #8D7E91;
    --hairline: #E2D6DC;
    --btn-border: #D5C4CD;
    --btn-wash: #F2E8ED;

    --font-display: 'Bricolage Grotesque', sans-serif;
    --font-text: 'Schibsted Grotesk', system-ui, sans-serif;

    --content-max: 1200px;
    --reading-max: 720px;
    --pad-x: clamp(24px, 6vw, 64px);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--paper);
}

body {
    font-family: var(--font-text);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- Buttons (same as the home page) --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 54px;
    padding: 0 32px;
    border-radius: 999px;
    border: 0;
    font: inherit;
    font-size: 16px;
    cursor: pointer;
    transition: background 200ms ease, opacity 200ms ease;
}

.btn-primary {
    background: var(--ink);
    color: var(--paper);
    font-weight: 600;
}

.btn-primary:hover { background: var(--rose); }
.btn-primary:disabled { opacity: 0.55; cursor: default; }
.btn-primary:disabled:hover { background: var(--ink); }

.btn-ghost {
    background: transparent;
    border: 1px solid var(--btn-border);
    color: var(--ink);
    font-weight: 500;
}

.btn-ghost:hover { background: var(--btn-wash); }

/* ==========================================================
   Gate
   ========================================================== */
.lock-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.lock {
    margin: auto;
    width: 100%;
    max-width: 560px;
    padding: 48px var(--pad-x);
    transform-origin: 50% 60%;
    transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* While the curtain rises, the form fades and settles back, as if making room for it */
.lock.is-receding {
    opacity: 0;
    transform: scale(0.92) translateY(-10px);
}

.lock-home {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.lock-eyebrow {
    margin: 56px 0 14px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rose);
}

.lock-title {
    margin: 48px 0 0;
    font-family: var(--font-display);
    font-size: clamp(30px, 4.4vw, 42px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    text-wrap: balance;
}

.lock-sub {
    margin: 16px 0 0;
    font-size: 17px;
    line-height: 1.5;
    color: var(--muted);
}

.lock-form {
    margin-top: 28px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.lock-input {
    flex: 1 1 220px;
    height: 54px;
    padding: 0 22px;
    border-radius: 999px;
    border: 1px solid var(--btn-border);
    background: #fff;
    font: inherit;
    font-size: 16px;
    color: var(--ink);
    outline: none;
    transition: border-color 200ms ease;
}

.lock-input::placeholder { color: var(--subtle); }
.lock-input:focus { border-color: var(--rose); }

.lock-error {
    min-height: 22px;
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--rose);
}

.lock-contact {
    margin: 28px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--subtle);
}

.lock-contact a {
    color: var(--ink);
    border-bottom: 1px solid var(--btn-border);
    transition: border-color 200ms ease;
}

.lock-contact a:hover { border-color: var(--ink); }

.lock-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: none;
    min-width: 28px;
    height: 28px;
    margin: 0;
    padding: 0 5px;
    border-radius: 999px;
    border: 1px solid var(--btn-border);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease;
}

.lock-contact-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.lock-copy:hover { background: var(--btn-wash); }
.lock-copy svg { display: block; }
.lock-copy .lock-copy-check { display: none; }
.lock-copy.is-copied { color: var(--rose); border-color: var(--rose); }
.lock-copy.is-copied .lock-copy-icon { display: none; }
.lock-copy.is-copied .lock-copy-check { display: block; }
.lock-copy .copy-toast { display: none; }
.lock-copy.is-copied { padding: 0 10px 0 7px; }
.lock-copy.is-copied .copy-toast { display: inline; opacity: 1; transform: none; font-size: 13px; line-height: 1; }

/* ==========================================================
   Curtain: a rose panel with a curved top. It rises from the bottom while a page
   is decrypting, then lifts off the top and the page rises in behind it.
   On a wrong password it drops back down to reveal the form.
   ========================================================== */
.lock-curtain {
    --rest: 62%;                /* where the curtain settles while loading: its top sits about a third up the page */
    position: fixed;
    left: -6vw;
    right: -6vw;
    top: 0;
    height: 112vh;
    z-index: 50;
    background: var(--rose);
    border-radius: 50% 50% 0 0 / 9vh 9vh 0 0;
    transform: translateY(100%);
    pointer-events: none;
    will-change: transform;
}

.lock-curtain[hidden] { display: none; }

/* Typed password: rise gently from the bottom and settle at the rest point */
.lock-curtain.is-rising   { animation: curtain-rise 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.lock-curtain.is-covering { transform: translateY(var(--rest)); }
/* Wrong password: drop back down */
.lock-curtain.is-dropping { transform: translateY(var(--rest)); animation: curtain-drop 560ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }

/* Page ready: sweep up from the rest point to cover everything (the page is swapped in behind it) */
.lock-curtain.is-covering-up { transform: translateY(var(--rest)); animation: curtain-cover 420ms cubic-bezier(0.65, 0, 0.35, 1) forwards; }

/* Then lift off the top, revealing the new page from the trailing edge */
.lock-curtain--leave {
    transform: translateY(0);
    animation: curtain-leave 680ms cubic-bezier(0.7, 0, 0.2, 1) 80ms forwards;
}

@keyframes curtain-rise  { from { transform: translateY(100%); }        to { transform: translateY(var(--rest)); } }
@keyframes curtain-drop  { from { transform: translateY(var(--rest)); } to { transform: translateY(100%); } }
@keyframes curtain-cover { from { transform: translateY(var(--rest)); } to { transform: translateY(0); } }
@keyframes curtain-leave { from { transform: translateY(0); }           to { transform: translateY(-112%); } }

/* Reduced motion: no curtain; the form simply fades and the page appears */
@media (prefers-reduced-motion: reduce) {
    .lock-curtain { display: none !important; }
}

/* ==========================================================
   Locked page
   ========================================================== */
.wk {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--pad-x) 56px;
}

.wk-nav {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    padding-top: 40px;
}

.wk-brand {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.wk-links {
    display: flex;
    gap: 28px;
    font-size: 15px;
    color: var(--subtle);
}

.wk-links a { color: var(--subtle); transition: color 200ms ease; }
.wk-links a:hover { color: var(--ink); }

.wk-intro {
    padding-top: clamp(64px, 10vh, 120px);
    max-width: 860px;
}

.wk-eyebrow {
    margin: 0 0 18px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rose);
}

.wk-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(36px, 5.6vw, 64px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.wk-lede {
    margin: 26px 0 0;
    max-width: var(--reading-max);
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.5;
    color: var(--muted);
    text-wrap: pretty;
}

.wk-lede strong {
    font-weight: 600;
    color: var(--ink);
}

/* --- Project tiles --- */
.wk-tiles {
    margin-top: clamp(64px, 10vh, 112px);
    display: flex;
    flex-direction: column;
    gap: clamp(64px, 9vh, 112px);
}

.wk-tile {
    padding-top: 40px;
    border-top: 0;
}

.wk-hero {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 16px;
    overflow: hidden;
    background: var(--btn-wash);
}

.wk-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

/* Phone screens sit side by side on the rose wash, rising from the bottom edge */
.wk-hero--phones {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 3%;
    padding: 6% 8% 0;
    background: linear-gradient(135deg, #F2E8ED 0%, #E7D6DF 100%);
}

.wk-hero--phones img {
    width: 30%;
    height: auto;
    margin-bottom: -6%;
    object-fit: unset;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 18px 48px rgba(43, 33, 48, 0.18);
}

.wk-tile-body {
    margin-top: clamp(24px, 3vw, 36px);
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(28px, 5vw, 72px);
    row-gap: 24px;
    align-items: start;
}

.wk-meta {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--subtle);
}

.wk-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid var(--btn-border);
    font-size: 12px;
    color: var(--rose);
    vertical-align: middle;
}

.wk-tile-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(24px, 2.8vw, 34px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.wk-role {
    margin: 14px 0 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--muted);
}

.wk-facts {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.wk-facts > div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 16px;
}

.wk-facts dt {
    padding-top: 2px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.wk-facts dd {
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
    color: var(--muted);
    text-wrap: pretty;
}

.wk-facts dd strong {
    font-weight: 600;
    color: var(--ink);
}

/* A small note under the facts, aligned with the fact text (past the 110px label column) */
.wk-aside {
    grid-column: 2;
    margin: -8px 0 0;
    padding-left: 126px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--subtle);
}

/* --- Quotes --- */
.wk-quotes {
    margin-top: clamp(80px, 12vh, 128px);
    padding-top: 40px;
    border-top: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px;
}

.wk-quotes .wk-eyebrow {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

/* Four quotes read better two by two */
.wk-quotes--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(36px, 6vw, 80px);
    row-gap: 44px;
}

.wk-quotes--4 .wk-quote p { max-width: 520px; }

.wk-quote {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wk-quote p {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(18px, 1.7vw, 21px);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.01em;
    text-wrap: pretty;
}

.wk-quote cite {
    font-style: normal;
    font-size: 14px;
    color: var(--subtle);
}

/* --- Footer (same as the home page) --- */
.site-footer {
    margin-top: clamp(72px, 12vh, 120px);
    padding: 44px 0 0;
    border-top: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.footer-lockup {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 560px;
}

.footer-headline {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.4vw, 28px);
    line-height: 1.3;
    letter-spacing: -0.015em;
    font-weight: 600;
    text-wrap: pretty;
}

.footer-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.footer-copy {
    font-size: 13px;
    color: var(--subtle);
}

@media (max-width: 860px) {
    .wk-tile-body { grid-template-columns: 1fr; row-gap: 28px; }
    .wk-aside { grid-column: auto; margin-top: -8px; padding-left: 0; }
    .wk-quotes { grid-template-columns: 1fr; }
    .wk-hero { aspect-ratio: 4 / 3; }
    .wk-hero--phones { padding: 8% 6% 0; gap: 3%; }
    .wk-hero--phones img { width: 28%; margin-bottom: -8%; }
}

@media (max-width: 560px) {
    .wk-facts > div { grid-template-columns: 1fr; gap: 6px; }
    .wk-links { gap: 20px; }
}

/* ==========================================================
   Hero variants (added with the shop page)
   ========================================================== */
/* Three phone screens fully visible on the rose wash */
.wk-hero--screens {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3.5%;
    padding: 4% 6%;
    background: linear-gradient(135deg, #F2E8ED 0%, #E7D6DF 100%);
}

.wk-hero--screens img {
    width: 24.5%;
    height: auto;
    object-fit: unset;
    /* the frames carry their own rounded corners; round in proportion so they never peek out */
    border-radius: 8.5% / 4.3%;
    box-shadow: 0 18px 48px rgba(43, 33, 48, 0.18);
}

/* A desktop page with a phone overlapping its corner */
.wk-hero--desk {
    background: linear-gradient(135deg, #F2E8ED 0%, #E7D6DF 100%);
}

.wk-hero--desk .wk-desk {
    position: absolute;
    left: 6%;
    top: 9%;
    width: 78%;
    height: 100%;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 18px 48px rgba(43, 33, 48, 0.18);
}

.wk-hero--desk .wk-phone {
    position: absolute;
    right: 5%;
    bottom: -7%;
    width: 21%;
    aspect-ratio: 375 / 812;   /* a phone-shaped window; tall captures show their top */
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 18px 48px rgba(43, 33, 48, 0.22);
}

.wk-hero--desk .wk-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* A phone-shaped video, centred on the wash */
.wk-hero--video {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #F2E8ED 0%, #E7D6DF 100%);
}

.wk-hero--video video {
    display: block;
    height: 88%;
    width: auto;
    /* the recording has the phone's own black corners; round in proportion so they never peek out */
    border-radius: 11.5% / 5.3%;
    background: #fff;
    box-shadow: 0 18px 48px rgba(43, 33, 48, 0.22);
}

/* A dark slide crop shown whole */
.wk-hero--dark { background: #121212; }
.wk-hero--dark img { object-fit: contain; object-position: center; padding: 3% 4%; }

/* Tile link to the case study */
.wk-hero a, .wk-tile-title a { display: block; color: inherit; }
.wk-hero a { height: 100%; }

.wk-more {
    grid-column: 2;
    margin: 4px 0 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--rose);
}

.wk-more a { color: var(--rose); border-bottom: 1px solid transparent; transition: border-color 200ms ease; }
.wk-more a:hover { border-color: var(--rose); }

/* ==========================================================
   Case-study pages
   ========================================================== */
.cs-back {
    display: inline-block;
    margin-top: clamp(40px, 6vh, 64px);
    font-size: 14px;
    color: var(--subtle);
    transition: color 200ms ease;
}

.cs-back:hover { color: var(--ink); }

.cs-head {
    padding-top: clamp(24px, 4vh, 40px);
    max-width: 860px;
}

.cs-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(34px, 5vw, 56px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.cs-facts {
    margin: 22px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 32px;
    font-size: 15px;
    color: var(--muted);
}

.cs-facts div { display: flex; gap: 8px; }
.cs-facts dt { font-weight: 600; color: var(--ink); }
.cs-facts dd { margin: 0; }

.cs-hero { margin-top: clamp(36px, 5vw, 56px); }

.cs-story {
    margin: clamp(36px, 5vw, 56px) 0 0;
    max-width: var(--reading-max);
    font-size: clamp(17px, 1.6vw, 19px);
    line-height: 1.6;
    color: var(--muted);
    text-wrap: pretty;
}

.cs-story strong { font-weight: 600; color: var(--ink); }

.cs-section {
    margin-top: clamp(64px, 9vh, 104px);
    padding-top: 32px;
    border-top: 0;
}

.cs-section-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    max-width: 760px;
    text-wrap: balance;
}

.cs-figure { margin: 28px 0 0; }

.cs-figure img,
.cs-figure video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
    background: var(--btn-wash);
}

.cs-figure figcaption,
.cs-caption {
    margin: 14px 0 0;
    max-width: var(--reading-max);
    font-size: 15px;
    line-height: 1.55;
    color: var(--muted);
    text-wrap: pretty;
}

/* A row of phone screens */
.cs-phones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
}

.cs-phones img {
    width: 100%;
    aspect-ratio: 750 / 1300;
    object-fit: cover;
    object-position: top;
    border-radius: 28px;   /* at least the frames' own corner radius at their largest rendered size */
    background: var(--btn-wash);
    box-shadow: 0 10px 30px rgba(43, 33, 48, 0.10);
}

.cs-phones--tall img { aspect-ratio: 375 / 812; }
.cs-phones--3 { max-width: 760px; }
.cs-phones--2 { max-width: 500px; }

/* A tall page shown inside a scrollable frame */
.cs-scroll {
    max-height: 640px;
    overflow-y: auto;
    border-radius: 14px;
    border: 1px solid var(--hairline);
    background: #fff;
}

.cs-scroll img { border-radius: 0; }

/* Portrait video on the wash */
.cs-video--phone {
    display: flex;
    justify-content: center;
    padding: 28px;
    border-radius: 16px;
    background: linear-gradient(135deg, #F2E8ED 0%, #E7D6DF 100%);
}

.cs-video--phone video {
    width: 100%;
    max-width: 300px;
    border-radius: 22px;
    box-shadow: 0 18px 48px rgba(43, 33, 48, 0.18);
}

.cs-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 860px) {
    .wk-more { grid-column: auto; }
    .wk-hero--screens { padding: 5% 4%; gap: 3%; }
    .wk-hero--screens img { width: 28%; }
    .cs-two { grid-template-columns: 1fr; }
    .cs-scroll { max-height: 480px; }
}

/* Two phones side by side with Before / After labels, rising from the bottom edge */
.wk-hero--compare {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 6%;
    padding: 5% 10% 0;
    background: linear-gradient(135deg, #F2E8ED 0%, #E7D6DF 100%);
}

.wk-hero--compare figure {
    margin: 0;
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.wk-hero--compare figcaption {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rose);
}

.wk-hero--compare img {
    width: 100%;
    height: auto;
    object-fit: unset;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 18px 48px rgba(43, 33, 48, 0.22);
}

@media (max-width: 860px) {
    .wk-hero--compare { padding: 6% 6% 0; gap: 5%; }
    .wk-hero--compare figure { width: 36%; }
}

/* Project + dates line under the tile title, role on the line after */
.wk-tile-title + .wk-meta {
    margin: 14px 0 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--muted);
}

.wk-meta + .wk-role { margin-top: 2px; }

/* ==========================================================
   Bonus tile (Polyvore): same hierarchy as the project tiles,
   plus one embedded video and one quote underneath
   ========================================================== */
.wk-bonus { margin-top: clamp(64px, 9vh, 112px); }

.wk-tile-eyebrow { margin: 0 0 20px; }

/* A finished graphic shown as a card on the wash, not stretched to fill */
.wk-hero--card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6%;
    background: linear-gradient(135deg, #F2E8ED 0%, #E7D6DF 100%);
}

.wk-hero--card img {
    width: 100%;
    max-width: 780px;
    height: auto;
    object-fit: unset;
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(43, 33, 48, 0.18);
}

.wk-bonus-media {
    margin-top: clamp(28px, 4vw, 44px);
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(28px, 5vw, 72px);
    row-gap: 12px;
    align-items: center;
}

.wk-bonus-media iframe {
    grid-column: 1;
    grid-row: 1;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 14px;
    background: var(--btn-wash);
}

.wk-bonus-quote {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
}

.wk-bonus-quote p { font-size: clamp(19px, 1.8vw, 22px); }
.wk-bonus-quote cite a { border-bottom: 1px solid var(--btn-border); }
.wk-bonus-quote cite a:hover { color: var(--ink); border-color: var(--ink); }

@media (max-width: 860px) {
    .wk-hero--card { padding: 8%; }
    .wk-bonus-media { grid-template-columns: 1fr; }
    .wk-bonus-media iframe, .wk-bonus-quote { grid-column: 1; grid-row: auto; }
    .wk-bonus-quote { margin-top: 16px; }
}

/* ==========================================================
   Page entrance: each block fades in and rises a few pixels, one beat apart
   (runs when the gate paints, and again when a decrypted page is written)
   ========================================================== */
@keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.lock,
.wk > * {
    animation: rise 640ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.wk > :nth-child(2) { animation-delay: 70ms; }
.wk > :nth-child(3) { animation-delay: 140ms; }
.wk > :nth-child(4) { animation-delay: 210ms; }
.wk > :nth-child(5) { animation-delay: 280ms; }
.wk > :nth-child(6) { animation-delay: 350ms; }
.wk > :nth-child(n + 7) { animation-delay: 420ms; }

/* Reduced motion: keep the fade, drop the movement */
@keyframes fade-only {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Behind the curtain, the page rises further and a beat later, as if pulled up by it */
@keyframes rise-far {
    from { opacity: 0; transform: translateY(56px); }
    to   { opacity: 1; transform: none; }
}

.has-curtain .wk > * { animation: rise-far 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.has-curtain .wk > :nth-child(1) { animation-delay: 260ms; }
.has-curtain .wk > :nth-child(2) { animation-delay: 320ms; }
.has-curtain .wk > :nth-child(3) { animation-delay: 380ms; }
.has-curtain .wk > :nth-child(4) { animation-delay: 440ms; }
.has-curtain .wk > :nth-child(5) { animation-delay: 500ms; }
.has-curtain .wk > :nth-child(6) { animation-delay: 560ms; }
.has-curtain .wk > :nth-child(n + 7) { animation-delay: 620ms; }

@media (prefers-reduced-motion: reduce) {
    .lock, .wk > *, .has-curtain .wk > * { animation-name: fade-only; }
}

/* The gate form's entrance must not keep its fill after it ends, or the recede transition
   (.lock.is-receding) could never take over. Must come after the entrance rules above. */
.lock { animation-fill-mode: backwards; }

/* --- Custom cursor: rose dot + ring (cursor.js adds html.has-cursor on fine-pointer devices) --- */
html.has-cursor,
html.has-cursor a,
html.has-cursor button,
html.has-cursor label { cursor: none; }
html.has-cursor input,
html.has-cursor textarea,
html.has-cursor select { cursor: auto; }

.cur-dot, .cur-ring {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    pointer-events: none;
    border-radius: 50%;
    opacity: 0;
    will-change: transform;
    transition: opacity 180ms ease, width 260ms cubic-bezier(0.2, 0.7, 0.2, 1), height 260ms cubic-bezier(0.2, 0.7, 0.2, 1), background 180ms ease;
}

.cur-dot { width: 8px; height: 8px; background: var(--rose); }
.cur-ring { width: 34px; height: 34px; border: 1.5px solid var(--rose); }

html.cur-visible .cur-dot { opacity: 1; }
html.cur-visible .cur-ring { opacity: 0.55; }
html.cur-active .cur-ring { width: 54px; height: 54px; opacity: 0.9; }
html.cur-active .cur-dot { width: 5px; height: 5px; }
html.cur-down .cur-ring { width: 40px; height: 40px; }
html.cur-text .cur-dot, html.cur-text .cur-ring { opacity: 0; }

/* --- Hover language: soft pills, gentle lifts --- */
.btn { transition: background 200ms ease, opacity 200ms ease, transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 220ms ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(43, 33, 48, 0.14); }
.btn-primary:disabled:hover { transform: none; box-shadow: none; }

.wk-links a,
.cs-back {
    padding: 6px 12px;
    margin: -6px -8px;
    border-radius: 999px;
    transition: background 200ms ease, color 200ms ease;
}
.wk-links a:hover, .cs-back:hover { background: var(--btn-wash); color: var(--ink); }

.lock-contact a,
.wk-bonus-quote cite a,
.wk-voice cite a {
    padding: 2px 8px;
    margin: -2px -8px;
    border-radius: 999px;
    border-bottom: 0;
    transition: background 200ms ease, color 200ms ease;
}
.lock-contact a:hover, .wk-bonus-quote cite a:hover, .wk-voice cite a:hover { background: var(--btn-wash); color: var(--ink); border-bottom: 0; }


/* --- Scroll reveal (reveal.js adds .reveal below the fold, then .is-in when it scrolls into view) --- */
.reveal {
    animation: none !important;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.is-in { opacity: 1; transform: none; }

/* --- Copied feedback --- */
.is-copied { color: var(--rose) !important; }
.copy-toast {
    font-size: 13px;
    font-weight: 500;
    color: var(--rose);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 200ms ease, transform 200ms ease;
}
.copy-toast.is-on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .reveal { transform: none; transition: opacity 500ms ease; }
}

/* Inside a revealing tile, the hero lands first, then the head, then the facts */
.wk-tile.reveal .wk-hero,
.wk-tile.reveal .wk-tile-head,
.wk-tile.reveal .wk-facts,
.wk-tile.reveal .wk-aside,
.wk-tile.reveal .wk-bonus-media {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.wk-tile.reveal.is-in .wk-hero,
.wk-tile.reveal.is-in .wk-tile-head,
.wk-tile.reveal.is-in .wk-facts,
.wk-tile.reveal.is-in .wk-aside,
.wk-tile.reveal.is-in .wk-bonus-media { opacity: 1; transform: none; }
.wk-tile.reveal.is-in .wk-tile-head { transition-delay: 140ms; }
.wk-tile.reveal.is-in .wk-facts { transition-delay: 240ms; }
.wk-tile.reveal.is-in .wk-aside { transition-delay: 320ms; }
.wk-tile.reveal.is-in .wk-bonus-media { transition-delay: 360ms; }
.wk-tile.reveal .wk-hero { transition: none; opacity: 1; transform: none; } /* the tile itself carries the hero's motion */

@media (prefers-reduced-motion: reduce) {
    .wk-tile.reveal .wk-tile-head, .wk-tile.reveal .wk-facts, .wk-tile.reveal .wk-aside, .wk-tile.reveal .wk-bonus-media { transform: none; }
}

.copy-check { display: inline-block; vertical-align: -2px; margin-right: 2px; }

/* --- Dividers: on wide screens the layout separates sections by itself; below 860px, where
   sections stack, a fine row of dots marks each boundary --- */
.wk-tile, .wk-quotes, .cs-section, .site-footer {
    border-top: 0;
    position: relative;
}

@media (max-width: 860px) {
    .wk-tile::before, .wk-quotes::before, .cs-section::before, .site-footer::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 2px;
        background-image: radial-gradient(circle, var(--btn-border) 1px, transparent 1.2px);
        background-size: 9px 2px;
        background-repeat: repeat-x;
        pointer-events: none;
    }
}