/* =====================================================================
   Landing page styles
   1. Background glow   2. Headline   3. The two choice cards   4. Small screens
   ===================================================================== */
html,body{ min-height:100%; }
body{ overflow-x:hidden; }

/* ---------- 1. Background glow (no images, so the page appears instantly) ---------- */
.glow{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60vmax 45vmax at 12% 18%, rgba(255,128,0,.10), transparent 60%),
    radial-gradient(55vmax 45vmax at 88% 86%, rgba(64,188,244,.08), transparent 60%),
    radial-gradient(40vmax 30vmax at 55% 55%, rgba(0,224,84,.04), transparent 60%);
}

main{
  position:relative; z-index:3;
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:calc(clamp(96px, 16vmin, 190px) + env(safe-area-inset-top,0px)) clamp(18px, 4vw, 56px) calc(clamp(40px, 7vmin, 90px) + env(safe-area-inset-bottom,0px));
  text-align:center;
}

/* ---------- 2. Headline ---------- */
.headline{
  margin:0; font-weight:700; letter-spacing:-.03em; line-height:.98;
  font-size:clamp(34px, 7.6vmin, 120px); text-wrap:balance; max-width:16ch; cursor:default;
}
@media (min-aspect-ratio:5/4) and (min-width:900px){ .headline{ max-width:22ch; } }
.sub{
  margin:clamp(14px, 2.2vmin, 28px) 0 0; color:var(--text-dim);
  font-size:clamp(14px, 1.9vmin, 24px); line-height:1.5; max-width:40ch; text-wrap:balance;
}

/* ---------- 3. The two choice cards ---------- */
.choices{
  margin-top:clamp(34px, 6vmin, 90px);
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(14px, 2.4vmin, 32px);
  width:min(100%, 1040px);
}
.choice{
  position:relative; display:flex; flex-direction:column; text-align:left;
  color:var(--text); text-decoration:none;
  background:rgba(18,21,23,.72);
  border:1px solid var(--border); border-radius:clamp(14px, 1.8vmin, 22px);
  padding:clamp(16px, 2.4vmin, 30px);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.choice:focus-visible{ outline:3px solid var(--accent); outline-offset:4px; }
.choice:active{ transform:scale(.985); }
@media (hover:hover){
  .choice:hover{ transform:translateY(-4px); border-color:var(--line); background:rgba(23,27,29,.82); }
}

.preview{
  height:clamp(120px, 20vmin, 230px); border-radius:clamp(10px, 1.3vmin, 16px);
  background:#0e1112; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative;
}

/* collections: fanned cards */
.fan{ position:relative; width:calc(var(--cw) * 2.8); height:calc(var(--cw) * 1.5); --cw:clamp(44px, 7vmin, 86px); }
.fan img{
  position:absolute; bottom:0; left:50%;
  width:var(--cw); height:calc(var(--cw) * 1.5); object-fit:cover;
  border-radius:calc(var(--cw) * .1); border:1px solid rgba(235,233,227,.2);
  box-shadow:0 10px 26px rgba(0,0,0,.6);
  transform-origin:50% 100%; transition:transform .35s cubic-bezier(.2,.8,.3,1);
}
.fan img:nth-child(1){ transform:translateX(-50%) rotate(-16deg) translateX(-52%); }
.fan img:nth-child(2){ transform:translateX(-50%) translateY(-4%); z-index:2; }
.fan img:nth-child(3){ transform:translateX(-50%) rotate(16deg) translateX(52%); }
@media (hover:hover){
  .choice:hover .fan img:nth-child(1){ transform:translateX(-50%) rotate(-24deg) translateX(-66%); }
  .choice:hover .fan img:nth-child(2){ transform:translateX(-50%) translateY(-12%); }
  .choice:hover .fan img:nth-child(3){ transform:translateX(-50%) rotate(24deg) translateX(66%); }
}

/* letterboxd: logo */
.lb-logo{
  width:clamp(70px, 11vmin, 130px); height:auto; display:block;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.55));
  transition:transform .35s cubic-bezier(.2,.8,.3,1);
}
@media (hover:hover){ .choice:hover .lb-logo{ transform:scale(1.08) rotate(-4deg); } }

.choice h2{ margin:clamp(14px, 2vmin, 24px) 0 6px; font-size:clamp(17px, 2.4vmin, 28px); font-weight:600; letter-spacing:-.01em; }
.choice p{ margin:0; color:var(--text-dim); font-size:clamp(13px, 1.6vmin, 18px); line-height:1.5; }
.go{
  margin-top:clamp(14px, 2vmin, 24px); display:inline-flex; align-items:center; gap:8px;
  font-size:clamp(13px, 1.6vmin, 18px); font-weight:600;
}
.go svg{ width:1em; height:1em; transition:transform .25s ease; }
@media (hover:hover){ .choice:hover .go svg{ transform:translateX(4px); } }
.choice.primary .go{ color:var(--accent); }

/* ---------- 4. Small screens ---------- */
/* narrow or tall screens: stack the two choices */
@media (max-width:640px), (max-aspect-ratio:3/4){
  .choices{ grid-template-columns:1fr; max-width:520px; }
  .preview{ height:clamp(110px, 16vh, 200px); }
}
/* short landscape phones: compact, preview beside the text */
@media (max-height:520px) and (min-width:641px){
  main{ padding-top:calc(76px + env(safe-area-inset-top,0px)); padding-bottom:28px; }
  .headline{ font-size:clamp(26px, 7vmin, 40px); max-width:none; }
  .sub{ display:none; }
  .choices{ margin-top:20px; }
  .choice{ flex-direction:row; align-items:center; gap:16px; }
  .preview{ height:96px; width:120px; flex-shrink:0; }
  .fan{ --cw:40px; }
  .lb-logo{ width:64px; }
  .choice h2{ margin-top:0; }
}