/* Etusivun omat osiot: Primavera-finalisti ja sormuskone.
   Liike: vain transform/opacity, hidas ja rauhallinen, ei vieritykseen
   sidottua liikettä (PRODUCT.md, Joel 26.9.). */

/* ---------- Primavera ----------
   Kierros 6.10.: keskitetty näyttely kuin heron jatke. Otsikko keskellä,
   kuva liukenee joka reunasta tasaisesti sivun valkoiseen (porrastettu maski,
   ei kovaa reunaa eikä yhden reunan leikkausta), sormus kuvan keskipisteenä.
   Tarina ja tiedot kahdessa palstassa kuvan alla. Maski on staattinen,
   liike vain opacity/transform (data-reveal). */
.pv { padding: calc(var(--sec) * 1.2) 0 calc(var(--sec) * 1.6); }
.pv-wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
.pv-head { text-align: center; }
.pv-head .kicker { margin-bottom: 1.1rem; }
.pv-head h2 { margin: 0; font-size: clamp(3.2rem, 6.4vw, 5.6rem); line-height: 1; letter-spacing: -0.01em; }
.pv-head .pv-by { margin: 0.9rem auto 0; }
.pv-media { margin: clamp(1rem, 2.5vw, 2rem) auto 0; max-width: 960px; position: relative; }
.pv-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 52%;
  /* T293: pitkät, pehmeästi kiihtyvät reunahäivytykset + kulmia pyöristävä
     ellipsi: ei suoraa reunaa eikä suorakulmaista rajaa, sormus täysin peittävällä alueella. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.07) 5%, rgba(0,0,0,.28) 11%, rgba(0,0,0,.6) 18%, rgba(0,0,0,.87) 25%, #000 32%, #000 68%, rgba(0,0,0,.87) 75%, rgba(0,0,0,.6) 82%, rgba(0,0,0,.28) 89%, rgba(0,0,0,.07) 95%, transparent 100%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.07) 5%, rgba(0,0,0,.28) 11%, rgba(0,0,0,.6) 18%, rgba(0,0,0,.87) 25%, #000 32%, #000 68%, rgba(0,0,0,.87) 75%, rgba(0,0,0,.6) 82%, rgba(0,0,0,.28) 89%, rgba(0,0,0,.07) 95%, transparent 100%), radial-gradient(ellipse 71% 71% at 50% 50%, #000 62%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.07) 5%, rgba(0,0,0,.28) 11%, rgba(0,0,0,.6) 18%, rgba(0,0,0,.87) 25%, #000 32%, #000 68%, rgba(0,0,0,.87) 75%, rgba(0,0,0,.6) 82%, rgba(0,0,0,.28) 89%, rgba(0,0,0,.07) 95%, transparent 100%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.07) 5%, rgba(0,0,0,.28) 11%, rgba(0,0,0,.6) 18%, rgba(0,0,0,.87) 25%, #000 32%, #000 68%, rgba(0,0,0,.87) 75%, rgba(0,0,0,.6) 82%, rgba(0,0,0,.28) 89%, rgba(0,0,0,.07) 95%, transparent 100%), radial-gradient(ellipse 71% 71% at 50% 50%, #000 62%, transparent 100%);
  -webkit-mask-composite: source-in, source-in;
  mask-composite: intersect, intersect;
}
.pv-media picture { display: block; }
.pv-media figcaption {
  margin-top: -0.4rem;
  text-align: center;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.pv-body { max-width: 46rem; margin: clamp(2.6rem, 5vw, 3.8rem) auto 0; text-align: center; }
.pv-body .pv-quote { margin: 0 auto; padding: 0; border: 0; max-width: 40ch; }
.pv-body .pv-quote p { max-width: none; }
.pv-body .pv-quote p { font-size: clamp(1.25rem, 1.7vw, 1.45rem); line-height: 1.45; text-wrap: balance; }
.pv-copy { margin-top: clamp(1.8rem, 3vw, 2.4rem); }
.pv-copy .pv-story { margin: 0 auto; max-width: 58ch; }
.pv-body .pv-spec { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 1.4rem; text-align: center; margin-top: clamp(2rem, 3.5vw, 2.6rem); }
.pv-body .pv-spec dd { font-size: 0.88rem; }
.pv-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.1rem 1.8rem;
  margin-top: 2rem;
}
/* Speksiruudukon tilalla tarinallinen materiaalikappale ja hinta omana rivinään (T293). */
.pv-material { margin: 1.2rem auto 0; max-width: 58ch; color: var(--ink-soft); font-size: 0.96rem; line-height: 1.8; }
.pv-price { margin: clamp(1.6rem, 3vw, 2.1rem) auto 0; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.pv-price-l { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep); }
.pv-price-v { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 2.2vw, 1.9rem); line-height: 1; color: var(--ink); font-variant-numeric: lining-nums; }
.pv-final { margin: 1.8rem auto 0; max-width: 52ch; font-size: 0.92rem; line-height: 1.7; color: var(--ink-soft); }
@media (max-width: 900px) {
  .pv { padding-top: var(--sec); }
  .pv-media { margin-left: calc(-1 * clamp(1.25rem, 4vw, 2.5rem)); margin-right: calc(-1 * clamp(1.25rem, 4vw, 2.5rem)); }
  .pv-media img {
    aspect-ratio: 1 / 1;
    object-position: 50% 50%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.07) 5%, rgba(0,0,0,.28) 11%, rgba(0,0,0,.6) 18%, rgba(0,0,0,.87) 25%, #000 32%, #000 68%, rgba(0,0,0,.87) 75%, rgba(0,0,0,.6) 82%, rgba(0,0,0,.28) 89%, rgba(0,0,0,.07) 95%, transparent 100%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.07) 5%, rgba(0,0,0,.28) 11%, rgba(0,0,0,.6) 18%, rgba(0,0,0,.87) 25%, #000 32%, #000 68%, rgba(0,0,0,.87) 75%, rgba(0,0,0,.6) 82%, rgba(0,0,0,.28) 89%, rgba(0,0,0,.07) 95%, transparent 100%), radial-gradient(ellipse 71% 71% at 50% 50%, #000 62%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.07) 5%, rgba(0,0,0,.28) 11%, rgba(0,0,0,.6) 18%, rgba(0,0,0,.87) 25%, #000 32%, #000 68%, rgba(0,0,0,.87) 75%, rgba(0,0,0,.6) 82%, rgba(0,0,0,.28) 89%, rgba(0,0,0,.07) 95%, transparent 100%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.07) 5%, rgba(0,0,0,.28) 11%, rgba(0,0,0,.6) 18%, rgba(0,0,0,.87) 25%, #000 32%, #000 68%, rgba(0,0,0,.87) 75%, rgba(0,0,0,.6) 82%, rgba(0,0,0,.28) 89%, rgba(0,0,0,.07) 95%, transparent 100%), radial-gradient(ellipse 71% 71% at 50% 50%, #000 62%, transparent 100%);
  -webkit-mask-composite: source-in, source-in;
  mask-composite: intersect, intersect;
  }
  .pv-body { margin-top: 2.2rem; }
  .pv-body .pv-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.4rem; }
}
@media (max-width: 640px) {
  .pv-actions { flex-direction: column; align-items: stretch; text-align: center; gap: 1.2rem; }
  .pv-actions .link-more { align-self: center; padding: 0.7rem 0 0.2rem; }
}

