/* ═══════════════════════════════════════════════════════
   AURUM — An Evening, Not A Website
   time is the scrollbar · fire is the cursor
═══════════════════════════════════════════════════════ */
:root{
  --black:#080706;
  --coal:#141110;
  --gold:#c9a227;
  --champagne:#e8d5a3;
  --cream:#f3ecdd;
  --grey:#8d857a;
  --serif:'Cormorant Garamond',serif;
  --display:'Italiana',serif;
  --sans:'Inter',sans-serif;
  --ease:cubic-bezier(.77,0,.175,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{
  background:var(--black);color:var(--cream);
  font-family:var(--sans);font-weight:300;
  cursor:none;touch-action:none;
  -webkit-user-select:none;user-select:none;
}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:none;background:none;border:none;color:inherit}
input,select{cursor:none}
::selection{background:var(--gold);color:var(--black)}

/* ═══ FLAME CANVAS (the cursor) ═══ */
#flameCanvas{position:fixed;inset:0;z-index:120;pointer-events:none}
#grain{
  position:fixed;inset:0;z-index:110;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══ IGNITE ═══ */
#ignite{
  position:fixed;inset:0;z-index:100;background:var(--black);
  display:flex;align-items:center;justify-content:center;text-align:center;
  transition:opacity 1.4s var(--ease),visibility 1.4s;
}
#ignite.is-done{opacity:0;visibility:hidden}
.ignite__brand{
  font-family:var(--display);font-size:clamp(2.2rem,6vw,4rem);
  letter-spacing:.5em;margin-bottom:7vh;color:var(--cream);opacity:.9;
  animation:brandIn 2s var(--ease) both;
}
@keyframes brandIn{from{opacity:0;letter-spacing:.9em}to{opacity:.9;letter-spacing:.5em}}
.ignite__matchzone{position:relative;width:min(560px,84vw);height:170px;margin:0 auto}
.match{
  position:absolute;left:8%;top:10px;width:150px;height:74px;
  touch-action:none;will-change:transform;
}
.match__stick{
  position:absolute;left:26px;top:32px;width:118px;height:7px;border-radius:4px;
  background:linear-gradient(90deg,#caa96f,#8a6d3d);
  transform:rotate(-8deg);transform-origin:left center;
}
.match__head{
  position:absolute;left:8px;top:20px;width:26px;height:26px;border-radius:50% 50% 46% 46%;
  background:radial-gradient(circle at 38% 32%,#8c3b2e,#4a1a12 70%);
  box-shadow:inset -2px -3px 6px rgba(0,0,0,.5);
}
.match__flame{
  position:absolute;left:5px;top:-26px;width:32px;height:46px;opacity:0;
  background:radial-gradient(ellipse at 50% 82%,#fff6d8 0%,#ffd27a 28%,#ff9a3c 55%,rgba(255,90,30,.25) 78%,transparent 100%);
  border-radius:50% 50% 42% 42%/62% 62% 38% 38%;
  filter:blur(.5px);transform-origin:50% 90%;
}
.match.is-lit .match__flame{opacity:1;animation:flick .12s infinite alternate}
@keyframes flick{from{transform:scale(1) rotate(-2deg)}to{transform:scale(1.08,.94) rotate(2.5deg)}}
.ignite__strip{
  position:absolute;left:0;right:0;bottom:0;height:44px;border-radius:6px;
  background:linear-gradient(180deg,#241e19,#191411);
  border:1px solid rgba(243,236,221,.1);
  display:flex;align-items:center;justify-content:space-evenly;overflow:hidden;
}
.ignite__strip span{width:3px;height:60%;background:rgba(140,80,50,.35);transform:skewX(-18deg)}
.ignite__hint{font-size:.66rem;letter-spacing:.45em;color:var(--gold);margin-top:5vh}
.ignite__sub{
  font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--grey);
  margin-top:2.2vh;line-height:1.8;
}

/* ═══ CHROME ═══ */
.chrome{position:fixed;left:0;right:0;z-index:50;opacity:0;visibility:hidden;transition:opacity 1.2s 1s,visibility 1.2s 1s}
body.is-live .chrome{opacity:1;visibility:visible}
.chrome--top{top:0;display:flex;align-items:flex-start;justify-content:space-between;padding:1.6rem 2.4rem}
.brand{font-family:var(--display);font-size:1.3rem;letter-spacing:.32em}
.brand em{color:var(--gold);font-style:normal;font-size:.7em;vertical-align:middle}
.clock{text-align:center}
.clock b{
  display:block;font-family:var(--serif);font-weight:300;
  font-size:clamp(2.2rem,4.5vw,3.4rem);line-height:1;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
}
.clock span{font-size:.58rem;letter-spacing:.55em;color:var(--gold);display:block;margin-top:.5rem}
.chrome__tag{font-size:.56rem;letter-spacing:.32em;color:var(--grey);text-align:right;line-height:2}

.chrome--bottom{bottom:0;padding:0 2.4rem 1.4rem;text-align:center}
.evenline{position:relative;max-width:920px;margin:0 auto;height:64px}
.evenline__wire{
  position:absolute;left:0;right:0;top:14px;height:1px;
  background:rgba(243,236,221,.14);
}
.evenline__wire i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),#ff9a3c);box-shadow:0 0 8px rgba(255,154,60,.8)}
.evenline__node{
  position:absolute;top:0;left:calc(var(--i)/6*100%);transform:translateX(-50%);
  padding-top:8px;color:var(--grey);transition:color .4s;
}
.evenline__node::before{
  content:'';display:block;width:7px;height:7px;border-radius:50%;
  background:var(--coal);border:1px solid rgba(243,236,221,.3);
  margin:0 auto 8px;transition:all .4s;
}
.evenline__node.is-past::before{background:var(--gold);border-color:var(--gold)}
.evenline__node.is-now{color:var(--cream)}
.evenline__node.is-now::before{
  background:#ffb84d;border-color:#ffb84d;
  box-shadow:0 0 12px 3px rgba(255,170,60,.55);transform:scale(1.35);
}
.evenline__node b{display:block;font-size:.6rem;letter-spacing:.12em;font-weight:500;font-variant-numeric:tabular-nums}
.evenline__node span{display:block;font-size:.55rem;letter-spacing:.18em;margin-top:.3rem;font-family:var(--serif);font-style:italic;font-size:.72rem}
.movehint{font-size:.56rem;letter-spacing:.4em;color:#5d564c;margin-top:.6rem}

/* ═══ STAGE / SKY ═══ */
#stage{position:fixed;inset:0;z-index:1;opacity:0;transition:opacity 1.6s .4s}
body.is-live #stage{opacity:1}
#skyDusk,#skyNight{position:absolute;inset:0}
#skyDusk{background:linear-gradient(180deg,#101623 0%,#1d1a22 42%,#3a2417 78%,#120d08 100%)}
#skyNight{background:linear-gradient(180deg,#05070c 0%,#0a0908 60%,#080706 100%);opacity:0}

/* ═══ CHAPTERS ═══ */
.ch{
  position:absolute;inset:0;visibility:hidden;opacity:0;
  will-change:transform,opacity;overflow:hidden;
}
.ch__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.ch__bg--dim{filter:brightness(.5)}
.ch__bg--dark{filter:brightness(.34)}
.ch__tint{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,7,6,.86) 0%,rgba(8,7,6,.25) 55%,rgba(8,7,6,.5) 100%)}
.ch__tint--heavy{background:linear-gradient(90deg,rgba(8,7,6,.9) 0%,rgba(8,7,6,.35) 60%,rgba(8,7,6,.65) 100%)}

.ch__panel{
  position:absolute;left:5vw;bottom:16vh;max-width:34rem;z-index:5;
}
.ch__panel--top{top:14vh;bottom:auto}
.ch__time{font-size:.6rem;letter-spacing:.5em;color:var(--gold);display:block;margin-bottom:1.1rem}
.ch__panel h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.6rem,6.5vw,5rem);line-height:1;letter-spacing:-.01em;
}
.ch__panel p{color:#c9c0b0;line-height:1.85;font-size:.93rem;margin-top:1.2rem;max-width:30rem;text-shadow:0 1px 12px rgba(0,0,0,.7)}
.ch__panel p b{color:var(--champagne);font-weight:500}
.ch__p-small{font-size:.85rem!important;color:var(--grey)!important}
.ch__panel--glass{
  background:rgba(8,7,6,.55);backdrop-filter:blur(10px);
  border:1px solid rgba(201,162,39,.2);padding:2rem 2.2rem;bottom:12vh;
}
.ch__panel--mid{
  left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);
  text-align:center;max-width:44rem;width:min(44rem,92vw);
}
.ch__corner{position:absolute;font-size:.56rem;letter-spacing:.4em;color:rgba(201,162,39,.75);z-index:5}
.ch__corner--tl{top:12vh;left:5vw;border:1px solid rgba(201,162,39,.3);padding:.7em 1.2em;background:rgba(8,7,6,.35);backdrop-filter:blur(4px)}
.ch__corner--br{bottom:14vh;right:5vw}
#villaCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* step-inside button */
.stepin{
  margin-top:1.8rem;display:inline-block;
  font-size:.62rem;letter-spacing:.32em;color:var(--champagne);
  border:1px solid rgba(201,162,39,.45);border-radius:99px;
  padding:1em 1.7em;background:rgba(8,7,6,.4);backdrop-filter:blur(6px);
  transition:all .4s var(--ease);
}
.stepin:hover{background:var(--gold);color:var(--black);border-color:var(--gold)}

