/* ============================================================
   home-sims.css — Home: compact hero, simulator gallery,
   tool links and "how it works"
   ─────────────────────────────────────────
   Markup : html-templates/home/{hero,simulators,how-it-works}.html,
            html-templates/home/platform.html (generated)
   Script : js/home/home-sims.js (filter, chip pill, tilt, reveal)
   Without the script every card is a visible, plain link.
   ============================================================ */

/* ── Compact hero ─────────────────────────────────────────────── */
.home-hero--compact {
  padding-block: clamp(28px, 4.5vw, 52px) 0;
}

.home-hero--compact .home-hero__art {
  width: min(560px, 120vw);
  top: -70px;
  opacity: 0.5;
}

.home-hero--compact .home-hero__title {
  margin-block: 14px 10px;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem);
}

.home-hero--compact .home-search { margin-top: 26px; }

.home-hero--compact .home-hero__lead {
  max-width: 40rem;
  margin: 0 auto;
  font-size: clamp(0.98rem, 0.94rem + 0.25vw, 1.08rem);
}

/* The search input says what it is for; the extra heading only cost height. */
.home-hero--compact .home-search__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Gallery frame ────────────────────────────────────────────── */
.home-sims {
  --sims-radius: 22px;
  padding-block-start: clamp(20px, 3vw, 36px);
}

.home-sims__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 32px;
  margin-block-end: 26px;
}

.home-sims__title {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.home-sims__lead {
  margin: 8px 0 0;
  color: var(--text-soft);
  font-size: 0.98rem;
}

html[dir="rtl"] .home-sims__title {
  font-family: 'IBM Plex Sans Arabic', 'Tajawal', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: normal;
}

/* ── Filter chips with a sliding pill ─────────────────────────── */
.home-sims__filters {
  position: relative;
  display: flex;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  box-shadow: 0 1px 2px hsl(var(--shadow-color) / 0.05);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.home-sims__filters::-webkit-scrollbar { display: none; }

.home-sims__pill {
  position: absolute;
  inset-block: 5px;
  /* Physical left: offsetLeft is measured from the left in both directions. */
  left: 0;
  width: var(--pill-w, 0px);
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 70%, transparent);
  transform: translateX(var(--pill-x, 0px));
  opacity: 0;
  transition: transform 0.5s var(--home-spring), width 0.45s var(--home-ease), opacity 0.2s ease;
  pointer-events: none;
}

.home-sims--js .home-sims__pill { opacity: 1; }

.home-sims__chip {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  min-height: 38px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.home-sims__chip:hover { color: var(--text); }

.home-sims__chip[aria-pressed="true"] {
  color: var(--accent-contrast, #fff);
}

/* Without the script the pill never moves, so paint the active chip itself. */
.home-sims:not(.home-sims--js) .home-sims__chip[aria-pressed="true"] { background: var(--accent); }

.home-sims__chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.home-sims__count {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 14%, transparent);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* ── Grid: a bento with the exam simulator as the hero card ───── */
.home-sims__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sim-card {
  position: relative;
  display: flex;
  min-width: 0;
  perspective: 900px;
}

.sim-card[hidden] { display: none; }

.sim-card--featured {
  grid-column: span 2;
}

/* Desktop: the featured card lies on its side — screenshot beside the copy. */
@media (min-width: 961px) {
  .sim-card--featured .sim-card__link { flex-direction: row; }
  .sim-card--featured .sim-card__body { flex: 0 0 38%; justify-content: center; }
  .sim-card--featured .sim-card__media {
    border-block-end: 0;
    border-inline-end: 1px solid var(--border);
  }
  .sim-card--featured .sim-card__media::after {
    inset: 0 0 0 auto;
    width: 30%;
    height: auto;
    background: linear-gradient(to left, color-mix(in srgb, var(--surface) 55%, transparent), transparent);
  }
  html[dir="rtl"] .sim-card--featured .sim-card__media::after {
    inset: 0 auto 0 0;
    background: linear-gradient(to right, color-mix(in srgb, var(--surface) 55%, transparent), transparent);
  }
}

.sim-card__link {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--sims-radius);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 1px 2px hsl(var(--shadow-color) / 0.05), 0 8px 24px -14px hsl(var(--shadow-color) / 0.18);
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translateY(0);
  transform-style: preserve-3d;
  transition: transform 0.6s var(--home-ease), box-shadow 0.45s var(--home-ease), border-color 0.3s ease;
  will-change: transform;
}

/* Cursor spotlight (position fed by home-sims.js). */
.sim-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

a.sim-card__link:hover,
a.sim-card__link:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 2px 4px hsl(var(--shadow-color) / 0.06), 0 26px 50px -22px hsl(var(--shadow-color) / 0.38);
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px);
}