/* ---------- Sormuskone ----------
   Keskustelu kultasepän kanssa, ei visa: yksi kysymys kerrallaan, vastaukset
   hiuslinjoin erotettuna listana kuin ateljeen hinnasto. */
/* Ei laatikkoa: osio on vaalea lämmin pesu, joka alkaa ja päättyy sivun
   valkoiseen, joten sormuskone sulautuu taustaan (Joel 1.10.). */
/* T295 (Joel 13.10.): feidi pidemmäksi ja vähemmän ruskeaksi. Sävy on
   kevyempi (#faf6f0 vs. aiempi #f7f0e6) ja nousee pehmeästi monen pysäkin
   kautta koko osion matkalta, joten reunaa ei erota. */
.finder {
  padding: calc(var(--sec) * 2.4) 0 calc(var(--sec) * 2.6);
  /* Joel 28.10.: "paljon pidempi feidi". Smoothstep koko korkeudelta, ei tasannetta. */
  background: linear-gradient(180deg, var(--white) 0%, #fffffe 6.2%, #fefefd 12.5%, #fdfcfa 18.8%, #fcfaf8 25%, #fcf9f5 31.2%, #fbf7f2 37.5%, #faf6f1 43.8%, #faf6f0 50%, #faf6f1 56.2%, #fbf7f2 62.5%, #fcf9f5 68.8%, #fcfaf8 75%, #fdfcfa 81.2%, #fefefd 87.5%, #fffffe 93.8%, var(--white) 100%);
}
.fd-stage {
  position: relative;
  max-width: 72rem;
  margin: 0 auto;
}
/* Neljä hiuslinjaa: edistyminen näkyy, mutta ei huuda. */
.fd-ticks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  max-width: 9rem;
  margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem);
}
.fd-ticks i {
  display: block;
  height: 1px;
  background: rgba(125, 98, 55, 0.25);
  transform-origin: left center;
}
.fd-ticks i::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--gold-deep);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s var(--ease);
}
.fd-ticks i.is-done::after { transform: scaleX(1); }
.fd-ticks i.is-cur { background: rgba(125, 98, 55, 0.6); }
.fd-stage.is-result .fd-ticks { display: none; }

