/* ==========================================================================
   Seed Scent · 2D section behaviour styles (paired with js/sections.js)
   Reveal, tilt, velocity skew, the seed paper cross-section, the tier slider
   and the order-request summary. Colors only from tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reveal: rise + fade on first view. js adds .rv at init and .in on entry,
   then strips both once the transition is done so stock styles return.
   Uses the individual `translate` property so it never fights a transform
   set elsewhere (.tier.active, the tilt, the skew).
   -------------------------------------------------------------------------- */
.rv {
  opacity: 0;
  translate: 0 28px;
  transition:
    opacity .9s cubic-bezier(0.16, 1, 0.3, 1) var(--rv-delay, 0ms),
    translate .9s cubic-bezier(0.16, 1, 0.3, 1) var(--rv-delay, 0ms);
}
.rv.in { opacity: 1; translate: 0 0; }
/* .tier keeps its own background and transform transitions while revealing */
.tier.rv {
  transition:
    background .4s,
    transform .5s var(--ease-out),
    opacity .9s cubic-bezier(0.16, 1, 0.3, 1) var(--rv-delay, 0ms),
    translate .9s cubic-bezier(0.16, 1, 0.3, 1) var(--rv-delay, 0ms);
}
body.reduced .rv, body.reduced .tier.rv { transition: none; }

/* --------------------------------------------------------------------------
   Scent cards: hover tilt (transform is set inline by js) and photo zoom
   -------------------------------------------------------------------------- */
.card[data-tilt] {
  transform-origin: center;
  transition: box-shadow .7s var(--ease-out);
}
.card .card-media img {
  transform-origin: center;
  transition: transform .9s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .card[data-tilt]:hover {
    box-shadow: 0 28px 60px -34px color-mix(in srgb, var(--ink) 38%, transparent);
  }
  .card:hover .card-media img { transform: scale(1.05); }
  body.reduced .card:hover .card-media img { transform: none; }
}
body.reduced .card .card-media img { transition: none; }

/* One photo per format, stacked in the slot. The picked format's photo fades in on top; the
   other waits underneath until the fade is done and then goes, so the slot is never empty
   mid-switch. Which one shows is the figure's data-format, set by js/sections.js. */
.card[data-scent] .card-media img.slot {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0; visibility: hidden;
  transition: transform .9s var(--ease-out), opacity 0s linear .6s, visibility 0s linear .6s;
}
.card[data-scent] .card-media[data-format="mirror"] img.slot[data-for="mirror"],
.card[data-scent] .card-media[data-format="vent"] img.slot[data-for="vent"] {
  z-index: 1; opacity: 1; visibility: visible;
  transition: transform .9s var(--ease-out), opacity .6s var(--ease-out), visibility 0s;
}
/* set by js/sections.js for one switch only: the incoming photo settles in from a little larger,
   and a photo switched away from before its fade had finished fades out over the one coming back */
.card[data-scent] .card-media img.slot.entering { animation: format-in .9s var(--ease-out); }
.card[data-scent] .card-media img.slot.leaving {
  z-index: 2; opacity: 0; visibility: visible;
  transition: transform .9s var(--ease-out), opacity .45s var(--ease-out), visibility 0s linear .45s;
}
@keyframes format-in { from { transform: scale(1.09); } }
/* the tag says which version the photo shows */
.media-tag {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  padding: 7px 11px; border-radius: var(--pill);
  background: color-mix(in oklab, var(--paper) 88%, transparent); color: var(--ink);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}
.media-tag[hidden] { display: none; }
@media (max-width: 1100px) {   /* narrower slots: a smaller tag, so it stays off the product */
  .card .media-tag { left: 8px; bottom: 8px; padding: 4px 8px; font-size: 10px; }
}
.format label { cursor: pointer; }
body.reduced .card[data-scent] .card-media img.slot,
body.reduced .card[data-scent] .card-media[data-format] img.slot[data-for] { transition: none; animation: none; }

/* --------------------------------------------------------------------------
   Spec table and planting steps: velocity skew is inline; these are the
   quiet hover states the storyboard asked for
   -------------------------------------------------------------------------- */
.spec tbody tr { transition: background .35s; }
.spec tbody tr:hover { background: color-mix(in srgb, var(--paper-2) 70%, transparent); }
.spec tbody tr:hover th { color: var(--moss-2); }
.steps li { transition: border-color .4s; }
.steps li:hover { border-top-color: var(--moss-2); }
.steps li:hover .step-num { color: var(--moss-2); }

/* --------------------------------------------------------------------------
   Seed paper cross-section
   -------------------------------------------------------------------------- */
