/* UNACCOMPANIED — styles
   Sections, top to bottom: opener (with the password), sticker bin, shop + gallery, then the sheets.
   No rounded corners anywhere. */

:root {
  /* Opener + sticker bin, pulled from the sketches */
  --mustard: #DEBE5A;
  --ink: #1F1B0E;
  --brown: #43391B;
  --paper: #FFFFFF;
  --tape: rgba(222, 190, 90, 0.81);

  /* Product view */
  --shop-bg: #2B2A28;
  --shop-ink: #EDE3C4;
  --black: #000000;
  --tag: #FBFF25;

  --pad: clamp(10px, 2.6vw, 22px);  /* the site margin (shop and product view) */

  --font: "Helvetica Neue", Helvetica, Inter, Arial, sans-serif;

  --app-h: 100vh;              /* set from the real window height in app.js */
  --slide-ms: 950ms;
  --slide-ease: cubic-bezier(0.77, 0, 0.18, 1);
  --pop-ease: cubic-bezier(0.2, 0.9, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --slide-ms: 250ms; }
}

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

[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--mustard);
}

body {
  font-family: var(--font);
  color: var(--brown);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

:focus-visible { outline: 2px solid var(--tag); outline-offset: 3px; }

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

@keyframes blink { 50% { opacity: 0; } }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-9px); }
  30% { transform: translateX(8px); }
  45% { transform: translateX(-6px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

.shake { animation: shake 0.42s ease; }


/* ---------- The long page ---------- */

.track {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transition: transform var(--slide-ms) var(--slide-ease);
  will-change: transform;
}

.section {
  position: relative;
  height: var(--app-h);
  overflow: hidden;
}

/* Hand-drawn pencil lines */
.sketch {
  fill: none;
  stroke: var(--brown);
  stroke-width: 4.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}


/* ---------- 1. Opener + password ---------- */

.opener {
  --box-w: clamp(170px, 47vw, 340px);
  --box-h: calc(var(--box-w) * 130 / 440);
  background: var(--mustard);
}

.title {
  margin: 0;
  padding-top: calc(var(--app-h) * 0.035);
  font-size: var(--title-size, 28vw);
  font-weight: 700;
  line-height: 1.17;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-align: center;
}

.title__line {
  display: block;
  width: max-content;
  margin: 0 auto;
  white-space: nowrap;
}

/* Each letter keeps its real width (set in lock.js) while it scrambles */
.ch {
  display: inline-block;
  text-align: center;
  opacity: 0;
}

.ch.on { opacity: 1; }

.pw-box {
  display: block;
  width: var(--box-w);
  height: var(--box-h);
  container-type: inline-size;
}

.pw-box__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.12s ease;
}

/* The box sits low on the opener, then glides up to the middle for the password */
.opener__box {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--app-h) * 0.69);
  margin: 0 auto;
  transition: top 0.75s var(--slide-ease);
}

.opener__box:active .pw-box__frame { transform: scale(0.97); }
.opener.is-entering .opener__box { top: var(--entry-top, 40%); }

.padlock {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13.5cqw;
  transform: translate(-50%, -54%);
  stroke-width: 4.6;
  transition: opacity 0.3s 0.4s;
}

.opener.is-entering .opener__box .padlock { opacity: 0; transition: opacity 0.2s; }

.dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dot {
  position: absolute;
  top: 50%;
  width: 8.6cqw;
  height: 5.6cqw;
  margin-top: -2.4cqw;
  border-radius: 50%;          /* hand-drawn dots from the sketch, the one round thing on purpose */
  background: var(--brown);
  transform: translateY(calc(var(--i, 0) * -0.35cqw)) rotate(var(--tilt, 0deg));
  animation: dot-in 0.2s var(--pop-ease);
}

@keyframes dot-in { from { transform: scale(0); } }

@keyframes dot-hop {
  40% { transform: translateY(-3cqw) scale(1.15); }
}

.opener__box.is-open .dot {
  animation: dot-hop 0.4s var(--pop-ease) both;
  animation-delay: calc(var(--i, 0) * 50ms);
}

.caret-line {
  position: absolute;
  top: 50%;
  width: 1cqw;
  height: 15cqw;
  margin-top: -7.5cqw;
  background: var(--brown);
  transform: skewX(-14deg);
  opacity: 0;
}

.opener__box.is-focused .caret-line {
  opacity: 1;
  animation: blink 1s steps(1) infinite;
}

