/* HHASSL.com — wabi-sabi vessels studio */

:root {
    --kiln-ash: #f5f0e8;
    --wet-clay: #e8ddd0;
    --charcoal-slip: #3a3530;
    --warm-graphite: #6b6158;
    --terracotta: #c4826e;
    --ochre: #d4a574;
    --moss: #8b9a7b;
    --gold: #c9a84c;
    --smoke: #2a2520;

    --font-hand: "Caveat", "Kalam", cursive;
    --font-body: "Karla", "Inter", system-ui, sans-serif;
    --font-accent: "Kalam", "Caveat", cursive;
}

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

html, body {
    background: var(--kiln-ash);
    color: var(--charcoal-slip);
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    scroll-snap-type: y proximity;
    min-height: 100vh;
    position: relative;
}

/* ---------- Grain Overlay (animated SVG noise) ---------- */
.grain-overlay {
    position: fixed;
    inset: -10px;
    pointer-events: none;
    z-index: 9000;
    opacity: 0.05;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.14  0 0 0 0 0.12  0 0 0 0.85 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 200px 200px;
    background-repeat: repeat;
    mix-blend-mode: multiply;
    animation: grain-shift 0.5s steps(6) infinite;
}

@keyframes grain-shift {
    0%   { background-position: 0 0; }
    16%  { background-position: -1px 1px; }
    33%  { background-position: 2px -1px; }
    50%  { background-position: -2px 0; }
    66%  { background-position: 1px 2px; }
    83%  { background-position: 0 -2px; }
    100% { background-position: 0 0; }
}

/* ---------- Floating Decorative Layer ---------- */
.floating-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.float-mark {
    position: absolute;
    will-change: transform;
    transform: translate3d(var(--px, 0), var(--py, 0), 0) rotate(var(--rot, 0deg));
    transition: transform 60ms linear;
}

/* ---------- Navigation ---------- */
.nav {
    position: fixed;
    top: 28px;
    left: 36px;
    z-index: 9100;
    display: flex;
    align-items: center;
    gap: 18px;
}

.nav-links {
    display: flex;
    gap: 22px;
    transition: opacity 600ms ease, transform 600ms ease;
    font-family: var(--font-accent);
    font-weight: 400;
    font-size: 1.05rem;
}

