/* ══════════════════════════════════════════
   SAVIANTE — FOREST WAITING PAGE
   style.css
══════════════════════════════════════════ */

/* ── Reset & Base ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

body {
  font-family: 'Raleway', sans-serif;
  background: #0a1f12;
  color: #e8f5ec;
  min-height: 100vh;
  position: relative;
}

/* ══════════════════════════════════════════
   SCENE LAYERS
══════════════════════════════════════════ */

/* Leaves canvas – on top of scene, below content */
#leavesCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 20;
}

/* Forest canvas (unused but kept for future) */
#forestCanvas {
  display: none;
}

.scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

/* ── Sky ── */
.sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    #060f0a 0%,
    #0a1f10 18%,
    #0d2e17 35%,
    #113a1e 52%,
    #193f22 65%,
    #1c4a28 75%,
    #244f2c 85%,
    #1e4826 100%
  );
}

/* ── Atmospheric mist / fog ── */
.mist {
  position: absolute;
  width: 200%;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
}

.mist-1 {
  height: 220px;
  background: radial-gradient(ellipse at center, rgba(180,220,190,0.10) 0%, transparent 70%);
  bottom: 34%;
  left: -50%;
  animation: mistDrift 18s ease-in-out infinite alternate;
}

.mist-2 {
  height: 180px;
  background: radial-gradient(ellipse at center, rgba(140,200,160,0.07) 0%, transparent 70%);
  bottom: 28%;
  left: -30%;
  animation: mistDrift 25s ease-in-out infinite alternate-reverse;
}

.mist-3 {
  height: 250px;
  background: radial-gradient(ellipse at center, rgba(200,240,210,0.06) 0%, transparent 70%);
  bottom: 38%;
  left: -20%;
  animation: mistDrift 32s ease-in-out infinite alternate;
}

@keyframes mistDrift {
  0%   { transform: translateX(0) scaleY(1); opacity: 0.7; }
  50%  { opacity: 1; }
  100% { transform: translateX(12%) scaleY(1.08); opacity: 0.7; }
}

/* ── Forest Background ── */
.forest-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70%;
}

.trees-far {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Lake ── */
.lake-container {
  position: absolute;
  bottom: 18%;
  left: 50%;
  transform: translateX(-50%);
  width: min(75vw, 900px);
  z-index: 2;
}

.lake {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 22%;
  border-radius: 50%;
  background: linear-gradient(
    180deg,
    #0a2e1a 0%,
    #0d3a20 20%,
    #0f4024 45%,
    #0c3520 70%,
    #091f12 100%
  );
  overflow: hidden;
  box-shadow:
    0 0 60px rgba(50,180,100,0.08),
    0 0 120px rgba(30,150,80,0.05),
    inset 0 0 40px rgba(0,0,0,0.6);
}

/* Moon/sky reflection in lake */
.lake-reflection {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 80%;
  background: radial-gradient(
    ellipse at center 30%,
    rgba(180,255,210,0.18) 0%,
    rgba(100,200,150,0.08) 40%,
    transparent 70%
  );
  filter: blur(8px);
  animation: lakeGlow 6s ease-in-out infinite alternate;
}

@keyframes lakeGlow {
  0%   { opacity: 0.7; transform: translateX(-50%) scaleY(1); }
  100% { opacity: 1;   transform: translateX(-50%) scaleY(1.05); }
}

/* Shimmer effect */
.lake-shimmer {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0%,
    transparent 45%,
    rgba(180,255,210,0.04) 50%,
    transparent 55%,
    transparent 100%
  );
  animation: shimmerMove 4s linear infinite;
}

@keyframes shimmerMove {
  0%   { transform: translateX(-100%) skewX(-15deg); }
  100% { transform: translateX(200%) skewX(-15deg); }
}

/* Water light (moon reflection core) */
.lake-light {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 15%;
  height: 60%;
  background: linear-gradient(to bottom, rgba(220,255,235,0.25) 0%, transparent 100%);
  filter: blur(6px);
  animation: lightPulse 3.5s ease-in-out infinite alternate;
}

@keyframes lightPulse {
  0%   { opacity: 0.6; width: 14%; }
  100% { opacity: 1;   width: 16%; }
}

/* Water ripples */
.water-ripple {
  position: absolute;
  left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(150,230,180,0.15);
  transform: translateX(-50%);
  animation: rippleExpand 5s ease-out infinite;
}

.ripple-1 {
  width: 15%;  height: 20%;
  bottom: 25%;
  animation-delay: 0s;
}

.ripple-2 {
  width: 30%;  height: 35%;
  bottom: 15%;
  animation-delay: 1.6s;
}

