/* assets/css/landing.css */

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:#000;
  color:#fff;
  overflow:hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing:.02em;
}

/* subtle grain (optional) */
.noise{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

.wrap{
  position:relative;
  z-index:1;
  height:100%;
  display:grid;
  grid-template-rows:auto 1fr;
}

/* ===== Title (brutal, one-line) ===== */
.top{
  padding: clamp(14px, 2.6vw, 28px);
  border-bottom:1px solid rgba(255,255,255,.28);
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:end;
  gap:18px;
}

.title{
  margin:0;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:900;
  line-height:.88;
  font-size: clamp(40px, 6.4vw, 96px);
  position:relative;
}

/* echo outline */
.title::before{
  content: attr(data-text);
  position:absolute;
  left: 10px;
  top: 6px;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255,255,255,.55);
  opacity:.55;
  pointer-events:none;
}

/* hard underline */
.title::after{
  content:"";
  display:block;
  margin-top: 12px;
  height: 2px;
  width: clamp(160px, 55vw, 560px);
  background: rgba(255,255,255,.92);
}

.tag{
  margin:0;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size: 12px;
  color: rgba(255,255,255,.72);
  text-align:right;
  max-width: 48ch;
}

/* ===== 3 images full (Desktop) ===== */
.grid{
  height:100%;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.tile{
  position:relative;
  display:block;
  height:100%;
  text-decoration:none;
  color:#fff;
  outline:none;
  overflow:hidden;
  border-right:1px solid rgba(255,255,255,.28);
  background:#000;
}
.tile:last-child{ border-right:none; }

/* full image */
.tile::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  transform: scale(1.01);
  filter: contrast(1.08) saturate(1.03) brightness(.86);
  transition: transform 260ms linear, filter 260ms linear;
}

/* readability gradient at bottom */
.tile::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg,
    rgba(0,0,0,.05) 0%,
    rgba(0,0,0,.10) 55%,
    rgba(0,0,0,.72) 100%);
  pointer-events:none;
}

.tile:hover::before,
.tile:focus-visible::before{
  transform: scale(1.06);
  filter: contrast(1.16) saturate(1.06) brightness(.92);
}

.tile:focus-visible{
  box-shadow: inset 0 0 0 2px #fff;
}

/* label */
.label{
  position:absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index:2;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
}

.left .idx{
  margin:0;
  font-weight:900;
  letter-spacing:.18em;
  opacity:.85;
  font-size: 12px;
}

.left .name{
  margin: 8px 0 0;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: clamp(18px, 2.4vw, 30px);
  line-height: 1.0;
}

.right{
  text-align:right;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size: 12px;
  color: rgba(255,255,255,.72);
}

.right .arrow{
  margin-top: 10px;
  font-size: 14px;
  color: rgba(255,255,255,.9);
}

/* ===========================
   Mobile: 100vh posters + scroll-snap
   =========================== */
@media (max-width: 900px){
  body{ overflow:hidden; }

  .wrap{
    height:100%;
    min-height:100%;
    grid-template-rows: 1fr; /* header overlay */
  }

  /* Header overlay */
  .top{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 10;
    border-bottom: none;
    padding: 16px 16px 10px;
    display: block;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,0));
  }

  .title{
    font-size: clamp(34px, 10vw, 52px);
    letter-spacing: .12em;
    line-height: .9;
  }

  .title::before{
    left: 7px;
    top: 4px;
    -webkit-text-stroke: 2px rgba(255,255,255,.48);
    opacity:.55;
  }

  .title::after{
    margin-top: 10px;
    width: min(64vw, 360px);
  }

  .tag{ display:none; }

  /* Snap-scroller */
  .grid{
    height: 100vh;
    display: block;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .tile{
    height: 100vh;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.28);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .tile:last-child{ border-bottom:none; }

  .tile::after{
    background: linear-gradient(180deg,
      rgba(0,0,0,.02) 0%,
      rgba(0,0,0,.18) 55%,
      rgba(0,0,0,.80) 100%);
  }

  .label{
    left: 16px;
    right: 16px;
    bottom: 20px;
  }

  .left .name{
    font-size: clamp(22px, 6.2vw, 32px);
    letter-spacing: .10em;
  }

  .right{
    font-size: 11px;
    letter-spacing: .14em;
  }

  /* less aggressive zoom on mobile */
  .tile:hover::before,
  .tile:focus-visible::before{
    transform: scale(1.03);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .tile::before{ transition:none !important; }
}