/* LUBIAL — "Au cœur du soin": we enter the logo's drop and fly through the ingredients (home page only). */
#coeur{position:relative;height:520vh}
.co-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:#fff url(../assets/img/texture-lait.webp) center/cover no-repeat}
.co-stage::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.5)}   /* same milk veil as the manifesto */
.co-portal{position:absolute;inset:0;display:grid;place-items:center}
.co-hint{position:absolute;left:50%;top:calc(50% + 20vmin);transform:translateX(-50%);display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 22px;border-radius:999px;
  border:1px solid var(--nuit-15);background:rgba(255,255,255,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:12.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--nuit);white-space:nowrap;transition:background .4s,border-color .4s}
.co-hint:hover{background:#fff;border-color:var(--nuit)}
/* three little bars that dance: there is sound behind this door */
.co-note{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.co-note::before,.co-note::after,.co-note{background:none}
.co-note::before,.co-note::after{content:'';width:2px;background:var(--nuit);border-radius:1px;animation:eq 1.1s ease-in-out infinite}
.co-note::before{height:60%}
.co-note::after{height:100%;animation-delay:-.4s}
@keyframes eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.co-note::before,.co-note::after{transform-origin:bottom}
@media (prefers-reduced-motion:reduce){ .co-note::before,.co-note::after{animation:none} }

/* the dark world, seen through the drop-shaped window that grows */
.co-dark{position:absolute;inset:0;background:var(--nuit);color:#fff;
  -webkit-mask:url(../assets/img/drop.svg) center / auto var(--ms,30vmin) no-repeat;mask:url(../assets/img/drop.svg) center / auto var(--ms,30vmin) no-repeat}
.co-dark.open{-webkit-mask:none;mask:none}
.co-emb{position:absolute;left:50%;top:50%;height:var(--ms,30vmin);width:calc(var(--ms,30vmin) * .723);transform:translate(-50%,-50%);color:#fff;pointer-events:none}
.co-glow{position:absolute;inset:-20%;background:
  radial-gradient(40% 35% at var(--gx,50%) var(--gy,55%),rgba(157,180,163,.32),transparent 70%),
  radial-gradient(30% 30% at 20% 20%,rgba(168,198,217,.12),transparent 70%)}
.co-world{position:absolute;inset:0;perspective:1000px;perspective-origin:50% 50%;overflow:hidden}
.co-layer,.co-bubble,.co-flacon{position:absolute;left:50%;top:50%;will-change:transform,opacity}
.co-layer{width:min(34vw,420px);aspect-ratio:1;margin:calc(min(34vw,420px) / -2) 0 0 calc(min(34vw,420px) / -2)}
.co-layer img,.co-flacon img{width:100%;height:100%;object-fit:contain}   /* transparent WebP: they float in the night */
.co-layer i{position:absolute;left:50%;top:-6%;transform:translateX(-50%);font-family:var(--serif);font-style:italic;font-size:22px;color:var(--blanc-75)}
.co-flacon{width:min(40vw,430px);aspect-ratio:4/5;margin:calc(min(40vw,430px) * -.625) 0 0 calc(min(40vw,430px) / -2)}
.co-bubble{width:var(--s,8px);height:var(--s,8px);margin:calc(var(--s,8px) / -2);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.85),rgba(255,255,255,.12) 45%,rgba(157,180,163,.08) 70%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}

.co-intro{position:absolute;left:var(--gut);right:var(--gut);top:50%;transform:translateY(-50%);text-align:center;opacity:0}
.co-intro .label{display:block;color:var(--blanc-75);margin-bottom:18px}
.co-cap{position:absolute;left:var(--gut);bottom:clamp(40px,9vh,90px);width:min(420px,40vw)}
.co-cap .k{display:block;font-size:12.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--blanc-75);margin-bottom:12px}
.co-cap h3{font-family:var(--serif);font-weight:500;font-size:clamp(36px,3.6vw,56px);line-height:1}
.co-cap p{margin-top:12px;color:var(--blanc-75);font-size:17px;max-width:34ch}
.co-cap > *{opacity:0}
.co-depth{position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);list-style:none;display:flex;flex-direction:column;gap:18px;opacity:0}
.co-depth li{display:flex;align-items:center;justify-content:flex-end;gap:12px;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--blanc-40);transition:color .5s}
.co-depth li::after{content:'';width:28px;height:1px;background:currentColor;transition:width .6s var(--ease)}
.co-depth li.on{color:#fff}
.co-depth li.on::after{width:52px}
.co-end{position:absolute;left:var(--gut);top:50%;transform:translateY(-50%);width:min(440px,38vw);opacity:0;visibility:hidden}
.co-end .label{display:block;color:var(--blanc-75);margin-bottom:14px}
.co-end .pname{font-size:clamp(38px,3.8vw,60px);line-height:1}
.co-end p{margin:14px 0 26px;color:var(--blanc-75)}
.co-end .ctas{display:flex;flex-wrap:wrap;gap:12px}

@media (max-width:860px){
  #coeur{height:460vh}
  .co-layer{width:62vw;margin:-31vw 0 0 -31vw}
  .co-flacon{width:62vw;margin:-38.75vw 0 0 -31vw}
  .co-cap{left:var(--gut);right:var(--gut);width:auto;bottom:calc(30px + env(safe-area-inset-bottom))}
  .co-cap h3{font-size:34px}
  .co-cap p{font-size:16px}
  .co-depth{display:none}
  .co-end{left:var(--gut);right:var(--gut);top:auto;bottom:calc(28px + env(safe-area-inset-bottom));transform:none;width:auto}
  .co-end .pname{font-size:34px}
  .co-end p{margin:8px 0 16px;font-size:15.5px}
  .co-end .ctas .btn{flex:1;padding:0 16px;font-size:12px;letter-spacing:.12em}
}
@media (prefers-reduced-motion:reduce){
  #coeur{height:auto}
  .co-stage{position:relative;height:auto;min-height:100vh}
  .co-dark{position:relative;-webkit-mask:none;mask:none;min-height:100vh;padding:120px 0}
  .co-world,.co-emb,.co-portal{display:none}
  .co-intro,.co-end{position:relative;opacity:1;visibility:visible;transform:none;left:auto;top:auto;width:auto;padding:0 var(--gut);margin-bottom:40px}
}