/* =====================================================================
   InstaFarm · Chapter 02 "Inside the solar dryer"
   Drop-in component, measured from dryer-reference.png (stage = 1564 x 1006).
   Desktop: the stage keeps the reference proportions and every size is in
   container-query units (cqi = 1% of stage width), so it scales as one piece.
   DO NOT replace cqi values with px / vw / clamp.
   ===================================================================== */

.dryer {
  --dr-bg: #FDF7F2;
  --dr-ink: #1B1B22;
  --dr-text: #5B5250;
  --dr-red: #C4161C;
  --dr-red-2: #B3141A;
  --dr-line: #F1DFD9;
  --dr-blob: #FCE3DE;

  position: relative;
  background: var(--dr-bg);
  overflow: hidden;
  scroll-margin-top: 80px;
}

.dryer__stage {
  container-type: inline-size;
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  aspect-ratio: 1564 / 1006;
  background: url("../assets/img/dryer/dryer-bg.webp") center / 100% 100% no-repeat;
}

/* ---------- header ---------- */
.dryer__head {
  position: absolute;
  left: 6.07cqi;
  top: 3.3cqi;
  right: 6cqi;
  display: grid;
  grid-template-columns: 43.2cqi 1px 25cqi;
  justify-content: start;
  column-gap: 2.3cqi;
  align-items: start;
}
.dryer__eyebrow {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 1.4cqi;
  font: 700 max(12px, .96cqi)/1 'Instrument Sans', system-ui, sans-serif;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--dr-red);
}
.dryer__eyebrow::before { content: ""; width: 2.25cqi; height: 1.5px; background: currentColor; flex: none; }
.dryer__title {
  margin: 1.35cqi 0 0;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
  font-weight: 700;
  font-size: max(32px, 3.95cqi);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--dr-ink);
}
.dryer__title span { display: block; white-space: nowrap; }
.dryer__title em { font-style: italic; font-weight: 700; color: var(--dr-red); letter-spacing: -.03em; }
.dryer__rule { width: 1px; height: 5.2cqi; margin-top: 3.4cqi; background: #E4C9C3; }
.dryer__lede {
  margin: 3.05cqi 0 0;
  font: 400 max(15px, 1.09cqi)/1.7 'Instrument Sans', system-ui, sans-serif;
  color: var(--dr-text);
}

/* ---------- dryer figure + callouts ---------- */
.dryer__figure {
  position: absolute;
  left: 6.07cqi;
  top: 15.4cqi;
  width: 66.18cqi;
  aspect-ratio: 1035 / 435;
  margin: 0;
}
.dryer__img {
  position: absolute;
  left: 5.99%;
  top: 1.84%;
  width: 91.9%;
  height: auto;
  filter: drop-shadow(0 1.2cqi 1.4cqi rgba(120, 70, 40, .16));
}
.dryer__leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.dryer__marker {
  position: absolute;
  width: max(24px, 2.2cqi);
  height: max(24px, 2.2cqi);
  margin: calc(max(24px, 2.2cqi) / -2) 0 0 calc(max(24px, 2.2cqi) / -2);
  border-radius: 50%;
  background: var(--dr-red);
  box-shadow: 0 0 0 max(3px, .28cqi) rgba(255, 255, 255, .9), 0 4px 12px rgba(196, 22, 28, .3);
  color: #FFFFFF;
  display: grid;
  place-items: center;
  font: 700 max(12px, 1.02cqi)/1 'Instrument Sans', system-ui, sans-serif;
}
.dryer__marker--1 { left: 32.9%; top: 65.1%; }
.dryer__marker--2 { left: 55.8%; top: 57%; }
.dryer__marker--3 { left: 97.9%; top: 49.9%; }
.dryer__marker--4 { left: 84.3%; top: 12.2%; }
.dryer__label {
  position: absolute;
  margin: 0;
  white-space: nowrap;
  font: 500 max(12px, 1.02cqi)/1 'Instrument Sans', system-ui, sans-serif;
  color: #2A2A30;
}
.dryer__label--out { left: 85.1%; top: 3.2%; }
.dryer__label--in  { left: 1.1%;  top: 75.6%; }

/* ---------- "No fuel" card ---------- */
.dryer__claim {
  position: absolute;
  left: 74.8cqi;
  top: 18.73cqi;
  width: 21.2cqi;
  height: 23.3cqi;
  box-sizing: border-box;
  padding: 2.2cqi 2.56cqi;
  border-radius: 1.1cqi;
  border: 1px solid var(--dr-line);
  background:
    radial-gradient(80% 60% at 100% 100%, rgba(251, 210, 200, .45), transparent 70%),
    linear-gradient(160deg, rgba(255, 255, 255, .75), rgba(253, 239, 234, .75));
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  box-shadow: 0 16px 40px rgba(150, 60, 50, .07);
}
.dryer__claim-icon {
  width: 4.6cqi;
  height: 4.6cqi;
  border-radius: .95cqi;
  background: var(--dr-blob);
  display: grid;
  place-items: center;
  color: var(--dr-red);
}
.dryer__claim-icon svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dryer__claim p {
  margin: 1.9cqi 0 0;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
  font-weight: 700;
  font-size: max(24px, 2.45cqi);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--dr-ink);
}
.dryer__claim p span { display: block; white-space: nowrap; }
.dryer__claim em { font-style: italic; color: var(--dr-red); }
.dryer__claim-rule { display: block; width: 3.84cqi; height: 2px; margin-top: 2.2cqi; background: var(--dr-red); }