.fd-step[hidden], .fd-opts li[hidden] { display: none; }
.fd-step {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  column-gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.fd-lead { display: flex; flex-direction: column; align-items: flex-start; }
.fd-q {
  font-size: clamp(2.1rem, 3.6vw, 3.2rem);
  line-height: 1.08;
  text-wrap: balance;
  outline: none;
}
.fd-n {
  display: block;
  margin-bottom: 1rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.fd-opts { border-top: 1px solid rgba(29, 24, 17, 0.12); }
.fd-opts li { border-bottom: 1px solid rgba(29, 24, 17, 0.12); }

.fd-opt {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 1.25rem;
  align-items: center;
  gap: 1.1rem;
  width: 100%;
  min-height: 4.5rem;
  padding: 1rem 0.4rem;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Valinnan pohja: kerros, joka ilmestyy opasiteetilla, ei taustavärin vaihtona. */
.fd-opt::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.75);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  border-radius: var(--radius);
}
.fd-opt > * { position: relative; }
.fd-ico {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--gold-deep);
}
.fd-ico svg { width: 2.4rem; height: 2.4rem; }
.fd-ico .ficon { width: 1.6rem; height: 1.6rem; }
.fd-txt { display: grid; gap: 0.15rem; }
.fd-t {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 1.9vw, 1.6rem);
  line-height: 1.15;
}
.fd-s { font-size: 0.86rem; line-height: 1.55; color: var(--ink-soft); }
.fd-go {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: var(--gold-deep);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
}
.fd-opt:active::before { opacity: 1; transition-duration: 0.12s; }
.fd-opt[aria-pressed="true"]::before { opacity: 1; }
.fd-opt[aria-pressed="true"] .fd-go { opacity: 1; transform: translateX(4px); }
.fd-opt:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .fd-opt:hover::before { opacity: 0.6; }
  .fd-opt:hover .fd-go { opacity: 1; transform: translateX(4px); }
}

.fd-back, .fd-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0 0.2rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  touch-action: manipulation;
}
.fd-back svg, .fd-link svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.4s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .fd-back:hover, .fd-link:hover { color: var(--ink); }
  .fd-back:hover svg, .fd-link:hover svg { transform: translateX(-3px); }
}
.fd-back { margin-top: 2rem; }

/* Kysymyksen vaihto: hidas ristihäivytys ja lyhyt nousu. */
.fd-flow.is-leaving { opacity: 0; transform: translateY(-6px); transition: opacity 0.32s ease, transform 0.32s ease; }
.fd-flow.is-entering { opacity: 0; transform: translateY(10px); }
.fd-flow { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }

