/* Home page "Focus with Tock" section (focus timer + Tock's Wardrobe).
   Everything is scoped under .section--tock so nothing here can leak into
   the other home sections. The phones use the shared landing chassis
   (.phone-mock-fluid > .phone-mock__frame, sized by phone-mock-fluid.css);
   the home page does not load landing.css, so the frame's visual rules are
   mirrored here verbatim, scoped. Width/height come from phone-mock-fluid.css
   (19.5:9, the hero ratio). */

.section--tock {
  --tock-cyan: #6fe7ff;
  --tock-green: #74e6a6;
  --tock-gold: #f4cf6b;
  --tock-orange: #ff9c5e;
  --tock-pink: #ff5d87;
  position: relative;
}

/* ---------- Phone chassis (mirrors campaign/landing.css .phone-mock__frame) ---------- */

.section--tock .phone-mock__frame {
  --workflow-phone-shell-padding: calc(var(--workflow-phone-height) * 0.013636);
  --workflow-phone-shell-radius: calc(var(--workflow-phone-height) * 0.122727);
  --workflow-phone-screen-radius: calc(var(--workflow-phone-height) * 0.104545);
  --workflow-phone-overlay-inset: calc(var(--workflow-phone-shell-padding) * 0.333333);
  --workflow-phone-island-top: calc(var(--workflow-phone-height) * 0.0275);
  --workflow-phone-island-width: calc(var(--workflow-phone-width) * 0.433333);
  --workflow-phone-island-height: calc(var(--workflow-phone-height) * 0.021875);
  --workflow-phone-button-width: calc(var(--workflow-phone-height) * 0.0068);
  --workflow-phone-volume-top: calc(var(--workflow-phone-height) * 0.245455);
  --workflow-phone-volume-height: calc(var(--workflow-phone-height) * 0.081818);
  --workflow-phone-volume-gap: calc(var(--workflow-phone-height) * 0.031818);
  --workflow-phone-power-top: calc(var(--workflow-phone-height) * 0.345455);
  --workflow-phone-power-height: calc(var(--workflow-phone-height) * 0.136364);
  --phone-side-offset: calc(var(--workflow-phone-shell-padding) * -1.5);
  --phone-button-width: var(--workflow-phone-button-width);
  --phone-volume-top: var(--workflow-phone-volume-top);
  --phone-volume-height: var(--workflow-phone-volume-height);
  --phone-volume-gap: var(--workflow-phone-volume-gap);
  --phone-power-top: var(--workflow-phone-power-top);
  --phone-power-height: var(--workflow-phone-power-height);
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  max-width: 100%;
  padding: var(--workflow-phone-shell-padding);
  border: 1px solid rgb(56, 64, 80);
  border-radius: var(--workflow-phone-shell-radius);
  background: linear-gradient(180deg, #11141b, #05060a 16%, #010102 58%, #07090e);
  box-shadow:
    0 0 0 1px rgb(18, 23, 34),
    0 0 14px color-mix(in srgb, var(--purple) 10%, transparent),
    0 34px 42px rgba(4, 10, 24, 0.34),
    0 10px 16px rgba(4, 10, 24, 0.14),
    inset 0 0 0 1px rgba(0, 0, 0, 0.5),
    inset 0 -12px 20px rgba(0, 0, 0, 0.22);
}

.section--tock .phone-mock__frame::before {
  content: "";
  position: absolute;
  top: var(--workflow-phone-island-top);
  left: 50%;
  z-index: 30;
  width: var(--workflow-phone-island-width);
  height: calc(var(--workflow-phone-island-height) * 2);
  border-radius: 999px;
  background:
    radial-gradient(circle at 72% 50%, rgba(62, 76, 104, 0.92) 0 1.1px, rgba(8, 10, 16, 0.98) 1.2px),
    linear-gradient(180deg, rgba(20, 23, 31, 0.98), rgba(5, 7, 12, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 0 rgba(255, 255, 255, 0.03);
  transform: translateX(-50%);
}

.section--tock .phone-mock__frame::after {
  content: "";
  position: absolute;
  inset: var(--workflow-phone-overlay-inset);
  z-index: 2;
  border: 1px solid rgba(0, 0, 0, 0.72);
  border-radius: calc(var(--workflow-phone-shell-radius) - var(--workflow-phone-overlay-inset));
  background: transparent;
  box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px rgba(0, 0, 0, 0.42);
  pointer-events: none;
}

.section--tock .phone-mock__screen {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--workflow-phone-screen-radius);
  background: #030711;
  box-shadow:
    0 0 0 1px rgba(7, 11, 18, 0.88),
    0 0 0 2px rgba(255, 255, 255, 0.03),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 0 18px rgba(0, 0, 0, 0.24);
}

.section--tock .phone-mock__screen picture,
.section--tock .phone-mock__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Section title icon, matching the other home titles (section-icons.css). */
main #tock-title { --section-icon: url("/campaign/nav-icons/clock.webp"); }

main #tock-title::before {
  content: "";
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  background: var(--blue, currentColor);
  box-shadow: none;
  -webkit-mask: var(--section-icon) center / contain no-repeat;
  mask: var(--section-icon) center / contain no-repeat;
}

@media (max-width: 640px) {
  main #tock-title { align-items: flex-start; }
  main #tock-title::before { width: 32px; height: 32px; flex-basis: 32px; }
}

/* ---------- Card ---------- */

.section--tock .tock {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  box-sizing: border-box;
}

.section--tock .tock-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas: "copy stage";
  align-items: center;
  gap: clamp(24px, 3vw, 40px) clamp(20px, 3.4vw, 48px);
  padding: clamp(18px, 2.6vw, 34px);
  border: 1px solid rgba(111, 231, 255, 0.22);
  border-radius: 22px;
  background:
    radial-gradient(560px 300px at 82% 18%, rgba(111, 231, 255, 0.12), transparent 64%),
    radial-gradient(520px 300px at 8% 96%, rgba(255, 93, 135, 0.12), transparent 62%),
    radial-gradient(420px 240px at 40% 0%, rgba(164, 123, 255, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(12, 20, 42, 0.92), rgba(7, 13, 28, 0.96));
  box-shadow: var(--glow), 0 26px 70px -20px rgba(4, 8, 22, 0.7);
}

/* Clock-face orbit behind the phones: a dial of 60 ticks and a hand that
   follows the Tock clock's minute hand (--tock-hand, set by tock-section.js). */
.section--tock .tock-orbit {
  position: absolute;
  z-index: -1;
  top: clamp(40px, 6vw, 70px);
  right: clamp(-120px, -6vw, -40px);
  width: clamp(420px, 46vw, 620px);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0.85;
}

.section--tock .tock-orbit__ring {
  position: absolute;
  border-radius: 50%;
}

.section--tock .tock-orbit__ring--outer {
  inset: 0;
  background: repeating-conic-gradient(from -0.6deg, rgba(111, 231, 255, 0.34) 0 1.2deg, transparent 1.2deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent 0 66%, #000 66.4% 70%, transparent 70.4%);
  mask: radial-gradient(circle, transparent 0 66%, #000 66.4% 70%, transparent 70.4%);
}

.section--tock .tock-orbit__ring--inner {
  inset: 22%;
  border: 1px solid rgba(164, 123, 255, 0.22);
  box-shadow: 0 0 60px rgba(111, 231, 255, 0.08), inset 0 0 60px rgba(164, 123, 255, 0.08);
}

.section--tock .tock-orbit__hand {
  position: absolute;
  left: calc(50% - 1px);
  bottom: 50%;
  width: 2px;
  height: 34%;
  border-radius: 2px;
  background: linear-gradient(0deg, rgba(255, 93, 135, 0), rgba(255, 93, 135, 0.7));
  transform-origin: 50% 100%;
  transform: rotate(var(--tock-hand, 0deg));
  transition: transform var(--tock-sweep, 900ms) cubic-bezier(0.45, 0, 0.2, 1);
}

.section--tock .tock-orbit__hand::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tock-pink);
  box-shadow: 0 0 14px rgba(255, 93, 135, 0.6);
  transform: translateX(-50%);
}

/* ---------- Copy ---------- */

.section--tock .tock-copy {
  grid-area: copy;
  display: grid;
  align-content: start;
  gap: 18px;
  min-width: 0;
}

.section--tock .tock-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--tock-cyan);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.section--tock .tock-eyebrow__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tock-cyan);
  box-shadow: 0 0 0 4px rgba(111, 231, 255, 0.14), 0 0 14px rgba(111, 231, 255, 0.6);
  animation: tock-pulse 2s ease-in-out infinite;
}