/* ---------- 4-step panel ---------- */
.dryer__steps {
  position: absolute;
  left: 4.1cqi;
  top: 44.25cqi;
  width: 91.9cqi;
  height: 14.9cqi;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: 1.28cqi;
  border: 1px solid var(--dr-line);
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.dryer__step {
  position: relative;
  padding: 1.5cqi 2cqi 1.6cqi 2.8cqi;
}
.dryer__step + .dryer__step::before {          /* divider */
  content: "";
  position: absolute;
  left: 0;
  top: 2.6cqi;
  bottom: 2.6cqi;
  width: 1px;
  background: var(--dr-line);
}
.dryer__step + .dryer__step::after {           /* small red arrow on divider */
  content: "→";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: .3cqi 0;
  background: #FDF8F5;
  font: 400 max(12px, 1.1cqi)/1 'Instrument Sans', system-ui, sans-serif;
  color: var(--dr-red);
}
.dryer__step-top { display: flex; align-items: center; gap: 1.3cqi; }
.dryer__num {
  flex: none;
  width: max(28px, 2.56cqi);
  height: max(28px, 2.56cqi);
  border-radius: 50%;
  background: var(--dr-red);
  color: #FFFFFF;
  display: grid;
  place-items: center;
  font: 700 max(12px, 1.02cqi)/1 'Instrument Sans', system-ui, sans-serif;
}
.dryer__blob {
  width: 6.4cqi;
  height: 5cqi;
  border-radius: 52% 48% 45% 55% / 55% 50% 50% 45%;
  background: radial-gradient(closest-side, #FAD6CF 0%, #FCE1DB 62%, rgba(252, 227, 222, 0) 100%);
  display: grid;
  place-items: center;
  color: var(--dr-red);
}
.dryer__blob svg { width: 2.5cqi; height: 2.5cqi; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dryer__step h3 {
  margin: .75cqi 0 0 .3cqi;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
  font-weight: 700;
  font-size: max(17px, 1.6cqi);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--dr-ink);
  white-space: nowrap;
}
.dryer__step p {
  margin: .55cqi 0 0 .3cqi;
  max-width: 17.5cqi;
  font: 400 max(14px, 1.06cqi)/1.64 'Instrument Sans', system-ui, sans-serif;
  color: var(--dr-text);
}

/* ---------- reveal ---------- */
.dryer [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.dryer [data-reveal].is-in { opacity: 1; transform: none; }
.dryer__figure[data-reveal] { transition-delay: .1s; }
.dryer__claim[data-reveal] { transition-delay: .2s; }
.dryer__steps[data-reveal] { transition-delay: .3s; }
.dryer__marker { animation: dr-pulse 2.8s ease-in-out infinite; }
.dryer__marker--2 { animation-delay: .7s; } .dryer__marker--3 { animation-delay: 1.4s; } .dryer__marker--4 { animation-delay: 2.1s; }
@keyframes dr-pulse {
  0%, 100% { box-shadow: 0 0 0 max(3px, .28cqi) rgba(255,255,255,.9), 0 4px 12px rgba(196,22,28,.3); }
  50%      { box-shadow: 0 0 0 max(3px, .28cqi) rgba(255,255,255,.9), 0 0 0 max(9px, .8cqi) rgba(196,22,28,.14); }
}

/* ---------- tablet / mobile: normal document flow ---------- */
@media (max-width: 1023px) {
  .dryer__stage {
    aspect-ratio: auto;
    padding: 44px 28px 48px;
    background:
      linear-gradient(180deg, rgba(253,247,242,.97) 0%, rgba(253,247,242,.9) 26%, rgba(253,247,242,0) 46%),
      url("../assets/img/dryer/dryer-bg.webp") left 140px / 1564px auto no-repeat,
      var(--dr-bg);
  }
  .dryer__head, .dryer__figure, .dryer__claim, .dryer__steps { position: relative; left: auto; top: auto; right: auto; }
  .dryer__head { display: block; }
  .dryer__title { font-size: clamp(34px, 6vw, 52px); }
  .dryer__rule { display: none; }
  .dryer__lede { margin-top: 16px; max-width: 36rem; }

  .dryer__figure { width: 100%; margin-top: 36px; }
  .dryer__label { font-size: 12px; }
  .dryer__marker { width: 26px; height: 26px; margin: -13px 0 0 -13px; font-size: 12px; }

  .dryer__claim {
    width: 100%; height: auto; margin-top: 28px; padding: 24px 26px;
    display: flex; align-items: center; gap: 22px; border-radius: 18px;
  }
  .dryer__claim-icon { width: 56px; height: 56px; border-radius: 14px; flex: none; }
  .dryer__claim p { margin: 0; font-size: 26px; }
  .dryer__claim-rule { display: none; }

  .dryer__steps { width: 100%; height: auto; margin-top: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 18px; }
  .dryer__step { padding: 24px 22px; }
  .dryer__step + .dryer__step::after { display: none; }
  .dryer__step::before { display: none; }
  .dryer__step:nth-child(n+3) { border-top: 1px solid var(--dr-line); }
  .dryer__step:nth-child(even) { border-left: 1px solid var(--dr-line); }
  .dryer__step-top { gap: 14px; }
  .dryer__blob { width: 72px; height: 56px; }
  .dryer__blob svg { width: 28px; height: 28px; }
  .dryer__step h3 { margin-top: 14px; white-space: normal; }
  .dryer__step p { max-width: none; }
}
@media (max-width: 599px) {
  .dryer__stage {
    padding: 36px 20px 40px;
    background:
      linear-gradient(180deg, rgba(253,247,242,.97) 0%, rgba(253,247,242,.9) 30%, rgba(253,247,242,0) 48%),
      url("../assets/img/dryer/dryer-bg.webp") -160px 220px / 1100px auto no-repeat,
      var(--dr-bg);
  }
  .dryer__figure { width: calc(100% - 14px); margin-top: 48px; }
  .dryer__label--out { left: 66%; top: -9%; }
  .dryer__label--in { top: 96%; left: 0; }
  .dryer__title { font-size: clamp(30px, 8.6vw, 40px); }
  .dryer__title span { white-space: normal; }
  .dryer__arrow-in { display: none; }
  .dryer__claim { flex-direction: column; align-items: flex-start; gap: 16px; }
  .dryer__steps { grid-template-columns: 1fr; }
  .dryer__step:nth-child(even) { border-left: 0; }
  .dryer__step:nth-child(n+2) { border-top: 1px solid var(--dr-line); }
}

@media (prefers-reduced-motion: reduce) {
  .dryer *, .dryer [data-reveal] { transition: none !important; animation: none !important; }
  .dryer [data-reveal] { opacity: 1; transform: none; }
}