/* ═══ CH1 · DARKNESS + CANDLES ═══ */
.dark{
  position:absolute;inset:0;z-index:3;background:#040302;
  -webkit-mask-image:radial-gradient(circle var(--r,150px) at var(--fx,50%) var(--fy,50%),transparent 0%,rgba(0,0,0,.25) 45%,black 78%);
  mask-image:radial-gradient(circle var(--r,150px) at var(--fx,50%) var(--fy,50%),transparent 0%,rgba(0,0,0,.25) 45%,black 78%);
}
#candleField{position:absolute;inset:0;z-index:4;pointer-events:none}
.candle{
  position:absolute;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle,#ffe9b0 0%,#ffb84d 45%,transparent 70%);
  box-shadow:0 0 14px 5px rgba(255,170,60,.35);
  animation:candleFlick 1.4s ease-in-out infinite alternate;
  transform:translate(-50%,-50%);
}
@keyframes candleFlick{from{opacity:.7;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1.15)}}
.candlemeter{margin-top:1.6rem;display:flex;align-items:baseline;gap:.7rem}
.candlemeter b{font-family:var(--serif);font-size:2.4rem;font-weight:300;color:var(--champagne);font-variant-numeric:tabular-nums}
.candlemeter span{font-size:.58rem;letter-spacing:.4em;color:var(--gold)}
.litnote{
  position:absolute;top:14vh;left:50%;transform:translateX(-50%);z-index:6;
  font-size:.62rem;letter-spacing:.5em;color:var(--champagne);
  border:1px solid rgba(232,213,163,.4);padding:1em 1.8em;border-radius:99px;
  background:rgba(8,7,6,.5);backdrop-filter:blur(8px);
  opacity:0;transition:opacity 1s;white-space:nowrap;
}
.litnote.is-on{opacity:1}