/* ---------- Tulos ---------- */
.fd-result[hidden] { display: none; }
.fd-result {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.35fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "head picks" "rest picks";
  column-gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.fd-res-head { grid-area: head; }
.fd-picks { grid-area: picks; }
.fd-res-rest { grid-area: rest; }
.fd-result.is-entering { opacity: 0; transform: translateY(10px); }
.fd-result.is-leaving { opacity: 0; transform: translateY(-6px); transition: opacity 0.32s ease, transform 0.32s ease; }
.fd-result { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.fd-res-h {
  font-size: clamp(2.1rem, 3.6vw, 3.2rem);
  margin-bottom: 1.2rem;
  text-wrap: balance;
  outline: none;
}
.fd-why { color: var(--ink); font-size: 1rem; line-height: 1.75; }
.fd-quick { display: none; }
.fd-note { margin-top: 0.9rem; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.7; }
.fd-note:empty { display: none; }
.fd-res-cta { margin-top: 2rem; }
.fd-carry { margin-top: 0.8rem; font-size: 0.82rem; line-height: 1.6; color: var(--ink-soft); }
.fd-res-tools { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid rgba(29, 24, 17, 0.12); }

/* Kattaus: paras osuma isona, muut kahdessa rivissä sen vieressä. */
.fd-picks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
}
.fd-pick { position: relative; }
.fd-pick:first-child { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.fd-pick a { display: block; height: 100%; }
.fd-img { display: block; overflow: hidden; }
.fd-pick:first-child .fd-img { position: relative; flex: 1; min-height: 14rem; }
.fd-pick:first-child .fd-img img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.fd-pick figure {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  background: #fff;
}
.fd-pick img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  transition: transform 1.2s var(--ease);
}
.fd-pick figcaption { padding: 0 0.9rem 0.9rem; }
.fd-pick:first-child figcaption { padding: 0 1.4rem 1.3rem; }
.fd-pick h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.2;
}
.fd-pick:first-child h4 { font-size: 1.55rem; }
.fd-meta { display: block; margin-top: 0.15rem; font-size: 0.74rem; line-height: 1.5; color: var(--ink-soft); }
.fd-best {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.fd-pick .fav-btn { top: 0.25rem; right: 0.25rem; }
@media (hover: hover) and (pointer: fine) {
  .fd-pick a:hover img { transform: scale(1.035); }
}
.fd-pick a:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
/* Kattaus ilmestyy rauhallisesti porrastettuna, vain kerran per tulos. */
.fd-result.is-entering .fd-pick { opacity: 0; transform: translateY(12px); }
.fd-pick { transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.fd-pick:nth-child(2) { transition-delay: 0.08s; }
.fd-pick:nth-child(3) { transition-delay: 0.16s; }
.fd-pick:nth-child(4) { transition-delay: 0.24s; }
.fd-pick:nth-child(5) { transition-delay: 0.32s; }

.fd-nojs { margin-top: 1rem; }
.fd-nojs a { text-decoration: underline; }

@media (max-width: 900px) {
  .fd-step { grid-template-columns: 1fr; }
  .fd-q { margin-bottom: 1.4rem; }
  .fd-lead { display: contents; }
  .fd-back { order: 3; margin-top: 1rem; }
  .fd-result { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "head" "picks" "rest"; }
  .fd-picks { margin-top: 1.6rem; }
  .fd-res-rest { margin-top: 0.6rem; }
}
@media (max-width: 640px) {
  .fd-ticks { margin-bottom: 1.6rem; }
  .fd-q { font-size: 2.05rem; }
  .fd-opt { grid-template-columns: 2.4rem minmax(0, 1fr) 1rem; gap: 0.9rem; min-height: 4.25rem; padding: 0.9rem 0.2rem; }
  .fd-ico { width: 2.4rem; height: 2.4rem; }
  .fd-ico svg { width: 2.1rem; height: 2.1rem; }
  .fd-t { font-size: 1.32rem; }
  .fd-s { font-size: 0.82rem; }
  .fd-res-h { font-size: 2.05rem; }
  .fd-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
  .fd-pick:first-child { grid-column: 1 / -1; grid-row: auto; }
  .fd-pick:first-child .fd-img { flex: none; min-height: 0; aspect-ratio: 4 / 3; }
  .fd-pick:first-child .fd-img img { position: static; }
  .fd-pick:nth-child(6):last-child { grid-column: 1 / -1; }
  .fd-pick:nth-child(6):last-child .fd-img { aspect-ratio: 2 / 1; }
  .fd-pick:nth-child(6):last-child img { height: 100%; aspect-ratio: auto; }
  .fd-quick { display: inline-block; margin-top: 1rem; padding: 0.6rem 0 0.2rem; }
  .pv-story { display: none; }
  .fd-pick figcaption { padding: 0 0.7rem 0.8rem; }
  .fd-res-cta .btn { width: 100%; }
  .fd-res-tools { justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .fd-flow, .fd-flow.is-leaving, .fd-flow.is-entering,
  .fd-result, .fd-result.is-entering, .fd-pick { transform: none !important; }
  .fd-pick img { transition: none; }
}

/* Prosessiosion loppuun yksi rauhallinen kutsu (Joel 1.10.). */
.craft-cta { text-align: center; max-width: none; margin: clamp(2.8rem, 5vw, 3.8rem) auto 0; }
.craft + .bshow { padding-top: calc(var(--sec) * 1.5); }
@media (max-width: 640px) { .craft-cta .btn { width: 100%; } }