/* ==========================================================================
   sections/import-sharing.css · owner: import-sharing-agent
   #import  (DESIGN_SPEC §7)  — last block of .band--dark
   #sharing (DESIGN_SPEC §8)  — first block of .band--light (#features)
   Motion: motion.md §5.3 (radar rings), §6.1 (phone parallax), §6.2 (map loop,
   notification reveal). JS lives in sections/import-sharing.js.
   Breakpoints: tablet (max-width: 1199.98px) · phone (max-width: 789.98px)
   ========================================================================== */

/* ==========================================================================
   1. IMPORT
   ========================================================================== */
#import {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10);
  width: 100%;
  max-width: var(--container-max);  /* 1000 at 1440, full width at 820 / 390 */
  margin-inline: auto;
}

/* ---- graphic block: 100% × 220 ---- */
.import__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 220px;
}

/* 300×300 ring wrapper, horizontally centered, top-aligned with the block
   (ring center sits 150px below the block top; it overflows the 220 block
   and is hidden below by .import__cover) */
.import__rings {
  position: absolute;
  top: 0;
  left: 50%;
  width: 300px;
  height: 300px;
  margin-left: -150px;
  pointer-events: none;
}

.import__ring {
  --import-ring-r0: 0deg;
  position: absolute;
  color: var(--color-divider-vert);
  transform: rotate(var(--import-ring-r0));
  animation: import-ring-spin var(--dur-radar) var(--ease-linear) infinite;
  will-change: transform;
}
.import__ring--1 { inset: 58px; }                                   /* 184 */
.import__ring--2 { inset: 28px; --import-ring-r0: 45deg; }          /* 244, base rotation 45° */
.import__ring--3 { inset: -2px; }                                   /* 304 */

.import__ring-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.import__ring-line circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

/* 4 small generic plane glyphs at N / E / S / W, flying clockwise along the ring */
.import__ring-icon {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  background: var(--color-text-inverse-50);
  -webkit-mask: url(../assets/placeholders/icons/leaf.svg) center / contain no-repeat;
  mask: url(../assets/placeholders/icons/leaf.svg) center / contain no-repeat;
  opacity: .6;
}
.import__ring-icon--n { top: 0;    left: 50%;  transform: rotate(90deg); }
.import__ring-icon--e { top: 50%;  left: 100%; transform: rotate(180deg); }
.import__ring-icon--s { top: 100%; left: 50%;  transform: rotate(270deg); }
.import__ring-icon--w { top: 50%;  left: 0;    transform: rotate(0deg); }

@keyframes import-ring-spin {
  from { transform: rotate(var(--import-ring-r0)); }
  to   { transform: rotate(calc(var(--import-ring-r0) + 360deg)); }
}

/* fade overlay 100% × 220 */
.import__fade {
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  background: var(--grad-media-fade);
  pointer-events: none;
}

/* center graphic 285×142, top 82, centered */
.import__center {
  position: absolute;
  top: 82px;
  left: 50%;
  z-index: var(--z-raised);
  width: 285px;
  height: auto;
  aspect-ratio: 2.007 / 1;
  transform: translateX(-50%);
}

/* ---- text block: column centered, gap 20, padding 0 24 ---- */
.import__text {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-20);
  width: 100%;
  padding: 0 var(--gutter);
  text-align: center;
}

/* dark cover that hides the lower half of the rings behind the text */
.import__cover {
  position: absolute;
  top: -19px;
  left: 0;
  right: 0;
  height: 170px;
  z-index: var(--z-base);
  background: var(--color-bg-dark);
  pointer-events: none;
}

.import__title,
.import__lead,
.import__actions {
  position: relative;
  z-index: var(--z-raised);
}

.import__title {
  width: 100%;
  max-width: var(--text-w-centered-h3);
  color: var(--color-text-inverse);
}

.import__lead {
  width: 100%;
  max-width: var(--text-w-centered-lead);
  color: var(--color-text-inverse-60);
}

.import__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-20);
  width: 499px;
  max-width: 100%;
}

/* white pill 198×44 */
.import__pill {
  height: 44px;
  padding: 12px 18px 12px 20px;
  gap: var(--space-8);
  border-radius: var(--radius-40);
  background: var(--color-bg);
  color: var(--color-text);
  transition: background-color var(--t-spring);
}
.import__pill::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: inherit;
  pointer-events: none;
}
.import__pill:hover {
  background: var(--color-btn-light-hover);
}
.import__pill-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}
.import__pill-icon svg {
  width: 12px;
  height: 18px;
}

/* ==========================================================================
   2. SHARING
   ========================================================================== */
