/* =============================================================
   shiba.sh — coming soon postcard
   handwritten sketchbook aesthetic · warm desert palette
   ============================================================= */

:root {
  /* Paper & ink */
  --paper:        #F4E8CC;
  --paper-deep:   #E9D8AE;
  --paper-edge:   #D8C18A;
  --ink:          #1F1A14;
  --ink-soft:     #4A3F31;
  --ink-faint:    #8C7A5C;

  /* Accent (keffiyeh red) */
  --crimson:      #B82A24;
  --crimson-deep: #82130C;

  /* Sky & sun */
  --sky:          #6E96B6;
  --sky-deep:     #4F7799;
  --sun:          #F1B41E;
  --sun-ink:      #6E4F0E;

  /* Desert flora */
  --palm:         #4E8553;
  --palm-ink:     #2A4D2E;
  --trunk:        #6B4A2A;

  /* Distant ridge */
  --ridge:        #C99F5E;
  --ridge-ink:    #8E6A2F;

  /* Type */
  --f-display: "Caveat Brush", "Caveat", "Comic Sans MS", cursive;
  --f-mark:    "Rubik Marker Hatched", "Caveat Brush", system-ui, sans-serif;
  --f-hand:    "Kalam", "Caveat", "Patrick Hand", cursive;

  --t-body:    clamp(17px, 1.05vw, 19px);
  --t-lede:    clamp(19px, 1.4vw, 23px);
  --t-h1:      clamp(80px, 11vw, 150px);

  --pad:       clamp(20px, 4vw, 56px);
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-hand);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse 90% 70% at 50% -10%, rgba(241, 180, 30, 0.10) 0%, transparent 60%),
    var(--paper);
}

/* Sandy ground: a strip of warmer paper at the bottom of the page,
   so the palm and ridge actually have something to stand on. */
body::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: clamp(180px, 22vh, 280px);
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(217, 160, 91, 0.08) 18%,
      rgba(217, 160, 91, 0.26) 50%,
      rgba(168, 115, 52, 0.42) 100%);
}

/* SVG defs container — hidden but DOM-active */
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Paper grain overlay (covers viewport) */
.paper {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: multiply;
  opacity: 0.55;
}
.paper-noise {
  width: 100%;
  height: 100%;
  display: block;
}

/* =============================================================
   Decorative SVG layer (sun, clouds, ridge, palm)
   ============================================================= */
.deco {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 1px 0 rgba(31, 26, 20, 0.04));
}

.deco-sun {
  top: clamp(20px, 5vh, 64px);
  right: clamp(20px, 5vw, 84px);
  width: clamp(80px, 12vw, 140px);
  height: clamp(80px, 12vw, 140px);
  transform-origin: center;
  animation: sunspin 60s linear infinite, sunbob 7s ease-in-out infinite;
}

.deco-cloud {
  position: absolute;
}
.deco-cloud-1 {
  top: clamp(40px, 8vh, 110px);
  left: clamp(20px, 6vw, 90px);
  width: clamp(140px, 18vw, 240px);
  height: auto;
  animation: drift 22s ease-in-out infinite;
}
.deco-cloud-2 {
  top: clamp(160px, 22vh, 280px);
  left: clamp(-30px, 2vw, 40px);
  width: clamp(100px, 13vw, 170px);
  height: auto;
  opacity: 0.7;
  animation: drift 28s ease-in-out infinite reverse;
  animation-delay: -6s;
}
.deco-cloud-3 {
  top: clamp(170px, 20vh, 220px);
  right: clamp(20px, 8vw, 130px);
  width: clamp(80px, 10vw, 140px);
  height: auto;
  opacity: 0.85;
  animation: drift 26s ease-in-out infinite;
  animation-delay: -3s;
}

/* Distant pyramid ridge — sits on the sandy floor */
.deco-ridge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(130px, 16vh, 210px);
  width: 100%;
  height: clamp(70px, 11vh, 140px);
  z-index: 1;
  opacity: 0.6;
  pointer-events: none;
}

.deco-palm {
  bottom: clamp(60px, 9vh, 130px);
  right: clamp(-10px, 2vw, 50px);
  width: clamp(120px, 17vw, 210px);
  height: auto;
  transform-origin: bottom center;
  animation: sway 9s ease-in-out infinite;
  z-index: 3;
}

@keyframes sunspin { to { transform: rotate(360deg); } }
@keyframes sunbob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -4px; }
}
@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.6deg); }
  50%      { transform: translate3d(22px, -8px, 0) rotate(0.8deg); }
}
@keyframes sway {
  0%, 100% { transform: rotate(-1.2deg); }
  50%      { transform: rotate(1.8deg); }
}

