/* =============================================
   layout.css — Cursor, Loader, Curtain,
                Page System, Footer
   ============================================= */

/* ── Custom Cursor ── */
.cursor {
  width: 10px; height: 10px;
  background: var(--gd); border-radius: 50%;
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9999;
  mix-blend-mode: multiply;
}
.cursor-ring {
  width: 38px; height: 38px;
  border: 1px solid var(--gd); border-radius: 50%;
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9998;
  transform: translate(-14px, -14px);
  transition: transform .18s ease, width .3s, height .3s, opacity .3s;
}

/* ── Intro Loader ── */
#loader {
  position: fixed; inset: 0;
  background: var(--dp); z-index: 10000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  transition: opacity .8s ease, visibility .8s;
}
#loader.hidden { opacity: 0; visibility: hidden; }
.loader-logo   { width: 110px; height: 110px; object-fit: contain; opacity: 0; animation: fadeUp 1s ease .2s forwards; }
.loader-brand  {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem,4vw,3rem); color: var(--cr);
  letter-spacing: .45em; font-weight: 300; margin-top: 18px;
  opacity: 0; animation: fadeUp 1s ease .6s forwards;
}
.loader-sub {
  font-size: .6rem; letter-spacing: .5em;
  text-transform: uppercase; color: var(--gd); margin-top: 8px;
  opacity: 0; animation: fadeUp 1s ease .9s forwards;
}
.loader-line {
  width: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gd), transparent);
  margin-top: 22px;
  animation: expandLine 1.4s ease 1.1s forwards;
}

/* ── Page Transition Curtain ── */
#curtain {
  position: fixed; inset: 0;
  background: var(--gd); z-index: 5000;
  transform: scaleY(0); transform-origin: bottom;
  pointer-events: none;
  transition: transform .45s var(--ease-page);
}

/* ── Page System ── */
/* All pages stacked; only .active is shown */
.page {
  display: none; overflow-y: auto; overflow-x: hidden;
  height: 100vh; background: var(--cr); color: var(--ch);
}
.page.active { display: block; }

/* ── Footer ── */
footer { background: var(--dp); padding: 60px 60px 36px; color: var(--cr); }
.foot-top {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr;
  gap: 52px; padding-bottom: 48px;
  border-bottom: 1px solid rgba(201,169,110,.1);
}
.foot-brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.foot-logo      { width: 44px; height: 44px; object-fit: contain; }
.foot-brand-name {
  font-family: var(--font-serif);
  font-size: 1.45rem; letter-spacing: .18em;
  font-weight: 300; color: var(--cr);
}
.foot-tagline   { font-size: .76rem; color: rgba(250,246,240,.32); line-height: 1.85; font-weight: 300; }
.foot-col h4    {
  font-family: var(--font-sans);
  font-size: .58rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--gd); margin-bottom: 18px;
}
.foot-col a     { display: block; font-size: .8rem; color: rgba(250,246,240,.42); margin-bottom: 10px; font-weight: 300; transition: color var(--t-fast); }
.foot-col a:hover { color: var(--gl); }
.foot-bottom    { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; flex-wrap: wrap; gap: 10px; }
.foot-copy      { font-size: .66rem; color: rgba(250,246,240,.22); letter-spacing: .08em; }
.foot-ig        { font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(250,246,240,.22); text-decoration: none; transition: color var(--t-fast); }
.foot-ig:hover  { color: var(--gd); }