/* =====================================================================
   Collections page styles
   1. Page frame      4. Headline
   2. Cover wall      5. Download buttons & badges
   3. Darkening veil  6. Loading fade & small screens
   ===================================================================== */

/* ---------- 1. Page frame: one fixed screen, no scrolling ---------- */
html, body{ height:100%; overflow:hidden; overscroll-behavior:none; touch-action:manipulation; }

:root{
  /* these are overwritten live by covers.js to fit the visitor's screen */
  --land-h:180px; --land-w:320px;
  --port-h:280px; --port-w:187px;
  --gap:18px; --rot:-8deg; --tile-r:8px;
  --wall-w:120vw; --wall-h:120vh;
}

/* ---------- 2. Cover wall ---------- */
.wall{
  position:fixed; left:50%; top:50%; z-index:0;
  width:var(--wall-w); height:var(--wall-h);
  transform:translate(-50%,-50%) rotate(var(--rot));
  display:flex; flex-direction:column; justify-content:center; gap:var(--gap);
}
.row{
  display:flex; gap:var(--gap); width:max-content;
  will-change:transform; backface-visibility:hidden; contain:layout style;
}
.row img{ display:block; flex-shrink:0; object-fit:cover; border-radius:var(--tile-r); background:#141719; }
.row.landscape img{ width:var(--land-w); height:var(--land-h); }
.row.portrait  img{ width:var(--port-w); height:var(--port-h); }

/* Each row slides by exactly one full set of cards (in whole pixels),
   so the loop point is invisible however long the page stays open. */
.row.left  { animation:drift-left  var(--dur) linear infinite; }
.row.right { animation:drift-right var(--dur) linear infinite; }
@keyframes drift-left  { from{ transform:translate3d(0,0,0); } to{ transform:translate3d(calc(var(--shift) * -1),0,0); } }
@keyframes drift-right { from{ transform:translate3d(calc(var(--shift) * -1),0,0); } to{ transform:translate3d(0,0,0); } }

/* ---------- 3. Veil: covers sink into the background ---------- */
.veil{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 58% 46% at 50% 50%, rgba(11,13,14,.92) 0%, rgba(11,13,14,.72) 45%, rgba(11,13,14,.45) 100%),
    linear-gradient(to bottom, var(--bg) 0%, transparent 20%, transparent 80%, var(--bg) 100%),
    linear-gradient(to right,  var(--bg) 0%, transparent 12%, transparent 88%, var(--bg) 100%);
}
[data-orientation="portrait"] .veil{
  background:
    radial-gradient(ellipse 72% 34% at 50% 50%, rgba(11,13,14,.93) 0%, rgba(11,13,14,.74) 45%, rgba(11,13,14,.45) 100%),
    linear-gradient(to bottom, var(--bg) 0%, transparent 14%, transparent 86%, var(--bg) 100%),
    linear-gradient(to right,  var(--bg) 0%, transparent 10%, transparent 90%, var(--bg) 100%);
}

