/* Fonts come from ../vendor/fonts/fonts.css (loaded by index.html) - the Google
   Fonts @import that used to sit here was the last network call on this page. */

:root{ --stone:#4a4742; --ivory:#f4f0ea; --bronze:#7a6648; --gold:#9c7c4a; --ease:cubic-bezier(.16,1,.3,1); }
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; background:#f1ece3; overflow:hidden;
  font-family:Inter,system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
#scene{ position:fixed; inset:0; width:100%; height:100%; display:block; }

/* soft warm fade at the bottom so the bronze title always reads over the marble */
.ground{ position:fixed; left:0; right:0; bottom:0; height:34%; z-index:2; pointer-events:none;
  background:linear-gradient(to top, rgba(244,240,233,.40) 0%, rgba(244,240,233,.15) 42%, transparent 100%); }

.overlay{ position:fixed; inset:0; display:flex; align-items:flex-end; justify-content:center; pointer-events:none; z-index:3; }
#ui{ text-align:center; pointer-events:auto; padding-bottom:clamp(4vh,7vh,9vh); }

.title{ font-family:'Cormorant Garamond', serif; font-weight:600; line-height:1; letter-spacing:.012em;
  font-size:clamp(3.6rem,8.6vw,7.4rem);
  background:linear-gradient(105deg,#8a6c40 0%,#9c7c4a 32%,#c8a96f 44%,#f7eed4 50%,#c8a96f 56%,#9c7c4a 68%,#7d6038 100%);
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  animation: titleSheen 13s linear infinite, titleGlow 7s ease-in-out infinite; }
/* a single soft band of light passing slowly THROUGH the wordmark, one direction, looping */
@keyframes titleSheen{ from{ background-position:135% 50%; } to{ background-position:-35% 50%; } }
@keyframes titleGlow{
  0%,100%{ filter:drop-shadow(0 1px 0 rgba(255,255,255,.6)) drop-shadow(0 2px 6px rgba(70,52,26,.28)); }
  50%{ filter:drop-shadow(0 1px 0 rgba(255,255,255,.72)) drop-shadow(0 2px 8px rgba(70,52,26,.30)) drop-shadow(0 0 20px rgba(244,230,198,.55)); }
}
.tagline{ font-family:'Cormorant Garamond', serif; font-weight:500; letter-spacing:.42em; text-transform:uppercase;
  font-size:clamp(.95rem,1.5vw,1.25rem); margin-top:12px; padding-left:.42em;
  background:linear-gradient(105deg,#7a6038 0%,#8a6c40 34%,#b89a64 47%,#e7d6ab 50%,#b89a64 53%,#8a6c40 66%,#6f5630 100%);
  background-size:320% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  /* same shimmer as the title, but staggered - starts AFTER the title's sweep (delay + different speed) */
  animation: titleSheen 11s linear infinite; animation-delay:6.5s; }
.divider{ display:flex; align-items:center; justify-content:center; gap:14px; margin:20px auto 26px; }
.divider i{ display:block; height:1px; width:clamp(60px,9vw,120px); background:linear-gradient(90deg,transparent,#b9a071); }
.divider i:last-child{ background:linear-gradient(90deg,#b9a071,transparent); }
.divider .gem{ width:7px; height:7px; transform:rotate(45deg); background:#b9a071; box-shadow:0 0 0 3px rgba(185,160,113,.16); }

/* carved, voluminous MARBLE button - real marble texture + bevel + bronze engraving */
.enter{ font-family:'Cormorant Garamond', serif; font-weight:600; font-size:clamp(1.2rem,1.9vw,1.55rem); letter-spacing:.22em;
  color:#5a4630; cursor:pointer; padding:18px 66px; border-radius:999px; position:relative; border:1px solid #c4ad7e;
  background-image:url('../assets/textures/marble-texture-tile.png'), linear-gradient(180deg,#fdf9f0,#ece0c8);
  background-size:cover, cover; background-position:center; background-blend-mode:soft-light, normal;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
  box-shadow:
    inset 0 3px 6px rgba(255,255,255,.9),
    inset 0 -6px 10px rgba(120,95,55,.30),
    inset 0 0 0 4px rgba(255,255,255,.45),
    inset 0 0 0 5px rgba(196,173,126,.7),
    0 18px 36px -12px rgba(70,52,26,.5),
    0 3px 0 rgba(255,255,255,.55);
  transition:transform .14s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease); }
.enter:hover{ transform:translateY(-2px); filter:brightness(1.04);
  box-shadow:
    inset 0 3px 6px rgba(255,255,255,1),
    inset 0 -6px 10px rgba(120,95,55,.28),
    inset 0 0 0 4px rgba(255,255,255,.6),
    inset 0 0 0 5px rgba(208,186,140,.8),
    0 24px 44px -12px rgba(70,52,26,.55),
    0 3px 0 rgba(255,255,255,.6); }
.enter:active{ transform:translateY(0) scale(.98); }

#veil{ position:fixed; inset:0; z-index:4; opacity:0; pointer-events:none;
  background:radial-gradient(62% 62% at 50% 46%, #fdf6e8 0%, #f6ecd8 52%, #efe3cf 100%); }

#menu{ position:fixed; inset:0; opacity:0; pointer-events:none; z-index:5; display:grid; place-items:center;
  background:url('../assets/textures/marble-wall.png') center/cover; }
.menu-card{ display:flex; flex-direction:column; gap:4px; padding:34px 42px; border-radius:24px;
  background:rgba(255,255,255,.74); backdrop-filter:blur(10px) saturate(1.1);
  border:1px solid rgba(0,0,0,.06); box-shadow:0 40px 90px -30px rgba(28,27,34,.34); }
.menu-card .mtitle{ font-family:'Cormorant Garamond', serif; font-weight:600; font-size:2.4rem; letter-spacing:.01em;
  color:#7d6038; margin-bottom:14px; }
.mrow{ font-weight:600; color:#4a4742; padding:13px 16px; border-radius:12px; cursor:pointer; min-width:300px;
  display:flex; align-items:center; gap:12px; transition:background .2s var(--ease), color .2s var(--ease); }
.mrow:hover{ background:#efe9df; color:#322f2a; }
.mrow .ic{ width:18px; height:18px; color:#9c7c4a; }

.replay{ position:fixed; right:22px; bottom:22px; z-index:6; pointer-events:auto;
  display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 18px; border-radius:999px;
  border:1px solid rgba(122,102,72,.3); background:rgba(255,255,255,.66); backdrop-filter:blur(8px);
  color:#6a5230; font-family:'Cormorant Garamond', serif; font-weight:600; letter-spacing:.14em; font-size:.92rem; cursor:pointer;
  transition:background .2s var(--ease); }
.replay:hover{ background:#fff; }