/* =========================================================================
   ARTISAN HABITAT — Coming Soon landing page
   Single, minimal, premium under-construction page.
   Monochromatic warm-earth palette (exact PDF brand colours).
   No pure black or gray — shadows are deep terracotta.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design tokens (EXACT PDF palette — do not alter)
   ------------------------------------------------------------------------- */
:root {
  --bg-base:     #9A5A3C; /* primary terracotta/clay — main background */
  --bg-deep:     #6E3A24; /* darker terracotta for depth/shadow */
  --bg-darker:   #5F331F; /* deepest shadow accents */
  --bg-light:    #B06B45; /* lighter band */
  --accent:      #C17C4E; /* dividers, button, accents */
  --accent-soft: #D69A6B; /* highlights, gradients */
  --text-white:  #FFFFFF; /* headline */
  --text-light:  #F5EDE4; /* warm cream body text */
  --text-dark:   #3E2418;
  --cream-bg:    #EDE3D6;

  /* Typography */
  --font-display: "Montserrat", system-ui, sans-serif;
  --font-accent:  "Cormorant Garamond", Georgia, serif;
  --font-body:    "Mulish", system-ui, sans-serif;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* -------------------------------------------------------------------------
   2. Reset & base
   ------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-light);
  /* Vertical wash: deep terracotta -> base clay -> warm accent */
  background:
    linear-gradient(165deg,
      var(--bg-deep)   0%,
      var(--bg-darker) 14%,
      var(--bg-base)   54%,
      var(--bg-light)  82%,
      var(--accent)    100%);
  background-color: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 4px;
  border-radius: 4px;
}

/* -------------------------------------------------------------------------
   3. Background atmosphere
      Sun-baked terracotta clay wall with dappled leaf-shadow light.
      Layer order (back -> front):
        body gradient : directional sunlight wash (deep top -> warm base)
        .bg__dapple   : high-contrast warm light pools + deep shadow pools (drift)
        .bg__leaves   : inline-SVG dappled foliage shadows, blurred (multiply)
        .bg__grain    : inline-SVG clay mottle + fine matte tooth (soft-light)
        .bg__vignette : soft pool that seats the wordmark + framed edges
      All palette values below are the EXACT brand RGB equivalents — no new hues.
   ------------------------------------------------------------------------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.bg > * { position: absolute; }

/* (a) Dappled sun-through-leaves light — bright warm pools + deep shadow pools.
       Higher alpha + tighter blobs than before so the effect clearly reads. */
.bg__dapple {
  inset: -15%;
  background:
    radial-gradient(40% 34% at 18% 18%, rgba(214,154,107,0.55), transparent 66%), /* accent-soft */
    radial-gradient(30% 26% at 80% 12%, rgba(193,124,78,0.50), transparent 68%),  /* accent */
    radial-gradient(46% 40% at 76% 78%, rgba(214,154,107,0.44), transparent 68%), /* accent-soft */
    radial-gradient(24% 22% at 50% 46%, rgba(176,107,69,0.42), transparent 70%),  /* bg-light */
    radial-gradient(30% 28% at 30% 86%, rgba(95,51,31,0.46), transparent 66%),    /* bg-darker shadow */
    radial-gradient(20% 18% at 62% 32%, rgba(110,58,36,0.46), transparent 66%),   /* bg-deep shadow */
    radial-gradient(22% 20% at 12% 60%, rgba(62,36,24,0.42), transparent 68%);    /* text-dark shadow */
  filter: blur(3px);
  animation: driftA 34s ease-in-out infinite alternate;
}
.bg__dapple::before,
.bg__dapple::after { content: ""; position: absolute; inset: 0; }
/* extra small bright dapples — pinpoints of sun through the canopy */
.bg__dapple::before {
  background:
    radial-gradient(15% 13% at 40% 24%, rgba(214,154,107,0.50), transparent 62%),
    radial-gradient(13% 12% at 66% 56%, rgba(214,154,107,0.44), transparent 62%),
    radial-gradient(12% 11% at 24% 40%, rgba(193,124,78,0.42), transparent 64%),
    radial-gradient(17% 14% at 88% 42%, rgba(176,107,69,0.42), transparent 64%),
    radial-gradient(13% 12% at 54% 82%, rgba(214,154,107,0.42), transparent 62%),
    radial-gradient(11% 10% at 8% 34%, rgba(214,154,107,0.40), transparent 62%);
  filter: blur(2px);
  animation: driftB 26s ease-in-out infinite alternate;
}
/* extra deep shadow pools — clustered leaves blocking the light */
.bg__dapple::after {
  background:
    radial-gradient(20% 18% at 44% 64%, rgba(62,36,24,0.42), transparent 66%),
    radial-gradient(16% 15% at 76% 22%, rgba(95,51,31,0.42), transparent 66%),
    radial-gradient(18% 16% at 14% 28%, rgba(110,58,36,0.40), transparent 66%),
    radial-gradient(15% 14% at 88% 72%, rgba(95,51,31,0.40), transparent 66%),
    radial-gradient(17% 15% at 38% 8%, rgba(110,58,36,0.38), transparent 66%);
  filter: blur(4px);
  animation: driftC 44s ease-in-out infinite alternate;
}

