/* holos.works - Wabi-Sabi Workshop */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--clay-white:#F5F0E8;--earth-dark:#1A1410;--kintsugi-gold:#C9A96E;--kiln-ash:#8A7E72;--raw-clay:#D4C4A8;--glaze-cream:#EDE6DA;--charcoal:#3A3430;--rust:#8B5E3C}

body{font-family:'Crimson Pro',serif;font-weight:400;font-size:1rem;line-height:1.9;color:var(--charcoal);background:var(--clay-white);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");overflow-x:hidden}

#threshold{height:100vh;position:relative;display:flex;align-items:flex-end;padding:0 0 15vh 10%}

.kintsugi-crack{position:absolute;top:20%;right:5%;width:40%;max-width:400px;opacity:0;transition:opacity 0.3s ease}
.kintsugi-crack.visible{opacity:1}

.crack-line{stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 1.2s ease-in-out}
.crack-line.drawn{stroke-dashoffset:0}

.site-title{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(1.8rem,3.5vw,2.8rem);letter-spacing:0.04em;color:var(--charcoal);opacity:0;transition:opacity 0.8s ease}
.site-title.visible{opacity:1}

#fragments{padding:120px 5% 80px;max-width:900px}

.fragment{max-width:480px;padding:2rem;margin-bottom:120px;opacity:0;transition:opacity 1s ease}
.fragment.visible{opacity:1}
.fragment-sm{max-width:320px}
.fragment-md{max-width:420px;background:var(--glaze-cream)}
.fragment-lg{max-width:480px}

#golden-seam{background:var(--earth-dark);height:120px;display:flex;align-items:center;overflow:hidden}

.seam-line{width:100%;height:40px}
.seam-path{stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 2s ease-in-out}
.seam-path.drawn{stroke-dashoffset:0}

#wholeness{padding:160px 5%;display:flex;justify-content:center}

.wholeness-block{max-width:480px;padding:2.5rem;position:relative;border:2px dashed var(--raw-clay);opacity:0;transition:opacity 1s ease}
.wholeness-block.visible{opacity:1}

.repair-border{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}

.gold-repair{position:absolute;width:12px;height:2px;background:var(--kintsugi-gold);opacity:0;transition:opacity 0.3s ease 0.2s}
.wholeness-block.visible .gold-repair{opacity:1}

#kiln{background:var(--earth-dark);padding:80px 5%;text-align:center}

.kiln-text{font-family:'Alegreya Sans',sans-serif;font-weight:400;font-size:0.8rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--kiln-ash)}

.kiln-mark{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:1.2rem;color:var(--kintsugi-gold);margin-top:0.5rem;letter-spacing:0.04em}