@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Cormorant+Garamond:ital,wght@1,300&display=swap');

/* ─── Variables ─────────────────────────────────────────────── */
:root {
  --bg:         #0a0908;
  --c-hi:       #faf3e6;   /* candle highlight */
  --c-mid:      #ede0c8;   /* candle midtone */
  --c-lo:       #b8987a;   /* candle shadow */
  --c-edge:     #8a6a48;   /* candle dark edge */
  --rim-hi:     #fdf6e2;
  --rim-mid:    #d8c09a;
  --rim-lo:     #a87e52;
  --pool-hi:    #fff9ed;
  --pool-mid:   #f0dfc0;
  --gold:       #c9a84c;
  --gold-hi:    #e8cc78;
  --text-sub:   #a89070;
}

/* ─── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; width: 100%; overflow: hidden; }

/* ─── Base ──────────────────────────────────────────────────── */
body {
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-image: radial-gradient(ellipse 58% 52% at 50% 40%, rgba(175,72,8,0.08) 0%, transparent 68%);
}

/* film grain overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
  opacity: 0.028;
  pointer-events: none;
  z-index: 100;
}

/* ─── Scene ─────────────────────────────────────────────────── */
.scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.8rem;
  position: relative;
  z-index: 1;
  animation: fadeIn 2s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Candle Wrap ───────────────────────────────────────────── */
.candle-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ─── Ambient Glow ──────────────────────────────────────────── */
.glow {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 220px;
  background: radial-gradient(
    ellipse 48% 44% at 50% 32%,
    rgba(255,136,28,0.22) 0%,
    rgba(255,72,8,0.08)   42%,
    transparent 68%
  );
  pointer-events: none;
  z-index: 0;
  animation: glowBreath 3.6s ease-in-out infinite;
}

@keyframes glowBreath {
  0%, 100% { opacity: 0.82; transform: translateX(-50%) scale(1); }
  50%       { opacity: 1;    transform: translateX(-50%) scale(1.09); }
}

/* ─── SVG Flame ─────────────────────────────────────────────── */
.flame-svg {
  width: 62px;
  height: 78px;  /* viewBox 0 0 80 100 → 62 * 100/80 = 77.5 */
  display: block;
  overflow: visible;
  margin-bottom: -5px;  /* close gap between flame SVG and wick */
  position: relative;
  z-index: 5;
}

/* outer layer: large, blurred orange — swings wide */
.fg-outer {
  transform-origin: 40px 96px;
  animation: swayOuter 2.1s ease-in-out infinite;
}

/* mid layer: tighter, opposite phase */
.fg-mid {
  transform-origin: 40px 93px;
  animation: swayMid 1.7s ease-in-out infinite, breathe 2.4s ease-in-out infinite;
}

/* inner core: fastest, subtle pulse */
.fg-inner {
  transform-origin: 40px 89px;
  animation: swayInner 1.35s ease-in-out infinite, breathe 1.9s ease-in-out infinite reverse;
}

/* blue base: gentle pulse */
.f-blue {
  animation: bluePulse 1.8s ease-in-out infinite;
}

@keyframes swayOuter {
  0%, 100% { transform: rotate(-2.5deg) skewX(0deg); }
  18%       { transform: rotate(3deg)   skewX(2deg);  }
  42%       { transform: rotate(-1.5deg) skewX(-1.5deg); }
  66%       { transform: rotate(3.5deg) skewX(3deg);  }
  84%       { transform: rotate(-2deg)  skewX(-1deg); }
}

@keyframes swayMid {
  0%, 100% { transform: rotate(2deg)   skewX(-1deg); }
  22%       { transform: rotate(-2.5deg) skewX(1.5deg); }
  50%       { transform: rotate(1.5deg) skewX(-2deg); }
  75%       { transform: rotate(-3deg)  skewX(2.5deg); }
}

@keyframes swayInner {
  0%, 100% { transform: rotate(-1deg) scaleY(1); }
  30%       { transform: rotate(2deg)  scaleY(1.05); }
  60%       { transform: rotate(-1.5deg) scaleY(0.96); }
}

@keyframes breathe {
  0%, 100% { opacity: 0.9; }
  45%       { opacity: 1; }
  72%       { opacity: 0.82; }
}

@keyframes bluePulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.12); }
}