#sharing {
  --sharing-q: 0;               /* 1 − p, written by import-sharing.js (0 = resting spot) */
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--container-max);
  overflow: hidden;
}

/* ---- header (§2.5 section header) ---- */
.sharing__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--section-header-gap);
  padding-bottom: var(--section-header-pb);
}
.sharing__title {
  max-width: var(--text-w-feature);
  color: var(--color-text);
}
.sharing__lead {
  max-width: var(--text-w-feature);
  color: var(--color-text-65);
}

/* ---- stack ---- */
.sharing__stack {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  width: 100%;
}

/* ---- wide card 1000×480 ---- */
.sharing__wide {
  position: relative;
  width: 100%;
  height: 480px;
  border-radius: var(--radius-20);
  background: var(--color-surface);
  overflow: hidden;
}
.sharing__wide-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  height: 100%;
  padding: var(--card-pad);
}
.sharing__wide-title,
.sharing__wide-body {
  position: relative;
  z-index: 2;
}
.sharing__wide-title {
  max-width: 40%;
  color: var(--color-text-ink-green);
}
.sharing__wide-body {
  max-width: 38%;
  color: var(--color-text-body-green);
}

/* ---- tilted phones ----
   Box: 477 wide, ratio 0.68732 (694 tall); transform-origin center;
   static translate(0, −50%) rotate(−30deg); the parallax adds
   (dx, dy) · q on top, q = 1 − p (motion.md §6.1).                        */
.sharing__phone {
  --sharing-dx: 0px;
  --sharing-dy: 0px;
  --sharing-phone-r: 44px;       /* device corner (the spec's radius 60 is on the full-size placeholder) */
  position: absolute;
  z-index: var(--z-raised);
  width: 477px;
  aspect-ratio: 0.68732 / 1;
  transform-origin: 50% 50%;
  transform:
    translate(calc(var(--sharing-q) * var(--sharing-dx)), calc(-50% + var(--sharing-q) * var(--sharing-dy)))
    rotate(-30deg);
  will-change: transform;
  pointer-events: none;
}
.sharing__phone--a { top: 110.39px; left: 685px; --sharing-dx: -48px; --sharing-dy: -120px; }
.sharing__phone--b { top: 422.39px; left: 508px; --sharing-dx: 53px;  --sharing-dy: 120px; }

/* The drawn device does not fill its box: on the reference both renders place a
   ~260×540 phone at the box's top-left (x 25, y 25 of 477×694) and leave the rest
   transparent. Phone A's top and phone B's bottom fall outside the card. */
.sharing__device {
  position: absolute;
  top: 3.6%;
  left: 5.2%;
  width: 54.5%;
  height: 77.8%;
  padding: 1.8%;
  border-radius: var(--sharing-phone-r);
  background: var(--color-bg-dark);
  box-shadow: 0 24px 48px rgba(0, 0, 0, .16), 0 4px 12px rgba(0, 0, 0, .08);
}
.sharing__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--sharing-phone-r) - 8px);
  background: var(--grad-placeholder);
  overflow: hidden;
}
.sharing__notch {
  position: absolute;
  top: 2.4%;
  left: 50%;
  z-index: 2;
  width: 28%;
  height: 4.4%;
  border-radius: var(--radius-pill);
  background: var(--color-bg-dark);
  transform: translateX(-50%);
}

/* white bottom sheet with generic rows */
.sharing__sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 5%;
  padding: 7% 7% 0;
  border-radius: 18px 18px 0 0;
  background: var(--color-bg);
  box-shadow: var(--shadow-ring-02);
}
.sharing__sheet--full { top: 18%; gap: 4.5%; }
.sharing__sheet--peek { top: 74%; gap: 14%; }

.sharing__bar {
  display: block;
  flex: none;
  height: 9px;
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
}
.sharing__bar--head { width: 58%; height: 12px; background: var(--color-progress-track); }
.sharing__bar--search { width: 100%; height: 18px; background: var(--color-border); }

.sharing__row {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8%;
}
.sharing__row i {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--grad-placeholder);
}
.sharing__row b {
  flex: 1;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
  box-shadow: 0 14px 0 -1px var(--color-border);
}

