/* Magik: the funky layer.
 *
 * The design system underneath is calm on purpose. This file is where
 * the brand gets to misbehave, and it borrows its rules from the
 * wordmark: MAGIK is hand-drawn and wobbly, so nothing here sits
 * perfectly square either.
 *
 * Three devices:
 *
 *   SCATTER  photographs at different sizes, rotated a degree or three,
 *            overlapping each other and bleeding past the container.
 *            They straighten and lift when you point at them.
 *   ARCH     a top-rounded mask, the shape of a Cartagena doorway, used
 *            for the tall pictures.
 *   STICKER  small rotated labels and cut-out door knockers pinned over
 *            the photo edges, the way you would stick a polaroid down.
 *
 * Everything is transform-based so nothing reflows, and every tilt is
 * removed under prefers-reduced-motion.
 */

/* ============ shapes ============ */
.arch{border-radius:50% 50% var(--r-card) var(--r-card) / 32% 32% var(--r-card) var(--r-card)}
.blob{border-radius:58% 42% 46% 54% / 46% 52% 48% 54%}
.blob-2{border-radius:42% 58% 62% 38% / 54% 44% 56% 46%}

/* ============ scatter ============
   A dense pack rather than a grid. CSS columns let pictures of very
   different heights sit tight against each other, which is what makes
   it read as a pile someone dropped on a table. */