.pw-input {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--entry-top, 40%);
  width: var(--box-w);
  height: var(--box-h);
  margin: 0 auto;
  padding: 0;
  border: 0;
  opacity: 0;
  font-size: 16px;           /* keeps iOS from zooming in on focus */
  color: transparent;
  caret-color: transparent;
  background: transparent;
  pointer-events: none;
  cursor: text;
}

.opener.is-entering .pw-input { pointer-events: auto; }


/* ---------- 2. Sticker bin ---------- */

/* Plain graph paper. Layers, bottom to top: paper, tape frame, then every sticker. */
.bin {
  --tape-w: clamp(16px, 4.6vw, 34px);
  background-color: var(--paper);
  background-image:
    linear-gradient(to right, rgba(67, 57, 27, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(67, 57, 27, 0.12) 1px, transparent 1px),
    linear-gradient(to right, rgba(67, 57, 27, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(67, 57, 27, 0.055) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: center center;
}

/* Where the stickers live (see-through, so the tape shows underneath them) */
.bin__paper {
  position: absolute;
  inset: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Masking tape frame (IMG_0370) */
.tape {
  position: absolute;
  background: var(--tape);
  pointer-events: none;
}

.tape--top {
  top: 0; left: 0; right: 0;
  height: calc(var(--tape-w) * 1.1);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 78% 84%, 54% 66%, 30% 82%, 0 100%);
}

.tape--bottom {
  bottom: 0; left: 0; right: 0;
  height: calc(var(--tape-w) * 1.1);
  clip-path: polygon(0 14%, 32% 0, 60% 4%, 72% 22%, 100% 10%, 100% 100%, 0 100%);
}

.tape--left {
  top: 0; bottom: 0; left: 0;
  width: var(--tape-w);
  clip-path: polygon(0 0, 86% 0, 100% 100%, 0 100%);
}

.tape--right {
  top: 0; bottom: 0; right: 0;
  width: var(--tape-w);
  clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%);
}

/* The SHOP button: a hand-drawn outline box, and a sticker like the rest */
.shop-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(118px, 30vw, 168px);
  aspect-ratio: 200 / 76;
  font-size: clamp(18px, 5vw, 26px);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--brown);
}

.shop-btn span { position: relative; padding-left: 0.14em; }

.shop-btn__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  stroke-width: 3.6;
}

.stickers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sticker {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}

/* Hidden for the moment between the images loading and the pile being laid out */
.stickers.is-arranging .sticker { visibility: hidden; }

.sticker__art {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: scale 0.15s ease;
}

/* The SHOP sticker keeps its own size */
.shop-btn.sticker__art {
  display: grid;
  width: clamp(118px, 30vw, 168px);
  height: auto;
}

.sticker.is-held .sticker__art { scale: 1.05; }

/* Small section headings: "sticker bin", "shop", "gallery" */
.section-label {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(31, 27, 14, 0.6);
  pointer-events: none;
}

.bin > .section-label {
  position: absolute;
  z-index: 10000;                         /* the heading stays readable above the pile */
  top: calc(var(--tape-w) * 1.1 + 10px);
  left: calc(var(--tape-w) + 12px);
}


/* ---------- 3. Shop + gallery ---------- */

.shop {
  --peek: 64px;                           /* how much of the gallery shows under the polaroids */
  --gutter: clamp(20px, 6vw, 88px);       /* the gallery's margin from the screen edges */
  background: var(--paper);
  color: var(--ink);
}

/* The shop and the gallery scroll together; pulling down at the very top goes back to the stickers */
.shop__scroll {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: none;
  touch-action: pan-y;
  scrollbar-width: none;
}

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

.shop__screen {
  display: flex;
  flex-direction: column;
  height: calc(var(--app-h) - var(--peek));
  padding: calc(var(--pad) + env(safe-area-inset-top)) calc(var(--pad) + env(safe-area-inset-right)) var(--pad) calc(var(--pad) + env(safe-area-inset-left));
}

/* The labels, polaroids and gallery photos sit in front of the big man (z-index 0),
   who sits in front of the white page and the cardboard. */
.shop__screen > .section-label {
  position: relative;
  z-index: 1;
  flex: none;
  line-height: 36px;
}

/* The three polaroids: 1 on top and 2 below on phones and portrait iPad, in a row on wide screens */
.covers {
  flex: 1;
  min-height: 0;
  display: grid;
  gap: var(--pad);
  padding: var(--pad) 0 calc(var(--pad) * 2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "c1 c1"
    "c2 c3";
}

@media (min-aspect-ratio: 1/1) {
  .covers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "c1 c2 c3";
  }
}

.cover {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 0;
  min-height: 0;
}

.cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.5s var(--pop-ease);
}

@media (hover: hover) {
  .cover:hover img { transform: scale(1.02); }
}