/* ═══ CH2 · POLAROID ═══ */
.polaroid{
  position:absolute;z-index:4;width:min(310px,30vw);
  background:#0e0c0a;border:1px solid rgba(243,236,221,.12);
  padding:.9rem .9rem 1.1rem;box-shadow:0 40px 90px rgba(0,0,0,.65);
  will-change:transform;
}
.polaroid--r{right:7vw;top:50%;transform:translateY(-50%) rotate(3.2deg)}
.polaroid img{width:100%;aspect-ratio:1;object-fit:cover}
.polaroid figcaption{font-size:.54rem;letter-spacing:.28em;color:var(--grey);margin-top:.9rem;text-align:center}

/* ═══ CH3 · COURSES ═══ */
.courses{position:absolute;inset:0;z-index:4;pointer-events:none}
.course{
  position:absolute;left:50%;top:54%;
  width:min(46vh,420px);text-align:center;
  will-change:transform,opacity;opacity:0;
}
.course__plate{
  width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;
  border:1px solid rgba(201,162,39,.35);
  box-shadow:0 50px 110px rgba(0,0,0,.8),0 0 0 14px rgba(8,7,6,.55),0 0 0 15px rgba(201,162,39,.18);
}
.course__plate img{width:100%;height:100%;object-fit:cover}
.course figcaption{margin-top:1.4rem}
.course figcaption i{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:1.15rem;display:block}
.course figcaption b{font-family:var(--serif);font-weight:400;font-size:1.7rem;display:block;margin:.25rem 0;letter-spacing:.02em}
.course figcaption span{font-size:.62rem;letter-spacing:.3em;color:var(--grey)}
.menuchips{
  position:absolute;right:5vw;top:14vh;z-index:5;display:flex;flex-direction:column;gap:.6rem;align-items:flex-end;
}
.menuchips span{
  font-size:.58rem;letter-spacing:.3em;color:var(--grey);
  border:1px solid rgba(243,236,221,.16);border-radius:99px;padding:.8em 1.4em;
  background:rgba(8,7,6,.45);backdrop-filter:blur(6px);
}
.menuchips .is-gold{color:var(--champagne);border-color:rgba(201,162,39,.5)}

