/* artbyhollywood-la.com: the OG Dove Sunglasses site for Art by Hollywood x Walkway.
   A near-empty white page: the lockup, one piece in a cloud sky, a few lines
   of small mono caps and the information panel. The sky is drawn by scene.js
   (three.js); without WebGL, or without JS, the render stands on the white
   under a still fresco of the same cloud plates. */

:root {
  --ink: #0b0b0b;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* sky blue at the top, whitish grey around the information box (scene.js draws the same) */
  background: #dce7ef linear-gradient(180deg, #7cb6e3 0%, #a6cfee 40%, #dce7ef 72%, #eff1f2 100%) no-repeat fixed;
  background-size: 100% 100vh;
  background-size: 100% 100lvh;
}
body {
  min-height: 100vh;
  min-height: 100svh;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
html { overflow-x: clip; }
img, svg { display: block; }
a { color: inherit; }
::selection { background: var(--ink); color: #ffffff; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- The sky (canvas from scene.js) ---------- */

/* The still fresco across the top: the same cloud plates scene.js drifts.
   It shows without JS or WebGL, and fades out once the 3D sky is drawn. */
.fresco {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: max(72vh, 520px);
  z-index: 0;
  pointer-events: none;
  background:
    url(/img/clouds/c3.webp) center top -9vh / max(66vw, 440px) auto no-repeat,
    url(/img/clouds/c1.webp) left -18vw top 0 / max(60vw, 380px) auto no-repeat,
    url(/img/clouds/c5.webp) right -18vw top -2vh / max(60vw, 380px) auto no-repeat,
    url(/img/clouds/c2.webp) left -28vw top 20vh / max(54vw, 340px) auto no-repeat,
    url(/img/clouds/c4.webp) right -28vw top 18vh / max(52vw, 330px) auto no-repeat,
    url(/img/clouds/c6.webp) center top 14vh / max(58vw, 380px) auto no-repeat,
    url(/img/clouds/c1.webp) left 18vw top 24vh / max(40vw, 280px) auto no-repeat,
    url(/img/clouds/c5.webp) right 18vw top 26vh / max(40vw, 280px) auto no-repeat,
    url(/img/clouds/c6.webp) center top -18vh / max(86vw, 560px) auto no-repeat;
  opacity: 0.96;
  transition: opacity 0.9s ease;
}
.is-3d .fresco { opacity: 0; }

.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.sky canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y; /* the page still scrolls over the sky on a phone */
}
.is-live .sky canvas { cursor: grab; }
.sky canvas.is-grabbing { cursor: grabbing; }
.is-3d .sky { opacity: 1; }

/* ---------- Page ---------- */

/* The page sits over the sky and lets pointer events through, so the piece
   can be grabbed; links and the panel take them back. */
.page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  pointer-events: none;
  overflow: clip; /* the panel's clouds may reach past the edges */
}
.page a, .page button, .info-panel { pointer-events: auto; }
/* Over the glasses a touch grabs instead of scrolling. */
.is-live .piece { pointer-events: auto; touch-action: none; cursor: grab; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.is-live .piece-img { pointer-events: none; -webkit-user-drag: none; }

.top {
  flex: none;
  display: flex;
  justify-content: center;
  padding: max(22px, env(safe-area-inset-top)) 16px 0;
}
.lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 6px;
  /* white marks on the sky; a soft blue-grey shadow keeps them legible where
     they cross a white cloud */
  color: #ffffff;
  filter: drop-shadow(0 1px 2px rgb(40 70 100 / 0.35)) drop-shadow(0 0 10px rgb(60 100 140 / 0.25));
  text-decoration: none;
}
.mark-abh { width: 168px; height: auto; } /* 140px x 1.2 */
.mark-walkway { width: 265px; height: auto; } /* 170px x 1.3 x 1.2 */
.lockup-x { font-size: 12px; line-height: 1; }
@media (min-width: 600px) {
  .top { padding-top: max(28px, env(safe-area-inset-top)); }
  .lockup { flex-direction: row; gap: 18px; }
  .mark-abh { width: 180px; } /* 150px x 1.2 */
  .mark-walkway { width: 275px; } /* 176px x 1.3 x 1.2 */
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-bottom: max(28px, env(safe-area-inset-bottom));
}