/* Gallery: kraft paper, with the photos in a staggered collage inside a wide margin */
.gallery {
  position: relative;
  min-height: var(--app-h);
  padding: 56px calc(var(--gutter) + env(safe-area-inset-right)) calc(var(--gutter) + env(safe-area-inset-bottom)) calc(var(--gutter) + env(safe-area-inset-left));
  background: #C9A57A url("../assets/web/textures/kraft.jpg") repeat;
  background-size: 800px auto;
}

.gallery > .section-label {
  position: absolute;
  z-index: 1;
  top: 22px;
  left: calc(var(--pad) + env(safe-area-inset-left));
  color: rgba(31, 27, 14, 0.65);
}

.gallery__grid {
  position: relative;
  z-index: 1;
}

.gallery__item {
  position: absolute;
  margin: 0;
  overflow: hidden;
  background: rgba(31, 27, 14, 0.08);
}

.gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ---------- Product view: a full-screen sheet ---------- */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 100;
}

.sheet__panel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--shop-bg);
  color: var(--shop-ink);
  transform: translateY(100%);
  transition: transform 0.45s var(--pop-ease);
}

.sheet.is-open .sheet__panel { transform: none; }

/* A plain black X, no shape behind it */
.sheet__close {
  position: absolute;
  top: calc(8px + env(safe-area-inset-top));
  right: calc(8px + env(safe-area-inset-right));
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}

.sheet__close svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--black);
  stroke-width: 2.4;
  stroke-linecap: square;
}

.pager {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

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

.pslide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Phones: photos fill the screen and scroll down behind the floating info box */
.pslide__photos {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: calc(var(--info-h, 0px) + var(--pad) * 2);   /* so the last photo can scroll clear of the box */
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}

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

/* Every photo in the same 2:3 frame; photo 1 is the polaroid on its white card */
.pslide__photos img {
  flex: none;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

/* Phones: a compact info box floating over the photos, aligned to the margins */
.pslide__info {
  position: absolute;
  left: calc(var(--pad) + env(safe-area-inset-left));
  right: calc(var(--pad) + env(safe-area-inset-right));
  bottom: calc(var(--pad) + env(safe-area-inset-bottom));
  padding: 12px 14px 14px;
  background: var(--shop-bg);
  color: var(--shop-ink);
}

.pslide__name {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.pslide__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 500;
}

.pslide__nav {
  flex: none;
  display: flex;
  margin-right: 12px;
}

.pslide__arrow {
  width: 30px;
  height: 26px;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 800;
  color: var(--shop-ink);
}

.pslide__arrow--prev { display: none; }   /* phones only get > */

.sizes {
  display: flex;
  gap: 5px;
  width: 72%;
  max-width: 260px;
}

/* Each size button takes a quarter of the row, so 2 sizes look the same as 4 */
.size {
  flex: 0 0 calc((100% - 3 * 5px) / 4);
  height: 26px;
  background: var(--black);
  color: var(--shop-ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.size[aria-checked="true"] {
  background: var(--shop-ink);
  color: var(--black);
}

.pslide__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 24px;
}

.size-hint {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--tag);
}

.btn {
  display: block;
  width: 100%;
  height: 50px;
  background: var(--black);
  color: var(--shop-ink);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pslide__info .btn {
  height: 40px;
  font-size: 12px;
}

/* Desktop: photos in a column on the left, plain dark grey info on the right */
@media (min-aspect-ratio: 1/1) and (min-width: 768px) {
  .pslide { display: flex; }

  .pslide__photos {
    position: static;
    flex: 1;
    min-width: 0;
    align-items: center;
    padding-bottom: 0;
  }

  .pslide__photos img {
    width: auto;
    max-width: 100%;
    height: var(--app-h);
  }

  /* Sits further in from the right edge, with room for the name on one line */
  .pslide__info {
    position: static;
    align-self: center;
    width: clamp(380px, 38vw, 640px);
    padding: 40px 5vw 40px 40px;
    background: none;
  }

  .pslide__nav { margin-right: -8px; }

  .pslide__name { font-size: 22px; }
  .pslide__meta { margin-bottom: 12px; font-size: 14px; }
  .pslide__arrow { width: 36px; height: 30px; font-size: 20px; }
  .pslide__arrow--prev { display: grid; }
  .sizes { gap: 6px; max-width: 300px; }
  .size { flex-basis: calc((100% - 3 * 6px) / 4); height: 30px; font-size: 12px; }
  .pslide__row { min-height: 34px; }
  .size-hint { font-size: 12px; }
  .pslide__info .btn { height: 50px; font-size: 14px; }
}