/* ============================================================
   BETTER TOGETHER — FX LAYER
   Motion, cursor, and interaction system. Progressive enhancement:
   everything degrades gracefully without JS.
   ============================================================ */

/* ---------- selection + scrollbar ---------- */
::selection { background:var(--klein); color:var(--sand); }
html { scrollbar-width:thin; scrollbar-color:var(--klein) transparent; }
body::-webkit-scrollbar { width:4px; }
body::-webkit-scrollbar-thumb { background:var(--klein); }

/* ---------- preloader ---------- */
#loader {
  position:fixed; inset:0; z-index:9999; background-color:var(--sand);
  background-image:url('../assets/noise-sand.png');
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  transition:transform .7s cubic-bezier(.77,0,.18,1);
}
#loader.lift { transform:translateY(-100%); }
#loader img { width:110px; }
@property --ltrace { syntax:'<angle>'; inherits:false; initial-value:0deg; }
#loader img {
  -webkit-mask-image:conic-gradient(from -90deg, #000 var(--ltrace), transparent calc(var(--ltrace) + 3deg));
  mask-image:conic-gradient(from -90deg, #000 var(--ltrace), transparent calc(var(--ltrace) + 3deg));
  animation:ltrace .9s ease-in-out .1s both;
}
@keyframes ltrace { from { --ltrace:0deg; } to { --ltrace:360deg; } }
#loader .l-word {
  font-family:'Marcellus',serif; font-size:15px; letter-spacing:4px; text-transform:uppercase; color:var(--klein);
  opacity:0; animation:l-in .5s ease .55s forwards;
}
@keyframes l-in { to { opacity:1; } }
body.loading { overflow:hidden; }

/* ---------- custom cursor (fine pointers only) ---------- */
@media (hover:hover) and (pointer:fine) {
  .cur-dot, .cur-ring { position:fixed; top:0; left:0; pointer-events:none; z-index:9998; border-radius:50%; will-change:transform; }
  .cur-dot { width:6px; height:6px; background:var(--klein); mix-blend-mode:exclusion; filter:invert(0); }
  .cur-ring {
    width:34px; height:34px; border:1.5px solid rgba(0,47,167,0.55);
    transition:width .25s, height .25s, border-color .25s, background .25s;
    display:flex; align-items:center; justify-content:center;
  }
  .cur-ring .cur-label {
    font-family:'IBM Plex Mono',monospace; font-size:8px; letter-spacing:1.5px; text-transform:uppercase;
    color:var(--sand); opacity:0; transition:opacity .2s;
  }
  .cur-ring.grow { width:64px; height:64px; background:rgba(0,47,167,0.9); border-color:transparent; }
  .cur-ring.grow .cur-label { opacity:1; }
  .cur-ring.shrink { width:14px; height:14px; border-color:var(--rose); }
}

/* ---------- header behavior ---------- */
header.site { transition:transform .4s cubic-bezier(.4,0,.2,1), box-shadow .3s; }
header.site.hide { transform:translateY(-100%); }
header.site.scrolled { box-shadow:0 4px 16px rgba(0,0,0,.12); }

/* ---------- split-line headline reveals ---------- */
.sp-line { display:block; overflow:hidden; }
.sp-line > span { display:block; transform:translateY(110%); transition:transform .9s cubic-bezier(.22,1,.36,1); }
.sp-ready.in .sp-line > span { transform:translateY(0); }
.sp-ready.in .sp-line:nth-child(2) > span { transition-delay:.08s; }
.sp-ready.in .sp-line:nth-child(3) > span { transition-delay:.16s; }
.sp-ready.in .sp-line:nth-child(4) > span { transition-delay:.24s; }