/* =============================================================
   Postcard (the sheet that holds the content)
   ============================================================= */
.postcard {
  position: relative;
  z-index: 5;
  max-width: 720px;
  margin: clamp(40px, 6vh, 80px) auto clamp(70px, 9vh, 120px);
  padding: clamp(22px, 3vw, 40px) clamp(22px, 3.6vw, 56px) clamp(28px, 3.8vw, 52px);
  background:
    linear-gradient(180deg, rgba(255, 250, 235, 0.45), rgba(255, 250, 235, 0.05) 30%, rgba(255, 250, 235, 0.0) 100%),
    var(--paper);
  border: 1.5px solid rgba(31, 26, 20, 0.16);
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 0 0 1px rgba(255, 255, 255, 0.35) inset,
    18px 22px 0 rgba(31, 26, 20, 0.04),
    28px 40px 60px -10px rgba(56, 36, 12, 0.18),
    0 4px 14px rgba(56, 36, 12, 0.08);
  transform: rotate(-0.35deg);
}

/* Faint torn-edge effect — a few drawn nicks via gradients */
.postcard::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 12% 0%,  transparent 3px, var(--paper) 3.6px) no-repeat,
    radial-gradient(circle at 88% 0%,  transparent 3px, var(--paper) 3.6px) no-repeat,
    radial-gradient(circle at 4% 100%, transparent 3px, var(--paper) 3.6px) no-repeat,
    radial-gradient(circle at 96% 100%, transparent 3px, var(--paper) 3.6px) no-repeat;
  pointer-events: none;
  z-index: -1;
}

/* =============================================================
   Postmark (header)
   ============================================================= */
.postmark {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: clamp(14px, 1.6vw, 22px);
  border-bottom: 1.5px dashed rgba(31, 26, 20, 0.28);
  margin-bottom: clamp(20px, 2.6vw, 36px);
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  font-family: var(--f-display);
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: 0.005em;
}
.brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--crimson);
  display: inline-block;
  margin-right: 0.15rem;
  box-shadow: 0 0 0 3px rgba(184, 42, 36, 0.18);
  transform: translateY(-2px);
}
.brand-name {
  display: inline-block;
  transform: rotate(-1deg);
}
.brand-tld {
  color: var(--crimson);
}

.postmark-stamp {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  padding: 0.45rem 0.95rem 0.5rem;
  font-family: var(--f-mark);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: clamp(11px, 1.1vw, 14px);
  color: var(--crimson-deep);
  border: 1.8px solid currentColor;
  border-radius: 4px;
  position: relative;
  transform: rotate(4deg);
  background:
    repeating-linear-gradient(90deg,
      rgba(184, 42, 36, 0.06) 0 1px,
      transparent 1px 4px);
}
.postmark-stamp::before,
.postmark-stamp::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  height: 1.5px;
  background: currentColor;
  opacity: 0.55;
}
.postmark-stamp::before { top: 4px; }
.postmark-stamp::after  { bottom: 4px; }
.postmark-stamp-l1 { font-weight: 400; opacity: 0.85; font-size: 0.75em; }
.postmark-stamp-l2 { font-weight: 400; font-size: 1.05em; }

/* =============================================================
   Hero
   ============================================================= */
.hero {
  text-align: center;
}

/* eyebrow */
.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: 0 0 clamp(8px, 1vw, 16px);
  font-family: var(--f-mark);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: clamp(11px, 1vw, 13px);
  color: var(--ink-soft);
}
.eyebrow-rule {
  flex: 0 0 clamp(28px, 6vw, 56px);
  height: 1.5px;
  background: currentColor;
  opacity: 0.5;
  border-radius: 999px;
}

/* title */
.title {
  font-family: var(--f-display);
  font-size: var(--t-h1);
  line-height: 0.86;
  letter-spacing: -0.005em;
  margin: 0 0 clamp(18px, 2.4vw, 30px);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(-8px, -0.6vw, -2px);
}
.title-line {
  display: inline-block;
  position: relative;
}
.title-line-1 {
  transform: rotate(-2deg) translateX(-0.4em);
  animation: titleIn 1.1s cubic-bezier(.2,.7,.1,1) both;
}
.title-line-2 {
  transform: rotate(1.4deg) translateX(0.35em);
  margin-top: -0.18em;
  animation: titleIn 1.1s cubic-bezier(.2,.7,.1,1) 0.18s both;
  color: var(--ink);
}
.title-line-2 .title-dot {
  display: inline-block;
  color: var(--crimson);
  margin-left: 0.02em;
  transform: translateY(-0.05em);
}

