/* SocialZoom website - the home page, design A: "Carousel".
   The app's real screens on a ring of iPhones in a 3D carousel you can swipe.
   The screens come from site.json, so the ring holds three to eight of them.
   Phone-first: on a phone everything sits in one column, so no text ever
   slides under a phone. From 880px the words sit on the left and the
   carousel on the right. The 3D is CSS only: no WebGL, nothing sticky, and
   the phones are clipped to their own stage, so they never cover text. */

/* ---- Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(36px, 6vw, 72px));
  padding-bottom: clamp(8px, 3vw, 32px);
  overflow: hidden; overflow: clip;
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero-copy { position: relative; z-index: 2; display: grid; gap: 20px; justify-items: start; }
.hero .display { font-size: clamp(2.6rem, 11.5vw, 5.4rem); }
.hero .lede { max-width: 30em; }

/* Phones: the two store buttons share the row, or each takes a full row when
   they don't fit side by side. Flex rather than grid, so the row is never
   wider than one button needs and can't push the page sideways. */
@media (max-width: 879.98px) {
  .hero .stores, .get .stores { gap: 10px; width: 100%; max-width: 420px; }
  .hero .store, .get .store { flex: 1 1 150px; justify-content: center; gap: 8px; min-height: 56px; padding: 0 12px; }
  .hero .store .i, .get .store .i { width: 24px; height: 24px; }
  .hero .store span, .get .store span { font-size: 1rem; white-space: nowrap; }
  .hero .store small, .get .store small { font-size: .66rem; }
}

/* ---- The carousel ---------------------------------------------------------
   carousel.js places each phone on a ring: the one in front faces you, the
   next ones turn away to the sides and step back. */
.carousel { --pw: clamp(186px, 55vw, 290px); position: relative; padding-top: 22px; }
.carousel-stage {
  position: relative;
  height: calc(var(--pw) / .479 + 34px);
  margin-inline: calc(var(--gutter) * -1);
  perspective: 1100px; perspective-origin: 50% 45%;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  cursor: grab;
}
.carousel-stage.is-dragging { cursor: grabbing; }
.carousel-track { position: absolute; inset: 0; transform-style: preserve-3d; }
.carousel-item {
  position: absolute; left: 50%; top: 8px;
  width: var(--pw); margin-left: calc(var(--pw) / -2);
  transform-style: preserve-3d; will-change: transform;
}
.carousel-floor {
  position: absolute; left: 50%; bottom: 2px;
  width: calc(var(--pw) * 1.6); height: 34px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--shadow-rgb) / .26), transparent);
  filter: blur(4px);
}

/* iPhone 17 Pro, front view, in Deep Blue, drawn in CSS around the app's
   own screens. Its sides are thin layers, so the aluminium edge shows when
   a phone turns away. */
.iphone {
  --al: #3b4c6b; --al-light: #93a7cc; --al-dark: #1a2334;
  position: relative; width: 100%; aspect-ratio: .479;
  transform-style: preserve-3d;
}
.iphone > span { position: absolute; }
.iphone-side {
  inset: 0; border-radius: 16.5% / 7.9%;
  background: linear-gradient(90deg, var(--al-dark), var(--al) 22%, var(--al-light) 50%, var(--al) 78%, var(--al-dark));
  transform: translateZ(calc(var(--i) * -2.2px));
}
.iphone-frame {
  inset: 0; border-radius: 16.5% / 7.9%;
  background: linear-gradient(140deg, var(--al-light), var(--al) 20%, var(--al-dark) 48%, var(--al) 76%, var(--al-light));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22);
  transform: translateZ(.5px);
}
.iphone-glass {
  inset: 1.25%; padding: 2.5%; border-radius: 15.5% / 7.4%;
  background: #040406; box-shadow: inset 0 0 0 1.5px #0d0d12;
  transform: translateZ(1px);
}
.iphone-screen { position: relative; display: block; width: 100%; height: 100%; border-radius: 13% / 6.2%; overflow: hidden; background: #F6F2EB; }
.iphone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; pointer-events: none; }
/* Phones at the side are in shadow; carousel.js sets how deep. */
.iphone-shade { position: absolute; inset: 0; background: #0F0E17; opacity: var(--shade, 0); pointer-events: none; }
.iphone-island { position: absolute; left: 50%; top: 2.6%; width: 29.5%; height: 4.1%; transform: translateX(-50%); border-radius: var(--r-pill); background: #000; }
.iphone-glare {
  inset: 1.25%; border-radius: 15.5% / 7.4%; pointer-events: none;
  background: linear-gradient(115deg, rgb(255 255 255 / .16), rgb(255 255 255 / 0) 30%);
  transform: translateZ(2px);
}

/* The tabs: pills on a soft track. They wrap rather than run off the side,
   so the row is tidy even with eight screens and no script. */
.carousel-tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;
  width: fit-content; max-width: 100%;
  margin: 16px auto 0; padding: 4px;
  border-radius: var(--r-pill); background: var(--line);
}
.carousel-tabs button {
  min-height: 40px; padding: 0 clamp(10px, 3.4vw, 16px);
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink-2);
  font-size: .90625rem; font-weight: 620; line-height: 1; cursor: pointer;
  touch-action: manipulation;
  transition: background-color .25s, color .25s;
}
.carousel-tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
@media (hover: hover) {
  .carousel-tabs button[aria-selected="false"]:hover { color: var(--ink); }
}

