/*
 * Copyright (c) 2026
 * Filename: site.css
 * Author: Michael Taciroglu
 * Date Created: September 28, 2026
 * Description: Shared styles for every page of the Oceanus Reiki static site.
 */

:root {
    color-scheme: light;

    /* Palette sampled from the logo (navy, ocean, lotus) and the backdrop art (cream, rose). */
    --cream: #f9f4ec;
    --ink: #1f2b4a;
    --ink-soft: #4b5775;
    --navy: #173a7a;
    --ocean: #2e6fc2;
    --sky: #9cc3ee;
    --lavender: #9d8fd6;
    --lotus: #ddd6f3;
    --gold: #8f5f14;
    --panel: rgb(255 251 245 / 0.66);
    --panel-edge: rgb(255 255 255 / 0.75);
    --shadow: 0 2.5rem 5rem -3rem rgb(23 58 122 / 0.35);

    --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
    --sans: "Nunito Sans", "Segoe UI", system-ui, sans-serif;

    --radius: 1.75rem;
    --measure: 38rem;
    --gutter: clamp(1rem, 4vw, 3rem);
    --header-h: 4.75rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font: 400 1.0625rem/1.75 var(--sans);
    color: var(--ink);
    background: var(--cream);
    overflow-x: clip;
}

/* A fixed pseudo-element rather than background-attachment: fixed, which iOS ignores. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--cream) url("../img/backdrop-1024.webp") center / cover no-repeat;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3 {
    margin: 0 0 0.5em;
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.1;
    color: var(--navy);
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.6rem, 5vw + 1rem, 5.25rem);
}

h2 {
    font-size: clamp(2rem, 2.5vw + 1rem, 3.25rem);
}

h3 {
    font-size: clamp(1.55rem, 1vw + 1.1rem, 2rem);
}

p {
    margin: 0 0 1em;
    text-wrap: pretty;
}

a {
    color: var(--ocean);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

a:hover {
    color: var(--navy);
}

:focus-visible {
    outline: 2px solid var(--ocean);
    outline-offset: 3px;
    border-radius: 4px;
}

ul {
    padding-left: 1.25rem;
}

li::marker {
    color: var(--lavender);
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 20;
    padding: 0.6rem 1rem;
    border-radius: 999px;
    background: var(--navy);
    color: #fff;
}

.skip-link:focus {
    top: 1rem;
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1rem;
    font: 700 0.78rem/1.2 var(--sans);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
}

.eyebrow::before,
.eyebrow--center::after {
    content: "";
    width: 2.25rem;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}

.eyebrow--center {
    justify-content: center;
}

/* ---------- Header ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--header-h);
    padding: 0.75rem var(--gutter);
    background: linear-gradient(to bottom, rgb(249 244 236 / 0.8), rgb(249 244 236 / 0.45));
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 1px solid rgb(255 255 255 / 0.5);
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--navy);
    text-decoration: none;
}

.brand img {
    width: 3rem;
    height: 3rem;
}

.brand__name {
    font: 600 1.4rem/1 var(--serif);
    letter-spacing: 0.02em;
}

.brand__name small {
    display: block;
    margin-top: 0.2rem;
    font: 700 0.6rem/1.4 var(--sans);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.site-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav a {
    display: block;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
}

.site-nav a:hover {
    background: rgb(255 255 255 / 0.65);
    color: var(--navy);
}

.site-nav a[aria-current="page"] {
    background: var(--navy);
    color: #fff;
}

/* ---------- Buttons and forms ---------- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.95rem 1.7rem;
    border: 0;
    border-radius: 999px;
    font: 700 0.95rem/1 var(--sans);
    letter-spacing: 0.04em;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, var(--ocean), var(--navy));
    box-shadow: 0 14px 30px -14px rgb(23 58 122 / 0.7);
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
}

.button:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -14px rgb(23 58 122 / 0.8);
}

.button--ghost {
    color: var(--navy);
    background: rgb(255 255 255 / 0.62);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 0 0 1px rgb(23 58 122 / 0.25);
}

.button--ghost:hover {
    color: var(--navy);
    box-shadow: inset 0 0 0 1px rgb(23 58 122 / 0.45);
}

.field {
    display: grid;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

.field label {
    font-size: 0.9rem;
    font-weight: 700;
}

.field select,
.field input {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid rgb(23 58 122 / 0.22);
    border-radius: 0.9rem;
    font: inherit;
    color: var(--ink);
    background: rgb(255 255 255 / 0.82);
}

/* ---------- Panels, notes, dividers ---------- */

