/* YUVI NATURALS — dynamic editorial UI, draft preview only */
:root{--yuvi-ease:cubic-bezier(.22,.7,.2,1)}
html{scroll-behavior:smooth}
.site-header{position:sticky;top:0;backdrop-filter:blur(14px);background:rgba(255,247,223,.92);transition:box-shadow .3s ease,background .3s ease}
.site-header:after{content:'';position:absolute;bottom:-1px;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,#78966B 50%,transparent);opacity:.55}
.header-cta{border:1px solid rgba(23,61,43,.24);padding:12px 16px;transition:background .25s,color .25s,border-color .25s}.header-cta:hover{background:var(--forest);color:var(--cream);border-color:var(--forest)}
.hero{position:relative;isolation:isolate;overflow:hidden}.hero:before{content:'YUVI  /  NATURALS';position:absolute;z-index:2;left:clamp(20px,3vw,48px);top:50%;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);font-size:9px;letter-spacing:.28em;color:rgba(23,61,43,.48)}.hero-copy{position:relative;z-index:2}.hero .eyebrow{display:flex;align-items:center;letter-spacing:.2em}.hero h1{max-width:590px;font-size:clamp(58px,7vw,100px);line-height:.91;letter-spacing:-.065em}.hero h1 em{display:inline-block;padding:0 .08em .1em;position:relative}.hero h1 em:after{content:'';position:absolute;left:4%;right:0;bottom:0;height:2px;background:#a6b795;transform:scaleX(0);transform-origin:left;animation:yuvi-line 1.1s .55s var(--yuvi-ease) forwards}.hero-text{max-width:370px;font-size:15px}.hero-art{overflow:hidden;background-position:center;background-size:cover;transform:translateZ(0)}.hero-art:before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,247,223,.08),transparent 50%,rgba(23,61,43,.18));pointer-events:none}.hero-art:after{content:'✳';position:absolute;left:9%;top:10%;width:60px;height:60px;display:grid;place-items:center;border:1px solid rgba(255,247,223,.65);border-radius:50%;color:var(--cream);font-size:26px;animation:yuvi-orbit 18s linear infinite}.art-note{box-shadow:0 18px 40px rgba(23,61,43,.15);backdrop-filter:blur(10px);border:1px solid rgba(23,61,43,.12);transition:transform .35s var(--yuvi-ease)}.hero-art:hover .art-note{transform:translateY(-5px) rotate(-2deg)}
/* Editorial chapter divider */
.intro-section{position:relative;overflow:hidden}.intro-section:after{content:'Y';position:absolute;right:-.01em;bottom:-.48em;font:italic 340px/.9 Georgia,serif;color:rgba(120,150,107,.07);pointer-events:none}.intro-content{position:relative;z-index:1}.intro-content h2,.philosophy h2,.products-heading h2,.closing h2{letter-spacing:-.055em}.intro-content p{font-size:14px}.section-kicker{letter-spacing:.22em}
.philosophy{position:relative;overflow:hidden}.philosophy:after{content:'';position:absolute;width:480px;height:480px;border:1px solid rgba(255,247,223,.09);border-radius:50%;right:-160px;top:-170px;box-shadow:0 0 0 38px rgba(255,247,223,.025),0 0 0 78px rgba(255,247,223,.02);pointer-events:none}.philosophy-top,.principles{position:relative;z-index:1}.principles article{transition:transform .35s var(--yuvi-ease),border-color .35s}.principles article:hover{transform:translateY(-7px);border-color:#c1d0a8}.principle-icon{display:inline-grid;place-items:center;width:54px;height:54px;border:1px solid rgba(193,208,168,.45);border-radius:50%;transition:background .3s,transform .3s}.principles article:hover .principle-icon{background:rgba(193,208,168,.12);transform:rotate(-12deg)}
.products-section{overflow:hidden}.products-heading{align-items:end}.products-heading h2{max-width:600px}.product-card{min-width:0}.product-art{isolation:isolate;transition:transform .65s var(--yuvi-ease);transform:translateZ(0)}.product-art:before{content:'';position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.2),transparent 48%,rgba(23,61,43,.1));z-index:-1;transition:opacity .4s}.product-art:after{content:'NATURALLY CONSIDERED';position:absolute;left:18px;bottom:17px;font-size:8px;letter-spacing:.18em;color:rgba(23,61,43,.66)}.product-card{cursor:default}.product-card:hover .product-art{transform:scale(.985)}.product-card:hover .product-stamp{transform:rotate(0deg) scale(1.06);background:rgba(255,247,223,.9)}.product-stamp{transition:transform .45s var(--yuvi-ease),background .35s;box-shadow:0 12px 30px rgba(23,61,43,.07)}.coming{border:1px solid rgba(23,61,43,.15);transition:background .3s,color .3s}.product-card:hover .coming{background:var(--forest);color:var(--cream)}.product-meta{transition:border-color .3s}.product-card:hover .product-meta{border-color:var(--sage)}.product-arrow{transition:transform .3s}.product-card:hover .product-arrow{transform:translate(3px,-3px)}
.closing{position:relative;overflow:hidden}.closing:before,.closing:after{content:'✳';position:absolute;color:rgba(120,150,107,.22);font-size:95px;line-height:1;pointer-events:none}.closing:before{left:8%;top:18%;animation:yuvi-orbit 28s linear infinite}.closing:after{right:8%;bottom:12%;font-size:55px;animation:yuvi-orbit 22s linear infinite reverse}.closing>*{position:relative;z-index:1}.button{position:relative;overflow:hidden}.button:after{content:'';position:absolute;top:-50%;left:-60%;width:40%;height:200%;background:rgba(255,255,255,.16);transform:rotate(20deg);transition:left .6s var(--yuvi-ease)}.button:hover:after{left:130%}
/* Gentle scroll reveals; elements remain visible if JS is unavailable */
.js-motion .motion-reveal{opacity:0;transform:translateY(22px);transition:opacity .75s var(--yuvi-ease),transform .75s var(--yuvi-ease)}.js-motion .motion-reveal.is-visible{opacity:1;transform:translateY(0)}.js-motion .motion-reveal[data-delay="1"]{transition-delay:.12s}.js-motion .motion-reveal[data-delay="2"]{transition-delay:.22s}.js-motion .motion-reveal[data-delay="3"]{transition-delay:.32s}
@keyframes yuvi-line{to{transform:scaleX(1)}}@keyframes yuvi-orbit{to{transform:rotate(360deg)}}
@media(max-width:760px){.hero:before{display:none}.hero h1{font-size:clamp(55px,12vw,78px)}.hero-art:after{width:48px;height:48px;font-size:21px}.intro-section:after{font-size:220px;bottom:-.3em}.closing:before{left:4%;top:8%;font-size:50px}.closing:after{right:4%;font-size:38px}.products-heading{align-items:start}}
@media(prefers-reduced-motion:reduce){.hero-art:after,.closing:before,.closing:after{animation:none!important}.js-motion .motion-reveal{opacity:1;transform:none;transition:none}.hero h1 em:after{animation:none;transform:scaleX(1)}}