/* Homepage motion layer — inspired by cosmos.so: imagery first, everything gently alive. */

/* ---------- hero ---------- */
.hero2{position:relative;padding:28px 0 8px;overflow:hidden}
.hero2 .wrap{display:grid;gap:22px;align-items:center}
@media (min-width:960px){.hero2 .wrap{grid-template-columns:1.05fr 1fr;min-height:min(78vh,720px)}}
.hero2 h1{font:400 clamp(44px,9.5vw,96px)/.95 var(--serif);letter-spacing:-.02em;margin:0 0 16px}
.hero2 h1 .rot{display:inline-grid;vertical-align:bottom;overflow:hidden;height:1.02em}
.hero2 h1 .rot span{grid-area:1/1;color:var(--accent);font-style:italic;transform:translateY(105%);opacity:0;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .5s;white-space:nowrap}
.hero2 h1 .rot span.on{transform:none;opacity:1}
.hero2 h1 .rot span.out{transform:translateY(-105%);opacity:0}
.hero2 .lede{color:var(--muted);font-size:18px;max-width:42ch;margin:0 0 22px}
.hero2 .search{margin:0;max-width:560px}
.hero2 .owner-cta{margin-top:16px;font-size:15px;color:var(--muted)}
.hero2 .owner-cta a{color:var(--accent);font-weight:600}
.hero-in > *{opacity:0;transform:translateY(16px);animation:rise .8s cubic-bezier(.2,.8,.2,1) forwards}
.hero-in > *:nth-child(2){animation-delay:.08s}.hero-in > *:nth-child(3){animation-delay:.16s}.hero-in > *:nth-child(4){animation-delay:.24s}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- drifting wall (desktop: vertical columns; phone: one moving row) ---------- */
.wall{position:relative;height:340px;overflow:hidden;border-radius:24px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.wall .col{display:flex;gap:12px;width:max-content;animation:slideX 60s linear infinite}
.wall .col + .col{margin-top:12px;animation-duration:75s;animation-direction:reverse}
.wall .cell{width:150px;flex:0 0 auto;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.wall .cell .art,.wall .cell img{aspect-ratio:3/4!important;width:100%;object-fit:cover}
.wall .cell .art{padding:12px}.wall .cell .art .big{font-size:18px}
@keyframes slideX{to{transform:translateX(-50%)}}
@media (min-width:960px){
  .wall{height:min(78vh,700px);display:grid;grid-template-columns:repeat(3,1fr);gap:14px;border-radius:0;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
  .wall .col{flex-direction:column;width:auto;gap:14px;animation:slideY 70s linear infinite}
  .wall .col + .col{margin-top:0;animation-duration:90s}
  .wall .col:nth-child(3){animation-duration:80s;animation-direction:normal}
  .wall .cell{width:auto}
  @keyframes slideY{to{transform:translateY(-50%)}}
}
.wall:hover .col{animation-play-state:paused}
.wall .cell{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.wall .cell:hover{transform:scale(1.04)}
.wall .cell{display:block;text-decoration:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.wall .cell:active{transform:scale(.97)}

/* ---------- category marquee ---------- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;margin:26px 0 8px;padding:14px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee .track{display:flex;gap:28px;width:max-content;animation:slideX 45s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee button{border:0;background:none;font:400 clamp(26px,4vw,40px)/1 var(--serif);color:var(--ink);cursor:pointer;padding:4px 2px;display:flex;align-items:center;gap:28px;white-space:nowrap}
.marquee button::after{content:"✦";font-size:.5em;color:var(--accent)}
.marquee button:hover{color:var(--accent);font-style:italic}

/* ---------- grid motion ---------- */
.tile{opacity:0;transform:translateY(24px) scale(.98);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.tile.in{opacity:1;transform:none}
.tile .ph{transform-style:preserve-3d;will-change:transform}
.tile .ph img,.tile .ph .art{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.tile:hover .ph img{transform:scale(1.06)}
.tile:hover .art .icon{transform:scale(1.12) rotate(-4deg)}
.tile .xflag{position:absolute;right:10px;top:10px;background:var(--ink);color:#fff;font:600 11px/1 var(--sans);padding:6px 8px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase}

/* custom "View" cursor on desktop */
.cursor{position:fixed;left:0;top:0;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;font:600 13px var(--sans);pointer-events:none;z-index:60;transform:scale(0);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.cursor.on{transform:scale(1)}
@media (hover:none){.cursor{display:none}}

/* count + sort bar */
.gridbar{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:10px}
.gridbar h2{font:400 clamp(30px,5vw,44px)/1 var(--serif);margin:0}
.gridbar .muted{font-size:14px}

/* plans band */
.band .tiers{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 20px}
.band .tiers span{border:1px solid #3A3A3A;border-radius:999px;padding:8px 14px;font-size:14px;color:#E8E4DB}
.band .tiers b{color:#fff}

/* view transition for quick view */
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}

@media (prefers-reduced-motion:reduce){
  .wall .col,.marquee .track{animation:none!important}
  .tile{opacity:1;transform:none}
  .hero-in > *{opacity:1;transform:none;animation:none}
  .cursor{display:none}
}