/* Too many names for the width: carousel.js measures the row, and when it
   would wrap the tabs become dots. The names stay in the page, so a screen
   reader still says "Feed" rather than "button". */
.carousel-tabs.is-dots { flex-wrap: nowrap; gap: 2px; }
.carousel-tabs.is-dots button {
  display: grid; place-items: center;
  width: 28px; min-width: 28px; padding: 0;
  background: transparent;
}
.carousel-tabs.is-dots button span {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.carousel-tabs.is-dots button::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--ink-3);
  transition: background-color .25s, transform .25s var(--ease);
}
.carousel-tabs.is-dots button[aria-selected="true"]::before { background: var(--ink); transform: scale(1.3); }
@media (hover: hover) {
  .carousel-tabs.is-dots button[aria-selected="false"]:hover::before { background: var(--ink-2); }
}

/* The caption card. Every caption shares one grid cell, so the card is as
   tall as the longest and nothing below it moves when the screen turns. */
.carousel-caption {
  display: grid; margin-top: 18px; padding: 20px 20px 22px;
  border-radius: 24px; background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgb(var(--shadow-rgb) / .05), 0 16px 36px -22px rgb(var(--shadow-rgb) / .4);
}
.carousel-panel {
  grid-area: 1 / 1; display: grid; gap: 8px; align-content: start;
  border-radius: 14px;
  transition: opacity .26s var(--ease), transform .26s var(--ease);
}
.carousel-panel:not(.is-current) { visibility: hidden; }
.carousel-caption.is-swapping .carousel-panel { opacity: 0; transform: translateY(6px); }
.carousel-panel:focus-visible { outline-offset: 8px; }
.carousel-panel h2 {
  margin: 0; font-size: clamp(1.4rem, 6.2vw, 2rem); line-height: 1.12;
  letter-spacing: -.028em; font-weight: 650; text-wrap: balance;
}
.carousel-panel p { color: var(--ink-2); font-size: 1rem; line-height: 1.5; text-wrap: pretty; }

/* ---- Section headings ----------------------------------------------------- */
.sec-title { font-size: clamp(1.9rem, 8.6vw, 3.2rem); margin-bottom: clamp(20px, 3vw, 32px); }

/* ---- You set the limits --------------------------------------------------- */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tiles > li { display: grid; }
.tile {
  position: relative; display: grid; align-content: start; gap: 8px;
  min-height: 142px; padding: 16px; border-radius: 22px;
  background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line);
  color: inherit; text-decoration: none;
}
.tile > .i:first-child { width: 26px; height: 26px; margin-bottom: 4px; color: var(--accent); }
.tile h3 { margin: 0; font-size: 1rem; line-height: 1.3; font-weight: 650; letter-spacing: -.01em; }
.tile p { font-size: .875rem; line-height: 1.42; color: var(--ink-2); }
.tile--link { transition: box-shadow .25s, transform .35s var(--ease); }
.tile--link:hover { box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-1); transform: translateY(-2px); }
.tile-go { position: absolute; top: 16px; right: 16px; width: 18px; height: 18px; color: var(--ink-3); transition: transform .3s var(--ease), color .2s; }
.tile--link:hover .tile-go { transform: translate(2px, -2px); color: var(--ink); }

