/* =============================================================
   Closets & More — v5 "signature" layer
   Loaded after styles.css. Cinematic hero, sticky service stage,
   intro curtain, film grain, cursor ring, magnetic buttons.
   ============================================================= */

/* ---------- Shared arch shape (a doorway: round top, soft base) ---------- */
:root { --arch: 50% 50% 16px 16px / 36% 36% 16px 16px; }

/* =============================================================
   1. Hero — copy + real-work composition
   ============================================================= */
.hx { width: 100%; display: grid; gap: clamp(3rem, 7vw, 4.5rem); align-items: center; }
.hx-copy { display: grid; justify-items: center; text-align: center; }
.hx .ph::before, .hx .ph::after { display: none; }

.hx-visual { position: relative; justify-self: center; width: min(70vw, 340px); aspect-ratio: 1 / 1.4; margin: .5rem 0 2.5rem; }
.hx-arch {
  position: absolute; inset: 0; overflow: hidden; border-radius: var(--arch);
  box-shadow: 0 50px 100px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(243,217,160,.38), 0 0 80px -20px rgba(201,162,75,.25);
  isolation: isolate;
}
.hx-arch .ph { position: absolute; inset: 0; }
.hx-arch video { animation: hxDrift 22s ease-in-out infinite alternate; }
@keyframes hxDrift { from { transform: scale(1.04); } to { transform: scale(1.14) translateY(-2%); } }
.hx-arch::before { /* depth: darker base, warm top light */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(243,217,160,.10) 0%, transparent 30%, transparent 60%, rgba(10,10,10,.55) 100%);
}
.hx-arch::after { /* inner gold hairline following the arch */
  content: ""; position: absolute; inset: 10px; z-index: 2; pointer-events: none;
  border: 1px solid rgba(243,217,160,.42); border-radius: var(--arch);
}
.hx-arch-line {
  position: absolute; inset: 0; border-radius: var(--arch); pointer-events: none;
  border: 1px solid var(--line); translate: 22px -22px;
  transition: opacity 1.4s var(--ease-out);
}
.hx-card {
  position: absolute; left: -18%; bottom: -8%; width: 42%; aspect-ratio: 2 / 3; overflow: hidden; z-index: 3;
  border-radius: 14px; rotate: -5deg;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(243,217,160,.45);
}
.hx-card .ph { position: absolute; inset: 0; }
.hx-badge {
  position: absolute; z-index: 4; top: 9%; right: -16%;
  display: flex; align-items: center; gap: .7rem; padding: .55rem 1.1rem .55rem .6rem;
  border-radius: 999px; border: 1px solid var(--line);
  background: rgba(16,14,11,.62); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 20px 40px -18px rgba(0,0,0,.9);
  transition: border-color .4s, transform .6s var(--ease-out);
}
.hx-badge:hover { border-color: var(--champagne); transform: translateY(-3px); }
.hx-badge .g-logo { width: 30px; height: 30px; padding: 5px; border-radius: 50%; background: #fff; flex: none; }
.hx-badge-txt { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: .45rem; line-height: 1.1; }
.hx-badge strong { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; background: var(--gold-flat); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.hx-badge-stars { color: var(--champagne); font-size: .72rem; letter-spacing: .1em; }
.hx-badge small { grid-column: 1 / -1; font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-mute); white-space: nowrap; }

@media (max-width: 1023px) {
  .hx-card { left: -9%; }
  .hx-badge { right: -5%; top: 6%; }
}
@media (min-width: 1024px) {
  .hero:has(.hx) { padding-bottom: 5rem; }
  .hx { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(2rem, 5vw, 5rem); }
  .hx-copy { justify-items: start; text-align: left; }
  .hx .hero-kicker .kicker-line:first-child { display: block; }
  .hx .hero-title { font-size: clamp(3rem, 5vw, 5.2rem); max-width: 12.5ch; }
  .hx .hero-lede { max-width: 31rem; }
  .hx .hero-ctas { justify-content: flex-start; }
  .hx-visual { justify-self: center; width: auto; height: min(68vh, 610px); margin: 2rem 0 3rem 8%; }
  .hx-badge { right: -9%; top: 7%; }
}
@media (min-width: 1024px) and (max-height: 760px) { .hx-visual { height: 62vh; } }

/* entrance */
.js .hx-visual { opacity: 0; transform: translateY(40px) scale(.97); transition: opacity 1.6s var(--ease-out) .3s, transform 1.8s var(--ease-out) .3s; }
.is-loaded .hx-visual { opacity: 1; transform: none; }
.js .hx-card { opacity: 0; transition: opacity 1.2s var(--ease-out) 1s; }
.is-loaded .hx-card { opacity: 1; }
.js .hx-badge { opacity: 0; transition: opacity 1s var(--ease-out) 1.3s, transform .6s var(--ease-out), border-color .4s; }
.is-loaded .hx-badge { opacity: 1; }
.js .hx-copy > * { animation: heroSafety .01s 5s forwards; }
.js .hx-visual, .js .hx-card, .js .hx-badge { animation: heroSafety .01s 5s forwards; }

/* =============================================================
   2. Services — sticky video stage (desktop)
   ============================================================= */
.svc-stage { display: none; }
@media (min-width: 1024px) {
  .svc-wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(3rem, 6vw, 6.5rem); align-items: start; }
  .svc-stage { display: block; position: sticky; top: calc(var(--header-h) + 5vh); }
  .svc-stage-frame {
    position: relative; display: block; width: 100%; aspect-ratio: 2 / 2.85; max-height: calc(100vh - var(--header-h) - 15vh);
    overflow: hidden; border-radius: var(--arch); isolation: isolate; cursor: pointer;
    box-shadow: 0 50px 100px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(243,217,160,.35);
  }
  .svc-stage-frame video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transform: scale(1.1); filter: saturate(.9);
    transition: opacity .9s var(--ease-out), transform 2.2s var(--ease-out);
  }
  .svc-stage-frame video.is-on { opacity: 1; transform: scale(1); }
  .svc-stage-frame::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 50%, rgba(10,10,10,.72)); }
  .svc-stage-frame::after { content: ""; position: absolute; inset: 12px; z-index: 2; pointer-events: none; border: 1px solid rgba(243,217,160,.4); border-radius: var(--arch); }
  .svc-stage-no {
    position: absolute; left: 1.8rem; bottom: 1.2rem; z-index: 3;
    font-family: var(--serif); font-style: italic; font-size: 3.6rem; line-height: 1;
    background: var(--gold-flat); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  }
  .svc-stage-view {
    position: absolute; right: 1.6rem; bottom: 1.7rem; z-index: 3; display: inline-flex; align-items: center; gap: .5rem;
    font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: var(--champagne);
    padding: .55rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: rgba(10,10,10,.45);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: background .4s, color .4s;
  }
  .svc-stage-view svg { width: 14px; height: 14px; transition: transform .5s var(--ease-out); }
  .svc-stage-frame:hover .svc-stage-view { background: var(--gold); color: var(--ink); }
  .svc-stage-frame:hover .svc-stage-view svg { transform: translateX(3px); }
  .svc-stage-cap { margin-top: 1.1rem; text-align: center; font-family: var(--script); font-size: 2.5rem; line-height: 1.2; color: var(--champagne); min-height: 3rem; transition: opacity .35s; }
  .svc-stage-cap.is-swap { opacity: 0; }

  /* rows become a clean editorial index */
  .svc-wrap .svc { grid-template-columns: 3.4rem minmax(0, 1fr) 3rem; grid-template-areas: "no name arrow" "no desc arrow"; gap: .35rem 1.2rem; padding: 1.9rem 0; align-items: center; }
  .svc-wrap .svc-media { display: none; }
  .svc-wrap .svc-name { font-size: clamp(2rem, 3.1vw, 3.1rem); align-self: end; transition: transform .7s var(--ease-out), color .5s; }
  .svc-wrap .svc-desc { max-width: 36rem; align-self: start; transition: color .5s; }
  .svc-wrap .svc-no { align-self: start; padding-top: 1rem; transition: color .5s; }
  .svc-wrap:has(.svc.is-active) .svc:not(.is-active) .svc-name { color: rgba(245,239,230,.4); }
  .svc-wrap:has(.svc.is-active) .svc:not(.is-active) .svc-desc { color: var(--text-faint); }
  .svc-wrap .svc.is-active .svc-name { color: var(--champagne); transform: translateX(.7rem); }
  .svc-wrap .svc.is-active::before { transform: scaleX(1); }
  .svc-wrap .svc.is-active .svc-arrow { transform: rotate(-45deg); background: var(--gold); color: var(--ink); }
}

