/* ==========================================================================
   Modules · intro video, info strip, faith explanation, infographic
   ========================================================================== */

/* ---------- Intro + video ---------- */

.Intro { padding-block: 0 clamp(28px, 4vw, 40px); }

.Intro__grid { display: grid; gap: 20px; }

.Intro__title {
  color: rgb(var(--ink-soft));
  font-size: clamp(2.1rem, 1.5rem + 3vw, 3.9rem);
  font-weight: 700;
  line-height: 1;
}

.Intro__title span { display: inline-block; }

.Intro__lede,
.Intro__actions { display: none; }

@media (min-width: 900px) {
  .Intro__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(28px, 4vw, 56px);
  }
  .Intro__lede {
    display: block;
    max-inline-size: 36ch;
    margin-block-start: 18px;
    color: rgb(var(--ink-soft));
    font-family: var(--font-h);
    font-size: clamp(1.15rem, 0.9rem + 0.6vw, 1.45rem);
    line-height: 1.35;
  }
  .Intro__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 26px; }
}

.Video {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--ratio, 16 / 9);
  border-radius: var(--radius-media);
  background: rgb(var(--ink));
  box-shadow: var(--shadow-md);
  isolation: isolate;
}

.Video__poster {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--ease), filter 600ms;
}

.Video:hover .Video__poster { transform: scale(1.035); }

/*
  The whole poster is the button, but the visible control sits in the bottom-left corner
  so it never covers faces. A soft bottom gradient keeps it legible on any photo.
*/
.Video__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(12px, 2.6vw, 20px);
  background: linear-gradient(to top, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.12) 34%, transparent 55%);
  color: #fff;
}

.Video__label {
  display: inline-flex;
  align-items: center;
  block-size: 38px;
  margin-inline-start: -20px;
  padding: 0 16px 0 30px;
  border-radius: 0 99px 99px 0;
  background: rgb(20 20 26 / 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background-color 300ms;
}

.Video:hover .Video__label,
.Video__play:focus-visible .Video__label { background: rgb(20 20 26 / 0.75); }

.Video iframe {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  z-index: 2;
}

.Video.is-playing .Video__play,
.Video.is-playing .Video__poster { visibility: hidden; }

/* Round play button with a soft pulse, anchored bottom-left on posters */
.PlayBtn {
  position: relative;
  z-index: 1;
  flex: none;
  display: grid;
  place-items: center;
  inline-size: var(--size, 52px);
  block-size: var(--size, 52px);
  border-radius: 50%;
  background: #fff;
  color: rgb(var(--ink));
  box-shadow: 0 6px 18px -4px rgb(0 0 0 / 0.55);
  transition: transform 400ms var(--ease), background-color 200ms, color 200ms;
}

/* The play glyph is already optically offset inside its 24px box, so no extra nudge */
.PlayBtn svg { inline-size: 42%; block-size: 42%; fill: currentColor; }

.PlayBtn::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  border: 2px solid rgb(255 255 255 / 0.85);
  animation: ring 2.4s var(--ease) infinite;
}

@keyframes ring {
  0% { opacity: 0.9; transform: scale(0.9); }
  70%, 100% { opacity: 0; transform: scale(1.45); }
}

:is(.Video, .Spot__media):hover .PlayBtn { transform: scale(1.08); background: rgb(var(--red)); color: #fff; }

.PlayBtn--sm { --size: 40px; }
.PlayBtn--sm::after { inset: -4px; }

/* ---------- Info strip ---------- */

/* Same blue as the header (main theme blue) */
.Strip {
  position: relative;
  z-index: 2;
  background: rgb(var(--header));
  color: rgb(var(--ink));
  overflow-x: clip;
}

.Strip__track {
  display: flex;
  inline-size: max-content;
  animation: marquee var(--marquee-time, 38s) linear infinite;
}

.Strip:hover .Strip__track,
.Strip:focus-within .Strip__track { animation-play-state: paused; }

.Strip__list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 0 0 clamp(18px, 3vw, 36px);
  list-style: none;
}