.ripple-3 {
  width: 50%;  height: 55%;
  bottom: 5%;
  animation-delay: 3.2s;
}

@keyframes rippleExpand {
  0%   { opacity: 0.6; transform: translateX(-50%) scale(0.7); }
  100% { opacity: 0;   transform: translateX(-50%) scale(1.4); }
}

/* ── Ground ── */
.ground {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 22%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    #0a1f0e 30%,
    #061509 60%,
    #040f06 100%
  );
  z-index: 3;
}

/* Ground foliage texture */
.ground::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse 200px 60px at 10% 20%, rgba(30,90,40,0.3) 0%, transparent 100%),
    radial-gradient(ellipse 300px 70px at 40% 30%, rgba(25,80,35,0.25) 0%, transparent 100%),
    radial-gradient(ellipse 250px 65px at 70% 20%, rgba(30,90,40,0.28) 0%, transparent 100%),
    radial-gradient(ellipse 200px 55px at 90% 25%, rgba(25,80,35,0.22) 0%, transparent 100%);
}

/* ── Foreground Trees ── */
.tree-group {
  position: absolute;
  bottom: 0;
  z-index: 5;
  pointer-events: none;
}

.tree-left {
  left: -3%;
  width: min(30vw, 320px);
  height: min(80vh, 650px);
}

.tree-right {
  right: -3%;
  width: min(30vw, 320px);
  height: min(80vh, 650px);
  transform: scaleX(-1);
}

.tree-group svg {
  width: 100%;
  height: 100%;
}

/* ── Fireflies ── */
.fireflies {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.firefly {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(160,255,160,0.9);
  box-shadow: 0 0 6px 3px rgba(100,255,130,0.6), 0 0 12px 6px rgba(80,220,100,0.3);
  animation: fireflyFloat var(--dur, 8s) ease-in-out infinite var(--delay, 0s);
}

@keyframes fireflyFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }
  15% { opacity: 1; }
  50% {
    transform: translate(var(--tx, 30px), var(--ty, -40px)) scale(0.8);
    opacity: 0.8;
  }
  85% { opacity: 0.6; }
}

/* ══════════════════════════════════════════
   CONTENT
══════════════════════════════════════════ */
.content {
  position: relative;
  z-index: 30;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(40px, 8vh, 80px) clamp(20px, 5vw, 60px);
  text-align: center;
  gap: clamp(24px, 4vh, 40px);
}

/* ── Brand ── */
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  animation: fadeSlideDown 1s ease both;
}

.brand-icon {
  animation: iconPulse 3s ease-in-out infinite;
}

@keyframes iconPulse {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 4px rgba(100,220,150,0.3)); }
  50%       { transform: scale(1.08); filter: drop-shadow(0 0 10px rgba(100,220,150,0.7)); }
}

.brand-name {
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: clamp(18px, 2.5vw, 28px);
  letter-spacing: 0.35em;
  color: rgba(200,245,215,0.9);
  text-shadow: 0 0 20px rgba(100,220,150,0.3);
}

/* ── Tagline Group ── */
.tagline-group {
  animation: fadeSlideUp 1.1s 0.2s ease both;
  max-width: 700px;
}

.eyebrow {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: clamp(12px, 1.5vw, 15px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(150,220,175,0.7);
  margin-bottom: clamp(12px, 2vh, 22px);
}

.headline {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(44px, 8vw, 100px);
  line-height: 1.05;
  color: rgba(235,255,242,0.97);
  text-shadow:
    0 0 40px rgba(100,220,150,0.15),
    0 2px 30px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  gap: 0.05em;
  margin-bottom: clamp(14px, 2.5vh, 28px);
}

.headline-line {
  display: block;
}

.headline-line.italic {
  font-style: italic;
  font-weight: 300;
  color: rgba(180,240,200,0.92);
}

.subline {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: clamp(14px, 1.8vw, 18px);
  line-height: 1.7;
  color: rgba(180,230,195,0.75);
  letter-spacing: 0.02em;
}

.br-desktop {
  display: none;
}

@media (min-width: 768px) {
  .br-desktop { display: block; }
}

/* ── Divider ── */
.divider-leaf {
  animation: fadeIn 1.2s 0.5s ease both;
}

/* ── Downloads Section ── */
.downloads-section {
  animation: fadeSlideUp 1.2s 0.4s ease both;
  width: 100%;
  max-width: 620px;
}

.downloads-label {
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: clamp(15px, 2vw, 20px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(170,245,195,0.95);
  text-shadow:
    0 0 16px rgba(100,230,150,0.55),
    0 0 32px rgba(80,200,120,0.25);
  margin-bottom: clamp(20px, 3vh, 32px);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(120,220,155,0.25);
  display: inline-block;
  animation: labelPulse 3s ease-in-out infinite;
}

@keyframes labelPulse {
  0%, 100% { text-shadow: 0 0 16px rgba(100,230,150,0.55), 0 0 32px rgba(80,200,120,0.25); }
  50%       { text-shadow: 0 0 22px rgba(130,255,170,0.8),  0 0 44px rgba(80,200,120,0.4);  }
}

.btn-group {
  display: flex;
  gap: clamp(14px, 2.5vw, 24px);
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Buttons ── */
.btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: clamp(16px, 2.2vh, 22px) clamp(24px, 3.5vw, 36px);
  border-radius: 16px;
  text-decoration: none;
  font-family: 'Raleway', sans-serif;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease,
              background 0.3s ease;
  min-width: clamp(220px, 35vw, 270px);
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: inherit;
}

.btn:hover {
  transform: translateY(-4px) scale(1.02);
}

.btn:active {
  transform: translateY(-1px) scale(0.99);
}

/* Shimmer on hover */
.btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.12),
    transparent
  );
  transform: skewX(-20deg);
  transition: left 0.5s ease;
}