@keyframes tock-pulse {
  50% { box-shadow: 0 0 0 7px rgba(111, 231, 255, 0.04), 0 0 18px rgba(111, 231, 255, 0.8); }
}

.section--tock .tock-headline {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.8rem, 3.3vw, 2.6rem);
  line-height: 1.1;
}

.section--tock .tock-lede {
  margin: 0;
  max-width: 54ch;
  color: var(--muted);
  font-size: clamp(1rem, 1.25vw, 1.08rem);
  line-height: 1.6;
}

/* ---------- Stage (tabs + phone deck) ---------- */

.section--tock .tock-stage {
  --tock-phone-w: clamp(220px, 21vw, 280px);
  grid-area: stage;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 18px;
  min-width: 0;
}

.section--tock .tock-stage__tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  width: min(420px, 100%);
  padding: 4px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
}

.section--tock .tock-stage__tab {
  min-height: 36px;
  padding: 8px 6px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
}

.section--tock .tock-stage__tab:hover {
  color: var(--text);
}

.section--tock .tock-stage__tab.is-active {
  border-color: rgba(111, 231, 255, 0.55);
  background: rgba(14, 40, 58, 0.85);
  color: var(--text);
  box-shadow: 0 0 18px rgba(111, 231, 255, 0.18);
}