a.sim-card__link:hover::after { opacity: 1; }

a.sim-card__link:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 3px;
}

a.sim-card__link:active {
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translateY(-2px) scale(0.985);
  transition-duration: 0.15s;
}

/* ── Media ────────────────────────────────────────────────────── */
.sim-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-2, color-mix(in srgb, var(--text) 4%, var(--surface)));
  border-block-end: 1px solid var(--border);
}

.sim-card--featured .sim-card__media {
  flex: 1 1 auto;
  aspect-ratio: auto;
  min-height: 260px;
}

.sim-card__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Both encodings failed (js/home/home-sims.js): show the media background, never a broken-image glyph. */
.sim-card__media[data-img-failed] img { visibility: hidden; }

.sim-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 1.1s var(--home-ease), filter 0.6s ease;
}

a.sim-card__link:hover .sim-card__media img { transform: scale(1.06); }

/* A soft fade at the bottom of every screenshot ties it to the card body. */
.sim-card__media::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 38%;
  background: linear-gradient(to top, color-mix(in srgb, var(--surface) 55%, transparent), transparent);
  pointer-events: none;
}

/* Light sweep across the image on hover. */
.sim-card__media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.32) 50%, transparent 65%);
  transform: translateX(-120%);
  pointer-events: none;
}

a.sim-card__link:hover .sim-card__media::before {
  transform: translateX(120%);
  transition: transform 1.1s var(--home-ease);
}

/* ── Body ─────────────────────────────────────────────────────── */
.sim-card__body {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px 18px;
}

.sim-card--featured .sim-card__body { padding: 20px 24px 24px; }

.sim-card__tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

html[dir="rtl"] .sim-card__tag {
  font-size: 0.8rem;
  letter-spacing: normal;
}

.sim-card__title {
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
}

.sim-card--featured .sim-card__title { font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem); }

html[dir="rtl"] .sim-card__title {
  font-family: 'IBM Plex Sans Arabic', 'Tajawal', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: normal;
}

.sim-card__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--text-soft);
  font-size: 0.9rem;
  line-height: 1.5;
}

.sim-card--featured .sim-card__desc {
  -webkit-line-clamp: 3;
  max-width: 44rem;
  font-size: 0.98rem;
}

.sim-card__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-block-start: 6px;
  color: var(--accent);
  font-size: 0.86rem;
  font-weight: 700;
}

.sim-card__go svg {
  width: 16px;
  height: 16px;
  transition: transform 0.45s var(--home-spring);
}

html[dir="rtl"] .sim-card__go svg { transform: scaleX(-1); }
a.sim-card__link:hover .sim-card__go svg { transform: translateX(5px); }
html[dir="rtl"] a.sim-card__link:hover .sim-card__go svg { transform: scaleX(-1) translateX(5px); }

/* ── Badges ───────────────────────────────────────────────────── */
.sim-card__badge {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-start: 14px;
  z-index: 3;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--mark-catch, #f5b84a);
  color: #1d1a10;
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: 0 6px 18px -8px rgb(0 0 0 / 0.45);
}

.sim-card__badge--soon {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text-soft);
  border: 1px solid var(--border);
  box-shadow: none;
  backdrop-filter: blur(6px);
}

/* ── Coming-soon card: drawn retinal layers instead of a capture ─ */
.sim-card--soon .sim-card__link { cursor: default; }
.sim-card--soon .sim-card__body { opacity: 0.8; }

.sim-card__media--art {
  display: grid;
  place-items: center;
  background: radial-gradient(120% 90% at 50% 120%, #2b1b18, #0d0f12 70%);
}

.sim-card__oct {
  display: grid;
  gap: 7px;
  width: 78%;
}

.sim-card__oct i {
  display: block;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, var(--c) 18%, var(--c) 82%, transparent);
  filter: blur(0.4px);
  transform-origin: center;
  animation: sim-oct-wave 5s ease-in-out infinite;
  animation-delay: calc(var(--d) * -0.6s);
}