/* ═══ CH6 · MIDNIGHT ═══ */
.claim{
  display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2.4rem;
}
.claim input,.claim select{
  background:rgba(8,7,6,.5);border:1px solid rgba(243,236,221,.22);
  color:var(--cream);font-family:var(--sans);font-size:.72rem;letter-spacing:.18em;
  padding:1em 1.3em;border-radius:2px;outline:none;min-width:10rem;
  transition:border-color .3s;color-scheme:dark;
}
.claim input:focus,.claim select:focus{border-color:var(--gold)}
.claim select option{background:var(--coal)}
.claim button{
  background:var(--gold);color:var(--black);font-size:.66rem;letter-spacing:.3em;
  padding:1em 1.8em;border-radius:2px;font-weight:500;transition:background .3s;
}
.claim button:hover{background:var(--champagne)}
.claim__note{font-size:.6rem;letter-spacing:.14em;color:#5d564c;margin-top:1.1rem}
.fin{display:flex;gap:4vw;justify-content:center;margin-top:5vh;flex-wrap:wrap}
.fin h4{font-size:.56rem;letter-spacing:.45em;color:var(--gold);margin-bottom:.6rem;font-weight:500}
.fin p{font-size:.78rem;color:var(--grey);letter-spacing:.05em}
.fin__base{margin-top:5vh;font-size:.56rem;letter-spacing:.3em;color:#4c463e}

/* ═══ 360 OVERLAY ═══ */
#tourOverlay{
  position:fixed;inset:0;z-index:80;background:var(--black);
  opacity:0;visibility:hidden;transition:opacity .9s var(--ease),visibility .9s;
}
#tourOverlay.is-open{opacity:1;visibility:visible}
#tourCanvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.tour__loading{
  position:absolute;inset:0;z-index:5;background:var(--black);
  display:flex;flex-direction:column;gap:1.2rem;align-items:center;justify-content:center;
  transition:opacity .8s,visibility .8s;
}
.tour__loading.is-done{opacity:0;visibility:hidden}
.tour__loading i{width:40px;height:40px;border-radius:50%;border:1px solid rgba(201,162,39,.25);border-top-color:var(--gold);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tour__loading span{font-size:.6rem;letter-spacing:.5em;color:var(--gold)}
.tour__top{
  position:absolute;top:0;left:0;right:0;z-index:4;
  display:flex;justify-content:space-between;align-items:center;padding:1.6rem 2.4rem;
  background:linear-gradient(rgba(8,7,6,.7),transparent);
}
.tour__top span{font-size:.62rem;letter-spacing:.5em;color:var(--champagne)}
#tourClose{
  font-size:.6rem;letter-spacing:.28em;color:var(--cream);
  border:1px solid rgba(243,236,221,.25);border-radius:99px;padding:.9em 1.5em;
  background:rgba(8,7,6,.45);transition:all .3s;
}
#tourClose:hover{border-color:var(--gold);color:var(--gold)}
.tour__rooms{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:4;
  display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;
}
.tour__rooms button{
  font-size:.6rem;letter-spacing:.26em;color:var(--cream);
  border:1px solid rgba(243,236,221,.2);border-radius:99px;padding:.9em 1.5em;
  background:rgba(8,7,6,.5);backdrop-filter:blur(8px);transition:all .35s;
}
.tour__rooms button:hover{border-color:var(--gold);color:var(--gold)}
.tour__rooms button.is-active{background:var(--gold);color:var(--black);border-color:var(--gold)}
.tour__hint{
  position:absolute;top:4.6rem;left:50%;transform:translateX(-50%);z-index:4;
  font-size:.56rem;letter-spacing:.3em;color:var(--grey);white-space:nowrap;
}

/* ═══ RESPONSIVE ═══ */
@media(max-width:900px){
  body{cursor:auto}
  button,input,select{cursor:pointer}
  .chrome__tag{display:none}
  .chrome--top{padding:1.1rem 1.3rem}
  .evenline__node span{display:none}
  .movehint{font-size:.5rem;letter-spacing:.25em}
  .ch__panel{left:6vw;right:6vw;bottom:18vh;max-width:none}
  .ch__panel--glass{padding:1.4rem 1.4rem}
  .ch__panel h2{font-size:clamp(2.2rem,10vw,3.2rem)}
  .polaroid{display:none}
  .menuchips{top:auto;bottom:19vh;right:6vw;flex-direction:row;flex-wrap:wrap}
  .course{width:min(60vw,320px);top:46%}
  .ch__corner--tl{top:16vh}
  .ch__corner--br{display:none}
  .fin{gap:6vw}
  .claim input,.claim select{min-width:0;flex:1 1 40%}
  .tour__hint{display:none}
}