/* ============================================================
   FRND — Trust & Safety  (safety.html · Figma "SAFETY · FINAL")
   V1 "sticker cards": pink split hero with the generated shield, then
   Bumble-style big cards two across. Shares frnd.css atoms and the
   About page's CTA band (frnd-about.css).
   ============================================================ */

/* ── 01 / HERO ─────────────────────────────────────────────── */
.shero{
  position:relative; z-index:2; overflow:hidden;
  height:calc(860 * var(--s));
  background:var(--pink); color:#fff;
}
.shero__glow{
  position:absolute; left:calc(760 * var(--s)); top:calc(120 * var(--s));
  width:calc(640 * var(--s)); height:calc(640 * var(--s)); border-radius:50%;
  background:#fff; opacity:.2; filter:blur(calc(110 * var(--s))); pointer-events:none;
}
.shero__type{ position:absolute; left:calc(150 * var(--s)); top:calc(260 * var(--s)); z-index:3; }
.shero__h1{
  margin:calc(22 * var(--s)) 0 0;
  font-family:var(--display); font-weight:900;
  font-size:calc(150 * var(--s)); line-height:.98; letter-spacing:-.03em; color:#fff;
}
.shero__h1 .line{ display:block; }
.shero__h1 .line--ink{ color:var(--ink); }
.shero__lead{ margin:calc(26 * var(--s)) 0 0; width:calc(520 * var(--s)); font-weight:500; font-size:calc(24 * var(--s)); line-height:1.42; }
.shero__shield{
  position:absolute; left:calc(800 * var(--s)); top:calc(170 * var(--s));
  width:calc(540 * var(--s)); height:auto; z-index:2;
  filter:drop-shadow(0 calc(30 * var(--s)) calc(40 * var(--s)) rgba(80,0,30,.3));
}
.schip{ position:absolute; z-index:4; font-size:calc(18 * var(--s)); transform:rotate(var(--rot)); }
.schip--1{ left:calc(770 * var(--s));  top:calc(640 * var(--s)); }
.schip--2{ left:calc(1180 * var(--s)); top:calc(190 * var(--s)); }
.schip--3{ left:calc(1090 * var(--s)); top:calc(700 * var(--s)); }

/* entry: shield rises + settles and then floats; chips pop, then bob */
.js .shero__shield{ opacity:0; translate:0 calc(120 * var(--s)); scale:.9; }
.js.is-ready .shero__shield{
  opacity:1; translate:0 0; scale:1;
  transition:opacity .7s var(--ease) var(--d), translate 1.2s var(--bounce) var(--d), scale 1.2s var(--bounce) var(--d);
  animation:sfloat 6s ease-in-out calc(var(--d) + 1300ms) infinite alternate;
}
.js .schip{ opacity:0; transform:rotate(var(--rot)) scale(.5); }
.js.is-ready .schip{
  opacity:1; transform:rotate(var(--rot)) scale(1);
  transition:opacity .3s ease-out var(--d), transform .65s var(--bounce) var(--d);
  animation:sbob 5s ease-in-out calc(var(--d) + 900ms) infinite alternate;
}
.schip--2{ animation-duration:6.2s !important; }
@keyframes sfloat{ from{ translate:0 0; } to{ translate:0 calc(-16 * var(--s)); } }
@keyframes sbob{ from{ translate:0 0; } to{ translate:0 calc(-10 * var(--s)); } }

/* ── 02 / SAFETY FEATURES — sticker cards ──────────────────── */
.sfeat{ position:relative; z-index:2; background:var(--page); padding:calc(120 * var(--s)) calc(150 * var(--s)) calc(120 * var(--s)); text-align:center; }
.sfeat__eye{ display:inline-flex; margin:0 0 calc(56 * var(--s)); }
.sfeat__grid{ display:grid; grid-template-columns:1fr 1fr; gap:calc(28 * var(--s)); text-align:left; }
.scard{
  --ledge:10;
  position:relative; display:flex; flex-direction:column;
  padding:calc(20 * var(--s)) calc(20 * var(--s)) calc(32 * var(--s));
  border-radius:calc(36 * var(--s));
  background:var(--bg);
}
.scard__plate{
  position:relative; overflow:hidden; aspect-ratio:4/3;
  border-radius:calc(24 * var(--s));
}
.scard__plate::after{ content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 calc(2.5 * var(--s)) var(--ink); pointer-events:none; }
.scard__plate img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s var(--ease); }
.scard:hover .scard__plate img{ transform:scale(1.05); }
.scard__n{ margin:calc(24 * var(--s)) calc(12 * var(--s)) 0; font-family:var(--mono); font-weight:500; font-size:calc(13 * var(--s)); letter-spacing:.14em; color:rgba(23,17,15,.5); }
.scard__t{ margin:calc(8 * var(--s)) calc(12 * var(--s)) 0; font-family:var(--display); font-weight:900; font-size:calc(36 * var(--s)); line-height:1.1; letter-spacing:-.03em; color:var(--ink); }
.scard__d{ margin:calc(12 * var(--s)) calc(12 * var(--s)) 0; font-weight:500; font-size:max(14px, calc(17 * var(--s))); line-height:1.55; color:rgba(23,17,15,.78); }
/* the plate scales up a touch as its card arrives */
.js .scard[data-reveal] .scard__plate img{ transform:scale(1.12); }
.js .scard[data-reveal].is-in .scard__plate img{ transform:scale(1); transition:transform 1.3s var(--ease) calc(var(--d, 0ms) + 120ms); }
.js .scard.is-in:hover .scard__plate img{ transform:scale(1.05); transition:transform .9s var(--ease); }

/* CTA band on this page: pink (frnd-about.css .acta), no corner stickers */

/* ── mobile ─────────────────────────────────────────────────── */
@media (max-width:1040px){
  .shero{ height:auto; min-height:760px; padding:130px 20px 0; }
  .shero__glow{ left:-40px; top:380px; width:470px; height:470px; filter:blur(80px); }
  .shero__type{ position:relative; left:auto; top:auto; }
  .shero__h1{ font-size:clamp(60px, 20vw, 84px); margin-top:16px; }
  .shero__lead{ width:auto; max-width:330px; font-size:17px; margin-top:16px; }
  .shero__shield{ position:relative; left:auto; top:auto; display:block; width:min(300px, 78vw); margin:24px auto 0; }
  .schip{ display:none; }
  .sfeat{ padding:56px 20px 64px; }
  .sfeat__eye{ margin-bottom:28px; }
  .sfeat__grid{ grid-template-columns:1fr; gap:22px; }
  .scard{ padding:14px 14px 24px; border-radius:28px; --ledge:7; }
  .scard__plate{ border-radius:18px; }
  .scard__n{ margin:16px 8px 0; font-size:11px; }
  .scard__t{ margin:6px 8px 0; font-size:26px; }
  .scard__d{ margin:8px 8px 0; font-size:14.5px; }
}
@media (prefers-reduced-motion: reduce){
  .js .shero__shield, .js .schip{ opacity:1 !important; translate:none !important; scale:none !important; animation:none !important; transition:none !important; }
}