.section--tock .tock-stage__deck {
  position: relative;
  display: grid;
  width: 100%;
  justify-items: center;
  perspective: 1400px;
  overflow-x: clip;
  padding: 8px 0 4px;
}

.section--tock .tock-shot {
  grid-area: 1 / 1;
  width: var(--tock-phone-w);
  margin: 0;
  transition: transform 640ms cubic-bezier(0.16, 1, 0.3, 1), opacity 420ms ease, filter 420ms ease;
  will-change: transform;
}

.section--tock .tock-shot[data-pos="center"] {
  z-index: 3;
  transform: none;
}

.section--tock .tock-shot[data-pos="left"],
.section--tock .tock-shot[data-pos="right"] {
  z-index: 1;
  opacity: 0.5;
  filter: saturate(0.7) brightness(0.7);
  cursor: pointer;
}

.section--tock .tock-shot[data-pos="left"] {
  transform: translateX(-56%) scale(0.78) rotateY(18deg);
}

.section--tock .tock-shot[data-pos="right"] {
  transform: translateX(56%) scale(0.78) rotateY(-18deg);
}

.section--tock .tock-shot[data-pos="hidden"] {
  z-index: 0;
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
  visibility: hidden;
}

/* ---------- Clock control + one panel per carousel screen ---------- */

.section--tock .tock-control {
  display: grid;
  justify-items: center;
  gap: 8px;
  justify-self: start;
}

/* The Tock clock. Its four marks are the four phones (12, 3, 6, 9 o'clock);
   the minute hand sweeps to each one as the carousel turns, and dragging the
   hand turns the carousel. */