.scatter{
  position:relative;
  margin-inline:calc(-1 * clamp(0px, 3vw, 54px));
  columns:3; column-gap:clamp(14px,1.8vw,26px);
}
.sc{
  position:relative; margin:0 0 clamp(14px,1.8vw,26px);
  break-inside:avoid; overflow:visible;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.sc > .ph,.sc > a > .ph{
  border-radius:var(--r-card); overflow:hidden; display:block;
  box-shadow:0 2px 4px -2px rgba(var(--sh),.2), 0 26px 44px -26px rgba(var(--sh),.65);
  border:3px solid color-mix(in srgb, var(--surface) 92%, transparent);
}
.sc.arch > .ph,.sc.arch > a > .ph{border-radius:inherit}

/* the tilts. none of them equal, none of them more than three degrees */
.sc.t1{transform:rotate(-2.2deg)}
.sc.t2{transform:rotate(1.6deg)}
.sc.t3{transform:rotate(2.8deg)}
.sc.t4{transform:rotate(-1.3deg)}
.sc.t5{transform:rotate(2.2deg)}
.sc:hover{transform:rotate(0deg) translateY(-8px) scale(1.015); z-index:6}

/* nudge a picture sideways so the columns interlock instead of aligning */
.sc.over-l{margin-left:clamp(-40px,-3vw,-12px)}
.sc.over-r{margin-right:clamp(-40px,-3vw,-12px)}
.sc.lift{z-index:4}

/* ============ stickers ============ */
.sticker{
  position:absolute; z-index:7; display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px; border-radius:999px; white-space:nowrap;
  font-family:"Lexend",sans-serif; font-size:13.5px; font-weight:600;
  background:var(--surface); color:var(--ink);
  border:1.5px solid color-mix(in srgb, var(--ink) 12%, transparent);
  box-shadow:0 10px 20px -12px rgba(var(--sh),.7);
}
.sticker.ink{background:var(--ink); color:#fff; border-color:transparent}
.sticker.pop{
  background:var(--btnbg); color:var(--onacc); border-color:transparent;
  box-shadow:0 12px 24px -12px var(--ac);
}
.sticker .ic{width:1.05em; height:1.05em}
.st-tl{left:-10px;  top:-14px;    transform:rotate(-5deg)}
.st-tr{right:-12px; top:-16px;    transform:rotate(4deg)}
.st-bl{left:-14px;  bottom:-16px; transform:rotate(3deg)}
.st-br{right:-10px; bottom:-18px; transform:rotate(-4deg)}

/* the door knockers of the old city, cut out and pinned on */
.knock{
  position:absolute; z-index:8; width:clamp(64px,7vw,104px); aspect-ratio:1;
  border-radius:50%; overflow:hidden; pointer-events:none;
  border:4px solid var(--surface);
  box-shadow:0 14px 26px -14px rgba(var(--sh),.75);
}
.knock img{width:100%; height:100%; object-fit:cover; display:block}
.kn-1{right:-24px; bottom:16%;  transform:rotate(-9deg)}
.kn-2{right:-22px; top:10%;     transform:rotate(7deg)}
.kn-3{right:12%;   bottom:-32px; transform:rotate(-5deg)}

/* ============ big display numbers behind the pictures ============ */
.ghost-n{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  font-family:"Bricolage Grotesque",sans-serif; font-variation-settings:"wdth" 86;
  font-weight:800; line-height:.78; letter-spacing:-.06em;
  font-size:clamp(120px,20vw,300px);
  color:color-mix(in srgb, var(--ac) 26%, transparent);
}

/* ============ the marquee ============ */
.marquee{
  position:relative; overflow:hidden; padding-block:clamp(16px,2.4vw,30px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee-track{display:flex; gap:16px; width:max-content; animation:slide 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)}}
.marquee figure{
  margin:0; flex:none; width:clamp(190px,22vw,290px);
  border-radius:var(--r-card); overflow:hidden;
  border:3px solid color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow:0 18px 34px -22px rgba(var(--sh),.6);
}
.marquee figure:nth-child(odd){transform:rotate(-1.6deg)}
.marquee figure:nth-child(even){transform:rotate(1.4deg)}
.marquee .ph{aspect-ratio:4/3}

/* ============ the story steps ============ */
.story{display:grid; gap:clamp(56px,9vw,130px)}
.story-step{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,5vw,72px); align-items:center; position:relative;
}
.story-step:nth-child(even) .story-art{order:-1}
.story-copy{position:relative; z-index:2}
.story-copy .step-n{
  display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%;
  font-family:"Bricolage Grotesque",sans-serif; font-variation-settings:"wdth" 86;
  font-weight:800; font-size:16px; color:#fff; background:var(--btnbg);
  box-shadow:var(--btnsh); margin-bottom:16px; transform:rotate(-6deg);
}
.story-copy h3{font-size:clamp(24px,3.2vw,38px); margin-bottom:12px}
.story-copy p{color:var(--muted); font-size:16.5px; max-width:42ch}
.story-art{position:relative; min-height:min(74vw,420px)}

/* a picture pinned at an angle with a second one peeking behind it */
.pin{position:absolute; border-radius:var(--r-card); overflow:hidden;
  border:3px solid color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow:0 3px 6px -3px rgba(var(--sh),.25), 0 30px 50px -28px rgba(var(--sh),.7);
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.pin:hover{transform:rotate(0) translateY(-6px) scale(1.02); z-index:5}
.pin-a{left:0;   top:0;    width:74%; aspect-ratio:4/3;  transform:rotate(-2.6deg); z-index:2}
.pin-b{right:0;  bottom:0; width:52%; aspect-ratio:1;    transform:rotate(3.4deg);  z-index:3}
.pin .ph{width:100%; height:100%}

/* the phone, tilted, used where the story is about the product itself */
.story-art .phone{
  position:absolute; right:4%; top:50%; width:min(250px,52%);
  transform:translateY(-50%) rotate(3.2deg); z-index:4;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.story-art .phone:hover{transform:translateY(-50%) rotate(0) scale(1.02)}

@media (prefers-reduced-motion:reduce){
  .sc,.pin,.knock,.sticker,.story-copy .step-n,
  .marquee figure,.story-art .phone{transform:none !important}
  .marquee-track{animation:none}
  .sc:hover,.pin:hover{transform:none !important}
}

@media (max-width:900px){
  .scatter{margin-inline:0; columns:2}
  .sc.over-l,.sc.over-r{margin-inline:0}
  .story-step{grid-template-columns:1fr; gap:30px}
  .story-step:nth-child(even) .story-art{order:0}
  .story-art{min-height:min(96vw,400px)}
  .knock{width:64px}
  .kn-1{right:-12px} .kn-2{right:-12px} .kn-3{right:8%}
}
@media (max-width:560px){
  .scatter{columns:1}
  .sticker{font-size:12px; padding:7px 13px}
}

/* the tracking screen inside the story phone */
.p-track{position:relative; border-radius:13px; overflow:hidden; aspect-ratio:1/1}
.p-track img{width:100%; height:100%; object-fit:cover; display:block}
.p-eta{
  position:absolute; left:7px; bottom:7px; display:grid; gap:0;
  padding:5px 10px; border-radius:11px; line-height:1.15;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 4px 10px -5px rgba(var(--sh),.6);
}
.p-eta b{font-size:12px; font-weight:700}
.p-eta i{font-style:normal; font-size:7px; color:var(--muted)}
.p-crew{display:flex; align-items:center; gap:6px}
.p-crew img{width:22px; height:22px; border-radius:50%; object-fit:cover; flex:none}
.p-crew span{display:grid; line-height:1.2; min-width:0}
.p-crew b{font-size:9px}
.p-crew i{font-style:normal; font-size:7px; color:var(--muted)}

/* ============ hero: copy left, slider right ============ */
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(30px,4.5vw,64px); align-items:center;
}
/* the copy column outranks the slide beside it: the search panels
   open downward and to the right, across it */
.hero-grid .hero-inner{max-width:none; position:relative; z-index:3}

.slider{
  position:relative; border-radius:var(--r-card); overflow:hidden;
  border:3px solid color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow:0 3px 6px -3px rgba(var(--sh),.25), 0 34px 56px -30px rgba(var(--sh),.7);
  transform:rotate(1.6deg); cursor:grab; touch-action:pan-y;
}
.slider:active{cursor:grabbing}
.slider:focus-visible{outline:3px solid var(--ac); outline-offset:4px}
.slider-track{
  display:flex; width:100%;
  transition:transform .72s cubic-bezier(.22,.61,.36,1);
}
.slide{margin:0; flex:0 0 100%; position:relative}
.slide .ph{aspect-ratio:4/5}
.slide figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:22px 22px 24px; color:#fff;
  background:linear-gradient(to top,
    color-mix(in srgb, var(--ink) 84%, transparent) 0%,
    color-mix(in srgb, var(--ink) 52%, transparent) 42%,
    transparent 92%);
}
.slide figcaption b{
  display:block; font-family:"Bricolage Grotesque",sans-serif;
  font-variation-settings:"wdth" 86; font-weight:700; letter-spacing:-.015em;
  font-size:clamp(19px,2.1vw,25px); line-height:1.12; margin-bottom:6px;
}
.slide figcaption i{
  font-style:normal; font-size:14px; line-height:1.5;
  color:color-mix(in srgb, #fff 84%, transparent); display:block;
}
.slider-dots{
  position:absolute; right:16px; top:16px; z-index:3;
  display:flex; gap:7px;
}
.slider-dots button{
  width:9px; height:9px; padding:0; border-radius:50%; cursor:pointer;
  border:none; background:color-mix(in srgb, #fff 55%, transparent);
  box-shadow:0 1px 3px rgba(0,0,0,.35); transition:width .3s, background .3s;
}
.slider-dots button.on{width:24px; border-radius:99px; background:#fff}
.slider-dots button:focus-visible{outline:2px solid #fff; outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .slider{transform:none}
  .slider-track{transition:none}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:34px}
  .slider{transform:none}
  .slide .ph{aspect-ratio:4/3}
}

/* In the hero the search sits in half the page, so it wraps to two rows
   there regardless of viewport width: five fields in ~560px is unreadable. */
.hero-grid .searchbar{
  grid-template-columns:1fr 1fr; border-radius:26px; padding:8px; gap:6px;
}
.hero-grid .sb-field{border-radius:18px}
/* Same two as the folded bar in magik.css, and for the same reasons: a
   divider hung on the seam of a row is a stray tick once the fields are
   stacked, and border-radius:50% given a full row of width draws an
   ellipse rather than a disc. This bar wraps at EVERY width, so it needs
   both outside a media query. */
.hero-grid .sb-field + .sb-field::before{display:none}
.hero-grid .sb-go{
  grid-column:1 / -1; width:100%; height:52px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
}
.hero-grid .sb-go-t{display:inline; font-size:16px; font-weight:600}