/* (b) Leaf-shadow foliage — scattered blurred organic shapes in deep terracotta
       (inline SVG, feGaussianBlur). Two offset copies build canopy depth.
       multiply lets each shape darken the clay below into a true cast shadow. */
.bg__leaves {
  inset: -8%;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 800 800'%3E%3Cdefs%3E%3Cfilter id='b' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='11'/%3E%3C/filter%3E%3Cfilter id='c' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3C/defs%3E%3Cg fill='%235F331F'%3E%3Cg filter='url(%23b)'%3E%3Cellipse cx='150' cy='120' rx='92' ry='48' opacity='0.55' transform='rotate(25 150 120)'/%3E%3Cellipse cx='560' cy='150' rx='104' ry='56' opacity='0.5' transform='rotate(15 560 150)'/%3E%3Cellipse cx='120' cy='330' rx='82' ry='46' opacity='0.48' transform='rotate(40 120 330)'/%3E%3Cellipse cx='470' cy='360' rx='90' ry='50' opacity='0.5' transform='rotate(30 470 360)'/%3E%3Cellipse cx='180' cy='560' rx='98' ry='54' opacity='0.5' transform='rotate(18 180 560)'/%3E%3Cellipse cx='540' cy='640' rx='84' ry='48' opacity='0.48' transform='rotate(22 540 640)'/%3E%3Cellipse cx='650' cy='500' rx='76' ry='44' opacity='0.46' transform='rotate(-25 650 500)'/%3E%3Cellipse cx='720' cy='680' rx='72' ry='42' opacity='0.44' transform='rotate(-15 720 680)'/%3E%3C/g%3E%3Cg filter='url(%23c)'%3E%3Cellipse cx='340' cy='90' rx='64' ry='34' opacity='0.45' transform='rotate(-20 340 90)'/%3E%3Cellipse cx='700' cy='300' rx='70' ry='40' opacity='0.45' transform='rotate(-35 700 300)'/%3E%3Cellipse cx='300' cy='300' rx='56' ry='30' opacity='0.4' transform='rotate(-10 300 300)'/%3E%3Cellipse cx='360' cy='600' rx='60' ry='34' opacity='0.42' transform='rotate(-28 360 600)'/%3E%3Cellipse cx='80' cy='720' rx='64' ry='36' opacity='0.42' transform='rotate(35 80 720)'/%3E%3Cellipse cx='420' cy='180' rx='44' ry='24' opacity='0.38' transform='rotate(50 420 180)'/%3E%3Cellipse cx='240' cy='440' rx='50' ry='28' opacity='0.4' transform='rotate(-40 240 440)'/%3E%3Cellipse cx='600' cy='260' rx='46' ry='26' opacity='0.4' transform='rotate(12 600 260)'/%3E%3Cellipse cx='770' cy='430' rx='54' ry='30' opacity='0.42' transform='rotate(-22 770 430)'/%3E%3Cellipse cx='40' cy='480' rx='58' ry='32' opacity='0.4' transform='rotate(28 40 480)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 800 800'%3E%3Cdefs%3E%3Cfilter id='b' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='11'/%3E%3C/filter%3E%3Cfilter id='c' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3C/defs%3E%3Cg fill='%235F331F'%3E%3Cg filter='url(%23b)'%3E%3Cellipse cx='150' cy='120' rx='92' ry='48' opacity='0.55' transform='rotate(25 150 120)'/%3E%3Cellipse cx='560' cy='150' rx='104' ry='56' opacity='0.5' transform='rotate(15 560 150)'/%3E%3Cellipse cx='120' cy='330' rx='82' ry='46' opacity='0.48' transform='rotate(40 120 330)'/%3E%3Cellipse cx='470' cy='360' rx='90' ry='50' opacity='0.5' transform='rotate(30 470 360)'/%3E%3Cellipse cx='180' cy='560' rx='98' ry='54' opacity='0.5' transform='rotate(18 180 560)'/%3E%3Cellipse cx='540' cy='640' rx='84' ry='48' opacity='0.48' transform='rotate(22 540 640)'/%3E%3Cellipse cx='650' cy='500' rx='76' ry='44' opacity='0.46' transform='rotate(-25 650 500)'/%3E%3Cellipse cx='720' cy='680' rx='72' ry='42' opacity='0.44' transform='rotate(-15 720 680)'/%3E%3C/g%3E%3Cg filter='url(%23c)'%3E%3Cellipse cx='340' cy='90' rx='64' ry='34' opacity='0.45' transform='rotate(-20 340 90)'/%3E%3Cellipse cx='700' cy='300' rx='70' ry='40' opacity='0.45' transform='rotate(-35 700 300)'/%3E%3Cellipse cx='300' cy='300' rx='56' ry='30' opacity='0.4' transform='rotate(-10 300 300)'/%3E%3Cellipse cx='360' cy='600' rx='60' ry='34' opacity='0.42' transform='rotate(-28 360 600)'/%3E%3Cellipse cx='80' cy='720' rx='64' ry='36' opacity='0.42' transform='rotate(35 80 720)'/%3E%3Cellipse cx='420' cy='180' rx='44' ry='24' opacity='0.38' transform='rotate(50 420 180)'/%3E%3Cellipse cx='240' cy='440' rx='50' ry='28' opacity='0.4' transform='rotate(-40 240 440)'/%3E%3Cellipse cx='600' cy='260' rx='46' ry='26' opacity='0.4' transform='rotate(12 600 260)'/%3E%3Cellipse cx='770' cy='430' rx='54' ry='30' opacity='0.42' transform='rotate(-22 770 430)'/%3E%3Cellipse cx='40' cy='480' rx='58' ry='32' opacity='0.4' transform='rotate(28 40 480)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: 28% 22%, 78% 82%;
  background-size: 118% 118%, 76% 76%;
  opacity: 0.55;
  mix-blend-mode: multiply;
  animation: driftLeaves 52s ease-in-out infinite alternate;
}

