/* ============================================================
   AURELIA — 月燿離宮 ｜ wedelab showcase (fictional luxury resort)
   Palette: near-black #0b0b0d · champagne gold · warm cream
   ============================================================ */

:root{
  --ink:#0b0b0d;
  --ink-2:#111114;
  --ink-3:#17171b;
  --cream:#f3ecdf;
  --cream-dim:#cabfa9;
  --gold:#d9b775;
  --gold-hi:#f4dfab;
  --gold-deep:#a9884d;
  --line:rgba(217,183,117,.20);
  --serif:"Cormorant Garamond", serif;
  --mincho:"Shippori Mincho", serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --gut: clamp(20px, 5vw, 96px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--mincho);
  font-weight:400;
  line-height:1.75;
  letter-spacing:.02em;
  overflow-x:hidden;
  cursor:none;
}
@media (max-width:820px){ body{ cursor:auto; } }
img,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
em{ font-style:normal; }

/* champagne gradient text (fill, with solid fallback) */
.grad{
  color:var(--gold);
  background:linear-gradient(100deg,#f6e6bd 0%,var(--gold) 42%,var(--gold-deep) 78%,#f2dca8 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ---------- scroll progress ---------- */
.progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:120;
  background:rgba(255,255,255,.05);
}
.progress i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi));
  box-shadow:0 0 12px rgba(217,183,117,.7);
  transition:width .12s linear;
}

/* ---------- custom cursor ---------- */
.cursor,.cursor-dot{ position:fixed; top:0; left:0; z-index:130; pointer-events:none; border-radius:50%; mix-blend-mode:screen; }
.cursor{
  width:34px; height:34px; margin:-17px 0 0 -17px;
  border:1px solid rgba(217,183,117,.7);
  transition:transform .18s var(--ease), width .2s, height .2s, opacity .3s, border-color .2s;
}
.cursor-dot{ width:5px; height:5px; margin:-2.5px 0 0 -2.5px; background:var(--gold-hi); }
.cursor.hot{ width:56px; height:56px; margin:-28px 0 0 -28px; border-color:var(--gold-hi); background:rgba(217,183,117,.08); }
@media (max-width:820px){ .cursor,.cursor-dot{ display:none; } }

