/* ══════════════════════════════════════════════════════════════════
   Tréppan Living — site motion layer
   Preloader (counter) · Lenis smooth scroll · page-transition wipe ·
   scroll section reveal · ambient-audio toggle.
   Loaded on every page after footer.css. Uses design tokens from :root.
   Respects prefers-reduced-motion (see the @media block at the end).
   ══════════════════════════════════════════════════════════════════ */

/* ─── Lenis smooth scroll base (from the library's recommended CSS) ─── */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto!important}
/* dark base so there is never a white flash between page navigations */
html{background:var(--ink,#0B1710)}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}

/* ─── Intro preloader — a branded curtain that lifts to reveal the page ─── */
.tl-preloader{position:fixed;inset:0;z-index:2147483647;background:var(--ink,#0B1710);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;will-change:transform;transition:transform 1.15s cubic-bezier(.76,0,.24,1),opacity .5s ease .55s}
.tl-preloader.tl-lift{transform:translateY(-101%);opacity:0;pointer-events:none}
.tl-pre-logo{width:clamp(150px,20vw,208px);height:34px;background:url('media/logo-white.png') center/contain no-repeat;opacity:0;transform:translateY(10px);transition:opacity 1s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.tl-preloader.tl-ready .tl-pre-logo{opacity:.95;transform:none}
.tl-pre-line{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(240,232,220,.5);white-space:nowrap}
.tl-pre-line b{color:var(--gold-lt,#D4A85A);font-weight:400;font-variant-numeric:tabular-nums;min-width:2.4em;display:inline-block;text-align:right}
.tl-pre-bar{position:absolute;left:0;bottom:0;height:2px;width:0%;background:linear-gradient(90deg,var(--gold,#B8893A),var(--gold-lt,#D4A85A));box-shadow:0 0 14px rgba(212,168,90,.5);transition:width .25s cubic-bezier(.4,0,.1,1)}

/* ─── Page-transition wipe — an ink curtain, gold-lit edge, with a mark that eases in and holds ─── */
.tl-wipe{position:fixed;inset:0;z-index:2147482000;background:var(--ink,#0B1710);pointer-events:none;transform:translateY(100%);will-change:transform;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}
.tl-wipe.tl-cover{transform:translateY(0);transition:transform .62s cubic-bezier(.76,0,.24,1)}
.tl-wipe.tl-uncover{transform:translateY(-100%);transition:transform .72s cubic-bezier(.76,0,.24,1)}
/* the leading (top) edge carries a soft gold light that sweeps up the screen as it covers */
.tl-wipe::before{content:"";position:absolute;left:0;top:0;width:100%;height:1.5px;background:linear-gradient(90deg,transparent,rgba(212,168,90,.9) 28%,rgba(212,168,90,.9) 72%,transparent);box-shadow:0 0 22px 2px rgba(212,168,90,.5)}
.tl-wipe-mark{display:flex;flex-direction:column;align-items:center;gap:18px;opacity:0;transform:translateY(16px);transition:opacity .85s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.tl-wipe.tl-show .tl-wipe-mark{opacity:1;transform:none}
.tl-wipe-logo{width:clamp(156px,19vw,206px);height:34px;background:url('media/logo-white.png') center/contain no-repeat;opacity:.96}
.tl-wipe-tag{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.36em;text-transform:uppercase;color:var(--gold-lt,#D4A85A);opacity:0;transition:opacity .8s ease .25s}
.tl-wipe.tl-show .tl-wipe-tag{opacity:.75}

/* ─── Scroll section reveal (amaterasu-style: rises & focuses from a soft blur) ─── */
[data-tl-sec]{opacity:0;transform:translate3d(0,84px,0) scale(.965);filter:blur(6px);transition:opacity 1.2s cubic-bezier(.16,1,.3,1),transform 1.45s cubic-bezier(.16,1,.3,1),filter 1.1s ease;will-change:opacity,transform,filter}
[data-tl-sec].tl-in{opacity:1;transform:none;filter:blur(0)}

/* ─── Ambient-audio toggle ─── */
.tl-sound{position:fixed;right:22px;bottom:22px;z-index:9500;width:46px;height:46px;border-radius:50%;border:1px solid rgba(212,168,90,.42);background:rgba(11,23,16,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:flex-end;justify-content:center;gap:3px;padding:0 0 16px;cursor:pointer;transition:border-color .3s ease,transform .3s ease,background .3s ease}
.tl-sound:hover{border-color:var(--gold-lt,#D4A85A);transform:translateY(-2px)}
.tl-sound .tl-bar{width:2.5px;height:6px;background:var(--gold-lt,#D4A85A);border-radius:2px;transform-origin:bottom}
.tl-sound.tl-playing .tl-bar{animation:tl-eq 1s ease-in-out infinite}
.tl-sound.tl-playing .tl-bar:nth-child(2){animation-delay:.18s}
.tl-sound.tl-playing .tl-bar:nth-child(3){animation-delay:.36s}
.tl-sound.tl-playing .tl-bar:nth-child(4){animation-delay:.1s}
.tl-sound:not(.tl-playing) .tl-bar{height:4px;opacity:.55}
@keyframes tl-eq{0%,100%{height:4px}50%{height:15px}}
@media(max-width:640px){.tl-sound{right:16px;bottom:16px;width:42px;height:42px}}

/* ─── Reduced motion: keep everything, drop the movement ─── */
@media(prefers-reduced-motion:reduce){
  [data-tl-sec]{opacity:1!important;transform:none!important;transition:none}
  .tl-sound .tl-bar{animation:none!important}
}