/* ===========================================================
   ANJEYA — Fine Jewels & Diamonds
   Dark luxury teaser. Typography-as-mark, spotlit wordmark,
   countdown + promise pillars (ref: diamonddropdraws.co.uk),
   one signature teal, gold hairline accents, velvet motion.
   =========================================================== */
:root {
  --ink:        #131313;
  --ink-deep:   #070707;
  --ink-soft:   #1C1B19;
  --ivory:      #F7FAF8;
  --teal:       #81D8D0;
  --teal-soft:  #AEE3DE;
  --gold:       #D4AF37;
  --gold-lt:    #F3DFA0;
  --gold-dp:    #B58E2C;
  --muted:      #A2A19A;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;
  --ease-lux: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ivory);
  background: var(--ink-deep);
  overflow-x: hidden;
}

/* ===========================================================
   Cinematic hero media (fixed behind all sections)
   =========================================================== */
.hero-media {
  position: fixed; inset: 0;
  z-index: 0; overflow: hidden; pointer-events: none;
  background: var(--ink-deep);
}
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* muted + desaturated so it never greens the screen or fights the type */
  filter: brightness(0.34) contrast(1.06) saturate(0.55);
  transform: scale(1.04);
  animation: heroDrift 42s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.04) translateY(0); }
  to   { transform: scale(1.14) translateY(-1.5%); }
}
/* deep vignette → rich true-black edges, slightly clearer centre */
.hero-tint {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 95% at 50% 38%, rgba(7,7,7,0.10) 0%, rgba(7,7,7,0.58) 56%, rgba(5,5,5,0.94) 100%),
    linear-gradient(180deg, rgba(7,7,7,0.45), rgba(7,7,7,0.55));
}
/* clean luminous spotlight behind the wordmark (cool ivory + faint teal) */
.spotlight {
  position: absolute;
  width: 60vmax; height: 46vmax;
  left: 50%; top: 33%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(214,236,233,0.16) 0%, rgba(174,227,222,0.07) 34%, transparent 62%);
  filter: blur(30px);
  mix-blend-mode: screen;
}
/* the single signature teal hit — a soft breathing glow */
.bloom {
  position: absolute;
  width: 50vmax; height: 50vmax;
  left: 50%; top: 30%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(129,216,208,0.16) 0%, transparent 60%);
  filter: blur(50px);
  mix-blend-mode: screen;
  animation: breathe 20s var(--ease-lux) infinite alternate;
}
@keyframes breathe {
  from { transform: translate(-50%, -50%) scale(1);    opacity: 0.7; }
  to   { transform: translate(-50%, -53%) scale(1.16); opacity: 1; }
}
body.no-video .hero-video { display: none; }
body.no-video .hero-tint {
  background: radial-gradient(130% 110% at 50% 30%, var(--ink-soft) 0%, var(--ink) 44%, var(--ink-deep) 100%);
}

/* subtle film grain so darks never look flat */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* thin inset frame → gives the negative space intent */
.frame {
  position: fixed; inset: clamp(12px, 2vw, 26px);
  border: 1px solid rgba(212,175,55,0.16);
  z-index: 5; pointer-events: none;
}

/* ===========================================================
   HERO section
   =========================================================== */
main { position: relative; z-index: 2; }
.hero {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 12vh 26px 9vh;
}
.card { width: min(680px, 100%); text-align: center; }

/* diamond glyph + sparse glints */
.facet { position: relative; display: inline-flex; margin: 0 auto 26px; }
.facet svg { width: 34px; height: 34px; filter: drop-shadow(0 0 10px rgba(212,175,55,0.3)); }
.glint {
  position: absolute; width: 11px; height: 11px;
  background: var(--gold-lt);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  opacity: 0; pointer-events: none;
}
.glint:nth-child(2) { top: -8px;  left: -18px; }
.glint:nth-child(3) { top: 6px;   left: 34px; width: 8px; height: 8px; }
.glint:nth-child(4) { top: 26px;  left: -4px; width: 7px; height: 7px; }
.ready .glint { animation: glint 9s var(--ease-lux) infinite; animation-delay: calc(var(--gd) * 3s + 1.6s); }
@keyframes glint {
  0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  3%       { opacity: 0.95; transform: scale(1) rotate(15deg); }
  7%       { opacity: 0; transform: scale(0.4) rotate(30deg); }
}