#paper-xsec { user-select: none; -webkit-user-select: none; touch-action: pan-y; overflow: hidden; }
.xsec-shadow { fill: var(--paper-3); }
.xsec-sheet  { fill: var(--paper-2); stroke: var(--paper-3); stroke-width: 1.5; }
.xsec-rule   { fill: none; stroke: var(--paper-3); stroke-width: 1; }
.xsec-fibres path { fill: none; stroke-linecap: round; }
.fb-ink   { stroke: var(--ink); }
.fb-moss  { stroke: var(--moss); }
.fb-light { stroke: var(--paper-3); }
.xsec-grain circle { fill: var(--ink); stroke: none; }
.seed-a { fill: var(--ink); }
.seed-b { fill: var(--ink-2); }
.seed-c { fill: var(--moss-2); }
.oil-sage { fill: var(--sage); stroke: var(--sage); stroke-width: 1; }
.oil-moss { fill: var(--moss); stroke: var(--moss); stroke-width: 1; }
.oil-hi   { fill: var(--paper); }
.xsec-sprout { fill: none; stroke: var(--moss); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.xsec-label { font: 500 10px var(--font-body); letter-spacing: .09em; text-transform: uppercase; fill: var(--moss); }

/* --------------------------------------------------------------------------
   Bulk tiers
   -------------------------------------------------------------------------- */
.tier[aria-current="true"] .tier-qty { color: var(--ink); }
#tier-note { min-height: 1.5em; transition: opacity .3s; }

/* the slider: a round moss thumb with a cream ring on a thin track, so the control itself reacts */
#qty-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;                        /* a 28px tall target; the thumb stays 22px */
  margin: 3px 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
#qty-range:focus-visible { outline: none; }
#qty-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--paper-3); }
#qty-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--paper-3); }
#qty-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -9px; /* centres a 22px thumb on the 4px track */
  border: 0;
  border-radius: 50%;
  background: var(--moss);
  box-shadow: 0 0 0 2px var(--paper), 0 3px 8px -2px color-mix(in srgb, var(--ink) 35%, transparent);
  transition: transform .25s var(--ease-out), box-shadow .3s;
}
#qty-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: var(--moss);
  box-shadow: 0 0 0 2px var(--paper), 0 3px 8px -2px color-mix(in srgb, var(--ink) 35%, transparent);
  transition: transform .25s var(--ease-out), box-shadow .3s;
}
#qty-range:hover::-webkit-slider-thumb, #qty-range:active::-webkit-slider-thumb { transform: scale(1.15); }
#qty-range:hover::-moz-range-thumb, #qty-range:active::-moz-range-thumb { transform: scale(1.15); }
#qty-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--paper), 0 0 0 5px var(--sage); }
#qty-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--paper), 0 0 0 5px var(--sage); }

/* hover life: a tier that is not the live one leans in a little; a way lifts */
.way { transition: box-shadow .5s var(--ease-out); }
@media (hover: hover) {
  .tier:not(.active):hover { background: var(--paper-3); transform: translateX(4px); }
  .way:hover { box-shadow: 0 24px 50px -30px color-mix(in srgb, var(--ink) 35%, transparent); }
}
body.reduced #qty-range::-webkit-slider-thumb, body.reduced #qty-range::-moz-range-thumb { transition: none; }

/* --------------------------------------------------------------------------
   Order form: inline validation hints and the request summary
   -------------------------------------------------------------------------- */
.field[data-error]::after {
  content: attr(data-error);
  justify-self: start;
  font: 600 10px/1 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--moss);
  border: 1px dashed var(--moss);
  border-radius: var(--pill);
  padding: 4px 8px;
}
.field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-bottom-color: var(--moss-2); }

.form-summary {
  display: grid;
  gap: 14px;
  white-space: normal;
  outline: none;
}
.form-summary[hidden] { display: none; }
.form-summary:focus-visible { box-shadow: 0 0 0 2px var(--sage); }
.summary-text {
  margin: 0;
  font: inherit;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.summary-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.summary-actions .pill { transition: background .3s, color .3s; }
.summary-actions .pill.copied { background: var(--moss); color: var(--paper); box-shadow: none; }
.summary-note { max-width: 44ch; }

@media (prefers-reduced-motion: reduce) {
  .rv, .tier.rv { transition: none; opacity: 1; translate: 0 0; }
  .card .card-media img { transition: none; }
  .card:hover .card-media img { transform: none; }
  .card[data-scent] .card-media img.slot,
  .card[data-scent] .card-media[data-format] img.slot[data-for] { transition: none; animation: none; }
  .way, #qty-range::-webkit-slider-thumb, #qty-range::-moz-range-thumb { transition: none; }
}