@keyframes titleIn {
  from {
    opacity: 0;
    translate: 0 18px;
    filter: blur(4px);
  }
  to {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }
}


/* =============================================================
   Snapshot (the image, mounted on the postcard)
   ============================================================= */
.snapshot {
  position: relative;
  margin: clamp(18px, 2.6vw, 32px) auto clamp(18px, 2.4vw, 28px);
  width: fit-content;
  max-width: min(500px, 78%);
  isolation: isolate;
}
.snapshot-frame {
  position: relative;
  background: #FFFBEB;
  padding: clamp(10px, 1.2vw, 16px) clamp(10px, 1.2vw, 16px) clamp(40px, 4.5vw, 56px);
  border: 1.4px solid rgba(31, 26, 20, 0.42);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    -2px -2px 0 rgba(31, 26, 20, 0.03) inset,
    8px 12px 0 -2px rgba(31, 26, 20, 0.06),
    14px 22px 36px -8px rgba(56, 36, 12, 0.28),
    0 3px 10px rgba(56, 36, 12, 0.12);
  transform: rotate(-1.8deg);
  transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
}
.snapshot:hover .snapshot-frame {
  transform: rotate(-0.4deg) scale(1.015);
}

/* Inner sketch frame (drawn border around the image) */
.snapshot-frame::before {
  content: "";
  position: absolute;
  inset: clamp(10px, 1.2vw, 16px) clamp(10px, 1.2vw, 16px) clamp(40px, 4.5vw, 56px);
  border: 1.2px solid rgba(31, 26, 20, 0.18);
  pointer-events: none;
  filter: url(#rough);
  z-index: 1;
}

.snapshot-img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 0;
  border-radius: 1px;
  /* very subtle warmth tweak so the png plays nice with the paper */
  filter: contrast(1.02) saturate(1.04);
}

.snapshot-caption {
  position: absolute;
  left: clamp(10px, 1.2vw, 16px);
  right: clamp(10px, 1.2vw, 16px);
  bottom: clamp(10px, 1.4vw, 18px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-family: var(--f-mark);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: clamp(10px, 0.95vw, 13px);
  color: var(--ink-soft);
  z-index: 2;
}
.snapshot-caption-sep {
  color: var(--crimson);
  font-size: 0.95em;
  transform: translateY(-1px);
}

/* Tape strips, top and bottom */
.snapshot-tape {
  position: absolute;
  width: clamp(86px, 11vw, 130px);
  height: clamp(18px, 2vw, 26px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.05)),
    repeating-linear-gradient(135deg,
      rgba(241, 180, 30, 0.55) 0 6px,
      rgba(241, 180, 30, 0.32) 6px 12px);
  border-left: 1px dashed rgba(31, 26, 20, 0.18);
  border-right: 1px dashed rgba(31, 26, 20, 0.18);
  box-shadow: 0 2px 4px rgba(31, 26, 20, 0.12);
  opacity: 0.92;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.snapshot-tape-l {
  top: -8px;
  left: -10px;
  transform: rotate(-22deg);
}
.snapshot-tape-r {
  bottom: -8px;
  right: -10px;
  transform: rotate(-18deg);
}

/* =============================================================
   Lede
   ============================================================= */
.lede {
  font-family: var(--f-hand);
  font-weight: 400;
  font-size: var(--t-lede);
  line-height: 1.4;
  color: var(--ink);
  max-width: 38ch;
  margin: clamp(16px, 2.4vw, 28px) auto clamp(20px, 2.8vw, 34px);
  text-wrap: balance;
}

/* =============================================================
   Arrival progress
   ============================================================= */
.progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: clamp(18px, 2.4vw, 28px) auto 0;
  max-width: 480px;
  font-family: var(--f-mark);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: clamp(10px, 0.95vw, 13px);
  color: var(--ink-soft);
}
.progress-track {
  flex: 1 1 auto;
  height: 10px;
  position: relative;
  border-radius: 999px;
  border: 1.4px solid rgba(31, 26, 20, 0.32);
  background:
    repeating-linear-gradient(90deg,
      rgba(31, 26, 20, 0.08) 0 5px,
      transparent 5px 10px);
  overflow: hidden;
  filter: url(#rough);
}
.progress-fill {
  position: absolute;
  inset: 0 100% 0 0;
  background:
    repeating-linear-gradient(135deg,
      var(--crimson) 0 6px,
      var(--crimson-deep) 6px 12px);
  border-right: 1.5px solid var(--ink);
  animation: fillUp 4.5s cubic-bezier(.5,.0,.3,1) 0.6s forwards,
             shimmer 2.4s linear infinite 5.2s;
}
@keyframes fillUp {
  0%   { inset: 0 100% 0 0; }
  100% { inset: 0 64% 0 0; }
}
@keyframes shimmer {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.78; }
}
.progress-eta {
  color: var(--crimson);
  font-weight: 700;
}

