/* ==========================================================================
   Keramrutham — Coming Soon
   Palette taken from the brand reference (deep forest #1d3a26, warm ivory)
   plus the logo's own leaf green. Gold is used only as a faint accent.
   ========================================================================== */

/* ---------- Fonts (self-hosted, latin subset, swap) ---------- */
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken-grotesk.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --paper:  #f6f1e6;           /* warm ivory */
  --paper-2:#efe9da;
  --ink:    #10150f;           /* the logo's black */
  --forest: #1d3a26;           /* deep forest green (from the brand reference) */
  --leaf:   #1f7a3a;           /* leaf green, from the logo */
  --moss:   #6f8a72;
  --error:  #a33a22;

  --ink-80: rgba(16, 21, 15, .82);
  --ink-70: rgba(16, 21, 15, .72);
  --ink-60: rgba(16, 21, 15, .64);
  --line:   rgba(16, 21, 15, .34);

  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--paper);
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* Bigger canvases get proportionally bigger type and logo */
@media (min-width: 1800px) { html { font-size: 112.5%; } }
@media (min-width: 2400px) { html { font-size: 131%; } }

body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: transparent;   /* html paints the base colour; the fixed scene sits above it */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }
a { color: inherit; }
p, h1, h2 { margin: 0; }

:focus-visible { outline: 2px solid var(--leaf); outline-offset: 4px; }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 20;
  padding: .7rem 1.1rem; background: var(--ink); color: var(--paper);
  border-radius: 999px; font-size: .85rem; text-decoration: none;
}
.skip:focus { top: 1rem; }

/* ==========================================================================
   THE SCENE — a misty Idukki hillside, built in layers.
   Everything that moves uses transform/opacity only, so it stays cheap.
   ========================================================================== */
.scene {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;            /* stable height: no jump when mobile toolbars collapse */
  overflow: hidden;
  z-index: -1;
  background: var(--paper);
  pointer-events: none;
}
.scene > * { position: absolute; }

/* morning sky: ivory fading into a pale green haze */
.sky {
  inset: 0;
  background: linear-gradient(180deg,
    #f9f5ea 0%, #f6f1e6 38%, #eceedd 64%, #dde6d3 84%, #cfdcc6 100%);
}

/* soft sun, high on the right */
.sun {
  inset: 0;
  background: radial-gradient(circle at 78% 2%,
    rgba(255, 246, 214, .95) 0%, rgba(255, 244, 210, .45) 22%, transparent 50%);
}

/* pale light slanting through the canopy (shows over the hills) */
.rays {
  inset: -25% -15% 30% -15%;
  background: conic-gradient(from 172deg at 78% 0%,
    transparent 0deg,
    rgba(255, 250, 225, .55) 4deg, transparent 11deg,
    transparent 15deg,
    rgba(255, 250, 225, .40) 19deg, transparent 28deg,
    rgba(255, 250, 225, .60) 34deg, transparent 40deg,
    transparent 46deg,
    rgba(255, 250, 225, .35) 51deg, transparent 60deg,
    transparent 360deg);
  filter: blur(10px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 80%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 80%);
  transform-origin: 78% 0%;
  animation:
    ray-sway  90s ease-in-out infinite alternate,
    ray-glow  48s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* hill ridges, far to near: pale and misty far away, deep forest nearby */
.ridge {
  left: 50%;
  bottom: 0;
  width: max(100%, 150vh);
  transform: translateX(-50%);
  background-position: center bottom;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.ridge-1 { height: 50%; background-image: url("/assets/img/ridge-1.svg"); }
.ridge-2 { height: 40%; background-image: url("/assets/img/ridge-2.svg"); }
.ridge-3 { height: 29%; background-image: url("/assets/img/ridge-3.svg"); }
.ridge-4 { height: 15%; background-image: url("/assets/img/ridge-4.svg"); }

/* drifting mist: a tileable texture slid exactly one tile, forever */
.fog {
  left: 0;
  height: var(--h);
  --tile: calc(var(--h) * 3.2);
  width: calc(100% + var(--tile));
  background-repeat: repeat-x;
  background-size: var(--tile) 100%;
  animation: fog-drift var(--t) linear infinite;
  will-change: transform;
}
.fog-1 { --h: 30vh; --t: 420s; bottom: 34%; opacity: .85;
         background-image: url("/assets/img/fog-a.webp"); }
.fog-2 { --h: 32vh; --t: 320s; bottom: 18%; opacity: .9;
         background-image: url("/assets/img/fog-b.webp"); animation-direction: reverse; }
.fog-3 { --h: 26vh; --t: 240s; bottom: -3%; opacity: .8;
         background-image: url("/assets/img/fog-a.webp"); }

/* leaf-shadow dapple on the upper canopy, barely swaying */
.dapple {
  inset: -6%;
  background: url("/assets/img/dapple.webp") 0 0 / 520px auto repeat;
  opacity: .2;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 58%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 58%);
  animation: dapple-sway 85s ease-in-out infinite alternate;
  will-change: transform;
}

/* a few motes of pollen in the light */
.motes { inset: 0; overflow: hidden; }
.mote {
  position: absolute;
  bottom: -3vh;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120, 150, 70, .85), rgba(120, 150, 70, 0) 70%);
  opacity: 0;
  animation: mote-rise var(--d) linear var(--delay) infinite;
}