/* sharing.map · 1:1, top of phone B's screen, loops while .is-map-on */
.sharing__map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background:
    radial-gradient(38% 30% at 30% 40%, rgba(255, 255, 255, .45), transparent 70%),
    radial-gradient(30% 26% at 72% 64%, rgba(255, 255, 255, .35), transparent 70%),
    radial-gradient(22% 18% at 64% 22%, rgba(0, 0, 0, .06), transparent 70%),
    var(--grad-placeholder);
  background-size: 140% 140%, 140% 140%, 140% 140%, 100% 100%;
  background-position: 0% 0%, 100% 100%, 50% 0%, 0 0;
  animation: sharing-map-pan 12s var(--ease-inout) infinite alternate;
  animation-play-state: paused;
}
.sharing__map-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sharing__map-path {
  fill: none;
  stroke: var(--color-accent-dot);
  stroke-width: .9;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  animation: sharing-map-draw 3.2s var(--ease-inout) infinite;
  animation-play-state: paused;
}
.sharing__map-dot {
  fill: var(--color-accent-dot);
  stroke: var(--color-bg);
  stroke-width: .8;
}
.sharing__map-marker {
  position: absolute;
  top: 30%;
  left: 82%;
  width: 18%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--color-accent-dot);
  opacity: .18;
  transform: translate(-50%, -50%) scale(.6);
  animation: sharing-map-pulse 1.6s var(--ease-linear) infinite;
  animation-play-state: paused;
}
#sharing.is-map-on .sharing__map,
#sharing.is-map-on .sharing__map-path,
#sharing.is-map-on .sharing__map-marker {
  animation-play-state: running;
}

@keyframes sharing-map-pan {
  from { background-position: 0% 0%, 100% 100%, 50% 0%, 0 0; }
  to   { background-position: 100% 60%, 0% 30%, 20% 100%, 0 0; }
}
@keyframes sharing-map-draw {
  0%   { stroke-dashoffset: 100; }
  60%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
@keyframes sharing-map-pulse {
  0%   { opacity: .35; transform: translate(-50%, -50%) scale(.4); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(1.2); }
}

/* ---- pair 484×703 ×2 ---- */
.sharing__pair {
  display: flex;
  flex-direction: row;
  gap: var(--card-gap);
  width: 100%;
  height: 703px;
}
.sharing__card {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: var(--card-pad);
  border-radius: var(--radius-20);
  background: var(--color-surface);
  overflow: hidden;
}
.sharing__card--alerts { align-items: flex-start; }
.sharing__card--story  { align-items: center; }

.sharing__card-title {
  flex: none;
  width: 100%;
  color: var(--color-accent-green);
}

/* stacked notification cards (§4.5 component), centered in the space under the title */
.sharing__alerts {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-24);
  width: 100%;
  padding-top: 46px;
}
.sharing__alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  width: 100%;
  padding: var(--space-16);
  border-radius: var(--radius-16);
  background: var(--color-bg);
  box-shadow: var(--shadow-ring-02);
  transform-origin: 50% 50%;
  transition:
    opacity var(--dur-pill) var(--ease-inout),
    scale var(--dur-pill) var(--ease-inout);
}
.sharing__alert--2 { transition-delay: var(--dur-stagger); }
.sharing__alert--3 { transition-delay: calc(2 * var(--dur-stagger)); }

/* hidden start state only once JS is running (no-JS pages show the cards) */
#sharing.is-alerts-armed:not(.is-alerts-in) .sharing__alert--1,
#sharing.is-alerts-armed:not(.is-alerts-in) .sharing__alert--2 {
  opacity: 0;
  scale: .5;
}
#sharing.is-alerts-armed:not(.is-alerts-in) .sharing__alert--3 {
  opacity: 0;
}