/* wordmark — the logo; letters rise from behind a mask */
.wordmark {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(3.1rem, 12vw, 6rem);
  line-height: 1; letter-spacing: 0.2em;
  margin: 0; padding-left: 0.2em;
  color: var(--ivory);
  text-shadow: 0 0 50px rgba(214,236,233,0.14), 0 6px 30px rgba(0,0,0,0.5);
}
.wordmark .mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.16em; }
.wordmark i { display: inline-block; font-style: normal; transform: translateY(125%); }
.ready .wordmark i {
  transform: translateY(0);
  transition: transform 1100ms var(--ease-lux);
  transition-delay: calc(var(--i) * 80ms + 250ms);
}

/* gold hairline + single sheen sweep */
.rule {
  position: relative; width: 130px; height: 1px; margin: 28px auto 0;
  overflow: hidden;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.6), transparent);
}
.rule .sheen {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--gold-lt), transparent);
  transform: translateX(-110%);
}
.ready .rule .sheen { animation: sweep 2.8s var(--ease-lux) 1.3s 1 forwards; }
@keyframes sweep { to { transform: translateX(110%); } }

.tagline {
  margin: 22px 0 0;
  font-size: clamp(0.68rem, 2.3vw, 0.84rem);
  letter-spacing: 0.32em; text-transform: uppercase;
  padding-left: 0.32em; color: var(--gold-lt);
}

/* ===========================================================
   Countdown
   =========================================================== */
.countdown { margin: 40px auto 0; }
.cd-label {
  display: block;
  font-size: 0.64rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 20px; padding-left: 0.3em;
}
.cd-grid { display: flex; align-items: flex-start; justify-content: center; gap: clamp(8px, 2.6vw, 24px); }
.cd-unit { display: flex; flex-direction: column; align-items: center; min-width: 62px; }
.cd-num {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.1rem, 7vw, 3.1rem); line-height: 1;
  color: var(--ivory); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 28px rgba(214,236,233,0.12);
}
.cd-tag {
  margin-top: 12px; font-size: 0.58rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--gold-dp); padding-left: 0.24em;
}
.cd-sep {
  font-family: var(--serif); font-size: clamp(1.5rem, 5vw, 2.2rem);
  color: rgba(212,175,55,0.45); line-height: 1; margin-top: 0.18em;
}
.countdown.done .cd-grid { display: none; }
.countdown.done .cd-label {
  font-family: var(--serif); text-transform: none; letter-spacing: 0.06em;
  font-size: clamp(1.1rem, 3.6vw, 1.5rem); color: var(--ivory); margin: 0; padding: 0;
}

/* ===========================================================
   Notify
   =========================================================== */
.notify { margin: 44px auto 0; max-width: 480px; }
.notify__label {
  display: block; font-size: 0.66rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 16px; padding-left: 0.24em;
}
.notify__field {
  display: flex; align-items: center; gap: 6px;
  border-bottom: 1px solid rgba(247,250,248,0.24); padding-bottom: 8px;
  transition: border-color 0.6s var(--ease-lux);
}
.notify__field:focus-within { border-color: var(--teal); }
.notify__input {
  flex: 1; border: 0; background: transparent;
  font-family: var(--sans); font-size: 1rem; font-weight: 300;
  color: var(--ivory); caret-color: var(--teal);
  outline: none; min-width: 0; padding: 6px 2px;
}
.notify__input::placeholder { color: #777670; }
.notify__btn {
  flex: none; border: 0; background: transparent; cursor: pointer;
  font-family: var(--sans); font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-lt);
  padding: 8px 4px 8px 14px; position: relative;
  transition: color 0.5s var(--ease-lux);
}
.notify__btn::after {
  content: ""; position: absolute; left: 14px; right: 4px; bottom: 2px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s var(--ease-lux);
}
.notify__btn:hover { color: var(--teal); }
.notify__btn:hover::after { transform: scaleX(1); background: var(--teal); }
.notify__privacy { margin: 18px 0 0; font-size: 0.72rem; font-weight: 300; color: #777670; }
.notify__msg {
  min-height: 1.2em; margin: 14px 0 0; font-size: 0.86rem; letter-spacing: 0.06em;
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.7s var(--ease-lux), transform 0.7s var(--ease-lux);
}
.notify__msg.show { opacity: 1; transform: none; }
.notify__msg.error   { color: #E0A3A3; }
.notify__msg.success { color: var(--teal); }
.notify.done .notify__field, .notify.done .notify__privacy { display: none; }

/* scroll cue */
.scroll-cue {
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  margin-top: 56px; text-decoration: none; color: var(--muted);
  font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase; padding-left: 0.26em;
  transition: color 0.5s var(--ease-lux);
}
.scroll-cue svg { width: 20px; height: 12px; animation: nudge 2.4s var(--ease-lux) infinite; }
.scroll-cue:hover { color: var(--gold-lt); }
@keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ===========================================================
   The Anjeya Promise
   =========================================================== */
.promise {
  position: relative; z-index: 2;
  padding: clamp(76px, 13vh, 140px) 26px clamp(60px, 9vh, 110px);
  text-align: center;
  background: linear-gradient(180deg, rgba(7,7,7,0) 0%, rgba(8,8,7,0.88) 12%, rgba(8,8,7,0.94) 100%);
}
.promise__eyebrow {
  font-size: 0.64rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold-dp); margin: 0; padding-left: 0.34em;
}
.promise__title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.7rem, 5vw, 2.6rem); line-height: 1.2;
  margin: 16px 0 0; color: var(--ivory);
}
.promise__lede {
  max-width: 560px; margin: 20px auto 0;
  font-weight: 300; font-size: clamp(0.92rem, 2.4vw, 1.02rem); line-height: 1.75; color: var(--muted);
}
.promise__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 5vw, 60px);
  max-width: 940px; margin: clamp(48px, 7vh, 80px) auto 0;
}
.pillar { padding: 0 8px; }
.pillar__icon { display: inline-flex; }
.pillar__icon svg { width: 46px; height: 46px; filter: drop-shadow(0 0 10px rgba(212,175,55,0.18)); }
.pillar h3 {
  font-family: var(--serif); font-weight: 500; font-size: 1.18rem;
  letter-spacing: 0.02em; margin: 22px 0 0; color: var(--ivory);
}
.pillar p {
  margin: 12px auto 0; max-width: 260px;
  font-weight: 300; font-size: 0.9rem; line-height: 1.7; color: var(--muted);
}