/* (c) Clay surface — coarse desaturated mottle (uneven fired clay) + fine
       matte tooth. soft-light keeps it matte (never glossy) and lifts grain. */
.bg__grain {
  inset: 0;
  opacity: 0.55;
  mix-blend-mode: soft-light;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='0.7'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 170px 170px, 360px 360px;
  background-repeat: repeat, repeat;
}

/* (d) Vignette — a soft deep-terracotta pool seats the wordmark for contrast,
       plus a framed edge fall-off for premium depth. */
.bg__vignette {
  inset: 0;
  background:
    radial-gradient(56% 46% at 50% 44%, rgba(62,36,24,0.28), rgba(62,36,24,0.10) 48%, transparent 72%),
    radial-gradient(140% 120% at 50% 28%, transparent 50%, rgba(95,51,31,0.26) 86%, rgba(62,36,24,0.40) 100%);
  mix-blend-mode: multiply;
}

/* Organic drift — distinct speeds/vectors so the light feels alive + parallaxed */
@keyframes driftA {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-2.4%, 1.8%, 0) scale(1.07); }
}
@keyframes driftB {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(2.2%, -1.6%, 0) scale(1.05); }
}
@keyframes driftC {
  from { transform: translate3d(0, 0, 0) scale(1.04); }
  to   { transform: translate3d(-1.6%, -1.2%, 0) scale(1); }
}
@keyframes driftLeaves {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(1.8%, 1.4%, 0) scale(1.04); }
}