.sharing__alert-icon {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--grad-placeholder);
}
.sharing__alert-badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-bg);
  border-radius: var(--radius-6);
  background: var(--color-bg-dark);
}
.sharing__alert-badge::before {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--color-text-inverse);
  -webkit-mask: url(../assets/placeholders/icons/dot.svg) center / contain no-repeat;
  mask: url(../assets/placeholders/icons/dot.svg) center / contain no-repeat;
  transform: rotate(45deg);
}
.sharing__alert-text {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.sharing__alert-title { color: var(--color-text); }
.sharing__alert-sub   { color: var(--color-text-50); }

/* ---- story card: 415×800 slot directly under the title, clipped at the bottom ---- */
.sharing__tall {
  position: relative;
  flex: none;
  width: 415px;
  aspect-ratio: 415 / 800;
}
.sharing__story {
  position: absolute;
  top: 1.6%;
  left: 13.7%;
  width: 73%;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-6);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .18) 0%, transparent 16%, transparent 70%, rgba(0, 0, 0, .12) 100%),
    var(--grad-placeholder);
  box-shadow: 0 32px 56px -12px rgba(0, 0, 0, .28), 0 8px 18px rgba(0, 0, 0, .08);
  overflow: hidden;
}
.sharing__story-progress {
  position: absolute;
  top: 1.4%;
  left: 3%;
  right: 3%;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-scrim-white-60);
}
.sharing__story-head {
  position: absolute;
  top: 3.4%;
  left: 4%;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 60%;
}
.sharing__story-head i {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-scrim-white-60);
}
.sharing__story-head b {
  flex: 1;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-scrim-white-60);
  box-shadow: 0 13px 0 -1px rgba(255, 255, 255, .35);
}
.sharing__story-tag {
  position: absolute;
  top: 14%;
  left: 50%;
  width: 44%;
  height: 7%;
  border-radius: 3px;
  background: var(--color-bg-dark);
  transform: translateX(-50%);
  box-shadow: inset 0 0 0 5px var(--color-bg-dark), inset 0 0 0 200px rgba(255, 255, 255, .12);
}
.sharing__story-pass {
  position: absolute;
  top: 63%;
  left: 7%;
  right: 3%;
  display: flex;
  align-items: flex-end;
  gap: 5%;
  height: 20%;
  padding: 3.5%;
  border-radius: var(--radius-6);
  background: var(--color-bg);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
  transform: rotate(-3deg);
}
.sharing__story-pass-code {
  flex: none;
  width: 40%;
  height: 72%;
  border-radius: 3px;
  background: var(--color-accent-green);
}
.sharing__story-pass-lines {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 7px;
  padding-bottom: 4px;
}
.sharing__story-pass-lines b {
  display: block;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
}
.sharing__story-pass-lines b:nth-child(2) { width: 80%; }
.sharing__story-pass-lines b:nth-child(3) { width: 60%; }

/* ==========================================================================
   3. TABLET (790–1199.98)
   ========================================================================== */
@media (max-width: 1199.98px) {
  /* 820: phone A left 575; phone B 160px left and 312px below it.
     Phone A carries no parallax on tablet (measured static); phone B keeps it. */
  .sharing__phone--a { left: 575px; --sharing-dx: 0px; --sharing-dy: 0px; }
  .sharing__phone--b { left: 415px; top: 422.39px; }
}

/* ==========================================================================
   4. PHONE (≤ 789.98)
   ========================================================================== */
@media (max-width: 789.98px) {
  /* ---- import ---- */
  .import__cover { height: 228px; }
  .import__lead  { max-width: 100%; }
  .import__actions { flex-direction: column; }
  .import__pill { height: 42px; }

  /* ---- sharing ---- */
  .sharing__wide { height: 600px; }
  .sharing__wide-inner {
    justify-content: flex-start;
    gap: var(--space-20);
  }
  .sharing__wide-title,
  .sharing__wide-body { max-width: 100%; }

  .sharing__phone { width: 379px; --sharing-phone-r: 35px; }
  .sharing__phone--a { top: 396px; left: -165px; --sharing-dx: -19px; --sharing-dy: -40px; }
  .sharing__phone--b { top: 492px; left: 176px;  --sharing-dx: 53px;  --sharing-dy: 40px; }
  .sharing__row i { width: 22px; height: 22px; }

  .sharing__pair {
    flex-direction: column;
    height: auto;
  }
  .sharing__card {
    flex: none;
    height: 600px;
  }
  .sharing__tall { width: 339px; }
}

/* ==========================================================================
   5. REDUCED MOTION (motion.md §12)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .import__ring { animation: none; }
  .sharing__map,
  .sharing__map-path,
  .sharing__map-marker { animation: none; }
  .sharing__phone { will-change: auto; }
}

/* =========================================================
   Store badge pair (content pass): replaces the single get-app pill.
   Generic dark pills with a line icon and two-line label; no store artwork.
   ========================================================= */
.import__store-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.import__store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px 0 14px;
  border-radius: var(--radius-pill);
  background: var(--color-btn-dark);
  color: var(--color-text-inverse);
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  transition: background-color var(--t-spring);
}

.import__store-badge:hover { background: var(--color-btn-dark-hover); }
.import__store-badge:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.import__store-badge-icon { flex: none; width: 20px; height: 20px; }

.import__store-badge-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  white-space: nowrap;
}

.import__store-badge-small { font-size: 10px; line-height: 12px; font-weight: var(--fw-medium); opacity: 0.75; }
.import__store-badge-big { font-size: 15px; line-height: 18px; font-weight: var(--fw-semibold); letter-spacing: -0.01em; }

@media (max-width: 789.98px) {
  .import__store-badge { height: 42px; padding: 0 16px 0 12px; }
}