/* ---------- loader ---------- */
.loader{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:var(--ink);
  transition:opacity .7s var(--ease), visibility .7s;
}
.loader.done{ opacity:0; visibility:hidden; }
.loader-mark{
  font-family:var(--serif); font-weight:500; letter-spacing:.5em;
  font-size:clamp(22px,4vw,40px); padding-left:.5em;
  color:var(--gold);
  background:linear-gradient(100deg,#f6e6bd,var(--gold),#f2dca8);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }

/* ---------- floating nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:18px var(--gut);
  transition:background .5s var(--ease), backdrop-filter .5s, padding .4s, border-color .5s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(11,11,13,.66);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
  padding-top:12px; padding-bottom:12px;
}
.brand{ display:flex; flex-direction:column; line-height:1; }
.brand-mark{ font-family:var(--serif); font-weight:600; letter-spacing:.34em; font-size:19px; color:var(--gold-hi); padding-left:.34em; }
.brand-sub{ font-family:var(--mincho); font-size:10px; letter-spacing:.4em; color:var(--cream-dim); margin-top:6px; }
.nav-links{ display:flex; gap:30px; }
.nav-links a{ font-size:13px; letter-spacing:.14em; color:var(--cream-dim); position:relative; transition:color .3s; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--gold); transition:width .35s var(--ease); }
.nav-links a:hover{ color:var(--cream); }
.nav-links a:hover::after{ width:100%; }
.nav-cta{
  font-family:var(--mono); font-size:11px; letter-spacing:.24em;
  padding:9px 20px; border:1px solid var(--line); border-radius:999px; color:var(--gold-hi);
  transition:background .3s, border-color .3s, color .3s;
}
.nav-cta:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
@media (max-width:820px){ .nav-links{ display:none; } }

/* ---------- HERO ---------- */
.hero{
  position:relative; min-height:100svh; min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--gut);
  overflow:hidden;
}
.hero-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero-veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 70% 30%, transparent 0%, rgba(11,11,13,.35) 55%, rgba(11,11,13,.86) 100%),
    linear-gradient(180deg, rgba(11,11,13,.5) 0%, transparent 22%, transparent 60%, rgba(11,11,13,.92) 100%);
}
.hero-inner{ position:relative; z-index:2; max-width:1000px; }
.hero-eyebrow{
  font-family:var(--mono); font-size:clamp(10px,1.1vw,12px); letter-spacing:.42em;
  color:var(--gold); text-transform:uppercase; margin:0 0 clamp(18px,3vh,34px);
}
.hero-title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(52px, 11vw, 168px); line-height:.94; letter-spacing:.005em;
  margin:0; text-wrap:balance;
}
.hero-title .line{ display:block; }
.hero-title em{
  font-style:italic;
  color:var(--gold);
  background:linear-gradient(100deg,#f8ecc7 0%,var(--gold-hi) 40%,var(--gold) 70%,var(--gold-deep) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-lede{
  font-size:clamp(15px,1.5vw,20px); color:var(--cream-dim); max-width:34em;
  margin:clamp(22px,4vh,40px) 0 clamp(28px,4vh,44px); line-height:1.9;
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  padding:15px 30px; border-radius:999px; position:relative; overflow:hidden;
  transition:transform .3s var(--ease), color .3s, box-shadow .4s;
}
.btn:hover{ transform:translateY(-2px); }
.btn-gold{ color:var(--ink); background:linear-gradient(100deg,var(--gold-hi),var(--gold) 55%,var(--gold-deep)); box-shadow:0 10px 34px -12px rgba(217,183,117,.7); }
.btn-gold:hover{ box-shadow:0 16px 44px -12px rgba(217,183,117,.9); }
.btn-ghost{ color:var(--cream); border:1px solid var(--line); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-hi); }