.btn:hover::after {
  left: 150%;
}

/* Button for Men */
.btn-hombre {
  background: linear-gradient(135deg, rgba(30,70,50,0.85) 0%, rgba(20,55,40,0.9) 100%);
  border: 1px solid rgba(80,180,120,0.35);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.35),
    0 0 0 1px rgba(80,180,120,0.1),
    inset 0 1px 0 rgba(150,230,180,0.1);
  color: rgba(200,240,215,0.95);
}

.btn-hombre:hover {
  background: linear-gradient(135deg, rgba(35,80,58,0.9) 0%, rgba(25,65,47,0.95) 100%);
  box-shadow:
    0 16px 48px rgba(0,0,0,0.45),
    0 0 30px rgba(80,200,130,0.2),
    0 0 0 1px rgba(100,210,150,0.25),
    inset 0 1px 0 rgba(150,230,180,0.15);
}

/* Button for Women */
.btn-mujer {
  background: linear-gradient(135deg, rgba(55,30,60,0.85) 0%, rgba(45,22,50,0.9) 100%);
  border: 1px solid rgba(180,100,200,0.35);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.35),
    0 0 0 1px rgba(180,100,200,0.1),
    inset 0 1px 0 rgba(220,160,235,0.1);
  color: rgba(235,210,240,0.95);
}

.btn-mujer:hover {
  background: linear-gradient(135deg, rgba(65,35,72,0.9) 0%, rgba(52,26,60,0.95) 100%);
  box-shadow:
    0 16px 48px rgba(0,0,0,0.45),
    0 0 30px rgba(180,100,220,0.2),
    0 0 0 1px rgba(200,130,230,0.25),
    inset 0 1px 0 rgba(220,160,235,0.15);
}

.btn-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
}

.btn-hombre .btn-icon { color: rgba(140,230,170,0.9); }
.btn-mujer  .btn-icon { color: rgba(220,160,235,0.9); }

.btn-text {
  flex: 1;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.btn-label {
  font-weight: 600;
  font-size: clamp(14px, 1.6vw, 16px);
  letter-spacing: 0.04em;
}

.btn-sublabel {
  font-weight: 300;
  font-size: clamp(11px, 1.2vw, 13px);
  opacity: 0.7;
  letter-spacing: 0.02em;
}

.btn-arrow {
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.btn:hover .btn-arrow {
  transform: translateY(3px);
  opacity: 1;
}

/* ── Footer ── */
.footer {
  animation: fadeIn 1.5s 0.8s ease both;
}

.footer p {
  font-size: clamp(10px, 1.2vw, 13px);
  font-weight: 300;
  letter-spacing: 0.08em;
  color: rgba(140,190,155,0.45);
}

/* ══════════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════════ */
@keyframes fadeSlideDown {
  0%   { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeSlideUp {
  0%   { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* ══════════════════════════════════════════
   RESPONSIVE — MOBILE
══════════════════════════════════════════ */
@media (max-width: 600px) {
  .btn-group {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    min-width: unset;
    width: 100%;
  }

  .tree-left {
    width: min(42vw, 220px);
  }

  .tree-right {
    width: min(42vw, 220px);
  }

  .lake-container {
    width: 90vw;
    bottom: 15%;
  }

  .mist-1, .mist-2, .mist-3 {
    filter: blur(25px);
  }
}

@media (max-width: 380px) {
  .headline {
    font-size: 38px;
  }
  .btn {
    padding: 14px 18px;
    gap: 10px;
  }
}

/* Tall mobile screens */
@media (max-height: 700px) and (max-width: 600px) {
  .content {
    gap: 18px;
  }
}