/*
Theme Name: Lasoa Cigar Lounge
Theme URI: https://lasoacigarlounge.com
Author: Lasoa Cigar Lounge
Description: A one-page "coming soon" theme for Lasoa Cigar Lounge — obsidian black, silk cream, and burnished brass, with a drifting smoke atmosphere and a three-panel preview of the lounge.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lasoa
*/

:root{
  --obsidian: #0a0908;
  --obsidian-2: #14110f;
  --obsidian-3: #1c1814;
  --brass: #ad8a4e;
  --brass-bright: #d9b06a;
  --brass-dim: #6f5a34;
  --cream: #f2e9d8;
  --cream-dim: rgba(242,233,216,0.62);
  --hair: rgba(242,233,216,0.12);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html,body{
  background: var(--obsidian);
  color: var(--cream);
  font-family: 'EB Garamond', serif;
  overflow-x:hidden;
}

body{ position:relative; }

a{ color:inherit; text-decoration:none; }

img{ max-width:100%; display:block; }

/* ---------- Ambient smoke field (drifts across the whole page) ---------- */
.smoke-field{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.smoke-field::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 40% at 18% 30%, rgba(242,233,216,0.05), transparent 60%),
    radial-gradient(ellipse 50% 35% at 85% 20%, rgba(242,233,216,0.04), transparent 60%),
    radial-gradient(ellipse 70% 45% at 50% 90%, rgba(173,138,78,0.035), transparent 65%);
}
.wisp{
  position:absolute;
  border-radius:50%;
  filter: blur(60px);
  background: radial-gradient(circle, rgba(242,233,216,0.10) 0%, rgba(242,233,216,0) 70%);
  mix-blend-mode: screen;
  opacity:0.6;
  will-change: transform, opacity;
}
.wisp.w1{ width:60vw; height:60vw; top:-20vh; left:-15vw; animation: drift1 48s ease-in-out infinite; }
.wisp.w2{ width:50vw; height:50vw; bottom:-25vh; right:-10vw; animation: drift2 60s ease-in-out infinite; }
.wisp.w3{ width:40vw; height:40vw; top:35vh; right:20vw; animation: drift3 40s ease-in-out infinite; opacity:0.35; }
.wisp.w4{ width:35vw; height:35vw; bottom:10vh; left:10vw; animation: drift1 55s ease-in-out infinite reverse; opacity:0.3; }
.wisp.w5{ width:45vw; height:45vw; top:60vh; left:35vw; animation: drift3 65s ease-in-out infinite reverse; opacity:0.28; }

@keyframes drift1{
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(6vw,4vh) scale(1.15); }
  100% { transform: translate(0,0) scale(1); }
}
@keyframes drift2{
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(-5vw,-6vh) scale(1.1); }
  100% { transform: translate(0,0) scale(1); }
}
@keyframes drift3{
  0%   { transform: translate(0,0) rotate(0deg); }
  50%  { transform: translate(-4vw,3vh) rotate(8deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}

/* slow horizontal fog band for a stronger sense of drifting */
.fog-band{
  position:absolute;
  left:-15%;
  width:130%;
  height:46vh;
  bottom:-12vh;
  background: repeating-linear-gradient(
    100deg,
    rgba(242,233,216,0.035) 0px,
    rgba(242,233,216,0.035) 2px,
    transparent 2px,
    transparent 130px
  );
  filter: blur(46px);
  animation: fog-drift 80s linear infinite;
  opacity:0.55;
}
@keyframes fog-drift{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-16%); }
}

.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(ellipse 80% 70% at 50% 40%, transparent 40%, rgba(0,0,0,0.6) 100%);
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  z-index:2;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 8vh 6vw;
}

.stage{
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width: 720px;
  width:100%;
}