/* a calm ivory pool behind the text, and a faint green edge */
.veil {
  inset: 0;
  background:
    radial-gradient(ellipse 62% 48% at 50% 58%, rgba(247, 243, 232, .80), transparent 74%),
    radial-gradient(ellipse 95% 80% at 50% 45%, transparent 55%, rgba(46, 82, 56, .10) 100%);
}
/* deeper ivory wash while the sign-up is in view */
.veil-deep {
  background: linear-gradient(180deg, rgba(247, 243, 232, .40), rgba(247, 243, 232, .86));
  opacity: 0;
  transition: opacity 2.8s ease;
}
.scene.is-deep .veil-deep { opacity: 1; }

.grain {
  inset: 0;
  background: url("/assets/img/grain.webp") 0 0 / 180px 180px repeat;
  opacity: .6;
}

@keyframes fog-drift   { to { transform: translate3d(calc(var(--tile) * -1), 0, 0); } }
@keyframes ray-sway    { from { transform: rotate(-1.6deg); } to { transform: rotate(1.8deg); } }
@keyframes ray-glow    { from { opacity: .55; } to { opacity: 1; } }
@keyframes dapple-sway {
  from { transform: translate3d(-1.4%,  .8%, 0) rotate(.5deg); }
  to   { transform: translate3d( 1.6%, -.7%, 0) rotate(-.4deg); }
}
@keyframes mote-rise {
  0%   { opacity: 0; transform: translate3d(0, 0, 0); }
  12%  { opacity: var(--o); }
  88%  { opacity: var(--o); }
  100% { opacity: 0; transform: translate3d(var(--x), -112vh, 0); }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding:
    max(2rem, env(safe-area-inset-top))
    1.5rem
    max(3rem, calc(env(safe-area-inset-bottom) + 2rem));
}

.logo-wrap {
  width: min(88vw, 42rem, 76svh);
  font-size: 1rem;
  font-weight: 400;
}
.logo {
  display: block;
  width: 100%;
  height: auto;
  /* the one orchestrated moment: the brand emerges from the mist */
  animation: emerge 3.8s cubic-bezier(.2, .7, .2, 1) .25s both;
}

.soon {
  margin-top: clamp(1.6rem, 4.2vh, 3rem);
  padding-left: .55em;                      /* balances the trailing letter-space */
  font-size: clamp(.76rem, .7rem + .22vw, .92rem);
  font-weight: 500;
  letter-spacing: .55em;
  text-transform: uppercase;
  color: var(--leaf);
  font-weight: 600;
  animation: fade-in 2.2s ease 2.1s both;
}

.line {
  margin-top: 1.1rem;
  max-width: 20ch;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.55rem, 1.05rem + 2vw, 2.5rem);
  line-height: 1.22;
  color: var(--ink);
  text-wrap: balance;
  animation: fade-in 2.2s ease 2.7s both;
}