.panel {
    max-width: var(--measure);
    padding: clamp(1.5rem, 3.5vw, 3rem);
    border: 1px solid var(--panel-edge);
    border-radius: var(--radius);
    background: var(--panel);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    backdrop-filter: blur(18px) saturate(1.15);
    box-shadow: var(--shadow);
}

.panel > :last-child {
    margin-bottom: 0;
}

.note {
    max-width: 44rem;
    margin: clamp(2rem, 5vw, 4rem) auto;
    padding-inline: var(--gutter);
    text-align: center;
    color: var(--ink-soft);
}

.wave-rule {
    display: block;
    width: 7.5rem;
    height: 1.25rem;
    margin: 2.75rem auto;
    color: var(--lavender);
}

/* ---------- Hero ---------- */

.hero {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    min-height: min(92svh, 60rem);
    margin-top: calc(-1 * var(--header-h));
    padding: calc(var(--header-h) + 2rem) var(--gutter) clamp(6rem, 14vw, 11rem);
    overflow: hidden;
    text-align: center;
}

/* Titles sit low so the photo's subject, usually upper-centre, stays uncovered. */
.hero--page {
    place-items: end center;
    min-height: min(76svh, 46rem);
    padding-bottom: clamp(3.5rem, 6vw, 5rem);
}

