/* ===========================================================================
   Curata homepage.

   Same architecture as Polson and Domain Seek — pinned hero driven by scroll,
   a scrubbed act, story, decisions, proof, horizontal run, stillness.

   The difference is that this app has something to show. Curata's argument is
   curation against algorithmic churn, so the hero opens as churn — a scatter of
   blurred, tumbling thumbnails — and your scroll settles it into one piece,
   sharp and framed. The other two pages resolve type; this one resolves art,
   because that is the product.
   =========================================================================== */

:root{
  --measure: 680px;   /* shared text column, so headline and body are one block */
  --ink:     #f6f2fb;
  --dim:     #a8a2b8;
  --faint:   #7b7590;
  --murk:    #08060e;
  --clear:   #100c1c;
  --line:    rgba(255,255,255,.11);
  --lilac:   #c7aeff;
  --indigo:  #7b62d8;
  --ivory:   #f7f1e4;
  --display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sans:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.curata{background:var(--murk);color:var(--ink);font-family:var(--sans);overflow-x:clip}
.curata .wrap{max-width:1180px;margin:0 auto;padding:0 26px}
.dsp{font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:.98}
.eyebrow-x{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--lilac);font-weight:600}

[data-split] .w{display:inline-block;white-space:nowrap}
[data-split] .c{display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.26em;margin-bottom:-.26em}
[data-split] .c > i{display:inline-block;font-style:inherit;
  transform:translateY(calc(100% + .3em));
  transition:transform .85s cubic-bezier(.16,.84,.3,1);transition-delay:calc(var(--ci,0) * 26ms)}
[data-split].is-in .c > i{transform:none}
@media (prefers-reduced-motion: reduce){ [data-split] .c > i{transform:none !important;transition:none !important} }

/* ===== ACT 1 — churn settles into one piece =============================== */
.hero-scene{position:relative;height:240vh}
.hero-pin{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;justify-content:center}
@media(max-width:760px){ .hero-scene{height:210vh} }

.churn{position:absolute;inset:0;z-index:0;pointer-events:none}
/* Each thumbnail carries its own scattered start, written inline, and is pulled
   toward the centre and faded out as --p climbs. */
.ch{position:absolute;width:clamp(84px,10vw,138px);aspect-ratio:9/16;border-radius:10px;
  overflow:hidden;border:1px solid var(--line);
  transform:translate3d(calc(var(--dx,0px) * (1 - var(--p,0))),
                        calc(var(--dy,0px) * (1 - var(--p,0))),0)
            rotate(calc(var(--rot,0deg) * (1 - var(--p,0))))
            scale(calc(1 - var(--p,0) * .35));
  opacity:calc(.5 - var(--p,0) * .5);filter:blur(2px)}
.ch img{width:100%;height:100%;object-fit:cover;display:block}

/* The type hands over to the art rather than sitting on top of it: as the one
   piece resolves, the headline lifts away and the picture owns the screen. */
.hero-in{position:relative;z-index:2;width:100%;padding:0 26px;text-align:center;
  transform:translateY(calc(var(--tp,0) * -46px));opacity:calc(1 - var(--tp,0))}
.hero-in h1{font-size:clamp(44px,9.5vw,124px);margin:0}
.hero-in h1.lil{color:var(--lilac)}
.hero-in h1.lil .c > i{color:inherit}
.hero-sub{margin:26px auto 0;max-width:520px;color:var(--dim);font-size:clamp(15.5px,2vw,18px)}

/* The one piece the churn resolves into. */
.plate{position:absolute;z-index:1;left:50%;top:50%;width:clamp(180px,22vw,268px);aspect-ratio:9/16;
  margin:calc(clamp(180px,22vw,268px) * -0.889) 0 0 calc(clamp(180px,22vw,268px) / -2);
  border-radius:20px;overflow:hidden;border:1px solid rgba(199,174,255,.34);
  box-shadow:0 40px 120px rgba(123,98,216,.34);
  opacity:var(--p,0);transform:scale(calc(.9 + var(--p,0) * .1))}
.plate img{width:100%;height:100%;object-fit:cover;display:block}
.plate-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 12px;
  background:linear-gradient(transparent,rgba(8,6,14,.92));text-align:left}
.plate-cap b{display:block;font-size:13.5px;font-weight:600}
.plate-cap span{font-size:11.5px;color:var(--dim)}

.hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;color:var(--faint);
  font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;display:flex;flex-direction:column;
  align-items:center;gap:8px;transition:opacity .5s ease}
.hint[data-done="1"]{opacity:0}
.hint i{width:1px;height:36px;background:linear-gradient(var(--lilac),transparent);
  animation:hpulse 2s ease-in-out infinite}
@keyframes hpulse{0%,100%{opacity:.2;transform:scaleY(.5);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}
@media (prefers-reduced-motion: reduce){ .hint i{animation:none} }

/* ===== ACT 2 — the collections count themselves up ======================== */
.act-count{position:relative;height:230vh;background:var(--murk)}
.act-count .pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:0 26px;overflow:hidden}
.bignum{font-family:var(--display);font-size:clamp(96px,26vw,320px);line-height:.86;
  color:transparent;background:linear-gradient(180deg,var(--lilac),var(--indigo));
  -webkit-background-clip:text;background-clip:text;font-variant-numeric:tabular-nums;
  transform:scale(calc(.88 + var(--s,0) * .12))}