.hero .btn {
  margin-top: clamp(2rem, 5.4vh, 3.4rem);
  animation: fade-in 2.2s ease 3.3s both;
}

@keyframes emerge {
  from { opacity: 0; filter: blur(18px); transform: scale(1.045); }
  to   { opacity: 1; filter: none;       transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.05em 2.3em 1.05em 2.6em;
  border: 1px solid rgba(16, 21, 15, .62);
  border-radius: 999px;
  background: rgba(247, 243, 232, .35);
  color: var(--ink);
  font: 600 .78rem/1 var(--sans);
  letter-spacing: .28em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color .7s ease, color .7s ease, border-color .7s ease,
    box-shadow .9s ease, transform .7s ease;
}
.btn:hover {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--paper);
  box-shadow: 0 10px 34px rgba(29, 58, 38, .25);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }

.btn-solid {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.btn-solid:hover {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--paper);
  box-shadow: 0 10px 34px rgba(29, 58, 38, .3);
}
.btn[disabled] { opacity: .65; cursor: progress; transform: none; }

/* ==========================================================================
   SIGN-UP
   ========================================================================== */
.notify {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding:
    clamp(4.5rem, 11vh, 8rem)
    clamp(1.5rem, 6vw, 5rem)
    max(1.5rem, env(safe-area-inset-bottom));
}

.notify-grid {
  width: 100%;
  max-width: 68rem;
  margin: auto;
  display: grid;
  gap: 2.6rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .notify-grid {
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 28rem);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: center;
  }
}

.notify h2 {
  max-width: 9em;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 1.5rem + 4.4vw, 5rem);
  line-height: 1.02;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.lede {
  margin-top: 1.5rem;
  max-width: 30ch;
  font-size: clamp(1.02rem, .98rem + .25vw, 1.2rem);
  line-height: 1.7;
  color: var(--ink-70);
}

/* --- fields: ruled lines on paper, not boxes --- */
.field { position: relative; margin-bottom: 1.5rem; padding-top: 1.2rem; }

.field input[type="email"],
.field input[type="tel"] {
  display: block;
  width: 100%;
  padding: .55rem 0 .7rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 400 1.1rem/1.4 var(--sans);
  outline: none;
  transition: border-color .6s ease, box-shadow .6s ease;
}
.field input[type="email"]:hover,
.field input[type="tel"]:hover { border-bottom-color: rgba(16, 21, 15, .65); }
.field input[type="email"]:focus,
.field input[type="tel"]:focus {
  border-bottom-color: var(--leaf);
  box-shadow: 0 1px 0 0 var(--leaf);
}
.field input[aria-invalid="true"],
.field input[aria-invalid="true"]:focus { border-bottom-color: var(--error); box-shadow: 0 1px 0 0 var(--error); }

.field > input + label {
  position: absolute;
  left: 0;
  top: 1.82rem;
  font-size: 1.05rem;
  color: var(--ink-70);
  pointer-events: none;
  transform-origin: left top;
  transition: transform .5s ease, color .5s ease;
}
.field .opt { color: var(--ink-60); font-size: .88em; }
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field input:-webkit-autofill + label {
  transform: translateY(-1.7rem) scale(.78);
  color: var(--leaf);
}
.field input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  box-shadow: 0 0 0 100px #f6f1e6 inset;
  transition: background-color 9999s ease 0s;
}

.err, .form-err {
  min-height: 0;
  font-size: .86rem;
  line-height: 1.45;
  color: var(--error);
}
.err:not(:empty) { margin-top: .55rem; }
.form-err:not(:empty) { margin-top: 1.1rem; }