.section--tock .tock-clock {
  --size: clamp(132px, 12vw, 156px);
  position: relative;
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(111, 231, 255, 0.45);
  background:
    radial-gradient(circle at 50% 40%, rgba(111, 231, 255, 0.1), transparent 62%),
    rgba(6, 12, 28, 0.9);
  box-shadow: 0 0 0 6px rgba(111, 231, 255, 0.05), 0 0 34px rgba(111, 231, 255, 0.14), inset 0 0 22px rgba(0, 0, 0, 0.5);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.section--tock .tock-clock.is-dragging { cursor: grabbing; }

.section--tock .tock-clock:focus-visible {
  outline: 2px solid var(--tock-cyan);
  outline-offset: 4px;
}

.section--tock .tock-clock__ticks {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: repeating-conic-gradient(from -1deg, rgba(237, 245, 255, 0.3) 0 2deg, transparent 2deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 0 84%, #000 85%);
  mask: radial-gradient(circle, transparent 0 84%, #000 85%);
}

.section--tock .tock-clock__mark {
  --a: 0deg;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: rgba(237, 245, 255, 0.28);
  transform: rotate(var(--a)) translateY(calc(var(--size) * -0.34)) rotate(calc(var(--a) * -1));
  transition: background 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

.section--tock .tock-clock__mark[data-tock-mark="1"] { --a: 90deg; }
.section--tock .tock-clock__mark[data-tock-mark="2"] { --a: 180deg; }
.section--tock .tock-clock__mark[data-tock-mark="3"] { --a: 270deg; }

.section--tock .tock-clock__mark.is-active {
  background: var(--tock-pink);
  box-shadow: 0 0 12px rgba(255, 93, 135, 0.7);
}

.section--tock .tock-clock__hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  border-radius: 999px;
  transform-origin: 50% 100%;
  transition: transform var(--tock-sweep, 900ms) cubic-bezier(0.45, 0, 0.2, 1);
}

.section--tock .tock-clock__hand--minute {
  width: 4px;
  height: 40%;
  margin-left: -2px;
  background: linear-gradient(0deg, var(--tock-cyan), #eaffff);
  box-shadow: 0 0 10px rgba(111, 231, 255, 0.55);
  transform: rotate(var(--tock-hand, 0deg));
}

.section--tock .tock-clock__hand--hour {
  width: 6px;
  height: 26%;
  margin-left: -3px;
  background: linear-gradient(0deg, #a47bff, #d9c8ff);
  transform: rotate(calc(var(--tock-hand, 0deg) / 12));
}

.section--tock .tock-clock.is-dragging .tock-clock__hand,
.section--tock.is-dragging .tock-orbit__hand {
  transition: none;
}

.section--tock .tock-clock__pin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--tock-pink);
  box-shadow: 0 0 10px rgba(255, 93, 135, 0.6);
}

.section--tock .tock-clock__hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Every panel shares one grid cell, so the stack (and the card) is always as
   tall as the tallest panel: the card height never changes between screens. */
.section--tock .tock-panels {
  display: grid;
}

.section--tock .tock-panel,
.section--tock .tock-panel[hidden] {
  grid-area: 1 / 1;
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  transition: opacity 360ms ease, transform 360ms ease, visibility 0s linear 0s;
}

.section--tock .tock-panel[hidden] {
  visibility: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 240ms ease, transform 240ms ease, visibility 0s linear 240ms;
}

.section--tock .tock-panel__title {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.25rem, 1.9vw, 1.5rem);
}

.section--tock .tock-panel__text {
  margin: 0;
  max-width: 44ch;
  color: var(--muted);
  font-size: clamp(1rem, 1.25vw, 1.08rem);
  line-height: 1.6;
}

/* Catalogue covers, styled after the app's newsstand. */
.section--tock .tock-covers {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.section--tock .tock-cover {
  --cover: var(--tock-cyan);
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  padding: 8px 6px 10px;
  border: 1px solid color-mix(in srgb, var(--cover) 30%, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--cover) 18%, transparent), transparent 46%),
    linear-gradient(180deg, rgba(30, 34, 58, 0.9), rgba(14, 16, 30, 0.95));
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.8);
}

.section--tock .tock-cover__art {
  width: 100%;
  max-width: 64px;
  height: auto;
  aspect-ratio: 1;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
}

.section--tock .tock-cover__name {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
}

.section--tock .tock-cover--classified {
  border-style: dashed;
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .section--tock .tock-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "copy"
      "stage";
  }

  .section--tock .tock-orbit {
    top: auto;
    bottom: 22%;
    right: 50%;
    width: min(560px, 120vw);
    transform: translateX(50%);
    opacity: 0.6;
  }
}

@media (min-width: 641px) {
  /* Clock beside the panel text on wider screens. */
  .section--tock .tock-copy {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(18px, 2.4vw, 30px);
    align-items: start;
  }

  .section--tock .tock-eyebrow,
  .section--tock .tock-headline {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .section--tock .tock-card {
    padding: 16px 14px 20px;
    border-radius: 18px;
  }

  .section--tock .tock-control {
    justify-self: center;
  }

  .section--tock .tock-panel {
    justify-items: center;
    text-align: center;
  }

  .section--tock .tock-stage {
    --tock-phone-w: min(58vw, 232px);
  }

  .section--tock .tock-shot[data-pos="left"] {
    transform: translateX(-50%) scale(0.74) rotateY(16deg);
  }

  .section--tock .tock-shot[data-pos="right"] {
    transform: translateX(50%) scale(0.74) rotateY(-16deg);
  }

  .section--tock .tock-stage__tab {
    font-size: 0.76rem;
    padding: 8px 2px;
  }

  .section--tock .tock-covers {
    gap: 5px;
  }

  .section--tock .tock-cover {
    padding: 6px 3px 8px;
  }

  .section--tock .tock-cover__name {
    font-size: 0.68rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section--tock .tock-eyebrow__dot {
    animation: none;
  }

  .section--tock .tock-shot,
  .section--tock .tock-panel,
  .section--tock .tock-panel[hidden],
  .section--tock .tock-clock__hand,
  .section--tock .tock-clock__mark,
  .section--tock .tock-orbit__hand {
    transition: none;
  }
}

/* App-blocking footnote. */
.section--tock .tock-asterisk { color: inherit; text-decoration: none; }
.section--tock .tock-footnote { margin: 0; color: var(--muted, rgba(255,255,255,.62)); font-size: 12.5px; }