/* ShareAI — For CPT — Features (auroral line, no global opacity fade) */

/* ===== Layout ===== */
.sff{ display:flex; flex-direction:column; gap:24px; }

.sff-row{ display:grid; gap:24px; grid-template-columns:1fr; }
@media (min-width:1024px){
  .sff-row--fw{ grid-template-columns:1fr; }
  .sff-row--65-35{ grid-template-columns:2fr 1fr; }
  .sff-row--35-65{ grid-template-columns:1fr 2fr; }
}

/* ===== Card ===== */
.sff-card{
  --sff-bg: rgba(255,255,255,.60);
  --sff-border-color: rgba(17,24,39,.10);
  --sff-border-width: 1px;

  /* runtime */
  --reveal: 0;        /* per card 0 → 1 */
  --curtain-x: 0%;    /* px/percent position of the vertical line */

  background: var(--sff-bg);
  border: var(--sff-border-width) solid var(--sff-border-color);
  border-radius: 12px;
  padding: 32px;

  position: relative;
  z-index: 0;
  overflow: hidden;
}

/* inner split (copy / media) — reveal via clip only (no opacity fade) */
.sff-card__inner{
  display:grid;
  gap:24px;
  align-items:center;
  grid-template-columns: 1fr;
  position: relative;
  z-index: 1;

  /* show from left→right; hard clip with a tiny feather given by the moving line */
  clip-path: inset(0 calc((1 - var(--reveal)) * 100%) 0 0);
  will-change: clip-path;
}
@media (min-width:1024px){
  .sff-card__inner{ grid-template-columns:1fr 1fr; }
  .sff-card--noimg .sff-card__inner{ grid-template-columns:1fr 1fr; }
}

/* ===== Copy ===== */
.sff-h{
  margin:0 0 6px 0;
  font-weight:700;
  font-size: clamp(1.125rem, 1vw + 1rem, 1.375rem);
  line-height:1.25;
  color:#0f172a;
}
.sff-sub{ color:#475569; font-size:0.985rem; line-height:1.6; }

/* ===== Media ===== */
.sff-card__media{ position:relative; }
.sff-card__media img{ width:100%; height:auto; display:block; border-radius:8px; }

/* Number fallback when no image */
.sff-card__media--num{
  display:flex; align-items:center; justify-content:center;
  min-height: clamp(200px, 30vw, 380px);
  border-radius: 8px;
  background: rgba(255,255,255,0.38);
  border: 1px dashed rgba(17,24,39,0.08);
}
.sff-num{
  font-weight:800; line-height:1; letter-spacing:-0.03em;
  font-size: clamp(96px, 18vw, 240px);
  color:#6b21a8;
  background: linear-gradient(120deg, #83b8ff, #d0a5ff, #ffa6e9);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* ===== Initial mask (slides away exactly with reveal) ===== */
.sff-mask{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:24px; border-radius:8px;
  background: rgba(255,255,255,0.70);
  border: 1px dashed rgba(17,24,39,0.08);
  z-index: 2;
  pointer-events:none;

  /* keep text on one line and slide it away (no fade); mirror of content clip */
  clip-path: inset(0 0 0 calc(var(--reveal) * 100%));
  will-change: clip-path;
}
.sff-mask__label{
  font-weight:800; letter-spacing:-0.03em; line-height:1;
  font-size: clamp(64px, 12vw, 200px);
  white-space: nowrap;            /* keep "Feature N" inline */
  color:#6b21a8;
  background: linear-gradient(120deg, #83b8ff, #d0a5ff, #ffa6e9);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
/* number-only style for the small column */
.sff-mask--num .sff-mask__label,
.sff-mask__label--num{
  font-size: clamp(96px, 18vw, 240px);
}

/* ===== Auroral vertical reveal line (pronounced, no global fade) ===== */
.sff-curtain{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;

  /* tweakables */
  --line-w: clamp(4px, 0.5vw, 8px);   /* core line thickness */
  --glow-w: 18px;                     /* half-width of the soft glow band */
  --glow-a: .10;                      /* glow opacity (keep small so only near line is affected) */

  /* two layers:
     1) a tight glow band spanning the column
     2) the core aurora-colored line positioned at --curtain-x
  */
  background-repeat: no-repeat, no-repeat;
  background-image:
    linear-gradient(
      to right,
      transparent 0,
      rgba(131,184,255, var(--glow-a)) calc(var(--curtain-x) - var(--glow-w)),
      rgba(208,165,255, var(--glow-a)) var(--curtain-x),
      rgba(255,166,233, var(--glow-a)) calc(var(--curtain-x) + var(--glow-w)),
      transparent 100%
    ),
    linear-gradient(
      180deg,
      #83b8ff 0%,
      #d0a5ff 50%,
      #ffa6e9 100%
    );
  background-size:
    100% 100%,                             /* glow spans the column */
    var(--line-w) 100%;                    /* core line thickness */
  background-position:
    0 0,
    calc(var(--curtain-x) - (var(--line-w) / 2)) 0;

  /* slight bloom so the line “pops” */
  filter: drop-shadow(0 0 8px rgba(208,165,255,.25));
}

/* ===== Mobile spacing ===== */
@media (max-width:1023.98px){
  .sff{ gap:16px; }
  .sff-row{ gap:16px; }
  .sff-card{ padding:20px; }

  .sff-card__inner{ grid-template-columns:1fr; }
  .sff-card--noimg .sff-card__inner{ grid-template-columns:1fr; }
  .sff-card__media--num{ min-height: 38vw; }
}