/* =============================================================
   3. Intro curtain (once per visit)
   ============================================================= */
.pre {
  position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; align-content: center; gap: 1.8rem;
  background: radial-gradient(60% 50% at 50% 50%, #17120b, #0a0a0a 70%);
  clip-path: inset(0 0 0 0); transition: clip-path 1.15s cubic-bezier(.77, 0, .18, 1);
}
.pre.is-out { clip-path: inset(0 0 100% 0); }
.pre-logo { width: min(66vw, 360px); opacity: 0; transform: scale(.96); filter: blur(8px); animation: preIn 1.1s var(--ease-out) .1s forwards; }
.pre-logo .logo-sheen-band { animation: sheen 1.8s var(--ease-soft) .5s 1 forwards; }
.pre-line { position: relative; width: min(46vw, 220px); height: 1px; background: rgba(201,162,75,.16); overflow: hidden; }
.pre-line i { position: absolute; inset: 0; background: var(--gold-flat); transform: scaleX(0); transform-origin: left; animation: preLine 1.25s cubic-bezier(.65, 0, .35, 1) .15s forwards; }
@keyframes preIn { to { opacity: 1; transform: none; filter: none; } }
@keyframes preLine { to { transform: scaleX(1); } }
.pre-lock { overflow: hidden; }
.intro-wait::before { content: ""; position: fixed; inset: 0; z-index: 2999; background: #0a0a0a; }

/* =============================================================
   4. Film grain + cursor ring + small luxuries
   ============================================================= */
.grain {
  position: fixed; inset: -60%; z-index: 1400; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.4s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); }
  60% { transform: translate(-2%, 6%); } 80% { transform: translate(5%, 1%); } 100% { transform: translate(0, 0); }
}
@media (hover: none), (pointer: coarse) { .grain { animation: none; } }