/* spam trap */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* --- consent: a small leaf instead of a tick-box --- */
.field.consent { padding-top: .4rem; margin-bottom: 1.9rem; }
.check {
  position: relative;
  display: grid;
  grid-template-columns: 1.15rem minmax(0, 1fr);
  column-gap: .95rem;
  align-items: start;
  font-size: .93rem;
  line-height: 1.55;
  color: var(--ink-80);
  cursor: pointer;
}
.check input {
  position: absolute;
  left: 0; top: .1rem;
  width: 1.4rem; height: 1.4rem;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.leaf {
  width: 1.1rem; height: 1.1rem;
  margin-top: .22rem;
  border: 1px solid rgba(16, 21, 15, .6);
  border-radius: 0 100% 0 100%;
  transition: background-color .6s ease, border-color .6s ease, transform .8s cubic-bezier(.2, .8, .2, 1);
}
.check:hover .leaf { border-color: var(--ink); }
.check input:checked ~ .leaf {
  background: var(--leaf);
  border-color: var(--leaf);
  transform: rotate(-10deg) scale(1.08);
}
.check input:focus-visible ~ .leaf { outline: 2px solid var(--leaf); outline-offset: 4px; }
.check input[aria-invalid="true"] ~ .leaf { border-color: var(--error); }

.turnstile-box:not(:empty) { margin-bottom: 1.4rem; }

.notify-form .btn-solid { width: 100%; }
@media (min-width: 520px) { .notify-form .btn-solid { width: auto; min-width: 13rem; } }

.privacy-note {
  margin-top: 1.8rem;
  max-width: 36ch;
  font-size: .8rem;
  line-height: 1.65;
  color: var(--ink-60);
}

/* --- success --- */
.done:not([hidden]) { animation: fade-in 1.8s ease both; outline: none; }
.done::before {
  content: "";
  display: block;
  width: 1.7rem; height: 1.7rem;
  margin-bottom: 1.5rem;
  border-radius: 0 100% 0 100%;
  background: var(--leaf);
  transform: rotate(-10deg);
}
.done-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.3rem);
  line-height: 1.1;
}
.done-text { margin-top: .9rem; font-size: 1.08rem; color: var(--ink-80); }

/* --- footer --- */
.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 2rem;
  margin-top: clamp(3.5rem, 9vh, 5.5rem);
  padding-top: 1.3rem;
  border-top: 1px solid rgba(16, 21, 15, .16);
  font-size: .8rem;
  color: var(--ink-60);
}
.foot-links { display: flex; gap: 1.6rem; }
.foot a { text-decoration: none; padding: .3rem 0; transition: color .5s ease; }
.foot a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--leaf); text-underline-offset: .35em; }
@media (max-width: 560px) {
  .foot { flex-direction: column; text-align: center; gap: .7rem; }
}

/* ==========================================================================
   LEGAL / UTILITY PAGES (privacy, terms, unsubscribe)
   ========================================================================== */
.page-legal .scene .veil-deep { opacity: 1; transition: none; }
.legal {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(3rem, 9vh, 6rem) 1.5rem 4rem;
}
.legal-brand { display: inline-block; margin-bottom: 3rem; }
.legal-brand img { width: 9rem; display: block; }
.legal h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.3rem, 1.6rem + 3vw, 3.6rem);
  line-height: 1.05;
  margin-bottom: 1.2rem;
}
.legal h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.4rem;
  margin: 2.4rem 0 .6rem;
}
.legal p, .legal li { color: var(--ink-80); line-height: 1.75; }
.legal p { margin-bottom: 1rem; }
.legal ul { padding-left: 1.2rem; margin: 0 0 1rem; }
.legal .placeholder {
  padding: 1rem 1.2rem;
  border-left: 2px solid var(--leaf);
  background: rgba(29, 58, 38, .06);
  color: var(--ink-70);
  font-size: .95rem;
}
.legal .btn { margin-top: 1rem; }
.legal-back { display: inline-block; margin-top: 2.5rem; font-size: .9rem; color: var(--ink-70); }

/* ==========================================================================
   SMALL SCREENS: re-composed, not just squeezed
   ========================================================================== */
@media (max-width: 600px) {
  .logo-wrap { width: min(92vw, 76svh); }
  .soon { letter-spacing: .5em; }
  .line { max-width: 15ch; }
  .hero .btn { width: min(100%, 20rem); }
  /* taller, narrower hills read better in portrait */
  .ridge-1 { height: 58%; }
  .ridge-2 { height: 46%; }
  .ridge-3 { height: 34%; }
  .ridge-4 { height: 21%; }
}

/* ==========================================================================
   REDUCED MOTION: a still, fully visible version
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .motes { display: none; }
  .rays { opacity: .8; }
}