/* =============================================================
   Signoff
   ============================================================= */
.signoff {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: clamp(36px, 5vw, 56px) auto 0;
  padding-top: clamp(20px, 2.5vw, 30px);
  border-top: 1.5px dashed rgba(31, 26, 20, 0.28);
  font-family: var(--f-display);
  font-size: clamp(20px, 2.2vw, 28px);
  color: var(--ink);
  letter-spacing: 0.005em;
}
.signoff-text {
  transform: rotate(-1deg);
}
.signoff-rule {
  flex: 0 0 clamp(24px, 5vw, 48px);
  height: 1.5px;
  background: var(--ink);
  opacity: 0.45;
  border-radius: 999px;
}

/* =============================================================
   Outer page footer
   ============================================================= */
.page-foot {
  position: relative;
  z-index: 4;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--pad) clamp(16px, 2.4vh, 28px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-family: var(--f-mark);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: clamp(10px, 0.92vw, 13px);
  color: var(--ink-faint);
  text-align: center;
}
.page-foot-sep { opacity: 0.55; }

/* =============================================================
   Selection / focus / motion-prefs
   ============================================================= */
::selection {
  background: var(--crimson);
  color: var(--paper);
}

a:focus-visible, button:focus-visible {
  outline: 2px dashed var(--crimson);
  outline-offset: 4px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* =============================================================
   Responsive trims
   ============================================================= */
@media (max-width: 720px) {
  :root {
    --t-h1: clamp(72px, 17vw, 110px);
  }
  .postcard {
    margin-top: clamp(60px, 9vh, 90px);
    margin-bottom: clamp(80px, 11vh, 130px);
    transform: rotate(-0.2deg);
  }
  .title {
    gap: 0;
    line-height: 1;
  }
  .title-line-1 { transform: rotate(-2deg) translateX(-0.15em); }
  .title-line-2 {
    transform: rotate(1.2deg) translateX(0.1em);
    margin-top: 0.05em;
  }
  .deco-cloud-2 { display: none; }
  .deco-cloud-3 { display: none; }
  .deco-ridge   { bottom: clamp(80px, 10vh, 140px); height: 70px; }
  .deco-palm    { display: none; }
  .signoff      { gap: 0.6rem; }
  .lede br      { display: none; }
  body::after   { height: clamp(120px, 18vh, 200px); }
}

@media (max-width: 460px) {
  :root {
    --t-h1: clamp(64px, 18vw, 92px);
  }
  .postcard {
    padding-left: clamp(18px, 5vw, 28px);
    padding-right: clamp(18px, 5vw, 28px);
  }
  .postmark {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
  }
  .brand { font-size: clamp(22px, 6vw, 28px); }
  .postmark-stamp {
    transform: rotate(-3deg);
    padding: 0.35rem 0.6rem 0.4rem;
    font-size: 10px;
    letter-spacing: 0.14em;
  }
  .title-line-1 { transform: rotate(-2deg); }
  .title-line-2 { transform: rotate(1.2deg); }
  .snapshot { max-width: 100%; }
  .snapshot-tape-l { left: 8%; transform: rotate(-14deg); }
  .snapshot-tape-r { right: 8%; transform: rotate(-12deg); }
  .snapshot-frame { transform: rotate(-1.2deg); }
  .snapshot-caption {
    flex-wrap: wrap;
    row-gap: 0.2rem;
    letter-spacing: 0.14em;
    font-size: 9px;
  }
  .eyebrow { letter-spacing: 0.2em; gap: 0.6rem; }
  .eyebrow-rule { flex-basis: 18px; }
  .progress { gap: 0.6rem; letter-spacing: 0.14em; }
  .signoff { font-size: clamp(18px, 5vw, 22px); }
  .page-foot {
    flex-direction: column;
    gap: 0.3rem;
    letter-spacing: 0.16em;
  }
  .page-foot-sep { display: none; }
  .deco-palm { right: -20px; opacity: 0.85; }
  .deco-sun { width: 70px; height: 70px; right: 10px; top: 18px; }
  .deco-cloud-1 { width: 110px; left: 4px; top: 70px; opacity: 0.7; }
}

@media (max-width: 360px) {
  .deco-palm { display: none; }
  .deco-cloud-1 { display: none; }
}