.Strip__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-inline-end: clamp(26px, 4vw, 48px);
  block-size: 56px;
  font-family: var(--font-h);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.2rem);
  font-weight: 600;
  white-space: nowrap;
}

.Strip__item svg { inline-size: 32px; block-size: 32px; flex: none; }

.Strip__item--seal { block-size: 56px; }
.Strip__item--seal svg { inline-size: 74px; block-size: 74px; margin-block: -12px; filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.18)); animation: sway 6s var(--ease-in-out) infinite; }

@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes sway { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }

@media (min-width: 900px) {
  .Strip__item { block-size: 64px; }
  .Strip__item--seal svg { inline-size: 84px; block-size: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .Strip { overflow-x: auto; }
  .Strip__track { animation: none; }
}

/* ---------- Faith explanation ---------- */

.Faith__grid { display: grid; gap: clamp(26px, 5vw, 64px); }

.Faith__title { margin-block-end: 14px; }

.Faith__aside { position: relative; display: grid; gap: 16px; align-content: start; }

@media (min-width: 900px) {
  .Faith__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; }
}

.Hadith {
  position: relative;
  margin: 0;
  padding: 26px 24px 22px;
  border-radius: var(--radius-media);
  background: rgb(var(--navy));
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.Hadith::before {
  content: '';
  position: absolute;
  inset: auto -40px -60px auto;
  inline-size: 200px;
  block-size: 200px;
  border-radius: 50%;
  background: rgb(var(--blue) / 0.35);
  z-index: -1;
}

.Hadith__mark {
  inline-size: 38px;
  block-size: 38px;
  fill: rgb(var(--yellow));
  margin-block-end: 10px;
}

.Hadith blockquote {
  margin: 0;
  font-family: var(--font-h);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  font-weight: 600;
  line-height: 1.32;
}

.Hadith figcaption {
  margin-block-start: 12px;
  color: rgb(255 255 255 / 0.72);
  font-size: 0.875rem;
}

.Faith__photo {
  position: relative;
  margin: 0;
  border-radius: var(--radius-media);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 16 / 10;
}

.Faith__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }

@media (max-width: 899px) { .Faith__photo { display: none; } }

.Verse {
  margin: 18px 0;
  padding: 0;
  text-align: center;
  color: rgb(var(--blue));
  font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
}

.Verse cite { display: block; margin-block-start: 6px; font-size: 1rem; font-weight: 500; font-style: italic; }

/* ---------- Interactive infographic ---------- */

/* No gap below the board on smaller screens, so the cutout stands on the panel underneath */
.Info { display: grid; gap: 0; }

.Info__stage {
  position: relative;
  min-block-size: 516px;
  isolation: isolate;
}

.Info__board {
  position: absolute;
  inset: 64px 0 46px;
  border-radius: 8px;
  background-color: #2f302f;
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 0 6px rgb(0 0 0 / 0.12), inset 0 0 60px rgb(0 0 0 / 0.45), var(--shadow-md);
  z-index: -2;
}

.Info__board::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 30% 20%, rgb(255 255 255 / 0.08), transparent 60%);
}

.Info__badge {
  position: absolute;
  inset: 0 auto auto -6px;
  inline-size: 148px;
  aspect-ratio: 1;
  z-index: 3;
  display: grid;
  place-items: center;
  color: #fff;
  transform: rotate(-12deg);
  animation: wobble 7s var(--ease-in-out) infinite;
}

.Info__badge svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; fill: rgb(var(--blue)); filter: drop-shadow(0 8px 14px rgb(0 0 0 / 0.25)); }

.Info__badge span {
  position: relative;
  display: grid;
  justify-items: center;
  line-height: 0.95;
  text-align: center;
}

.Info__badge b { font-family: var(--font-h); font-size: 2.2rem; font-weight: 700; letter-spacing: -0.02em; }
.Info__badge b sup { font-size: 0.55em; vertical-align: 0.8em; margin-inline-start: 1px; }
.Info__badge small { font-size: 1rem; font-weight: 500; }
.Info__badge em { font-style: normal; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-block-end: 2px; }