.product {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 230px;
  padding: 20px 16px 10px;
}
.piece {
  position: relative;
  width: 82vw;
  max-width: 580px;
  aspect-ratio: 1600 / 895;
}
@media (min-width: 600px) {
  .piece {
    /* Fit the piece, the caps and the panel in one screen when there is room. */
    width: min(78vw, 580px, calc((100vh - 540px) * 1.79));
    width: min(78vw, 580px, calc((100svh - 540px) * 1.79));
    min-width: 300px;
  }
}
/* a little below the middle of its space; the 3D view and the cloud sea follow */
.piece { top: clamp(8px, 2vh, 32px); }
.piece picture { display: contents; }
.piece-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.6s ease;
}
/* A soft contact shadow under the still render. */
.piece::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: -10%;
  height: 12%;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(64 80 98 / 0.2), rgb(64 80 98 / 0) 100%);
  transition: opacity 0.6s ease;
}
.is-3d .piece-img,
.is-3d .piece::after { opacity: 0; }

/* ---------- The caps ---------- */

.caps {
  flex: none;
  /* up toward the piece, which is drawn a little below its own box (.piece top),
     but never so far that a phone's smaller gap lets the caps touch the glasses */
  margin-top: calc(-1 * clamp(0px, 2.5vh, 40px));
  /* a soft white halo keeps the small caps legible over the cloud sea */
  text-shadow: 0 0 6px #fff, 0 0 14px #fff, 0 0 26px rgb(255 255 255 / 0.9);
  padding: 14px 16px 0;
  text-align: center;
  font-size: 11px;
  line-height: 1.95;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* The colorway: three names, the chosen one in ink and underlined. */
.ways {
  display: flex;
  justify-content: center;
  gap: 4px;
}
.ways button {
  appearance: none;
  padding: 2px 8px;
  border: 0;
  background: none;
  color: rgb(11 11 11 / 0.58);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: color 0.2s ease;
}
.ways button:hover { color: var(--ink); }
.ways button[aria-checked="true"] {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
/* PREORDER, with the gallery square under it */
.plus-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
  line-height: 0;
}

/* The gallery's door: a small square of the first photo under PREORDER. */
.gallery-thumb {
  appearance: none;
  display: block;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgb(11 11 11 / 0.55);
  background: #fff;
  cursor: zoom-in;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb:hover { border-color: var(--ink); transform: scale(1.06); }

/* ---------- The gallery ---------- */

.gallery {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  border: 0;
  background: rgb(255 255 255 / 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.gallery[open] {
  display: flex;
  flex-direction: column;
  animation: gallery-in 0.25s ease;
}
.gallery::backdrop { background: transparent; }
@keyframes gallery-in { from { opacity: 0; } to { opacity: 1; } }
.gallery-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: none;
}
.gallery button {
  appearance: none;
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}
.gallery-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0;
  touch-action: pan-y;
}
.gallery-img {
  max-width: min(100%, 720px);
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 24px 60px -30px rgb(11 11 11 / 0.45);
  -webkit-user-select: none;
  user-select: none;
}
.gallery-nav {
  flex: none;
  display: flex;
  justify-content: center;
  gap: 24px;
}
.gallery-nav[hidden] { display: none; }

/* The buy button: small mono caps in a thin frame, no fill. */
.preorder-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px; /* 20% smaller than the first cut (30px, 14px padding, 11px type) */
  padding: 0 11px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.18em;
  text-decoration: none;
  text-shadow: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.preorder-btn:hover { background: var(--ink); color: #fff; }

/* ---------- The cloud sea under the piece ---------- */

/* The caps and the panel float on a sea of cloud, seen from just above it:
   small pale rows at a hazy horizon, bigger and fuller rows toward the bottom
   edge. Each row is four to six plates repeated across at different widths, so the
   rhythm never lines up. Rows drift slowly on their own; the parallax in
   app.js moves them by depth (data-depth on .sea-row). */
.below {
  position: relative;
  isolation: isolate;
}
.below > .caps,
.below > .panel-scene { position: relative; z-index: 1; }
.sea {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: -40px; /* app.js raises it to just under the piece */
  bottom: calc(-1 * max(28px, env(safe-area-inset-bottom)));
  overflow: hidden;
  pointer-events: none;
  /* the horizon melts into the sky */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgb(0 0 0 / 0.6) 8%, #000 18%);
  mask-image: linear-gradient(180deg, transparent 0, rgb(0 0 0 / 0.6) 8%, #000 18%);
}
/* A soft floor under the near rows, so no white shows between them. */
.sea::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background: linear-gradient(180deg, rgb(238 240 242 / 0), rgb(238 240 242 / 0.55) 60%, rgb(236 238 241 / 0.8));
}
/* A row is always taller than its biggest plate (plates are 2:1), so no
   plate is ever cut flat by its row's box; only the sea's own bottom edge,
   the page edge, cuts the near row. */
.sea-row {
  position: absolute;
  left: -16%;
  width: 132%;
}
.sea-row, .sea-drift { will-change: transform; }
.sea-drift {
  position: absolute;
  inset: 0;
  background-repeat: repeat-x;
  animation: sea-drift 90s ease-in-out infinite alternate;
}
@keyframes sea-drift {
  from { transform: translate3d(-5%, 0, 0); }
  to { transform: translate3d(5%, 0, 0); }
}
.sea-1 { top: 4%; height: max(14vw, 95px); z-index: 1; opacity: 0.55; }
.sea-1 .sea-drift {
  background-image: url(/img/clouds/c3.webp), url(/img/clouds/c5.webp), url(/img/clouds/c1.webp), url(/img/clouds/c6.webp), url(/img/clouds/c2.webp), url(/img/clouds/c4.webp);
  background-size: max(15vw, 110px) auto, max(19vw, 130px) auto, max(13vw, 96px) auto, max(22vw, 150px) auto, max(17vw, 120px) auto, max(11vw, 84px) auto;
  background-position: 0 60%, 6vw 10%, 3vw 100%, 11vw 30%, 9vw 80%, 2vw 0;
  animation-duration: 140s;
}
.sea-2 { top: 12%; height: max(21vw, 145px); z-index: 2; opacity: 0.72; }
.sea-2 .sea-drift {
  background-image: url(/img/clouds/c2.webp), url(/img/clouds/c4.webp), url(/img/clouds/c6.webp), url(/img/clouds/c1.webp), url(/img/clouds/c3.webp), url(/img/clouds/c5.webp);
  background-size: max(24vw, 170px) auto, max(29vw, 200px) auto, max(21vw, 150px) auto, max(33vw, 230px) auto, max(26vw, 180px) auto, max(19vw, 136px) auto;
  background-position: 4vw 70%, 0 0, 13vw 100%, 18vw 20%, 10vw 45%, 22vw 90%;
  animation-duration: 115s;
  animation-direction: alternate-reverse;
}
.sea-3 { top: 24%; height: max(31vw, 215px); z-index: 3; opacity: 0.88; }
.sea-3 .sea-drift {
  background-image: url(/img/clouds/c5.webp), url(/img/clouds/c3.webp), url(/img/clouds/c2.webp), url(/img/clouds/c4.webp);
  background-size: max(36vw, 250px) auto, max(44vw, 300px) auto, max(31vw, 220px) auto, max(50vw, 340px) auto;
  background-position: 0 80%, 15vw 0, 9vw 100%, 26vw 40%;
  animation-duration: 95s;
}
.sea-4 { top: 40%; height: max(48vw, 330px); z-index: 4; }
.sea-4 .sea-drift {
  background-image: url(/img/clouds/c6.webp), url(/img/clouds/c1.webp), url(/img/clouds/c4.webp), url(/img/clouds/c3.webp);
  background-size: max(56vw, 380px) auto, max(68vw, 460px) auto, max(48vw, 330px) auto, max(78vw, 520px) auto;
  background-position: 0 30%, 22vw 0, 36vw 100%, 8vw 70%;
  animation-duration: 75s;
  animation-direction: alternate-reverse;
}
.sea::after { z-index: 3; }

/* ---------- The information panel, always shown, inside its clouds ---------- */

.panel-scene {
  position: relative;
  flex: none;
  width: min(340px, calc(100% - 32px));
  margin: 18px auto 0;
}
.pc {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pc-back { z-index: 0; }
.pc-front { z-index: 2; }
.pc img {
  position: absolute;
  max-width: none;
  height: auto;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* Behind the box: top-left and right. */
.pc-1 { width: 92%; left: -48%; top: -34%; }
.pc-2 { width: 78%; right: -52%; top: 24%; }
/* In front of the box: over its corners, clear of the text. */
.pc-3 { width: 80%; left: -44%; bottom: -12%; }
.pc-4 { width: 66%; right: -38%; top: -26%; }
.pc-5 { width: 52%; right: -28%; bottom: -6%; }
.pc-back, .info-panel, .pc-front { will-change: transform; }

.info-panel {
  position: relative;
  z-index: 1;
  padding: 16px 18px;
  background: rgb(255 255 255 / 0.94);
  border: 1px solid rgb(11 11 11 / 0.14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 10.5px;
  line-height: 1.7;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}
.info-panel p + p { margin-top: 9px; }
.info-panel a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.info-name { font-weight: 500; }
.info-preorder { display: inline-block; padding: 4px 8px; font-weight: 500; }
.info-legal a { display: inline-block; padding: 4px 0; }
.info-legal a + a { margin-left: 22px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}