/* -------------------------------------------------------------------------
   4. Stage / hero
   ------------------------------------------------------------------------- */
.stage {
  flex: 1;
  display: grid;
  place-items: center;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 6vw, 3rem);
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 46rem;
}

.hero__mark {
  width: clamp(72px, 12vw, 104px);
  height: auto;
  color: var(--text-white);
  filter: drop-shadow(0 10px 26px rgba(95, 51, 31, 0.40));
  margin-bottom: clamp(1.8rem, 4vw, 2.6rem);
}

.hero__wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 0.98;
  color: var(--text-white);
  font-size: clamp(2.4rem, 1.4rem + 5.4vw, 5.4rem);
  text-shadow: 0 14px 40px rgba(95, 51, 31, 0.35);
}
.hero__wordmark span { display: block; }
.hero__wordmark span:last-child {
  color: var(--text-light);
  letter-spacing: 0.16em;
}

.hero__divider {
  display: block;
  width: clamp(54px, 12vw, 84px);
  height: 2px;
  margin: clamp(1.8rem, 4vw, 2.6rem) auto;
  background: var(--accent);
  opacity: 0.9;
}

.hero__soon {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.1rem, 1.4rem + 3.6vw, 4rem);
  line-height: 1.1;
  color: var(--text-white);
}

.hero__subline {
  margin-top: clamp(1.4rem, 3vw, 1.9rem);
  max-width: 42ch;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  color: var(--text-light);
  opacity: 0.9;
}

/* -------------------------------------------------------------------------
   5. Footer
   ------------------------------------------------------------------------- */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: clamp(1.8rem, 4vw, 2.6rem) 1.5rem clamp(2rem, 4vw, 2.8rem);
  text-align: center;
}

.footer__email {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-light);
  padding-block: 0.35rem;
  position: relative;
  transition: color 0.45s var(--ease);
}
.footer__email::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--accent-soft);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.45s var(--ease);
}
.footer__email:hover { color: var(--text-white); }
.footer__email:hover::after { transform: scaleX(1); }

.footer__copy {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--text-light);
  opacity: 0.7;
}

/* -------------------------------------------------------------------------
   6. Entrance animation (fade-up, staggered)
   ------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  animation: fadeUp 0.9s var(--ease) forwards;
}
.hero__mark     { animation-delay: 0.05s; }
.hero__wordmark { animation-delay: 0.20s; }
.hero__divider  { animation-delay: 0.35s; }
.hero__soon     { animation-delay: 0.48s; }
.hero__subline  { animation-delay: 0.60s; }
.footer         { animation-delay: 0.78s; }

@keyframes fadeUp {
  to { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
   7. Reduced motion
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bg__dapple,
  .bg__dapple::before,
  .bg__dapple::after,
  .bg__leaves { animation: none; }
  .reveal {
    opacity: 1;
    transform: none;
    animation: none;
  }
}