.hero-meta{
  position:absolute; left:var(--gut); bottom:clamp(24px,5vh,50px); z-index:2;
  display:flex; gap:16px; align-items:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.26em; color:var(--cream-dim);
}
.hero-meta .dot{ color:var(--gold); font-size:8px; }
.scroll-hint{
  position:absolute; right:var(--gut); bottom:clamp(24px,5vh,50px); z-index:2;
  display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:10px; letter-spacing:.3em; color:var(--cream-dim);
  writing-mode:vertical-rl; text-orientation:mixed;
}
.scroll-hint i{ width:1px; height:46px; background:linear-gradient(var(--gold),transparent); animation:drop 2.2s var(--ease) infinite; }
@keyframes drop{ 0%{ transform:scaleY(0); transform-origin:top; } 45%{ transform:scaleY(1); transform-origin:top; } 55%{ transform:scaleY(1); transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }
@media (max-width:820px){ .scroll-hint,.hero-meta{ display:none; } }

/* reveal-on-load for hero (NOT scroll-gated) */
.reveal-now{ opacity:0; transform:translateY(26px); animation:riseIn 1s var(--ease) forwards; animation-delay:var(--d,0s); }
@keyframes riseIn{ to{ opacity:1; transform:none; } }

/* ---------- generic section ---------- */
.section{ padding:clamp(80px,12vh,168px) var(--gut); position:relative; }
.kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:.36em; text-transform:uppercase;
  color:var(--gold); margin:0 0 22px;
}
.kicker.center{ text-align:center; }
.section-head{ max-width:820px; margin:0 auto clamp(48px,7vh,84px); text-align:center; }
.section-title{
  font-family:var(--serif); font-weight:500; line-height:1.02;
  font-size:clamp(34px,6vw,84px); margin:0 0 22px; letter-spacing:.01em;
}
.section-title em{ font-style:italic; color:var(--gold);
  background:linear-gradient(100deg,#f8ecc7,var(--gold-hi) 45%,var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.section-sub{ color:var(--cream-dim); font-size:clamp(14px,1.4vw,18px); max-width:40em; margin:0 auto; line-height:1.9; }

/* ---------- concept strip ---------- */
.strip{ padding:clamp(70px,11vh,150px) var(--gut); border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:
  radial-gradient(80% 140% at 50% 0%, rgba(217,183,117,.06), transparent 60%); }
.strip-inner{ max-width:900px; margin:0 auto; text-align:center; }
.strip-lead{ font-family:var(--serif); font-weight:400; font-size:clamp(26px,4.4vw,58px); line-height:1.28; margin:14px 0 0; }
.strip-lead em{ font-style:italic; color:var(--gold);
  background:linear-gradient(100deg,#f8ecc7,var(--gold-hi),var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ---------- suites ---------- */
.suites-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,30px); max-width:1320px; margin:0 auto; }
.suite{
  position:relative; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:var(--ink-2); transition:transform .5s var(--ease), border-color .5s, box-shadow .5s;
  transform-style:preserve-3d;
}
.suite:hover{ border-color:rgba(217,183,117,.5); box-shadow:0 30px 70px -40px rgba(0,0,0,.9); }
.suite-art{ aspect-ratio:4/5; position:relative; overflow:hidden; }
.suite-art::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%, rgba(11,11,13,.75)); }
.art-aurum{ background:
  radial-gradient(120% 90% at 30% 20%, rgba(244,223,171,.55), transparent 55%),
  conic-gradient(from 210deg at 60% 40%, #2a2216, #6b5227, #b78f45, #4d3c1e, #2a2216),
  #191510; }
.art-silk{ background:
  radial-gradient(120% 90% at 70% 25%, rgba(216,255,214,.14), transparent 55%),
  linear-gradient(150deg,#0f1a12 0%, #1d3122 40%, #3d5a3a 70%, #16221a 100%),
  #12180f; }
.art-lune{ background:
  radial-gradient(90% 70% at 50% 22%, rgba(230,236,255,.5), transparent 55%),
  linear-gradient(160deg,#12131c 0%, #262a3f 45%, #545a86 72%, #14151d 100%),
  #101018; }
.suite-body{ padding:26px 26px 30px; }
.suite-no{ font-family:var(--mono); font-size:11px; letter-spacing:.24em; color:var(--gold); }
.suite-body h3{ font-family:var(--serif); font-weight:500; font-size:clamp(24px,2.4vw,34px); margin:10px 0 8px; }
.suite-body p{ color:var(--cream-dim); font-size:14px; margin:0 0 16px; line-height:1.8; }
.suite-price{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; color:var(--cream); }

/* ---------- dining ---------- */
.dining{ background:linear-gradient(180deg, var(--ink), var(--ink-2)); }
.dining-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,5vw,84px); align-items:center; max-width:1320px; margin:0 auto; }
.dining-visual{ position:relative; aspect-ratio:1/1; border-radius:18px; overflow:hidden; border:1px solid var(--line); }
.dining-canvas{ position:absolute; inset:0; width:100%; height:100%; }
.dining-frame{ position:absolute; inset:12px; border:1px solid rgba(244,223,171,.28); border-radius:10px; pointer-events:none; }
.dining-list{ list-style:none; padding:0; margin:26px 0 30px; border-top:1px solid var(--line); }
.dining-list li{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:16px 0; border-bottom:1px solid var(--line); }
.dl-k{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; color:var(--gold); }
.dl-v{ color:var(--cream-dim); font-size:15px; }
@media (max-width:900px){ .dining-grid{ grid-template-columns:1fr; } }

/* ---------- spa ---------- */
.spa{ background:radial-gradient(90% 120% at 50% 0%, rgba(217,183,117,.05), transparent 55%); }
.spa-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); max-width:1200px; margin:0 auto; }
.spa-card{ padding:clamp(28px,3vw,44px) clamp(24px,2.4vw,34px); border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent); transition:transform .5s var(--ease), border-color .5s, background .5s; }
.spa-card:hover{ transform:translateY(-6px); border-color:rgba(217,183,117,.45); background:linear-gradient(180deg, rgba(217,183,117,.06), transparent); }
.spa-glyph{ font-size:34px; color:var(--gold); display:block; margin-bottom:18px; }
.spa-card h3{ font-family:var(--serif); font-weight:500; font-size:clamp(22px,2.2vw,30px); margin:0 0 10px; }
.spa-card p{ color:var(--cream-dim); font-size:14px; margin:0; line-height:1.85; }
@media (max-width:760px){ .spa-grid,.suites-grid{ grid-template-columns:1fr; } }

/* ---------- reserve ---------- */
.reserve{ position:relative; text-align:center; overflow:hidden; border-top:1px solid var(--line); }
.reserve-glow{ position:absolute; inset:0; z-index:0; pointer-events:none; background:
  radial-gradient(60% 60% at 50% 20%, rgba(217,183,117,.16), transparent 60%); }
.reserve-inner{ position:relative; z-index:1; max-width:960px; margin:0 auto; }
.reserve-title{ font-family:var(--serif); font-weight:500; font-size:clamp(36px,6.4vw,92px); line-height:1.02; margin:12px 0 16px; }
.reserve-title em{ font-style:italic; color:var(--gold);
  background:linear-gradient(100deg,#f8ecc7,var(--gold-hi),var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.reserve-sub{ color:var(--cream-dim); font-size:clamp(14px,1.4vw,17px); margin:0 auto 40px; max-width:34em; }
.reserve-form{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:flex-end; max-width:820px; margin:0 auto 46px; }
.fld{ display:flex; flex-direction:column; gap:8px; text-align:left; flex:1 1 180px; min-width:150px; }
.fld span{ font-family:var(--mono); font-size:10px; letter-spacing:.22em; color:var(--gold); text-transform:uppercase; }
.fld input,.fld select{
  font-family:var(--mincho); font-size:15px; color:var(--cream);
  background:var(--ink-3); border:1px solid var(--line); border-radius:10px; padding:14px 16px;
  transition:border-color .3s; cursor:none;
}
.fld input:focus,.fld select:focus{ outline:none; border-color:var(--gold); }
.reserve-form .btn-gold{ flex:0 0 auto; }
.form-note{ flex:1 1 100%; font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--gold-hi); min-height:1em; margin:2px 0 0; }
.access{ display:flex; flex-wrap:wrap; gap:clamp(24px,5vw,72px); justify-content:center; border-top:1px solid var(--line); padding-top:36px; }
.access > div{ display:flex; flex-direction:column; gap:6px; }
.ac-k{ font-family:var(--mono); font-size:10px; letter-spacing:.26em; color:var(--gold); }
.ac-v{ color:var(--cream-dim); font-size:15px; }

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--line); padding:clamp(48px,7vh,80px) var(--gut); background:var(--ink-2); }
.foot-inner{ display:flex; flex-wrap:wrap; gap:30px; align-items:flex-start; justify-content:space-between; max-width:1320px; margin:0 auto; }
.foot-brand{ display:flex; flex-direction:column; }
.foot-links{ display:flex; gap:26px; flex-wrap:wrap; }
.foot-links a{ font-size:13px; letter-spacing:.1em; color:var(--cream-dim); transition:color .3s; }
.foot-links a:hover{ color:var(--gold); }
.foot-note{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--cream-dim); line-height:2; margin:0; text-align:right; }
.foot-note b{ color:var(--gold); font-weight:500; }
@media (max-width:760px){ .foot-note{ text-align:left; } }

/* ---------- scroll reveal (below-the-fold only) ---------- */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay:calc(var(--i,0) * .09s); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal,.reveal-now{ opacity:1 !important; transform:none !important; }
  .loader{ display:none !important; }
  .scroll-hint i{ background:var(--gold); }
}