/* ===========================================================
   Footer
   =========================================================== */
.footer {
  position: relative; z-index: 2;
  text-align: center; padding: 56px 26px 64px;
  background: rgba(8,8,7,0.94);
  border-top: 1px solid rgba(212,175,55,0.12);
}
.footer__mark {
  font-family: var(--serif); font-weight: 600; font-size: 1.3rem;
  letter-spacing: 0.32em; padding-left: 0.32em; color: var(--ivory);
}
.footer__social {
  display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px;
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
}
.footer__social a { color: var(--gold-dp); text-decoration: none; transition: color 0.5s var(--ease-lux); }
.footer__social a:hover { color: var(--gold-lt); }
.footer__social .dot { color: var(--gold-dp); }
.footer__copy {
  margin: 20px 0 0; font-size: 0.64rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: #66655F;
}

/* ===========================================================
   Reveal animations
   =========================================================== */
.reveal { opacity: 0; transform: translateY(16px); }
.ready .reveal {
  opacity: 1; transform: none;
  transition: opacity 1100ms var(--ease-lux), transform 1100ms var(--ease-lux);
  transition-delay: calc(var(--d) * 130ms + 150ms);
}
.ready .wordmark .mask { transition-delay: 0ms; }

/* reveal-on-scroll (promise section) */
.reveal-os { opacity: 0; transform: translateY(26px); }
.reveal-os.in {
  opacity: 1; transform: none;
  transition: opacity 1000ms var(--ease-lux), transform 1000ms var(--ease-lux);
}
.promise__title.in { transition-delay: 90ms; }
.promise__lede.in  { transition-delay: 160ms; }
.pillar:nth-child(1).in { transition-delay: 80ms; }
.pillar:nth-child(2).in { transition-delay: 200ms; }
.pillar:nth-child(3).in { transition-delay: 320ms; }

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 720px) {
  .promise__grid { grid-template-columns: 1fr; gap: 44px; max-width: 360px; }
}
@media (max-width: 560px) {
  .hero { padding: 13vh 20px 8vh; }
  .wordmark { letter-spacing: 0.14em; padding-left: 0.14em; }
  .tagline { letter-spacing: 0.26em; padding-left: 0.26em; }
  .cd-sep { display: none; }
  .cd-grid { gap: 14px 18px; flex-wrap: wrap; max-width: 280px; }
  .cd-unit { min-width: 56px; flex: 0 0 40%; }
  .notify__field { flex-wrap: wrap; gap: 12px; }
  .notify__input { width: 100%; text-align: center; }
  .notify__btn { width: 100%; padding: 12px; border: 1px solid rgba(212,175,55,0.4); border-radius: 999px; }
  .notify__btn::after { display: none; }
}

/* ===========================================================
   Reduced motion
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-video, .bloom, .glint, .rule .sheen, .scroll-cue svg { animation: none !important; }
  .reveal, .reveal-os { opacity: 1 !important; transform: none !important; transition: none !important; }
  .wordmark i { transform: none !important; transition: none !important; }
}