/* Zalié Skin coming-soon page. Colors and type follow branding/zalie-brand-book.html. */
:root{
  --linen:#EDE4D3; --walnut:#4D3416; --bronze:#9A7A55; --muted:#6E5A45;
  --display:"Cormorant Garamond","EB Garamond",Garamond,"Times New Roman",serif;
  --gutter:clamp(16px,5vw,56px);
  --ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--linen);color:var(--walnut);font-family:var(--display);-webkit-font-smoothing:antialiased;overflow:hidden;-webkit-tap-highlight-color:transparent}
h1,p{margin:0}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Living cream surface (WebGL) with fine paper grain, and the drop layer on top */
#cream{position:fixed;inset:0;width:100%;height:100vh;z-index:0;opacity:0;transition:opacity 1.6s ease;pointer-events:none}
#cream.on{opacity:1}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .33  0 0 0 0 .22  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}

/* One screen, everything centered */
.stage{position:relative;z-index:2;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:calc(env(safe-area-inset-top,0px) + var(--gutter)) var(--gutter) calc(env(safe-area-inset-bottom,0px) + var(--gutter))}
.mark{width:min(86vw,980px);line-height:0}
.wordmark{display:block;width:100%;height:auto;overflow:visible}
.slogan{margin-top:clamp(20px,3.2vw,36px);font-style:italic;font-weight:400;font-size:clamp(1.4rem,3vw,2.25rem);line-height:1.2;color:var(--walnut)}
.soon{margin-top:clamp(44px,8vh,84px);display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.6vw,28px)}
.soon-text{font-weight:500;font-size:clamp(1.1rem,2.4vw,1.8rem);line-height:1;letter-spacing:.46em;padding-left:.46em;white-space:nowrap}
.soon-text span{display:inline-block;transform-origin:50% 100%;
  background:linear-gradient(172deg,#A68F70 0%,#5A3E22 46%,#9E8262 76%,#6B4C2D 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.soon-text .gap{width:.5em}
.soon-line{display:block;width:clamp(22px,5vw,60px);height:1px}
.soon-line-l{background:linear-gradient(90deg,rgba(154,122,85,0),var(--bronze));transform-origin:100% 50%}
.soon-line-r{background:linear-gradient(90deg,var(--bronze),rgba(154,122,85,0));transform-origin:0 50%}

/* ---------- Choreography (classes added by main.js) ----------
   is-in:   the drop has landed; letters rise as the ripple reaches them (delays set per letter)
   is-text: the slogan appears and COMING SOON drops in, letter by letter */
.js .wm-letter{opacity:0;transform-box:fill-box;transform-origin:50% 100%}
.is-in .wm-letter{animation:rise 1.5s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{
  0%{opacity:0;transform:translateY(28%) scaleY(.92)}
  45%{opacity:1}
  62%{transform:translateY(-5%) scaleY(1.02)}
  100%{opacity:1;transform:none}
}

.js .slogan{opacity:0;transform:translateY(10px);filter:blur(5px)}
.is-text .slogan{opacity:1;transform:none;filter:none;transition:opacity 1.5s ease,transform 1.8s var(--ease-out),filter 1.5s ease}

.js .soon-text span{opacity:0}
.is-text .soon-text span{animation:land 1.05s both;animation-delay:calc(var(--i) * 65ms + 550ms)}
@keyframes land{
  0%{opacity:0;transform:translateY(-170%);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  30%{opacity:1}
  50%{transform:translateY(0) scale(1.08,.88);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  63%{transform:translateY(-18%) scale(.97,1.04);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  76%{transform:translateY(0) scale(1.03,.96);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  87%{transform:translateY(-4%);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  100%{opacity:1;transform:none}
}

.js .soon-line{transform:scaleX(0)}
.is-text .soon-line{transform:scaleX(1);transition:transform 1.8s var(--ease-out) 1.5s}

@media (prefers-reduced-motion:reduce){
  #cream{transition:none}
  .js .wm-letter,.js .slogan,.js .soon-text span,.js .soon-line{opacity:1;transform:none;filter:none;animation:none;transition:none}
}