.eyebrow{
  font-size: clamp(0.68rem, 1.1vw, 0.8rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  display:flex;
  align-items:center;
  gap: 0.9em;
  margin-bottom: clamp(2.2rem, 5vw, 3.5rem);
}
.eyebrow::before, .eyebrow::after{
  content:"";
  width: clamp(20px, 4vw, 44px);
  height:1px;
  background: linear-gradient(90deg, transparent, var(--brass-dim));
}
.eyebrow::after{ background: linear-gradient(90deg, var(--brass-dim), transparent); }

.logo-wrap{
  position:relative;
  width: min(78vw, 460px);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.logo-wrap img{
  width:100%;
  height:auto;
  filter: drop-shadow(0 0 32px rgba(173,138,78,0.16)) drop-shadow(0 14px 28px rgba(0,0,0,0.6));
}

.ember{
  position:absolute;
  top: 30%;
  left: 88%;
  width: 10px;
  height: 10px;
  border-radius:50%;
  background: radial-gradient(circle, #fff2d9 0%, var(--brass-bright) 45%, transparent 75%);
  box-shadow: 0 0 8px 3px rgba(217,176,106,0.7), 0 0 22px 10px rgba(173,138,78,0.35);
  animation: ember-glow 3.2s ease-in-out infinite;
}
@keyframes ember-glow{
  0%,100%{ opacity:0.55; transform: scale(0.9); }
  50%    { opacity:1;    transform: scale(1.15); }
}
.tip-smoke{
  position:absolute;
  top: -6%;
  left: 84%;
  width: 130px;
  height: 220px;
  pointer-events:none;
  opacity:0.55;
}
.tip-smoke span{
  position:absolute;
  bottom:0; left:50%;
  width:10px; height:10px;
  border-radius:50%;
  background: rgba(242,233,216,0.26);
  filter: blur(6px);
  animation: rise 5.5s ease-in infinite;
}
.tip-smoke span:nth-child(1){ animation-delay:0s; }
.tip-smoke span:nth-child(2){ animation-delay:1.4s; left:56%; }
.tip-smoke span:nth-child(3){ animation-delay:2.8s; left:46%; }
.tip-smoke span:nth-child(4){ animation-delay:4.1s; left:52%; }

@keyframes rise{
  0%{ transform: translate(-50%,0) scale(0.4); opacity:0; }
  12%{ opacity:0.55; }
  100%{ transform: translate(calc(-50% + 22px), -190px) scale(2.6); opacity:0; }
}

h1{
  font-family:'Cormorant Garamond', serif;
  font-weight:400;
  font-style:italic;
  font-size: clamp(3rem, 9vw, 5.4rem);
  line-height:1;
  color: var(--cream);
  margin-bottom: clamp(1.2rem, 3vw, 1.6rem);
  letter-spacing: 0.01em;
}

.tagline{
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height:1.7;
  color: var(--cream-dim);
  max-width: 480px;
  margin-bottom: clamp(2.4rem, 5vw, 3.2rem);
  font-weight:400;
}

form.notify-form{
  display:flex;
  align-items:stretch;
  width: 100%;
  max-width: 420px;
  border-bottom: 1px solid var(--hair);
  padding-bottom: 0.4rem;
  margin-bottom: 1.1rem;
  transition: border-color .3s ease;
}
form.notify-form:focus-within{ border-color: var(--brass-dim); }

form.notify-form input[type="email"]{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  color: var(--cream);
  font-family:'EB Garamond', serif;
  font-style:italic;
  font-size: 1.05rem;
  padding: 0.5rem 0.4rem;
}
form.notify-form input[type="email"]::placeholder{ color: rgba(242,233,216,0.4); }

form.notify-form button{
  background:transparent;
  border:none;
  color: var(--brass);
  font-family:'EB Garamond', serif;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor:pointer;
  padding: 0.5rem 0.2rem 0.5rem 1rem;
  white-space:nowrap;
  transition: color .25s ease, letter-spacing .25s ease;
}
form.notify-form button:hover{ color: var(--cream); letter-spacing:0.28em; }

.note{
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(242,233,216,0.5);
}

.confirm{
  display:none;
  font-family:'EB Garamond', serif;
  font-style:italic;
  color: var(--brass-bright);
  font-size:1rem;
  margin-bottom: 1.1rem;
}

/* ---------- What Awaits — three panel tease ---------- */
.panels-section{
  position:relative;
  z-index:2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 4vw 6vw 10vw;
}

.panels-eyebrow{
  font-size: clamp(0.68rem, 1.1vw, 0.78rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.panels-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.panel-card{
  position:relative;
  background: linear-gradient(180deg, var(--obsidian-2), var(--obsidian));
  border: 1px solid var(--hair);
  padding: 3rem 2rem 2.4rem;
  min-height: 380px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  overflow:hidden;
  transition: transform .5s ease, border-color .5s ease;
}
.panel-card::before{
  content:"";
  position:absolute;
  top:-30%; left:50%;
  width:220px; height:220px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(173,138,78,0.14), transparent 70%);
  pointer-events:none;
}
.panel-card:hover{
  transform: translateY(-8px);
  border-color: var(--brass-dim);
}

.panel-icon{
  width: 74px;
  height: 74px;
  margin-bottom: 1.8rem;
  position:relative;
  z-index:1;
}
.panel-icon svg{ width:100%; height:100%; }
.panel-icon svg *{
  stroke: var(--brass);
  fill:none;
  vector-effect: non-scaling-stroke;
}
.panel-icon svg .tuft{
  fill: var(--brass);
  stroke:none;
}

.panel-card h3{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-weight:500;
  font-size: 1.7rem;
  color: var(--cream);
  margin-bottom: 0.9rem;
  position:relative; z-index:1;
}

.panel-card p{
  font-size: 0.98rem;
  line-height:1.7;
  color: var(--cream-dim);
  position:relative; z-index:1;
}

/* ---------- Footer ---------- */
.site-footer{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 1.1rem;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(242,233,216,0.5);
  padding: 0 6vw 6vw;
}
.site-footer .dot{ width:3px; height:3px; border-radius:50%; background: var(--brass-dim); }

@media (prefers-reduced-motion: reduce){
  .wisp, .ember, .tip-smoke span, .fog-band{ animation: none !important; }
}

@media (max-width: 860px){
  .panels-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 480px){
  .site-footer{ flex-wrap:wrap; text-align:center; }
}