/*
Theme Name: Soca Essence
Theme URI: https://socaessence.com
Author: Soca Essence
Description: Coming soon landing page for Soca Essence — a spirit from the heart of the Soča Valley.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: soca-essence
*/

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

:root {
  --cream:     #f0ead8;
  --gold:      #c9a96e;
  --gold-dim:  #a07840;
  --white:     #ffffff;
  --dark:      #0a0c0e;
  --overlay:   rgba(8, 12, 16, 0.52);
}

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

body {
  font-family: 'EB Garamond', 'Garamond', Georgia, serif;
  background: var(--dark);
  color: var(--white);
}

/* ─── Google Fonts loaded via functions.php ─────────────────── */

/* ─── Hero Section ──────────────────────────────────────────── */
.soca-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Background image */
.soca-bg {
  position: absolute;
  inset: 0;
  background-image: url('hero-bg.jpg');
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  transform: scale(1.04);
  animation: slowZoom 18s ease-out forwards;
}

@keyframes slowZoom {
  from { transform: scale(1.04); }
  to   { transform: scale(1.00); }
}

/* Dark overlay */
.soca-overlay {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 70% 80% at 50% 60%, rgba(8,12,16,0.30) 0%, rgba(8,12,16,0.72) 100%),
    linear-gradient(to bottom, rgba(8,12,16,0.55) 0%, rgba(8,12,16,0.10) 40%, rgba(8,12,16,0.55) 100%);
}

/* Ghost bottle silhouette overlay */
.soca-bottle {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255,255,255,0.018) 20%,
    rgba(255,255,255,0.032) 50%,
    rgba(255,255,255,0.018) 80%,
    transparent 100%
  );
  clip-path: polygon(
    43% 0%, 57% 0%,
    60% 6%, 62% 10%, 62% 14%,
    75% 22%, 78% 30%,
    78% 95%, 22% 95%,
    22% 30%, 25% 22%,
    38% 14%, 38% 10%, 40% 6%
  );
  pointer-events: none;
  opacity: 0;
  animation: fadeBottle 2.5s ease 0.5s forwards;
}

@keyframes fadeBottle {
  to { opacity: 1; }
}

/* ─── Content ────────────────────────────────────────────────── */
.soca-content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 24px;
  max-width: 820px;
  width: 100%;
}

/* Brand name */
.soca-brand {
  font-family: 'Cormorant SC', 'Cinzel', serif;
  font-size: clamp(11px, 1.4vw, 14px);
  font-weight: 400;
  letter-spacing: 0.42em;
  color: var(--cream);
  text-transform: uppercase;
  opacity: 0;
  animation: riseIn 1.2s ease 0.6s forwards;
}

/* Headline */
.soca-headline {
  font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  font-size: clamp(42px, 7.5vw, 90px);
  font-weight: 500;
  line-height: 1.08;
  color: var(--white);
  margin: 18px 0 14px;
  letter-spacing: -0.01em;
  opacity: 0;
  animation: riseIn 1.2s ease 0.9s forwards;
}

/* Italic tagline */
.soca-tagline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(22px, 3.2vw, 36px);
  font-style: italic;
  font-weight: 400;
  color: var(--cream);
  margin-bottom: 20px;
  opacity: 0;
  animation: riseIn 1.2s ease 1.1s forwards;
}

/* Ornament divider */
.soca-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 22px;
  opacity: 0;
  animation: riseIn 1.2s ease 1.3s forwards;
}

.soca-divider::before,
.soca-divider::after {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  background: var(--gold-dim);
}

.soca-divider-diamond {
  width: 7px;
  height: 7px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* Body copy */
.soca-body {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: clamp(15px, 1.8vw, 18px);
  color: rgba(240, 234, 216, 0.82);
  line-height: 1.65;
  margin-bottom: 36px;
  opacity: 0;
  animation: riseIn 1.2s ease 1.4s forwards;
}

/* ─── Email Form ──────────────────────────────────────────────── */
.soca-form {
  display: flex;
  justify-content: center;
  gap: 0;
  max-width: 600px;
  margin: 0 auto 16px;
  opacity: 0;
  animation: riseIn 1.2s ease 1.55s forwards;
}

.soca-input {
  flex: 1;
  padding: 16px 22px;
  font-family: 'Cormorant SC', serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--cream);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(201, 169, 110, 0.35);
  border-right: none;
  outline: none;
  transition: border-color 0.3s, background 0.3s;
  -webkit-appearance: none;
}

.soca-input::placeholder {
  color: rgba(240, 234, 216, 0.42);
  letter-spacing: 0.12em;
}

.soca-input:focus {
  background: rgba(255,255,255,0.10);
  border-color: rgba(201, 169, 110, 0.7);
}

.soca-btn {
  padding: 16px 28px;
  font-family: 'Cormorant SC', serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--white);
  background: transparent;
  border: 1px solid rgba(201, 169, 110, 0.7);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.soca-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--dark);
}

/* Sub-copy */
.soca-sub {
  font-family: 'EB Garamond', serif;
  font-size: clamp(12px, 1.3vw, 14px);
  color: rgba(240, 234, 216, 0.50);
  letter-spacing: 0.04em;
  margin-bottom: 40px;
  opacity: 0;
  animation: riseIn 1.2s ease 1.65s forwards;
}

/* Bottom note */
.soca-footnote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  animation: riseIn 1.2s ease 1.8s forwards;
}

.soca-leaf {
  font-size: 18px;
  color: var(--gold-dim);
  line-height: 1;
}

.soca-footnote p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(13px, 1.5vw, 16px);
  color: rgba(240, 234, 216, 0.55);
  letter-spacing: 0.03em;
}

/* ─── Animations ─────────────────────────────────────────────── */
@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Success State ──────────────────────────────────────────── */
.soca-success {
  display: none;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-style: italic;
  color: var(--gold);
  padding: 16px;
  letter-spacing: 0.04em;
}

.soca-success.visible {
  display: block;
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  html, body { overflow: auto; }
  .soca-hero  { height: 100svh; }

  .soca-form {
    flex-direction: column;
    gap: 0;
  }

  .soca-input {
    border-right: 1px solid rgba(201, 169, 110, 0.35);
    border-bottom: none;
  }

  .soca-btn {
    padding: 15px 20px;
  }
}