.sim-card__oct i:nth-child(1) { --c: #f2f2f2; --d: 0; height: 4px; }
.sim-card__oct i:nth-child(2) { --c: #b9b9b9; --d: 1; }
.sim-card__oct i:nth-child(3) { --c: #5a5a5a; --d: 2; }
.sim-card__oct i:nth-child(4) { --c: #8d8d8d; --d: 3; }
.sim-card__oct i:nth-child(5) { --c: #e9e9e9; --d: 4; height: 5px; }
.sim-card__oct i:nth-child(6) { --c: #fdfdfd; --d: 5; height: 12px; }

@keyframes sim-oct-wave {
  0%, 100% { transform: scaleY(1) translateY(0); }
  50% { transform: scaleY(1.25) translateY(3px); }
}

/* ── Entrance (only once the script is running) ───────────────── */
.home-sims--js .sim-card[data-sim-reveal] .sim-card__link {
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  filter: blur(6px);
}

.home-sims--js .sim-card.is-in .sim-card__link {
  opacity: 1;
  filter: none;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translateY(0);
  transition: opacity 0.7s var(--home-ease), transform 0.9s var(--home-ease), filter 0.7s var(--home-ease), box-shadow 0.45s var(--home-ease), border-color 0.3s ease;
  transition-delay: calc(var(--d, 0) * 70ms);
}

/* Filtering uses the View Transitions API where available. */
.sim-card { view-transition-class: sim-card; }
::view-transition-group(*.sim-card) { animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }

/* ── Tool landing-page links (crawlable) ──────────────────────── */
html[lang="ar"] .home-platform [data-show-in="en"],
html:not([lang="ar"]) .home-platform [data-show-in="ar"] { display: none; }

.home-platform {
  margin-block-start: clamp(36px, 5vw, 56px);
  padding: 22px clamp(18px, 3vw, 28px);
  border: 1px dashed var(--border);
  border-radius: var(--sims-radius, 22px);
  text-align: center;
}

.home-platform__title {
  margin: 0 0 14px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-soft);
}

.home-platform__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.home-platform__tool,
.home-platform__all {
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-soft);
  font-size: 0.82rem;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.3s var(--home-spring);
}

.home-platform__tool:hover,
.home-platform__all:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.home-platform__all {
  border-color: transparent;
  background: transparent;
  color: var(--accent);
  font-weight: 700;
}

/* ── How it works ─────────────────────────────────────────────── */
.home-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.home-step {
  position: relative;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--sims-radius, 22px);
  background: var(--surface);
}

.home-step__number {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-block-end: 14px;
  border-radius: 12px;
  background: var(--accent-tint);
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.home-step__title {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
}

.home-step__text {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 960px) {
  .home-sims__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sim-card--featured .sim-card__media { aspect-ratio: 16 / 9; flex: none; min-height: 0; }
}

@media (max-width: 640px) {
  .home-sims__head { align-items: stretch; }
  .home-sims__filters { flex: 1 1 100%; max-width: none; margin-inline: calc(var(--home-gutter, 16px) * -1); border-inline: 0; border-radius: 0; padding-inline: var(--home-gutter, 16px); }
  .home-sims__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .sim-card--featured { grid-column: auto; }
  .home-steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }

  /* Phones: a compact row card — image beside the text — so more fit on screen. */
  .sim-card:not(.sim-card--featured) .sim-card__link { flex-direction: row; align-items: stretch; }
  .sim-card:not(.sim-card--featured) .sim-card__media {
    flex: 0 0 38%;
    aspect-ratio: auto;
    min-height: 116px;
    border-block-end: 0;
    border-inline-end: 1px solid var(--border);
  }
  .sim-card:not(.sim-card--featured) .sim-card__media::after { display: none; }
  .sim-card:not(.sim-card--featured) .sim-card__body { padding: 12px 14px; gap: 4px; justify-content: center; }
  .sim-card:not(.sim-card--featured) .sim-card__title { font-size: 1.02rem; }
  .sim-card:not(.sim-card--featured) .sim-card__desc { font-size: 0.82rem; }
  .sim-card:not(.sim-card--featured) .sim-card__go { display: none; }
  .sim-card--soon .sim-card__badge { inset-block-start: 8px; inset-inline-start: 8px; padding: 4px 8px; font-size: 0.68rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sim-card__link,
  .sim-card__media img,
  .home-sims__pill,
  .sim-card__go svg { transition: none !important; }
  .sim-card__link { transform: none !important; }
  .sim-card__media::before { display: none; }
  .sim-card__oct i { animation: none; }
  .home-sims--js .sim-card[data-sim-reveal] .sim-card__link { opacity: 1; transform: none; filter: none; }
}