/* Crown Stay Casino Hotel — design tokens & custom styles */

:root{
  --ink:#0E1512;
  --ink-2:#0A0F0C;
  --panel:#142019;
  --panel-2:#1A2620;
  --emerald:#1B4332;
  --emerald-light:#2F6B4F;
  --gold:#C9A227;
  --gold-soft:#E7C873;
  --gold-dim:#8A6E22;
  --cream:#F3ECDD;
  --cream-dim:#DCD2B9;
  --wine:#6B1E2B;
  --wine-light:#8B2C3D;
  --muted:#B9C4BC;
  --line:rgba(201,162,39,0.28);
}

html{scroll-behavior:smooth;}

body{
  background-color:var(--ink);
  color:var(--cream);
  font-family:'Karla', ui-sans-serif, system-ui, sans-serif;
}

.font-display{font-family:'Fraunces', Georgia, serif;}

/* Selection */
::selection{background:var(--gold); color:var(--ink);}

/* Scrollbar */
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-track{background:var(--ink);}
::-webkit-scrollbar-thumb{background:var(--gold-dim); border-radius:0;}

/* Hairline rule */
.hairline{border-top:1px solid var(--line);}
.hairline-b{border-bottom:1px solid var(--line);}

/* Gold underline link */
.link-gold{position:relative; color:var(--cream); text-decoration:none;}
.link-gold::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:-2px;
  height:1px; background:var(--gold);
  transition:right .35s cubic-bezier(.22,.61,.36,1);
}
.link-gold:hover::after{right:0;}

/* Nav link active state */
.nav-link{color:var(--cream-dim); transition:color .2s ease;}
.nav-link:hover, .nav-link.is-active{color:var(--gold-soft);}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.85rem 1.75rem;
  font-family:'Karla',sans-serif; font-weight:700; font-size:.9rem;
  letter-spacing:.02em;
  border:1px solid transparent;
  transition:all .25s ease;
  border-radius:2px;
}
.btn-gold{background:var(--gold); color:var(--ink-2); border-color:var(--gold);}
.btn-gold:hover{background:var(--gold-soft); border-color:var(--gold-soft); transform:translateY(-1px);}
.btn-outline{background:transparent; color:var(--cream); border-color:var(--line);}
.btn-outline:hover{border-color:var(--gold); color:var(--gold-soft);}
.btn-wine{background:var(--wine); color:var(--cream); border-color:var(--wine);}
.btn-wine:hover{background:var(--wine-light); border-color:var(--wine-light);}

/* Card */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:2px;
}

/* Chip / tag */
.chip{
  display:inline-flex; align-items:center;
  border:1px solid var(--line); color:var(--gold-soft);
  padding:.25rem .7rem; font-size:.75rem; letter-spacing:.03em;
  border-radius:2px;
}

/* Section label — small, sentence case, not tracked-out all caps */
.eyebrow{
  color:var(--gold-soft);
  font-family:'Fraunces',serif;
  font-style:italic;
  font-weight:500;
}

/* Diamond divider (card-suit motif, used sparingly) */
.diamond-divider{
  width:8px; height:8px; background:var(--gold);
  transform:rotate(45deg);
}

/* Image treatment */
.img-frame{
  position:relative;
  border:1px solid var(--line);
  padding:8px;
}
.img-frame img{display:block; width:100%; height:100%; object-fit:cover;}

/* Marquee ticker */
.ticker-track{
  display:flex; width:max-content;
  animation:ticker 32s linear infinite;
}
@keyframes ticker{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* Numbered step (legitimate sequence use only) */
.step-num{
  font-family:'Fraunces',serif; font-weight:600; font-size:2.25rem;
  color:var(--gold);
  line-height:1;
}

/* Accordion chevron rotation handled via Alpine x-bind class */
.accordion-icon{transition:transform .25s ease;}

/* Fade-in on load (single orchestrated moment, hero only) */
@keyframes riseIn{
  from{opacity:0; transform:translateY(14px);}
  to{opacity:1; transform:translateY(0);}
}
.rise-in{animation:riseIn .8s cubic-bezier(.22,.61,.36,1) both;}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .ticker-track{animation:none;}
  .rise-in{animation:none;}
  *{transition-duration:.01ms !important;}
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--gold-soft);
  outline-offset:3px;
}

/* Mobile menu panel */
.mobile-panel{
  background:var(--ink-2);
  border-top:1px solid var(--line);
}

/* Testimonial quote mark */
.quote-mark{
  font-family:'Fraunces',serif;
  color:var(--gold);
  font-size:4rem;
  line-height:1;
}

/* Table (for e.g. room comparisons) */
table.rate-table th, table.rate-table td{
  border-bottom:1px solid var(--line);
  padding:.85rem 1rem;
  text-align:left;
}
table.rate-table th{
  font-family:'Fraunces',serif; font-weight:500; color:var(--gold-soft);
}

/* Light section variant */
.section-cream{background:var(--cream); color:#241F18;}
.section-cream .card{background:#fff; border-color:rgba(107,30,43,0.14);}
.section-cream .eyebrow{color:var(--wine);}

/* Back to top */
#backToTop{
  transition:opacity .3s ease, transform .3s ease;
}