/* EARTHIVAA — ALL VISUAL SETTINGS ARE HERE. Fonts, heights and colors are editable. */
:root {
  --gold: #e3bd67;
  --ivory: #faf5e8;
  --forest: #102f20;
  --ink: #07170f;
  --font: 'Poppins', Arial, sans-serif;
  --page-ease: cubic-bezier(.22, 1, .36, 1);
  --duration: 1050ms;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: var(--font); background: var(--ink); color: white; }
button, a { font: inherit; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
.site { position: relative; min-height: 100svh; height: 100svh; isolation: isolate; overflow: hidden; }

/* TRUE DEPTH PARALLAX: the photo, atmosphere and botanical foreground move
   at independent speeds. Never animate clip-path, blur or layout properties. */
.backdrops, .backdrop, .backdrop-shade, .backdrop-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.backdrops { z-index: -1; background: #0b2316; overflow: hidden; }
.backdrop {
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  z-index: 1;
  transform: translate3d(0,0,0);
  will-change: opacity, transform;
}
.backdrop.is-active { opacity: 1; visibility: visible; z-index: 2; }
.backdrop.is-entering, .backdrop.is-leaving { visibility: visible; }
.backdrop.is-entering { z-index: 4; animation: photo-layer-in var(--duration) cubic-bezier(.16,1,.3,1) both; }
.backdrop.is-leaving { z-index: 3; animation: photo-layer-out var(--duration) cubic-bezier(.16,1,.3,1) both; }
/* Overscan gives every plane room to move without showing black borders. */
.backdrop-image {
  position: absolute;
  inset: -6%;
  background: var(--photo) center / cover no-repeat;
  transform: translate3d(var(--mouse-x,0px),var(--mouse-y,0px),0) scale(1.065);
  transition: transform 500ms cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.backdrop-atmosphere {
  position: absolute;
  inset: -5%;
  background: radial-gradient(ellipse at 72% 16%,rgba(232,194,110,.22),transparent 45%),
    linear-gradient(115deg,rgba(3,22,12,.20),transparent 60%);
  transform: translate3d(calc(var(--mouse-x,0px) * .45),calc(var(--mouse-y,0px) * .45),0);
  transition: transform 650ms cubic-bezier(.2,.7,.2,1);
}
.depth-foliage {
  position: absolute; inset: -4%; z-index: 5; pointer-events: none;
  background: radial-gradient(ellipse 27% 22% at 0% 100%,rgba(8,43,18,.51),transparent),
    radial-gradient(ellipse 15% 30% at 99% -4%,rgba(11,46,20,.32),transparent);
  transform: translate3d(calc(var(--mouse-x,0px) * -1.5),calc(var(--mouse-y,0px) * -1.5),0);
  transition: transform 700ms cubic-bezier(.2,.7,.2,1);
}
@keyframes photo-layer-in {
  from { opacity: 0; transform: translate3d(var(--arrival-x,45px),0,0) scale(1.045); }
  to { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes photo-layer-out {
  from { opacity: 1; transform: translate3d(0,0,0) scale(1); }
  to { opacity: 0; transform: translate3d(var(--departure-x,-25px),0,0) scale(1.025); }
}
.backdrop-shade {
  z-index: 6;
  background: linear-gradient(90deg,rgba(3,20,12,.77),rgba(8,31,19,.43) 47%,rgba(7,27,17,.71)),
    linear-gradient(0deg,rgba(1,14,7,.69),transparent 30%,rgba(0,12,7,.36));
}
.backdrop-grain { z-index: 7; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.56' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.33'/%3E%3C/svg%3E"); }

/* Top horizontal navigation */
.site-header { position: absolute; left: clamp(22px, 5vw, 80px); justify-content: space-between; right: clamp(22px, 5vw, 80px); top: 22px; display: flex; align-items: center; gap: 24px; z-index: 20; }
.brand { display: flex; align-items: center; justify-content: center; width: 102px; height: 102px; padding: 10px; flex: none; background: #fbf6ea; border-radius: 50%; box-shadow: 0 10px 35px #0003; }
.brand img { width: 92%; height: 92%; object-fit: contain; }
.top-nav { display: flex; justify-content: center; gap: clamp(20px, 3.2vw, 52px); flex: 1; }
.nav-link { position: relative; border: 0; background: transparent; color: #fff9e9; font-size: 12px; text-transform: uppercase; letter-spacing: .16em; padding: 16px 0; font-weight: 500; }
.nav-link::after { content: ''; position: absolute; left: 0; bottom: 8px; width: 0; height: 2px; background: var(--gold); transition: width .45s; }
.nav-link.is-active::after, .nav-link:hover::after { width: 100%; }
.launch-tag { display: inline-flex; align-items: center; gap: 10px; color: #ffefd1; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px #e3bd6727; animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px #e3bd6704; } }

/* Slider content */
.slides { position: relative; height: 100%; }
.slide { position: absolute; inset: 0; display: grid; grid-template-columns: 48% 52%; align-items: center; padding: 132px clamp(50px, 9vw, 160px) 87px clamp(46px, 10vw, 185px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 430ms, visibility 430ms; }
.slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.left-side { display: flex; align-items: center; justify-content: center; min-width: 0; padding-right: clamp(15px, 3vw, 45px); }
.right-side { min-width: 0; border-left: 1px solid #e2c98886; padding-left: clamp(32px, 5vw, 88px); }
.slide.is-active .right-side > * { animation: text-appear 850ms var(--page-ease) both; }
.slide.is-active .right-side > :nth-child(2) { animation-delay: 80ms; }
.slide.is-active .right-side > :nth-child(3) { animation-delay: 155ms; }
.slide.is-active .right-side > :nth-child(4) { animation-delay: 220ms; }
.slide.is-active .right-side > :nth-child(5) { animation-delay: 280ms; }
.slide.is-active .counter-unit { animation: counter-enter 530ms var(--page-ease) both; }
@keyframes text-appear { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes counter-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.eyebrow { display: flex; align-items: center; gap: 16px; color: var(--gold); font-size: 11px; font-weight: 600; letter-spacing: .27em; margin: 0 0 19px; }
.eyebrow i { width: 55px; height: 1px; background: var(--gold); opacity: .8; }
.headline { margin: 0 0 21px; font-size: clamp(39px, 4.05vw, 70px); line-height: 1.16; font-weight: 700; letter-spacing: -.047em; }
.headline span { color: var(--gold); }
.description { font-size: clamp(13px, 1.1vw, 16px); line-height: 1.85; font-weight: 300; color: #fff9e9; max-width: 520px; margin: 0 0 24px; }
.action { display: inline-flex; align-items: center; gap: 23px; padding: 14px 22px; border: 1px solid var(--gold); background: rgba(15,41,24,.35); border-radius: 0; color: var(--ivory); font-size: 11px; letter-spacing: .14em; font-weight: 600; transition: background 250ms, color 250ms, transform 250ms; }
.action span { font-size: 19px; line-height: 1; }
.action:hover { background: var(--gold); color: var(--forest); transform: translateY(-2px); }
.subline { color: #f6dd9e; opacity: .75; margin: 26px 0 0; font-size: 9px; letter-spacing: .19em; }

/* Fixed reference-counter layout. Keep this arrangement unchanged.
   Each small tile has the same height; DAYS spans the two bottom rows. */
.counter-unit {
  display: grid;
  position: relative;
  grid-template-columns: 34% 66%;
  grid-template-rows: repeat(3, clamp(112px, 16.4vh, 152px));
  width: min(100%, 510px);

}
.timer-box {
  min-height: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 0;
}
.timer-box strong {
  font-size: clamp(46px, 4.9vw, 70px);
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.timer-box span {
  margin-top: 12px;
  letter-spacing: .19em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
}
.box-hours { grid-column: 1; grid-row: 1; background: rgba(11,40,28,.91); color: #fff; }
.box-minutes { grid-column: 1; grid-row: 2; background: #fff7e5; color: #153722; }
.box-seconds { grid-column: 1; grid-row: 3; background: #e6b955; color: #172c1a; }
.box-days { grid-column: 2; grid-row: 2 / 4; background: #103722; color: #f7d58c; }
.box-days strong { font-size: clamp(76px, 8vw, 130px); }
.box-days span { font-size: 18px; }
.counter-note {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  justify-content: center;
  align-items: end;
  padding: 0 8px 22px;
  color: #f9d48d;
  font-size: clamp(13px, 1.2vw, 17px);
  font-style: italic;
  font-weight: 400;
}
.pillars { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 24px; }
.pillars span { border: 1px solid #f8e2b56c; background: #173a2a6c; padding: 10px 11px; font-size: 10px; color: #fff3dc; }
.contact-headline { font-size: clamp(44px, 4.7vw, 76px); }
.contact-details { margin: 0 0 23px; display: grid; gap: 9px; }
.contact-details p { display: grid; gap: 1px; margin: 0; line-height: 1.5; }
.contact-details small { font-size: 9px; font-weight: 600; letter-spacing: .16em; color: var(--gold); }
.contact-details a, .contact-details span { font-size: 13px; color: #fff8e8; }
.contact-details a:hover { color: var(--gold); }

/* Editorial slider rail and navigation */
.slide-rail { position: absolute; right: clamp(19px, 3vw, 44px); top: 50%; transform: translateY(-50%); z-index: 12; display: flex; flex-direction: column; align-items: center; gap: 17px; }
.rail-count, .rail-total { font-size: 10px; color: var(--ivory); letter-spacing: .1em; }
.rail-rule { height: 60px; width: 1px; background: #ffffff69; position: relative; }
.rail-rule span { position: absolute; left: 0; top: 0; width: 1px; height: 33.333%; background: var(--gold); transition: transform 700ms var(--page-ease); }
.rail-dot { border-radius: 50%; height: 7px; width: 7px; border: 1px solid #fff9e9a8; padding: 0; background: transparent; }
.rail-dot.is-active { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 5px #e3bd6733; }
.site-footer { position: absolute; bottom: 23px; left: clamp(22px, 5vw, 80px); right: clamp(22px, 5vw, 80px); display: flex; justify-content: space-between; align-items: center; z-index: 15; color: #f1ebdebf; font-size: 9px; letter-spacing: .09em; }
.footer-center { letter-spacing: .19em; }
.footer-sections { display: flex; align-items: center; gap: 12px; }
.footer-section { background: transparent; border: 0; color: #f3ecdcaa; padding: 8px 2px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.footer-section span { color: #dab15a; margin-right: 5px; }
.footer-section.is-active { color: #fff; border-bottom: 1px solid #e1b960; }
.footer-sections i { width: 14px; height: 1px; background: #ffffff64; }

@media (max-width: 1150px) {
  .slide { padding-left: 5vw; padding-right: 6vw; grid-template-columns: 47% 53%; }
  .right-side { padding-left: 3.5vw; }
  .counter-unit { width: min(100%, 380px); }
  .brand { width: 82px; height: 82px; }
}
@media (max-width: 760px) {
  .site { height: auto; min-height: 100svh; overflow: visible; }
  .backdrops { position: fixed; }
  .site-header { position: relative; left: auto; right: auto; top: auto; padding: 15px 18px; gap: 13px; justify-content: space-between; }
  .brand { width: 60px; height: 60px; }
  .top-nav { justify-content: flex-end; gap: 13px; flex: 1; }
  .nav-link { font-size: 9px; letter-spacing: 0; }
  .launch-tag { display: none; }
  .slides { height: auto; }
  .slide { position: relative; inset: auto; display: none; min-height: calc(100svh - 90px); padding: 18px 22px 110px; grid-template-columns: 1fr; gap: 25px; align-content: start; }
  .slide.is-active { display: grid; }
  .left-side { padding-right: 0; }
  .counter-unit { width: min(100%, 450px); grid-template-rows: repeat(3, clamp(85px, 14vh, 126px)); }
  .right-side { border-left: 0; border-top: 1px solid #e2c98886; padding: 22px 0 0; }
  .headline { font-size: clamp(36px, 9vw, 57px); }
  .description { font-size: 13px; }
  .eyebrow { font-size: 10px; }
  .timer-box strong { font-size: clamp(34px, 9vw, 56px); }
  .box-days strong { font-size: clamp(64px, 19vw, 92px); }
  .box-days span { font-size: 13px; }
  .footer-sections { gap: 7px; }
  .footer-section { font-size: 9px; }
  .footer-sections i { width: 6px; }
  .slide-rail { display: none; }
  .site-footer { position: relative; padding: 0 22px 17px; left: auto; right: auto; bottom: auto; align-items: flex-end; }
  .footer-center { display: none; }
}
@media (max-height: 740px) and (min-width: 761px) {
  .site { min-height: 620px; }
  .slide { padding-top: 104px; padding-bottom: 55px; }
  .counter-unit { grid-template-rows: repeat(3, 110px); }
  .headline { font-size: clamp(34px, 3.4vw, 56px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Reduced motion means instant backgrounds and no pointer-based movement. */
@media (prefers-reduced-motion: reduce) {
  .backdrop.is-entering, .backdrop.is-leaving { animation: none !important; }
  .backdrop-image, .backdrop-atmosphere, .depth-foliage { transition: none !important; transform: none !important; }
}

/* Fit bottom navigation on very narrow phones */
@media (max-width: 370px) { .footer-section span { display: none; } .site-footer { padding-left: 12px; padding-right: 12px; } }