/* ============================================================
   VALEUR ADVISORY · "Life" layer
   Atmosphere + motion + interaction on top of the editorial base.
   ============================================================ */

/* ---------- film grain (subtle print texture) ---------- */
.grain {
  position: fixed;
  inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  z-index: 80;
  opacity: 0.05;
  background-image: url("../assets/grain.svg");
  mix-blend-mode: overlay;
  animation: grainshift 7s steps(6) infinite;
}
@keyframes grainshift {
  0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-4%)}
  60%{transform:translate(-3%,2%)} 80%{transform:translate(2%,3%)} 100%{transform:translate(0,0)}
}

/* ---------- ambient champagne glow (tracks pointer + scroll) ---------- */
.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(420px circle at var(--gx, 70%) var(--gy, 18%),
      rgba(155,134,116,0.10), rgba(155,134,116,0) 60%);
  transition: background .5s linear;
}

/* ---------- custom cursor ---------- */
@media (hover: hover) and (pointer: fine) {
  .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none; border-radius: 50%; }
  .cursor-dot { width: 6px; height: 6px; background: var(--champagne); transform: translate(-50%,-50%); }
  .cursor-ring {
    width: 38px; height: 38px;
    border: 1px solid rgba(178,161,141,0.55);
    transform: translate(-50%,-50%);
    transition: width .35s var(--ease), height .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease), opacity .35s;
  }
  .cursor-ring.hot { width: 66px; height: 66px; border-color: rgba(178,161,141,0.9); background: rgba(155,134,116,0.06); }
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }
}

/* ---------- link / button sweep on hover ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--champagne);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.btn--ghost:hover { color: var(--black); border-color: var(--champagne); background: transparent; }
.btn--ghost:hover::after { transform: scaleX(1); }
.btn--ghost:hover .arrow { color: var(--black); }

/* ---------- kinetic hero word ---------- */
.shimmer {
  background: linear-gradient(100deg,
    var(--champagne) 0%, var(--champagne) 30%,
    #f1e6d4 47%, #fff7ea 50%, #f1e6d4 53%,
    var(--champagne) 70%, var(--champagne) 100%);
  background-size: 280% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: sheen 6.5s var(--ease) infinite;
}
@keyframes sheen { 0%{background-position:180% 0} 55%,100%{background-position:-80% 0} }

/* the opening headline rises in, line by line */
.rise { display: block; overflow: hidden; }
.rise > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.05s var(--ease);
}
.rise.in > span { transform: translateY(0) !important; }
.rise.d1 > span { transition-delay: .08s; }
.rise.d2 > span { transition-delay: .18s; }

/* ---------- compounding curve (hero signature graphic) ---------- */
.curve { width: 100%; height: auto; display: block; overflow: visible; }
.curve .ln { fill: none; stroke: var(--champagne); stroke-width: 1.4; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; }
.curve .ln.in { animation: draw 2.4s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.curve .dot { fill: var(--champagne); opacity: 0; transform-box: fill-box; transform-origin: center; }
.curve .dot.in { animation: pop .5s var(--ease) forwards; }
@keyframes pop { 0%{opacity:0; transform: scale(0)} 100%{opacity:1; transform: scale(1)} }
.curve .grid { stroke: rgba(178,161,141,0.16); stroke-width: 1; }

/* ---------- value ribbon (marquee band) ---------- */
.ribbon {
  border-block: 1px solid var(--line);
  padding-block: clamp(1.1rem, 2.2vw, 1.7rem);
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.ribbon__track { display: inline-flex; align-items: center; gap: 0; animation: slide 38s linear infinite; will-change: transform; }
.ribbon:hover .ribbon__track { animation-play-state: paused; }
.ribbon__track span {
  font-family: var(--ff-head);
  font-weight: 200;
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  letter-spacing: 0.01em;
  color: var(--ivory);
  padding: 0 clamp(1.2rem, 3vw, 2.4rem);
}
.ribbon__track span.alt { color: transparent; -webkit-text-stroke: 1px var(--champagne); }
.ribbon__track .star { color: var(--champagne); font-size: 0.7em; vertical-align: middle; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .grain, .shimmer, .ribbon__track { animation: none; }
  .rise > span { transform: none; }
  .ambient { display: none; }
}

/* ---------- intro: logo draws in on load ---------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .8s var(--ease), visibility .8s;
}
.intro.done { opacity: 0; visibility: hidden; }
.intro__mark {
  position: relative;
  width: clamp(124px, 14vw, 200px);
  aspect-ratio: 366 / 386;
}
.intro__glow {
  position: absolute;
  left: 50%; top: 50%;
  width: 520px; height: 520px;
  transform: translate(-50%, -50%) scale(0.4);
  background: radial-gradient(circle, rgba(155,134,116,0.20), rgba(155,134,116,0) 62%);
  opacity: 0;
  pointer-events: none;
}
.intro__mono {
  position: absolute;
  inset: 0;
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  opacity: 0.25;
}
.intro__line {
  position: absolute;
  top: -6%; bottom: -6%;
  width: 1px;
  left: 0;
  background: linear-gradient(var(--champagne), transparent);
  opacity: 0;
}
.intro.play .intro__mono { animation: va-draw 1.15s var(--ease) .2s forwards; }
.intro.play .intro__glow { animation: va-bloom 1.2s var(--ease) .8s; }
@keyframes va-draw {
  0%   { clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); opacity: .25; }
  100% { clip-path: inset(0 0 0 0);    -webkit-clip-path: inset(0 0 0 0);    opacity: 1; }
}
@keyframes va-pen {
  0%   { left: 0;   opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
@keyframes va-bloom {
  0%   { opacity: 0;   transform: translate(-50%,-50%) scale(0.45); }
  45%  { opacity: 1;   transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0;   transform: translate(-50%,-50%) scale(1.28); }
}