/* ---------- marquee ---------- */
.marquee { overflow:hidden; white-space:nowrap; padding:34px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.marquee.on-dark { border-color:var(--rule-light); }
.marquee .mq-track { display:inline-block; animation:mq 38s linear infinite; will-change:transform; }
.marquee:hover .mq-track { animation-play-state:paused; }
@keyframes mq { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.mq-item {
  font-family:'Marcellus',serif; font-size:clamp(40px,5.4vw,76px); text-transform:uppercase; letter-spacing:1px;
  margin-right:64px; color:transparent; -webkit-text-stroke:1.2px var(--klein);
}
.mq-item.fill { color:var(--klein); -webkit-text-stroke:0; }
.marquee.on-dark .mq-item { -webkit-text-stroke:1.2px rgba(245,241,232,0.75); }
.marquee.on-dark .mq-item.fill { color:var(--sand); -webkit-text-stroke:0; }
.mq-dot { display:inline-block; width:12px; height:12px; border-radius:50%; background:var(--rose); margin:0 40px 0 -24px; vertical-align:middle; }

/* ---------- parallax media ---------- */
.plx { overflow:hidden; }
.plx > * { will-change:transform; transform:translateY(var(--plx, 0)); transition:none; height:112%; }

/* ---------- image/card hover ---------- */
.g-card { position:relative; }
.g-card .ph { transition:transform .8s cubic-bezier(.22,1,.36,1); }
.g-card:hover .ph { transform:scale(1.045); }
.g-card::after {
  content:'→'; position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:50%;
  background:var(--sand); color:var(--klein); display:flex; align-items:center; justify-content:center;
  font-size:16px; opacity:0; transform:translate(6px,-6px); transition:all .35s cubic-bezier(.22,1,.36,1); z-index:2;
}
.g-card:hover::after { opacity:1; transform:none; }

.g-idx {
  position:absolute; top:14px; left:16px; z-index:2;
  font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:2px; color:rgba(245,241,232,0.75);
  border:1px solid rgba(245,241,232,0.35); border-radius:50%; width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- calendar hover preview ---------- */
#cal-preview {
  position:fixed; z-index:500; width:230px; height:150px; border-radius:8px; pointer-events:none;
  opacity:0; transform:scale(.9) rotate(-2deg); transition:opacity .25s, transform .25s;
  display:flex; align-items:flex-end; padding:12px; overflow:hidden;
  background:linear-gradient(135deg,#0A2C8F,#002FA7 55%,#16234f);
  box-shadow:0 18px 40px rgba(0,0,0,.28);
}
#cal-preview.show { opacity:1; transform:scale(1) rotate(0deg); }
#cal-preview span { font-family:'IBM Plex Mono',monospace; font-size:8.5px; letter-spacing:1.5px; text-transform:uppercase; color:rgba(245,241,232,0.85); }
#cal-preview.t-salon { background:linear-gradient(135deg,#C89A96,#b8837e 60%,#a5726e); }
#cal-preview.t-salon span { color:rgba(18,20,23,0.7); }
#cal-preview.t-immersion { background:linear-gradient(140deg,#1a1d22,#121417 60%,#0b0d10); }
.cal-row { position:relative; transition:padding-left .35s cubic-bezier(.22,1,.36,1); }
.cal-row:hover { padding-left:14px; background:transparent; }
.cal-row::before {
  content:''; position:absolute; left:0; top:50%; width:0; height:1.5px; background:var(--klein);
  transition:width .35s cubic-bezier(.22,1,.36,1);
}
.cal-row:hover::before { width:9px; }

/* ---------- buttons: fill sweep + magnetic ---------- */
.btn { position:relative; overflow:hidden; will-change:transform; }
.btn .btn-x { position:relative; z-index:1; }
.btn::before {
  content:''; position:absolute; inset:0; background:var(--rose);
  transform:translateY(101%); transition:transform .4s cubic-bezier(.22,1,.36,1); z-index:0;
}
.btn:hover::before { transform:translateY(0); }
.btn.blue:hover { background:var(--klein); }
.btn.blue:hover .btn-x, .btn.block:hover .btn-x { color:var(--graphite); }
.btn.outline::before, .btn.outline-light::before { display:none; }

/* ---------- footer: giant wordmark ---------- */
.f-giant {
  font-family:'Marcellus',serif; font-size:clamp(56px,10.4vw,150px); line-height:.95; letter-spacing:2px;
  text-transform:uppercase; color:var(--sand); margin-bottom:64px; display:block;
}
.f-giant .ln { display:block; overflow:hidden; }
.f-giant .ln > span { display:block; transform:translateY(110%); transition:transform 1s cubic-bezier(.22,1,.36,1); }
.f-giant.in .ln > span { transform:none; }
.f-giant.in .ln:nth-child(2) > span { transition-delay:.1s; }
footer.site a.f-link { position:relative; width:fit-content; }
footer.site a.f-link::after {
  content:''; position:absolute; left:0; bottom:2px; height:1px; width:100%;
  background:var(--rose); transform:scaleX(0); transform-origin:right; transition:transform .35s cubic-bezier(.22,1,.36,1);
}
footer.site a.f-link:hover::after { transform:scaleX(1); transform-origin:left; }

/* ---------- section index ---------- */
.sec-index {
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:2px; color:var(--klein);
  display:inline-flex; align-items:center; gap:12px; margin-bottom:14px;
}
.sec-index::after { content:''; width:44px; height:1px; background:var(--klein); }
.band.dark .sec-index, .band.graphite .sec-index { color:var(--rose); }
.band.dark .sec-index::after, .band.graphite .sec-index::after { background:var(--rose); }

/* ---------- scroll progress ---------- */
#scroll-progress { position:fixed; top:0; left:0; height:2px; background:var(--rose); z-index:200; width:0; }

/* ---------- stamp spin ---------- */
.spin-slow { animation:spin-slow 40s linear infinite; }
@keyframes spin-slow { to { transform:rotate(360deg); } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sp-line > span, .f-giant .ln > span { transform:none !important; transition:none !important; }
  .marquee .mq-track { animation:none; }
  .rv { opacity:1 !important; transform:none !important; }
  #loader { display:none; }
  .cur-dot, .cur-ring { display:none; }
}