@keyframes wobble { 0%, 100% { transform: rotate(-12deg) scale(1); } 50% { transform: rotate(-6deg) scale(1.04); } }

.Info__tags {
  position: absolute;
  inset: 186px auto auto 14px;
  inline-size: 58%;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 12px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Mobile: spread the labels across the board in a loose zig-zag instead of one column */
@media (max-width: 699px) {
  .Info__tags {
    inset: 184px 10px 62px 10px;
    inline-size: auto;
    justify-content: space-around;
    align-content: flex-start;
    gap: 22px 6px;
  }
  /* Small offsets only, so any label length still stays on the board */
  .Info__tags .Tag:nth-child(6n+1) { --tx: -6px; }
  .Info__tags .Tag:nth-child(6n+2) { --ty: 10px; }
  .Info__tags .Tag:nth-child(6n+3) { --tx: 8px; }
  .Info__tags .Tag:nth-child(6n+4) { --ty: 8px; --tx: -6px; }
  .Info__tags .Tag:nth-child(6n+5) { --tx: -12px; }
  .Info__tags .Tag:nth-child(6n) { --ty: 4px; --tx: 10px; }
  /* The last label drops into the free bottom-left corner of the board */
  .Info__tags .Tag:last-child { position: absolute; inset: auto auto 0 4px; --tx: 0px; --ty: 0px; }
  /* The girl stands flush on the panel below, inside its rounded corner */
  .Info__stage .Info__cutout { inset: auto 16px -1px auto; inline-size: 46%; }
  .Info--water .Info__art { inline-size: 22%; inset: auto 3% 50px auto; opacity: 0.8; }
}

.Tag {
  --r: 0deg;
  --tx: 0px;
  --ty: 0px;
  padding: 7px 14px 6px;
  border: 2px solid rgb(var(--chalk) / 0.9);
  border-radius: 99px;
  background: rgb(47 48 47 / 0.35);
  color: rgb(var(--chalk));
  font-family: var(--font-sketch);
  font-size: calc(1.0625rem * var(--tag-scale, 1));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-align: center;
  transform: translate(var(--tx), var(--ty)) rotate(var(--r));
  transition: background-color 280ms, color 280ms, transform 420ms var(--ease), box-shadow 280ms;
}

.Tag:hover,
.Tag[aria-selected='true'] {
  background: rgb(var(--chalk));
  color: #2c2c2b;
  transform: translate(var(--tx), var(--ty)) rotate(calc(var(--r) * -0.5)) scale(1.08);
  box-shadow: 0 8px 18px -8px rgb(0 0 0 / 0.6);
}

.Tag:focus-visible { outline-color: rgb(var(--yellow)); }

.Info__cutout {
  position: absolute;
  inset: auto -10px 0 auto;
  inline-size: 50%;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 12px 18px rgb(0 0 0 / 0.3));
}

.Info__art {
  position: absolute;
  inset: auto 4% 30px auto;
  inline-size: 46%;
  z-index: 3;
  color: rgb(var(--chalk));
  pointer-events: none;
}

.Info__photo {
  position: absolute;
  inset: 4px 0 auto auto;
  inline-size: 52%;
  margin: 0;
  padding: 7px;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-lg);
  transform: rotate(3deg);
  z-index: 2;
  transition: transform 700ms var(--ease);
}

.Info__photo.is-flip { transform: rotate(-2deg) translateY(-3px); }

.Info__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: rgb(var(--off));
}

.Info__frame img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  animation: photoIn 700ms var(--ease) both;
}

.Info__frame img.is-out { animation: photoOut 500ms var(--ease) both; }

@keyframes photoIn { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes photoOut { to { opacity: 0; } }

.Info__panel {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 16px 18px 18px;
  border-radius: var(--radius);
  background: rgb(var(--off));
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.06);
  overflow: hidden;
}