/* ─── Wick ──────────────────────────────────────────────────── */
.wick {
  width: 2px;
  height: 11px;
  background: linear-gradient(to bottom, #b05010 0%, #1e0c04 100%);
  border-radius: 1px 1px 0 0;
  transform: rotate(0.8deg);
  position: relative;
  z-index: 8;
  margin-bottom: -2px;
}

/* glowing ember at wick tip (top) */
.ember {
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffaa40 0%, #ff5010 55%, transparent 100%);
  filter: blur(1px);
  animation: emberGlow 1.3s ease-in-out infinite;
}

@keyframes emberGlow {
  0%, 100% { opacity: 0.65; transform: translateX(-50%) scale(1); }
  50%       { opacity: 1;    transform: translateX(-50%) scale(1.4); }
}

/* ─── 3D Pillar Candle ──────────────────────────────────────── */
.candle {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px;
}

/* ── Top rim: ellipse showing cylinder depth ── */
.c-rim {
  position: absolute;
  top: -12px;
  left: 0;
  width: 80px;
  height: 24px;
  border-radius: 50%;
  /* lit from upper-left: bright on left-center, shadowed on right edge */
  background: radial-gradient(
    ellipse 78% 72% at 36% 36%,
    var(--rim-hi)  0%,
    var(--rim-mid) 48%,
    var(--rim-lo)  80%,
    #704828        100%
  );
  box-shadow:
    0 5px 12px rgba(0,0,0,0.4),
    inset 0 -4px 8px rgba(0,0,0,0.15);
  z-index: 6;
}

/* ── Molten wax pool (concave, warm light) ── */
.c-pool {
  position: absolute;
  top: -6px;
  left: 13px;        /* (80px - 54px) / 2 */
  width: 54px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse 80% 70% at 42% 38%,
    var(--pool-hi)  0%,
    var(--pool-mid) 52%,
    #d4b888         88%,
    #c0a070         100%
  );
  box-shadow:
    inset 0 3px 7px rgba(60,30,0,0.22),
    0 0 10px rgba(255,180,80,0.14);
  z-index: 7;
}

/* ── Cylinder body ── */
.c-body {
  width: 80px;
  height: 200px;
  position: relative;
  z-index: 4;
  overflow: visible;
  /* cylindrical gradient: dark edge → highlight → bright center → highlight → dark edge */
  background: linear-gradient(
    to right,
    var(--c-edge) 0%,
    var(--c-lo)   10%,
    var(--c-mid)  22%,
    var(--c-hi)   38%,
    #fefaf4       50%,
    var(--c-hi)   62%,
    var(--c-mid)  76%,
    var(--c-lo)   88%,
    var(--c-edge) 100%
  );
  box-shadow:
    -6px 0 18px rgba(0,0,0,0.28),
    6px  0 12px rgba(0,0,0,0.18),
    0   20px 40px rgba(0,0,0,0.7),
    0    2px 6px  rgba(0,0,0,0.4);
}

/* specular vertical highlight (left-of-center) */
.c-body::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 13px;
  width: 8px;
  height: 110px;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.45) 0%,
    rgba(255,255,255,0.18) 50%,
    transparent 100%
  );
  border-radius: 50%;
  filter: blur(5px);
}

/* warm flame light cast on top portion of candle */
.c-body::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: linear-gradient(to bottom,
    rgba(255,150,50,0.14) 0%,
    rgba(255,130,40,0.05) 60%,
    transparent 100%
  );
  border-radius: 0;
}

/* horizontal wax-pour lines (very subtle texture) */
.c-body .wax-texture {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent            0px,
    transparent            18px,
    rgba(0,0,0,0.022)      18px,
    rgba(0,0,0,0.022)      19px
  );
  pointer-events: none;
}

/* ── Wax drips ── */
.drip {
  position: absolute;
  top: 0;
  border-radius: 0 0 60% 60%;
  background: linear-gradient(to bottom, var(--pool-mid), var(--c-mid), var(--c-lo));
}

/* teardrop bead at drip end */
.drip::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 130%;
  height: 6px;
  border-radius: 50%;
  background: var(--c-lo);
  filter: blur(0.5px);
}

.drip-1 { width: 10px; height: 26px; left: 7px;  top: 0; transform: rotate(-2deg); }
.drip-2 { width:  7px; height: 18px; right: 11px; top: 2px; transform: rotate(3.5deg); }
.drip-3 { width:  5px; height: 12px; left: 27px;  top: 4px; transform: rotate(-1deg); }

/* ── Base plate ── */
.c-base {
  width: 84px;
  height: 9px;
  background: linear-gradient(to right, #5a3a20, var(--c-edge), #5a3a20);
  border-radius: 0 0 5px 5px;
  position: relative;
  z-index: 4;
}

/* cast shadow on surface below */
.c-base::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 14px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.55) 0%, transparent 70%);
  filter: blur(4px);
}

/* ─── Text ──────────────────────────────────────────────────── */
.text-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.72rem;
}

.brand {
  font-family: 'Cinzel', serif;
  font-weight: 400;
  font-size: clamp(2rem, 8vw, 3.4rem);
  letter-spacing: 0.14em;
  line-height: 1;
  background: linear-gradient(135deg, #9a7028 0%, var(--gold) 32%, var(--gold-hi) 54%, var(--gold) 74%, #9a7028 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.divider {
  width: 48px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201,168,76,0.44), transparent);
  margin: 0.1rem 0;
}

.coming-soon {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(0.78rem, 3vw, 0.98rem);
  letter-spacing: 0.4em;
  color: var(--text-sub);
  text-transform: uppercase;
}