.nav-link {
    color: var(--warm-graphite);
    text-decoration: none;
    letter-spacing: 0.02em;
    position: relative;
    padding: 4px 2px;
    transition: color 400ms ease, transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 0;
    background: var(--gold);
    transition: width 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-link:hover {
    color: var(--charcoal-slip);
    transform: scale(1.04);
}

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

.nav.collapsed .nav-links {
    opacity: 0;
    transform: translateX(-12px);
    pointer-events: none;
}

.nav-enso {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 4px;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 600ms ease, transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav.collapsed .nav-enso {
    opacity: 1;
    transform: scale(1);
}

.nav-enso:hover { transform: scale(1.06) rotate(-3deg); }
.nav-enso svg path { transition: stroke 400ms ease; }

/* ---------- Sections ---------- */
.section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 8vw;
    scroll-snap-align: start;
    z-index: 2;
    isolation: isolate;
    transition: background 1200ms ease;
}

.section-inner {
    position: relative;
    width: 100%;
    max-width: 980px;
    z-index: 2;
}

/* Section backgrounds — washi & stoneware textures via gradients */
.section-hero {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(212,165,116,0.18), transparent 60%),
        radial-gradient(ellipse at 80% 80%, rgba(196,130,110,0.12), transparent 55%),
        linear-gradient(180deg, #f7f2ea 0%, var(--kiln-ash) 100%);
}

.section-dense {
    background:
        radial-gradient(circle at 20% 30%, rgba(139,154,123,0.08), transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(107,97,88,0.10), transparent 55%),
        linear-gradient(180deg, var(--kiln-ash) 0%, var(--wet-clay) 100%);
}

.section-sparse {
    background:
        radial-gradient(ellipse at 60% 40%, rgba(212,165,116,0.14), transparent 60%),
        linear-gradient(180deg, var(--wet-clay) 0%, #e2d4c3 100%);
}

#kintsugi {
    background:
        radial-gradient(circle at 70% 30%, rgba(201,168,76,0.10), transparent 55%),
        radial-gradient(circle at 20% 80%, rgba(196,130,110,0.16), transparent 60%),
        linear-gradient(180deg, #e2d4c3 0%, #d8c5b0 100%);
}

#tea {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(196,130,110,0.18), transparent 60%),
        linear-gradient(180deg, #d8c5b0 0%, #ccb39a 100%);
}

/* Soft section transitions via mask */
.section + .section {
    mask-image: linear-gradient(180deg, transparent 0, black 100px, black calc(100% - 100px), transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, black 100px, black calc(100% - 100px), transparent 100%);
}

/* ---------- Hero ---------- */
.hero-inner {
    text-align: left;
    max-width: 880px;
}

.margin-note {
    font-family: var(--font-accent);
    color: var(--warm-graphite);
    font-size: 1.1rem;
    margin-bottom: 28px;
    opacity: 0;
    transform: translateY(8px);
    animation: fade-up 1200ms ease 200ms forwards;
}

.hero-title {
    font-family: var(--font-hand);
    font-weight: 700;
    font-size: clamp(3.5rem, 9vw, 8rem);
    line-height: 0.95;
    color: var(--charcoal-slip);
    letter-spacing: -0.01em;
    margin-bottom: 36px;
}

.hero-sub {
    font-size: clamp(1.05rem, 1.4vw, 1.3rem);
    max-width: 560px;
    color: var(--warm-graphite);
    line-height: 1.75;
    opacity: 0;
    animation: fade-up 900ms ease 600ms forwards;
}

.hero-mark {
    margin-top: 60px;
    opacity: 0;
    animation: fade-up 900ms ease 1100ms forwards;
}

.hanko { transform: rotate(-3deg); }

/* ---------- Dense Sections ---------- */
.dense-inner {
    max-width: 720px;
}

.section-title {
    font-family: var(--font-hand);
    font-weight: 600;
    font-size: clamp(2.5rem, 5vw, 5rem);
    line-height: 1.05;
    color: var(--charcoal-slip);
    margin-bottom: 40px;
    letter-spacing: -0.005em;
}

.prose {
    font-size: 1.1rem;
    line-height: 1.85;
    color: var(--charcoal-slip);
    margin-bottom: 24px;
    max-width: 60ch;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 700ms ease, transform 700ms ease;
}

.prose.in-view { opacity: 1; transform: translateY(0); }

.annotation {
    font-family: var(--font-accent);
    color: var(--terracotta);
    font-size: 1.05rem;
    margin-top: 28px;
    transform: rotate(-1deg);
    display: inline-block;
}

.annotation.small { font-size: 0.95rem; opacity: 0.8; }

.craft-list {
    list-style: none;
    margin-top: 36px;
    font-family: var(--font-accent);
    font-size: 1.1rem;
    color: var(--warm-graphite);
}

.craft-list li {
    padding: 8px 0;
    border-bottom: 1px dashed rgba(107,97,88,0.25);
    transition: color 400ms ease, transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.craft-list li:hover {
    color: var(--charcoal-slip);
    transform: translateX(6px);
}

.li-mark { color: var(--gold); margin-right: 10px; font-size: 1.4rem; }

/* ---------- Sparse Sections ---------- */
.sparse-inner {
    max-width: 880px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
}

.floating-image {
    animation: float-gentle 8s ease-in-out infinite;
    filter: saturate(0.6) sepia(0.15) contrast(0.95);
}

.vessel-illo {
    border-radius: 48% 52% 45% 55% / 50% 48% 52% 50%;
    transform: rotate(-1deg);
}

@keyframes float-gentle {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(0.6deg); }
}

.quote-large {
    font-family: var(--font-hand);
    font-size: clamp(1.8rem, 3.6vw, 3.2rem);
    line-height: 1.25;
    max-width: 22ch;
    color: var(--charcoal-slip);
    margin: 0 auto;
}

.quote-large.soft {
    color: var(--warm-graphite);
    font-size: clamp(1.4rem, 2.6vw, 2.4rem);
}

.section-title.pull {
    text-align: center;
}

/* ---------- Contact / Ink Links ---------- */
.contact-row {
    display: flex;
    flex-wrap: wrap;
    gap: 36px;
    justify-content: center;
    margin-top: 12px;
}

.ink-link {
    position: relative;
    font-family: var(--font-accent);
    font-size: 1.25rem;
    color: var(--charcoal-slip);
    text-decoration: none;
    padding: 10px 4px;
    transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1), color 400ms ease;
}

.ink-link svg {
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 14px;
    overflow: visible;
    pointer-events: none;
}

.ink-link svg path {
    stroke: var(--gold);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 700ms cubic-bezier(0.65, 0.05, 0.36, 1);
}

.ink-link:hover {
    transform: scale(1.04);
    color: var(--smoke);
}

.ink-link:hover svg path { stroke-dashoffset: 0; }

/* ---------- Footer ---------- */
.footer {
    position: relative;
    padding: 100px 8vw 80px;
    background: linear-gradient(180deg, #ccb39a 0%, #b89c80 100%);
    color: var(--smoke);
    z-index: 2;
}

.footer-inner {
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
}

.enso-foot { animation: float-gentle 10s ease-in-out infinite; }

.footer-note {
    font-family: var(--font-accent);
    font-size: 1.05rem;
    color: var(--smoke);
}

.footer-note.dim { opacity: 0.6; font-size: 0.95rem; }

/* ---------- Stagger Reveal ---------- */
.stagger-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 360ms ease, transform 360ms ease;
}

.stagger-char.shown { opacity: 1; transform: translateY(0); }

@keyframes fade-up {
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Section warm shifts ---------- */
.shifted-warm { color: var(--smoke); }
.shifted-warmer { color: var(--smoke); }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
    .nav { top: 18px; left: 20px; }
    .nav-links { gap: 14px; font-size: 0.95rem; }
    .section { padding: 100px 6vw; }
    .contact-row { gap: 22px; }
    .floating-layer .float-mark { transform: scale(0.75) translate3d(var(--px,0), var(--py,0), 0); }
}