.hero__media,
.hero__media img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__media img {
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

/* Soft cream bloom behind the title so it reads over bright skies. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 55% 45% at 50% 45%, rgb(249 244 236 / 0.7), transparent 75%);
}

.hero__content {
    max-width: 48rem;
}

/* Inner-page heroes use busier photos than the home cover, so the title gets a frosted halo. */
.hero--page .hero__content {
    padding: 1.75rem clamp(1.5rem, 4vw, 3rem) 1.25rem;
    border: 1px solid var(--panel-edge);
    border-radius: var(--radius);
    background: rgb(249 244 236 / 0.55);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.hero--page h1 {
    margin-bottom: 0.2em;
}

/* Square and tall art would crop to its middle; keep the subject in frame. */
.hero__media--upper img {
    object-position: center 8%;
}

/* Wide art whose subject is off-centre; only matters once a narrow screen crops the sides. */
.hero__media--left img {
    object-position: 22% center;
}

.hero__media--right img {
    object-position: 74% center;
}

.hero__logo {
    width: clamp(7rem, 16vw, 11rem);
    margin: 0 auto 1.5rem;
    filter: drop-shadow(0 0 2.5rem rgb(255 255 255 / 0.9));
}

.hero__lede {
    font: 500 italic clamp(1.25rem, 1.2vw + 1rem, 1.7rem)/1.4 var(--serif);
    color: var(--ink);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

.waves {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    width: 100%;
    height: clamp(4rem, 9vw, 8rem);
}

.waves path {
    fill: none;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

/* ---------- Flow: an image bleeding off one edge, a panel overlapping its fade ---------- */

.flow {
    --fade-x: linear-gradient(to right, #000 45%, transparent 96%);
    --fade-y: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);

    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
    padding-block: clamp(2rem, 6vw, 6rem);
}

.flow--reverse {
    --fade-x: linear-gradient(to left, #000 45%, transparent 96%);
}

/* Consecutive sections overlap so one photo's feathered edge runs into the next. */
.flow + .flow {
    margin-top: clamp(-10rem, -9vw, -2rem);
}

/* The mask sits on the container, not the img, so the scroll parallax moves the photo
   under a fixed feather instead of dragging the faded edge out past the clip. */
.flow__media {
    grid-row: 1;
    grid-column: 1 / 9;
    overflow: hidden;
    -webkit-mask-image: var(--fade-x), var(--fade-y);
    -webkit-mask-composite: source-in;
    mask-image: var(--fade-x), var(--fade-y);
    mask-composite: intersect;
}

.flow__media img {
    width: 100%;
    height: clamp(26rem, 72vh, 48rem);
    object-fit: cover;
}

.flow__panel {
    position: relative;
    z-index: 1;
    grid-row: 1;
    grid-column: 7 / 12;
}

.flow--reverse .flow__media {
    grid-column: 5 / -1;
}

.flow--reverse .flow__panel {
    grid-column: 2 / 7;
}

/* Portrait art gets a narrower, taller column. */
.flow--tall .flow__media {
    grid-column: 1 / 7;
}

.flow--tall .flow__media img {
    height: clamp(32rem, 92vh, 58rem);
    object-position: center 30%;
}

.flow--tall .flow__panel {
    grid-column: 6 / 12;
}

/* Square art dissolves from the centre outward instead of bleeding off an edge. */
.flow--orb .flow__media {
    grid-column: 6 / 12;
    -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
}

.flow--orb .flow__media img {
    height: auto;
    aspect-ratio: 1;
}

.flow--orb .flow__panel {
    grid-column: 2 / 7;
}

/* ---------- Split: sticky image beside a long list ---------- */

.split {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    padding-block: clamp(2rem, 5vw, 5rem);
}

.split__media {
    position: sticky;
    top: calc(var(--header-h) + 1rem);
    grid-row: 1;
    grid-column: 1 / 6;
    height: calc(100svh - var(--header-h) - 2rem);
}

.split__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-mask-image: linear-gradient(to right, #000 50%, transparent 98%),
        linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, #000 50%, transparent 98%),
        linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
    mask-composite: intersect;
}

.split__body {
    grid-row: 1;
    grid-column: 6 / 12;
    padding-inline: var(--gutter);
}

.split--reverse .split__media {
    grid-column: 8 / -1;
}

.split--reverse .split__media img {
    -webkit-mask-image: linear-gradient(to left, #000 50%, transparent 98%),
        linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to left, #000 50%, transparent 98%),
        linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}

.split--reverse .split__body {
    grid-column: 2 / 8;
}

/* ---------- Offers: classes, treatments, meditations ---------- */

.offer + .offer {
    margin-top: 3.25rem;
    padding-top: 3.25rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20'%3E%3Cpath d='M2 10c12-8 24-8 36 0s24 8 36 0 24-8 36 0' fill='none' stroke='%239d8fd6' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") top left / 7.5rem 1.25rem no-repeat;
}

.offer h3 {
    margin-bottom: 0.4em;
}

.offer__aside {
    display: block;
    margin-top: 0.25rem;
    font: 500 italic 1.15rem/1.3 var(--serif);
    color: var(--ink-soft);
}

.cost {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.85rem;
    margin-top: 1.25rem;
    padding: 0.85rem 1.15rem;
    border: 1px solid var(--panel-edge);
    border-radius: 1rem;
    background: rgb(255 255 255 / 0.55);
}

.cost__label {
    font: 700 0.72rem/1 var(--sans);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
}

.cost strong {
    font: 600 1.35rem/1 var(--serif);
    color: var(--navy);
}

/* Meditations laid out in a gentle zig-zag rather than a column of equal boxes. */
.meander {
    max-width: 64rem;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 5rem) var(--gutter);
}

.meander .offer {
    max-width: 36rem;
}

.meander .offer:nth-of-type(even) {
    margin-left: auto;
}

.section-head {
    max-width: 40rem;
    margin: 0 auto 2.5rem;
    padding-inline: var(--gutter);
    text-align: center;
}

.meander .section-head {
    padding-inline: 0;
}

/* ---------- The Oceanus path: numbered steps joined by a flowing line ---------- */

.path {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.path::before {
    content: "";
    position: absolute;
    left: 1.6rem;
    top: 1.5rem;
    bottom: 3rem;
    width: 2px;
    background: linear-gradient(var(--sky), var(--lavender), var(--ocean));
    opacity: 0.7;
}

.path__step {
    display: grid;
    grid-template-columns: 3.25rem 1fr;
    gap: 1.25rem;
    padding-bottom: 2.5rem;
}

.path__num {
    position: relative;
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    font: 600 1.3rem/1 var(--serif);
    color: #fff;
    background: radial-gradient(circle at 30% 30%, var(--sky), var(--ocean) 65%, var(--navy));
    box-shadow: 0 0 0 6px rgb(255 255 255 / 0.65), 0 10px 30px -10px var(--ocean);
}

/* ---------- Register (PayPal) ---------- */

.register {
    display: grid;
    place-items: center;
    padding: clamp(2rem, 6vw, 6rem) var(--gutter);
}

.register .panel {
    width: 100%;
    max-width: 32rem;
}

.register form {
    margin-top: 1.5rem;
}

.register .button {
    width: 100%;
    margin-top: 0.5rem;
}

.register__small {
    margin-top: 1rem;
    font-size: 0.85rem;
    text-align: center;
    color: var(--ink-soft);
}

/* ---------- Home: ICRT credit ---------- */

.credit {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: 52rem;
    margin: 0 auto clamp(3rem, 6vw, 5rem);
    padding-inline: var(--gutter);
    font-size: 0.9rem;
    color: var(--ink-soft);
}

.credit img {
    flex: none;
    width: 5rem;
    mix-blend-mode: multiply;
}

.credit p {
    margin: 0;
}

/* ---------- Long-form documents (ICRT pages) ---------- */

.document {
    max-width: 48rem;
    margin: clamp(2rem, 6vw, 5rem) auto;
    padding-inline: var(--gutter);
}

.document .panel {
    max-width: none;
}

.document ol {
    margin: 0;
    padding-left: 1.5rem;
}

.document li {
    padding-left: 0.4rem;
    margin-bottom: 1rem;
}

.document li::marker {
    font: 600 1.15rem var(--serif);
    color: var(--ocean);
}

/* ---------- Footer ---------- */

.site-footer {
    position: relative;
    isolation: isolate;
    margin-top: clamp(3rem, 8vw, 6rem);
    padding: clamp(5rem, 10vw, 8rem) var(--gutter) 2.5rem;
    text-align: center;
    background: linear-gradient(to bottom, transparent, rgb(221 214 243 / 0.55) 45%, rgb(156 195 238 / 0.45));
}

.site-footer .waves {
    top: 0;
    bottom: auto;
}

.site-footer .brand {
    justify-content: center;
    margin-bottom: 1.5rem;
}

.site-footer nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.site-footer nav a {
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
}

.site-footer nav a:hover {
    color: var(--ocean);
}

.site-footer small {
    color: var(--ink-soft);
}

/* ---------- Motion (progressive enhancement) ---------- */

@keyframes drift {
    from {
        transform: scale(1.04);
    }

    to {
        transform: scale(1.12) translate(-1%, -1%);
    }
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(2.5rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes float {
    from {
        transform: translateY(-4%) scale(1.08);
    }

    to {
        transform: translateY(4%) scale(1.08);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .hero__media img {
        animation: drift 40s ease-in-out infinite alternate;
    }

    @supports (animation-timeline: view()) {
        /* A fixed distance, not a percentage: a percentage of a tall panel's range would
           leave one already on screen at load partly transparent. */
        .reveal {
            animation: rise linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 12rem;
        }

        .flow__media img {
            animation: float linear both;
            animation-timeline: view();
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ---------- Wide screens ---------- */

@media (min-width: 64em) {
    body::before {
        background-image: url("../img/backdrop-1600.webp");
    }
}

/* ---------- Narrow screens: stack, and fade images downward instead of sideways ---------- */

@media (max-width: 52em) {
    .site-header {
        position: relative;
        flex-direction: column;
        gap: 0.4rem;
        padding-block: 0.6rem;
    }

    .site-nav a {
        padding: 0.35rem 0.75rem;
        font-size: 0.9rem;
    }

    .hero {
        margin-top: 0;
        padding-top: 2.5rem;
    }

    .flow,
    .split {
        grid-template-columns: minmax(0, 1fr);
    }

    .flow__media,
    .flow--reverse .flow__media,
    .flow--tall .flow__media,
    .split__media,
    .split--reverse .split__media {
        grid-column: 1;
        grid-row: 1;
    }

    .flow__panel,
    .flow--reverse .flow__panel,
    .flow--tall .flow__panel,
    .flow--orb .flow__panel,
    .split__body,
    .split--reverse .split__body {
        grid-column: 1;
        grid-row: 2;
    }

    .flow {
        --fade-x: linear-gradient(#000, #000);
        --fade-y: linear-gradient(to bottom, transparent, #000 12%, #000 55%, transparent);
    }

    .flow__media img,
    .flow--tall .flow__media img {
        height: clamp(20rem, 70vw, 30rem);
    }

    .flow--orb .flow__media img {
        height: auto;
    }

    .flow__panel {
        margin: -7rem var(--gutter) 0;
    }

    .flow--orb .flow__media {
        grid-column: 1;
        width: min(26rem, 90%);
        margin-inline: auto;
    }

    .flow--orb .flow__panel {
        margin-top: -3rem;
    }

    .split__media {
        position: relative;
        top: auto;
        height: clamp(18rem, 65vw, 28rem);
    }

    .split__media img,
    .split--reverse .split__media img {
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 55%, transparent);
        mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 55%, transparent);
    }

    .split__body {
        margin-top: -3rem;
    }

    .credit {
        flex-direction: column;
        text-align: center;
    }
}