/* The statement: dark in both themes. */
.statement {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 14px; justify-items: start;
  margin-top: clamp(56px, 8vw, 96px); padding: 30px 24px 28px;
  border-radius: 28px; background: #0F0E17; color: #F4F3F8;
}
.statement::before {
  content: ""; position: absolute; z-index: -1; right: -26%; top: -38%; width: 82%; aspect-ratio: 1;
  background: url("/assets/brand/icon-tile.webp") center / cover; border-radius: 50%;
  filter: blur(60px) saturate(1.3); opacity: .55; pointer-events: none;
}
.big {
  margin: 0; font-size: clamp(2.5rem, 12.5vw, 4.8rem); line-height: .96;
  letter-spacing: -.05em; font-weight: 700; text-wrap: balance;
}
/* This band stays dark in both themes, so its colours are written out rather
   than taken from the tokens. They are warm greys now instead of the old
   indigo ones, and the focus ring is the brand yellow: against a dark band
   it is the most visible colour we have, and it never has to be read. */
.big span { display: block; color: #A9A59B; }
.statement p:not(.big) { max-width: 30em; font-size: 1rem; line-height: 1.5; color: #CDC9C0; }
.statement .arrow-link { margin-top: 4px; color: #F7F6F2; border-color: rgb(255 255 255 / .3); }
.statement .arrow-link:hover { border-color: currentColor; }
.statement :focus-visible { outline-color: var(--brand); }
:root[data-theme="dark"] .statement { background: #1B1A27; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .statement { background: #1B1A27; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); }
}

/* ---- Questions ------------------------------------------------------------ */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 14px 0; cursor: pointer;
  font-size: 1.0625rem; line-height: 1.35; font-weight: 620; letter-spacing: -.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .i { width: 22px; height: 22px; color: var(--ink-3); transition: transform .35s var(--ease); }
.faq-item[open] summary .i { transform: rotate(45deg); }
.faq-item .answer { max-width: 40em; padding: 0 0 18px; font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.faq-item .answer a { color: var(--accent); text-underline-offset: 3px; }
.faq-more { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 28px; color: var(--ink-2); }

/* ---- Get the app ---------------------------------------------------------- */
.get { padding-block: clamp(76px, 10vw, 150px) clamp(64px, 9vw, 128px); text-align: center; }
.get-inner { display: grid; justify-items: center; gap: 18px; }
.get-icon {
  width: 84px; height: 84px; border-radius: 22.4%;
  transform: perspective(500px) rotateX(14deg) rotateY(-12deg);
  box-shadow: 0 26px 44px -18px rgb(52 18 170 / .55);
}
.get .h1 { max-width: 11em; }
.get .lede { max-width: 26em; margin-inline: auto; }
.get .stores { justify-content: center; }

/* The limits, the statement and the questions follow each other with one
   gap between them, not two. */
.limits, .faq { padding-bottom: 0; }

/* ---- Wide screens --------------------------------------------------------- */
@media (min-width: 880px) {
  .hero { padding-top: calc(var(--nav-h) + 40px); }
  /* The words are centred on the phones, not on the phones plus the tabs and
     caption under them: the carousel lends its three rows to the hero grid. */
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; }
  .hero-copy { grid-column: 1; grid-row: 1; align-self: center; gap: 26px; padding-top: 40px; }
  .carousel { grid-column: 2; grid-row: 1 / span 3; display: grid; grid-template-rows: subgrid; }
  .hero .display { font-size: clamp(2.6rem, 5.4vw, 4.6rem); }
  .carousel { --pw: clamp(200px, 22vw, 262px); padding-top: 40px; }
  .carousel-stage { margin-inline: 0; }
  .carousel-caption { max-width: 520px; margin-inline: auto; text-align: center; }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .tile { min-height: 190px; padding: 22px; }
  .tile-go { top: 22px; right: 22px; }
  .statement { gap: 18px; padding: 44px 44px 40px; }
  .statement p:not(.big) { font-size: 1.125rem; }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-panel { transition-duration: .01s; }
}