.cur { position: fixed; top: 0; left: 0; z-index: 2500; pointer-events: none; opacity: 0; transition: opacity .4s; }
.cur.is-on { opacity: 1; }
.cur-ring {
  position: absolute; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  border: 1px solid rgba(243,217,160,.55);
  display: grid; place-items: center;
  transition: width .45s var(--ease-out), height .45s var(--ease-out), margin .45s var(--ease-out), background .45s, border-color .45s;
}
.cur-ring span { font-size: .56rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); opacity: 0; transition: opacity .3s; }
.cur.is-link .cur-ring { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: rgba(243,217,160,.08); border-color: rgba(243,217,160,.8); }
.cur.is-view .cur-ring { width: 86px; height: 86px; margin: -43px 0 0 -43px; background: var(--gold-flat); border-color: transparent; }
.cur.is-view .cur-ring span { opacity: 1; }
.cur.is-text .cur-ring { opacity: 0; }

/* heading accents shimmer in polished gold (dark sections only) */
.h2 em { background: var(--gold-grad); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: goldShift 9s ease-in-out infinite alternate; padding-right: .06em; }
.why .h2 em { background: none; color: var(--bronze); -webkit-text-fill-color: currentColor; animation: none; }

/* headings arrive out of a soft focus */
.js .h2.rv { filter: blur(10px); transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out), filter 1.4s var(--ease-out); transition-delay: var(--d, 0s); }
.js .h2.rv.in { filter: none; }

/* magnetic elements carry their own offset */
.is-magnetic { transition: translate .6s var(--ease-out); }
.is-magnetic.is-pull { transition: translate .15s linear; }

::selection { background: rgba(201,162,75,.85); color: #0a0a0a; }

@media (prefers-reduced-motion: reduce) {
  .grain, .hx-arch video { animation: none; }
  .pre { display: none; }
  .js .h2.rv { filter: none; }
}