.bignum-l{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);margin-top:6px}
.count-copy{margin-top:24px;max-width:560px;color:var(--dim);font-size:clamp(15.5px,2.1vw,18px)}
.count-copy b{color:var(--ink)}
.namestrip{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:28px;max-width:720px}
.namestrip span{border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:12.5px;
  color:var(--faint);opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease}
.namestrip span.in{opacity:1;transform:none;color:var(--dim)}

/* ===== ACT 3 / 3b ========================================================= */
.act-turn{background:linear-gradient(180deg,var(--murk),var(--clear));
  padding:clamp(80px,14vh,150px) 0;text-align:center}
.act-turn h2{font-size:clamp(30px,5.2vw,60px);max-width:var(--measure);margin:16px auto 0}
.rule{width:1px;height:clamp(56px,9vh,100px);margin:0 auto;
  background:linear-gradient(transparent,var(--lilac),transparent)}
.story{max-width:var(--measure);margin:28px auto 0;text-align:center}
.story p{margin-top:18px;color:var(--dim);font-size:clamp(15.5px,2vw,17.5px);line-height:1.68}
.story p b{color:var(--ink);font-weight:500}
.sig{color:var(--faint);font-size:14px;font-style:italic;margin-top:22px}

.act-rules{background:var(--clear);padding:clamp(70px,12vh,130px) 0;text-align:center}
.act-rules h2{font-size:clamp(32px,5.5vw,64px);max-width:var(--measure);margin:14px auto 0}
.act-rules .story{margin:22px auto 0}
.act-rules .story.closing{margin-top:44px}
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
@media(max-width:860px){.rules{grid-template-columns:1fr;gap:18px}}
.rule-c{border-top:1px solid var(--line);padding-top:22px;text-align:left}
.rule-c .rn{font-family:var(--display);font-size:52px;line-height:1;color:var(--lilac)}
.rule-c h3{font-size:17px;font-weight:600;margin-top:12px}
.rule-c p{color:var(--dim);font-size:14.5px;margin-top:10px}

/* ===== ACT 4 — the work itself ============================================ */
.act-work{background:var(--clear);padding:clamp(70px,12vh,130px) 0}
.act-work .head{text-align:center;max-width:var(--measure);margin:0 auto}
.act-work h2{font-size:clamp(30px,5.2vw,60px);margin-top:14px}
.act-work .head p{color:var(--dim);margin-top:16px;font-size:16.5px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;margin-top:44px}
.tile{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  transition:transform .3s cubic-bezier(.22,.61,.36,1),border-color .3s}
.tile:hover{transform:translateY(-4px);border-color:rgba(199,174,255,.45)}
.tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.tile:hover img{transform:scale(1.06)}
.tile figcaption{position:absolute;inset:auto 0 0 0;text-align:left;padding:34px 14px 14px;
  background:linear-gradient(transparent,rgba(8,6,14,.92))}
.tile b{display:block;font-size:14.5px;font-weight:600}
.tile span{font-size:12px;color:var(--dim);line-height:1.35}

/* ===== ACT 5 — pricing, plainly =========================================== */
.act-price{position:relative;background:var(--clear);padding:clamp(70px,12vh,130px) 0;text-align:center}
.price-card{max-width:560px;margin:36px auto 0;border:1px solid var(--line);border-radius:22px;
  padding:38px 34px;background:linear-gradient(160deg,rgba(123,98,216,.14),rgba(20,16,38,.45))}
.price-row{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;margin:22px 0 8px}
.price-row .p{font-family:var(--display);font-size:40px;letter-spacing:-.02em}
.price-row .l{font-size:13.5px;color:var(--dim);margin-top:2px}
.price-card .free{color:var(--lilac);font-size:15px;margin-top:16px}
.price-card .no-sub{color:var(--faint);font-size:13.5px;margin-top:6px}
.dl{display:inline-block;margin-top:30px;padding:14px 28px;border-radius:12px;text-decoration:none;
  background:linear-gradient(135deg,var(--indigo),#5d47b8);color:var(--ivory);font-weight:600;font-size:15.5px;
  transition:transform .18s ease,box-shadow .18s ease}
.dl:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(123,98,216,.4)}

/* --- Hero call to action --------------------------------------------------
   Curata is live, so the download belongs above the fold rather than at the
   bottom of the pricing card. It fades with the rest of the type as the art
   takes the screen — by then it has been seen, and the pricing section still
   carries a second one. */
.cta{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:32px}
.cta .primary{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:12px;
  text-decoration:none;font-weight:600;font-size:15.5px;
  background:linear-gradient(135deg,var(--indigo),#5d47b8);color:var(--ivory);
  transition:transform .18s ease,box-shadow .18s ease}
.cta .primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(123,98,216,.4)}
.cta .meta{color:var(--dim);font-size:13.5px}

/* --- The callout ----------------------------------------------------------
   Third variant, because the position differs again. Polson syncs to the
   reader's iCloud; Domain Seek keeps a local store with sync off; Curata has
   no account at all, so there is nothing to hold in the first place. */
.callout{max-width:820px;margin:52px auto 0;padding:34px 32px;border-radius:22px;
  border:1px solid rgba(199,174,255,.30);
  background:linear-gradient(160deg,rgba(123,98,216,.16),rgba(255,255,255,.025));text-align:left}
.callout p{font-size:clamp(19px,2.6vw,27px);font-weight:600;letter-spacing:-.02em;
  line-height:1.42;color:var(--ink)}
.callout p b{color:var(--lilac);font-weight:600}
.callout .sub{margin-top:14px;font-size:14.5px;font-weight:400;color:var(--dim);
  letter-spacing:0;line-height:1.6}