.Info__count { color: rgb(var(--muted)); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.Info__title { font-family: var(--font-sketch); font-size: 1.5rem; font-weight: 700; color: rgb(var(--ink)); }
.Info__text { color: rgb(var(--ink-soft)); font-size: 0.975rem; min-block-size: 3.1em; }

.Info__progress {
  position: absolute;
  inset: auto 0 0 0;
  block-size: 3px;
  background: rgb(var(--ink) / 0.06);
}

.Info__progress span {
  display: block;
  block-size: 100%;
  inline-size: 100%;
  background: rgb(var(--blue));
  transform-origin: left;
  transform: scaleX(0);
}

.Info.is-auto .Info__progress span { animation: progress var(--info-time, 4200ms) linear both; }

@keyframes progress { to { transform: scaleX(1); } }

.Info__after { margin-block-start: clamp(18px, 3vw, 30px); max-inline-size: 76ch; }

/* Water skin: blue board with ripples instead of chalkboard photo */
.Info--water .Info__board {
  background:
    radial-gradient(90% 70% at 80% 100%, rgb(var(--blue) / 0.55), transparent 60%),
    repeating-radial-gradient(circle at 78% 92%, rgb(255 255 255 / 0.07) 0 2px, transparent 2px 26px),
    linear-gradient(160deg, rgb(12 88 140), rgb(var(--navy)));
}

.Info--water .Tag { background: rgb(8 66 116 / 0.35); }
.Info--water .Tag:hover,
.Info--water .Tag[aria-selected='true'] { background: rgb(var(--chalk)); color: rgb(var(--navy)); }
.Info--water .Info__badge svg { fill: rgb(var(--yellow)); }
.Info--water .Info__badge { color: rgb(var(--ink)); }

@media (min-width: 700px) {
  .Info__stage { min-block-size: 536px; }
  .Info__tags { inset: 196px auto auto 4%; inline-size: 58%; gap: 16px 10px; }
  .Tag { font-size: calc(1.15rem * var(--tag-scale, 1)); padding: 8px 16px 7px; }
  .Info__cutout { inline-size: 38%; inset: auto 6% -1px auto; }
  .Info__art { inline-size: 30%; inset: auto 6% 70px auto; }
  .Info__photo { inline-size: 40%; }
  .Info__badge { inline-size: 170px; }
}

@media (min-width: 1000px) {
  .Info { position: relative; display: block; }
  .Info__stage { min-block-size: 0; aspect-ratio: 16 / 8; }
  /* The board runs to the bottom of the stage so the cutout stands on its edge */
  .Info__board { inset: 7% 0 0 0; }
  .Info__badge { inset: 0 auto auto 2.5%; inline-size: 178px; }
  .Info__badge b { font-size: 2.8rem; }
  .Info__badge small { font-size: 1.1rem; }
  .Info__tags { inset: 31% auto auto 4%; inline-size: 48%; gap: 18px 14px; }
  .Tag { font-size: calc(clamp(1.05rem, 0.35rem + 1.1vw, 1.35rem) * var(--tag-scale, 1)); }
  .Info__cutout { inset: auto 33% 0 auto; inline-size: 24%; }
  .Info__art { inset: auto 34% 12% auto; inline-size: 20%; }
  .Info__photo { inset: 6% 3% auto auto; inline-size: 28%; transform: rotate(3deg); }
  .Info__photo.is-flip { transform: rotate(-2deg) translateY(-4px); }
  .Info__panel {
    position: absolute;
    inset: auto 3% 7% auto;
    inline-size: 28%;
    z-index: 5;
    padding: 16px 18px 18px;
    background: rgb(var(--chalk));
    box-shadow: var(--shadow-lg);
    transform: rotate(-1.5deg);
  }
  .Info__title { font-size: 1.5rem; }
  .Info__text { font-size: 0.9rem; min-block-size: 4.6em; }
}

.Info__art { animation: bob 5s var(--ease-in-out) infinite; }

@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }