/* ============================================================
   BLISS MOTEL — Rebrand · dark · neon · glassmorphism
   ============================================================ */

:root{
  --bg:        #08080a;
  --bg-2:      #0c0c10;
  --panel:     #101015;

  --ink:       #f6f4f7;
  --muted:     rgba(246,244,247,.62);
  --faint:     rgba(246,244,247,.40);
  --ghost:     rgba(246,244,247,.16);

  --red:       #ff2d55;
  --red-soft:  #ff6b86;
  --red-deep:  #c1102f;
  --red-glow:  rgba(255,45,85,.55);

  --glass:     rgba(255,255,255,.045);
  --glass-2:   rgba(255,255,255,.075);
  --glass-3:   rgba(255,255,255,.11);
  --stroke:    rgba(255,255,255,.11);
  --stroke-2:  rgba(255,255,255,.18);

  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
  --r-xl: 34px;

  --blur: 20px;
  --maxw: 1240px;

  --shadow: 0 30px 80px -30px rgba(0,0,0,.85);
  --shadow-red: 0 18px 50px -16px var(--red-glow);

  --display: "Space Grotesk", system-ui, sans-serif;
  --body: "Manrope", system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:var(--display); font-weight:600; line-height:1.05; margin:0; letter-spacing:-.02em; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
img{ display:block; max-width:100%; }
::selection{ background:var(--red); color:#fff; }

/* ---------- animated gradient background ---------- */
.bg-field{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:var(--bg);
  overflow:hidden;
}
.bg-field::before,
.bg-field::after{
  content:""; position:absolute; border-radius:50%;
  filter:blur(80px); opacity:.5; mix-blend-mode:screen;
}
.bg-field::before{
  width:60vw; height:60vw; left:-10vw; top:-15vw;
  background:radial-gradient(circle at 30% 30%, rgba(255,45,85,.55), transparent 60%);
  animation:drift1 22s ease-in-out infinite alternate;
}
.bg-field::after{
  width:55vw; height:55vw; right:-12vw; bottom:-18vw;
  background:radial-gradient(circle at 60% 60%, rgba(120,30,120,.5), transparent 62%);
  animation:drift2 26s ease-in-out infinite alternate;
}
.bg-grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes drift1{
  0%{ transform:translate(0,0) scale(1); }
  100%{ transform:translate(14vw,10vh) scale(1.25); }
}
@keyframes drift2{
  0%{ transform:translate(0,0) scale(1.1); }
  100%{ transform:translate(-12vw,-8vh) scale(.85); }
}
@media (prefers-reduced-motion: reduce){
  .bg-field::before,.bg-field::after{ animation:none; }
}

/* ---------- layout ---------- */
#app{ position:relative; z-index:2; }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.section{ padding:96px 0; position:relative; }
.section--tight{ padding:64px 0; }

.eyebrow{
  font-family:var(--display);
  font-size:12.5px; font-weight:600; letter-spacing:.32em; text-transform:uppercase;
  color:var(--red-soft); display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--red); box-shadow:0 0 8px var(--red); }

.h-xl{ font-size:clamp(40px,7vw,86px); }
.h-lg{ font-size:clamp(32px,4.6vw,56px); }
.h-md{ font-size:clamp(24px,3vw,36px); }
.lead{ color:var(--muted); font-size:clamp(16px,1.5vw,19px); max-width:60ch; }

.grad-text{
  background:linear-gradient(120deg,#fff 0%, #ffd0da 38%, var(--red) 72%, var(--red-deep) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- glass ---------- */
.glass{
  background:var(--glass);
  border:1px solid var(--stroke);
  backdrop-filter:blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(140%);
  border-radius:var(--r);
}
.glass-strong{ background:var(--glass-2); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border-radius:999px; border:1px solid transparent;
  font-family:var(--display); font-weight:600; font-size:14.5px; letter-spacing:.01em;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, border-color .25s;
  white-space:nowrap;
}
.btn svg{ width:17px; height:17px; }
.btn--primary{
  background:linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%);
  color:#fff; box-shadow:0 10px 30px -8px var(--red-glow), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 20px 44px -10px var(--red-glow), inset 0 1px 0 rgba(255,255,255,.3); }
.btn--ghost{
  background:var(--glass); border-color:var(--stroke-2); color:var(--ink);
  backdrop-filter:blur(10px);
}
.btn--ghost:hover{ transform:translateY(-2px); border-color:var(--red); box-shadow:0 0 0 1px var(--red-glow), 0 10px 30px -12px var(--red-glow); }
.btn--lg{ padding:17px 34px; font-size:16px; }
.btn--sm{ padding:10px 18px; font-size:13px; }
.btn--block{ width:100%; }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }

/* chip / tag */
.chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:999px;
  background:var(--glass); border:1px solid var(--stroke);
  font-size:12.5px; color:var(--muted); font-weight:500;
}
.chip svg{ width:14px; height:14px; color:var(--red-soft); }
.chip--neon{ color:var(--red-soft); border-color:var(--red-glow); background:rgba(255,45,85,.08); }

/* divider */
.hr{ height:1px; background:linear-gradient(90deg,transparent,var(--stroke-2),transparent); border:0; }

/* image placeholder */
.ph{
  position:relative; overflow:hidden; background:
    repeating-linear-gradient(135deg, #141319 0 14px, #0f0e13 14px 28px);
  display:flex; align-items:center; justify-content:center;
}
.ph span{
  font-family:"Space Grotesk",monospace; font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--faint);
  padding:6px 12px; border:1px dashed var(--ghost); border-radius:8px; background:rgba(0,0,0,.3);
}

/* tag overlay on real-but-illustrative photos */
.illus-tag{
  position:absolute; left:12px; bottom:12px; z-index:3;
  font-family:"Space Grotesk",monospace; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); background:rgba(0,0,0,.55); border:1px solid var(--stroke);
  padding:4px 9px; border-radius:6px; backdrop-filter:blur(6px);
}

/* ---------- utility ---------- */
.row{ display:flex; }
.col{ display:flex; flex-direction:column; }
.center{ align-items:center; }
.between{ justify-content:space-between; }
.gap-8{ gap:8px;} .gap-12{ gap:12px;} .gap-16{ gap:16px;} .gap-20{ gap:20px;} .gap-24{ gap:24px;} .gap-32{ gap:32px;}
.wrap-flex{ flex-wrap:wrap; }
.tcenter{ text-align:center; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-48{margin-top:48px}
.muted{ color:var(--muted); } .faint{ color:var(--faint); }
.price-red{ color:var(--red-soft); }
.full{ width:100%; }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; } }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

/* spotlight hover card sheen */
.sheen{ position:relative; }
.sheen::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,.08), transparent 45%);
  opacity:0; transition:opacity .3s;
}
.sheen:hover::after{ opacity:1; }

/* form controls */
.field{ display:flex; flex-direction:column; gap:8px; }
.field > label{ font-size:12.5px; font-weight:600; letter-spacing:.04em; color:var(--muted); text-transform:uppercase; font-family:var(--display); }
.input, .select{
  width:100%; padding:14px 16px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.04); border:1px solid var(--stroke);
  color:var(--ink); font-family:var(--body); font-size:15px;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.input::placeholder{ color:var(--faint); }
.input:focus, .select:focus{
  outline:none; border-color:var(--red);
  box-shadow:0 0 0 3px rgba(255,45,85,.16); background:rgba(255,255,255,.06);
}
select.select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23ff6b86' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:42px; }

/* scrollbar */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#26242c; border-radius:8px; border:3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:var(--red-deep); }