/* ------------------------
   🌿 Custom Font
------------------------ */
@font-face {
  font-family: "HazelHand";
  src: url("./Fonts/shadowsintolight-regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

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

/* ------------------------
   🌿 Theme Variables
------------------------ */
:root {
  --ink: #cfd7b0;
  --glow: rgba(255, 240, 138, 0.45);
}

/* ------------------------
   🌿 Layout
------------------------ */
html, body {
  height: 100%;
}

body {
  font-family: "HazelHand", Georgia, serif;
  color: var(--ink);
  background: url("./Images/theasherybackground.png") center / cover no-repeat fixed;
  text-align: center;
  overflow: hidden;
  position: relative;
}

/* ------------------------
   🌿 Home Button (invisible hotspot)
------------------------ */
.home-button {
  position: fixed;
  top: 5%;       /* adjust to lantern */
  left: 85%;
  width: 100px;
  height: 100px;
  background: rgba(255, 0, 0, 0.3); /* test red box (set to 0 later) */
  opacity: 0;    /* invisible but clickable */
  cursor: pointer;
  z-index: 10;
}

/* ------------------------
   🌿 Coming Soon Section
------------------------ */
.coming-soon {
  font-size: 3rem;
  margin-top: 100px;
  color: var(--ink);
}

.subscribe-blurb {
  max-width: 750px;
  margin: 20px auto;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #e7e5e4;
}

/* ------------------------
   🌿 Subscribe Form
------------------------ */
.subscribe-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.subscribe-form input {
  width: 200px;
  padding: 12px;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  text-align: center;
  color: var(--ink);
  background-color: rgba(0, 0, 0, 0.4);
}

.subscribe-form input::placeholder {
  color: rgba(207, 215, 176, 0.7);
  font-style: italic;
}

.subscribe-form button {
  background: var(--ink);
  color: #1a1a1a;
  font-size: 1.1rem;
  padding: 10px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}

.subscribe-form button:hover {
  background: #e7e5e4;
  transform: scale(1.05);
}

/* ------------------------
   🌿 Thank You Message
------------------------ */
.thank-you-message {
  display: none;
  margin-top: 30px;
  font-size: 2rem;
  line-height: 1.6;
  text-align: center;
  color: var(--ink);
  animation: fadeIn 2s ease forwards;
}

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

/* ------------------------
   🌿 Fireflies Layer
------------------------ */
.fireflies {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.fireflies span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 240, 138, 0.8);
  filter: blur(2px);

  animation:
    flicker 2s infinite ease-in-out alternate,
    drift var(--drift-speed) infinite linear,
    bob var(--bob-speed) infinite ease-in-out alternate,
    wander var(--wander-speed) infinite ease-in-out alternate;
}

/* Firefly Animations */
@keyframes flicker {
  0%   { opacity: .2; transform: scale(.6); }
  40%  { opacity: .9; transform: scale(1); }
  60%  { opacity: .5; transform: scale(.7); }
  100% { opacity: .3; transform: scale(.8); }
}

@keyframes bob {
  0%   { transform: translateY(0) scale(var(--scale)); }
  100% { transform: translateY(-15px) scale(var(--scale)); }
}

@keyframes wander {
  0%   { transform: translateX(0) scale(var(--scale)); }
  50%  { transform: translateX(20px) scale(var(--scale)); }
  100% { transform: translateX(0) scale(var(--scale)); }
}

@keyframes drift {
  0%   { transform: translate(0,0) scale(var(--scale)); }
  25%  { transform: translate(10px,-10px) scale(var(--scale)); }
  50%  { transform: translate(-10px,15px) scale(var(--scale)); }
  75%  { transform: translate(15px,5px) scale(var(--scale)); }
  100% { transform: translate(0,0) scale(var(--scale)); }
}