/* ---------- 4. Headline ---------- */
.headline{
  position:fixed; z-index:4; left:50%; transform:translateX(-50%);
  top:calc(env(safe-area-inset-top,0px) + clamp(64px, 11vmin, 170px));
  width:min(92vw, 1400px); margin:0; text-align:center;
  font-weight:700; font-size:clamp(28px, 7.2vmin, 118px); line-height:.98; letter-spacing:-.03em;
  text-wrap:balance; cursor:default;
}
.headline::before{            /* soft frost behind the headline, fades out at the edges */
  content:''; position:absolute; inset:-.7em -1.1em; z-index:-1; pointer-events:none;
  background:rgba(11,13,14,.4);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  -webkit-mask-image:radial-gradient(closest-side, #000 58%, transparent 100%);
          mask-image:radial-gradient(closest-side, #000 58%, transparent 100%);
}
[data-orientation="portrait"] .headline{ font-size:clamp(34px, 11.5vw, 96px); width:min(90vw, 900px); }

/* ---------- 5. Download buttons & badges ---------- */
main{
  position:fixed; inset:0; z-index:4;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
  text-align:center;
}
.dl-group{ display:flex; flex-direction:column; align-items:center; }
.dl-group.secondary{ margin-top:clamp(26px, 4.4vmin, 60px); }
.btn-wrap{ position:relative; display:inline-block; }

.btn{
  display:inline-flex; align-items:center; gap:clamp(9px, 1.4vmin, 18px);
  border-radius:999px; cursor:pointer; font-family:inherit; font-weight:600;
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease, background .18s ease, border-color .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn svg{ width:1.1em; height:1.1em; }
.btn:focus-visible{ outline:3px solid var(--accent); outline-offset:4px; }
.btn:active{ transform:scale(.97); }
.btn[disabled]{ opacity:.6; cursor:progress; transform:none; }

.btn.primary{
  background:var(--text); color:var(--bg); border:none;
  padding:clamp(15px, 2.4vmin, 32px) clamp(28px, 5vmin, 66px);
  font-size:clamp(15px, 2.1vmin, 28px);
  box-shadow:0 18px 50px rgba(0,0,0,.55);
}
.btn.ghost{
  background:rgba(235,233,227,.06); color:var(--text);
  border:1px solid rgba(235,233,227,.28);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  padding:clamp(12px, 1.9vmin, 26px) clamp(22px, 4vmin, 52px);
  font-size:clamp(14px, 1.8vmin, 24px);
}
@media (hover:hover){
  .btn.primary:hover{ transform:translateY(-2px); box-shadow:0 24px 60px rgba(0,0,0,.65); }
  .btn.ghost:hover{ background:rgba(235,233,227,.12); border-color:rgba(235,233,227,.5); transform:translateY(-2px); }
}

.label{                       /* frosted pill so labels stay readable over the covers */
  margin-top:clamp(10px, 1.6vmin, 20px); padding:.45em 1em; border-radius:999px;
  font-size:clamp(12px, 1.6vmin, 20px); letter-spacing:.04em; color:#b3b7b8;
  background:rgba(11,13,14,.45);
  backdrop-filter:blur(12px) saturate(120%); -webkit-backdrop-filter:blur(12px) saturate(120%);
}

.badge{ position:absolute; pointer-events:none; }
.badge.cards{
  --cw:clamp(22px, 3.4vmin, 46px);
  width:calc(var(--cw) * 2.6); height:calc(var(--cw) * 1.5);
  top:calc(var(--cw) * -0.95); right:calc(var(--cw) * -1.1);
}
.badge.cards img{
  position:absolute; bottom:0; left:50%;
  width:var(--cw); height:calc(var(--cw) * 1.5); object-fit:cover;
  border-radius:calc(var(--cw) * .12); border:1px solid rgba(235,233,227,.22);
  box-shadow:0 6px 16px rgba(0,0,0,.55);
  transform-origin:50% 100%; transition:transform .25s ease;
}
.badge.cards img:nth-child(1){ transform:translateX(-50%) rotate(-20deg) translateX(-46%); }
.badge.cards img:nth-child(2){ transform:translateX(-50%) translateY(-6%); z-index:2; }
.badge.cards img:nth-child(3){ transform:translateX(-50%) rotate(20deg) translateX(46%); }
.badge.sparkle{
  font-size:clamp(18px, 2.8vmin, 38px); line-height:1; top:-.55em; right:-.45em;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); transition:transform .25s ease;
}
@media (hover:hover){
  .btn-wrap:hover .badge.cards img:nth-child(1){ transform:translateX(-50%) rotate(-26deg) translateX(-58%); }
  .btn-wrap:hover .badge.cards img:nth-child(2){ transform:translateX(-50%) translateY(-14%); }
  .btn-wrap:hover .badge.cards img:nth-child(3){ transform:translateX(-50%) rotate(26deg) translateX(58%); }
  .btn-wrap:hover .badge.sparkle{ transform:rotate(14deg) scale(1.12); }
}

/* ---------- 6. Loading fade & small screens ---------- */
.wall, main, .headline{ transition:opacity .7s ease; }
html.loading .wall, html.loading main, html.loading .headline{ opacity:0; }

@media (max-height:520px){   /* landscape phones */
  .headline{ top:calc(env(safe-area-inset-top,0px) + 14px); font-size:clamp(22px, 6.4vmin, 40px); width:min(62vw, 700px); }
  .dl-group.secondary{ margin-top:18px; }
  .label{ margin-top:8px; }
}
@media (prefers-reduced-motion: reduce){
  .wall, main, .headline{ transition:none; }
  .row.left, .row.right{ animation:none; }
}