/* =====================================================================
   CZsLazy — Links page
   Built from the 375 x 812 mobile design. The page is a fixed, phone-width
   "frame": the portrait, logo, title and bottom banner stay locked, and only
   the list of links scrolls — behind the banner, fading out as it goes.
   On desktop the frame stays phone-sized and centered (it never stretches).
   ===================================================================== */

@font-face{
  font-family: "Afacad";
  src: url("../assets/fonts/afacad-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg: #050606;
  --fg: #fff;
  --muted: #a0a0a0;

  --card-fill: #191b1a;
  --card-fill-hover: #202221;
  --card-line: rgba(255, 255, 255, .2);

  /* Widest the frame gets. Phones fill the screen; desktop keeps this width.
     Set to 375px to match the original mobile artboard exactly. */
  --frame-max: 430px;
  --frame-w: min(100vw, var(--frame-max));

  --banner-h: calc(var(--frame-w) / 4);   /* banner image is 4:1 */
  --list-top: 215px;                      /* where the scroll area starts, just under the title */

  /* Desktop backdrop: the hero still, blurred, with a 4% white wash */
  --backdrop-blur: 10px;
  --backdrop-wash: rgba(255, 255, 255, .04);
}

*{ box-sizing: border-box; }

html,
body{
  height: 100%;
  margin: 0;
  background: var(--bg);
  overflow: hidden;                       /* the page itself never scrolls */
  overscroll-behavior: none;
}

body{
  font-family: "Afacad", system-ui, sans-serif;
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Desktop backdrop (only shown when there is room beside the frame) ---------- */
.backdrop{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--bg);
  pointer-events: none;
}

.backdrop::before{                         /* hero still, blurred */
  content: "";
  position: absolute;
  inset: -120px;                           /* overscan so the blur never thins out at the edges */
  background: url("../assets/images/links-bg.webp") center / cover no-repeat;
  filter: blur(var(--backdrop-blur));
}

.backdrop::after{                          /* white wash on top */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--backdrop-wash);
}

@media (min-width: 480px){
  .backdrop{ display: block; }
}

/* ---------- Locked frame ---------- */
.frame{
  position: fixed;
  inset: 0;
  margin-inline: auto;
  width: var(--frame-w);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
}

/* Portrait: fixed height from the artboard, centered, fading into the page color */
.portrait{
  position: absolute;
  top: 0;
  left: 50%;
  height: 328px;
  width: auto;
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
}

/* ---------- Logo + title ---------- */
.header{
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--list-top);
  pointer-events: none;
}

.mark{
  position: absolute;
  top: 12px;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  fill: #fff;
}

.title{
  position: absolute;
  top: 158px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: 42px;
  line-height: 51px;
  font-weight: 500;
  letter-spacing: -.05em;
  padding-right: .05em;                   /* balances the negative tracking after the last letter */
}

/* ---------- Scrolling list (runs from under the title to the bottom edge) ---------- */
.scroll{
  position: absolute;
  inset: var(--list-top) 0 0 0;
  padding: 9.5px 13.8px calc(var(--banner-h) + 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;

  /* links fade out under the title edge and dissolve before they reach the banner */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0, #000 9px,
    #000 calc(100% - var(--banner-h) - 40px),
    transparent calc(100% - var(--banner-h) + 4px));
          mask-image: linear-gradient(to bottom,
    transparent 0, #000 9px,
    #000 calc(100% - var(--banner-h) - 40px),
    transparent calc(100% - var(--banner-h) + 4px));
}

.scroll::-webkit-scrollbar{ display: none; }

.links{
  display: flex;
  flex-direction: column;
  gap: 6.57px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- Link cards ---------- */
.card{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 68.88px;
  padding-top: 2px;
  border: .75px solid var(--card-line);
  border-radius: 12.7px;
  background: var(--card-fill);
  color: var(--fg);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, border-color .2s ease;
}

.card-title{
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  line-height: 24.3px;
  font-weight: 400;
}

.card-icon{
  width: 20px;
  height: 20px;
  flex: none;
  fill: var(--muted);
  position: relative;
  top: -1.5px;
}

.card-url{
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
  color: var(--muted);
  position: relative;
  top: -1px;
}

@media (hover: hover){
  .card:hover{
    background: var(--card-fill-hover);
    border-color: rgba(255, 255, 255, .32);
  }
}

.card:active{ background: var(--card-fill-hover); }

.card:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ---------- Locked banner (sits on top of the scrolling links) ---------- */
.banner{
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 1;
  user-select: none;
}

@media (prefers-reduced-motion: reduce){
  .card{ transition: none; }
}

/* ---------- Language link (EN / ID) ---------- */
.lang-link{
  position: absolute;
  z-index: 6;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .04em;
  pointer-events: auto;
}

.lang-link a{
  color: rgba(255, 255, 255, .55);
  text-decoration: none;
  transition: color .5s cubic-bezier(.45, .05, .2, 1);
}

.lang-link a[aria-current]{ color: #fff; }
.lang-link span{ color: rgba(255, 255, 255, .3); }

@media (hover: hover){
  .lang-link a:hover{ color: #fff; }
}

.lang-link a:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 4px;
}

/* text for screen readers and search engines only */
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}