/* ==========================================================================
   Paperus spotlight manifesto
   A clean white statement panel. On hover-capable devices the cursor becomes
   a flashlight that cuts through the white veil to reveal four category
   worlds beneath, split into four clickable segments. On touch and without
   JavaScript the images sit softly visible with tappable segments.
   ========================================================================== */

@property --hole {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.spotlight2-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(500px, 64vh, 680px);
  overflow: hidden;
  border-radius: clamp(20px, 2vw, 34px);
  background: #fff;
  border: 2px solid var(--blue, #1633ff);
  box-shadow: var(--shadow, 0 24px 70px rgba(10, 14, 30, 0.11)), 0 0 0 1px rgba(22, 51, 255, 0.18), 0 0 46px rgba(22, 51, 255, 0.22);
  isolation: isolate;
}

/* Layer 0 - the four category frames */
.spotlight2-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
}
.spotlight2-media img {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.2, 0.75, 0.2, 1);
  will-change: transform;
}
.spotlight2.is-live:has(.spotlight2-zones a:nth-child(1):hover) .spotlight2-media img:nth-child(1),
.spotlight2.is-live:has(.spotlight2-zones a:nth-child(2):hover) .spotlight2-media img:nth-child(2),
.spotlight2.is-live:has(.spotlight2-zones a:nth-child(3):hover) .spotlight2-media img:nth-child(3),
.spotlight2.is-live:has(.spotlight2-zones a:nth-child(4):hover) .spotlight2-media img:nth-child(4) { transform: scale(1.05); }

/* Layer 1 - white veil, punched through by the cursor flashlight */
.spotlight2-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #fff;
  pointer-events: none;
  --hole: 0px;
  -webkit-mask-image: radial-gradient(circle var(--hole) at var(--sx, 50%) var(--sy, 50%), rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 52%, #000 84%);
  mask-image: radial-gradient(circle var(--hole) at var(--sx, 50%) var(--sy, 50%), rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 52%, #000 84%);
  transition: --hole 0.5s cubic-bezier(0.2, 0.75, 0.2, 1);
}
.spotlight2.is-live .spotlight2-stage:not(.is-lit) .spotlight2-veil {
  -webkit-mask-image: none;
  mask-image: none;
}
.spotlight2-stage.is-lit .spotlight2-veil { --hole: 240px; }

/* Soft lens ring riding the edge of the flashlight */
.spotlight2-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle 250px at var(--sx, 50%) var(--sy, 50%), rgba(255, 255, 255, 0) 0 56%, rgba(255, 255, 255, 0.26) 68%, rgba(76, 99, 255, 0.16) 77%, rgba(255, 255, 255, 0) 86%);
  mix-blend-mode: screen;
  transition: opacity 0.35s ease;
}
.spotlight2-stage.is-lit::after { opacity: 1; }

/* Layer 4 - the statement (only its links receive clicks) */
.spotlight2-content {
  position: relative;
  z-index: 4;
  max-width: 1060px;
  padding: clamp(28px, 5vw, 72px);
  text-align: center;
  pointer-events: none;
}
/* Soft white halo keeps the statement legible over any revealed image */
.spotlight2-content::before {
  content: "";
  position: absolute;
  inset: -6% -10%;
  z-index: -1;
  background: radial-gradient(56% 54% at 50% 46%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.45) 62%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}
.spotlight2-content h2 {
  margin: 0;
  font-family: var(--serif, "Instrument Serif", Georgia, serif);
  font-weight: 400;
  font-size: clamp(44px, 6vw, 92px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink, #0a0e1e);
  text-shadow: 0 2px 26px rgba(255, 255, 255, 0.9), 0 0 3px rgba(255, 255, 255, 0.7);
}
.spotlight2-content h2 em { font-style: italic; }
.spotlight2-sub {
  margin: clamp(16px, 2vw, 24px) auto 0;
  max-width: 52ch;
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.5;
  color: var(--slate, #5b6178);
  text-shadow: 0 1px 16px rgba(255, 255, 255, 0.95), 0 0 3px rgba(255, 255, 255, 0.7);
}
/* One label per segment, centered over its own image column */
.spotlight2-cats {
  position: absolute;
  inset-inline: 0;
  bottom: clamp(16px, 3vh, 32px);
  z-index: 5;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  align-items: center;
  padding: 0 clamp(8px, 1vw, 18px);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.spotlight2-cats a {
  position: relative;
  padding: 7px 16px;
  color: var(--ink, #0a0e1e);
  background: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  border-radius: 999px;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(9, 13, 28, 0.14);
  transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}

.spotlight2-cta { margin-top: clamp(22px, 3vw, 36px); }
.spotlight2-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 999px;
  background: var(--night, #090d1c);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  pointer-events: auto;
  box-shadow: 0 14px 34px rgba(9, 13, 28, 0.28);
  transition: transform 0.3s cubic-bezier(0.2, 0.75, 0.2, 1), background 0.3s;
}
.spotlight2-btn span { transition: transform 0.3s cubic-bezier(0.2, 0.75, 0.2, 1); }
.spotlight2-btn:hover { background: #000; transform: translateY(-2px); }
.spotlight2-btn:hover span { transform: translate(2px, -2px); }
.spotlight2-btn:focus-visible { outline: 3px solid var(--blue, #1633ff); outline-offset: 3px; }

/* Layer 3 - the four clickable segments */
.spotlight2-zones {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
}
.spotlight2-zones a {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  display: block;
}
.spotlight2-tag {
  position: absolute;
  inset-inline-start: 50%;
  bottom: clamp(56px, 9vh, 84px);
  translate: -50% 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(9, 13, 28, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.16);
  white-space: nowrap;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
html[dir="rtl"] .spotlight2-tag { translate: 50% 0; }
.spotlight2-zones a:focus-visible { outline: 3px solid var(--blue, #1633ff); outline-offset: -3px; }

/* Desktop live mode: no floating pills. The category row is the single
   source of the names and lights up for the hovered segment. Labels stay
   hidden at rest and fade in once the cursor starts revealing. */
.spotlight2.is-live .spotlight2-tag { display: none; }
.spotlight2.is-live .spotlight2-cats {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.spotlight2.is-live .spotlight2-stage.is-lit .spotlight2-cats {
  opacity: 1;
  transform: none;
}
.spotlight2.is-live:has(.spotlight2-zones a:nth-child(1):is(:hover, :focus-visible)) .spotlight2-cats a:nth-child(1),
.spotlight2.is-live:has(.spotlight2-zones a:nth-child(2):is(:hover, :focus-visible)) .spotlight2-cats a:nth-child(2),
.spotlight2.is-live:has(.spotlight2-zones a:nth-child(3):is(:hover, :focus-visible)) .spotlight2-cats a:nth-child(3),
.spotlight2.is-live:has(.spotlight2-zones a:nth-child(4):is(:hover, :focus-visible)) .spotlight2-cats a:nth-child(4) {
  background: var(--blue, #1633ff);
  color: #fff;
  box-shadow: 0 6px 22px rgba(22, 51, 255, 0.38);
}

/* Invitation, top of the tile, out of every element's way */
.spotlight2-hint {
  position: absolute;
  z-index: 2;
  top: clamp(18px, 3vh, 30px);
  inset-inline: 0;
  margin: 0;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate, #5b6178);
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.85);
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.spotlight2-stage.is-lit .spotlight2-hint { opacity: 0.35; }

/* --- Fallback (touch, no JS, reduced motion): soft-visible gallery -------- */
.spotlight2:not(.is-live) .spotlight2-veil { background: rgba(255, 255, 255, 0.55); }
.spotlight2:not(.is-live) .spotlight2-tag {
  opacity: 1;
  transform: none;
  bottom: auto;
  top: clamp(18px, 3vh, 30px);
}
.spotlight2:not(.is-live) .spotlight2-cats { display: none; }
.spotlight2:not(.is-live) .spotlight2-cats a { pointer-events: auto; }
.spotlight2:not(.is-live) .spotlight2-cats a:hover { background: var(--blue-soft, #eef1ff); color: var(--blue, #1633ff); }
.spotlight2:not(.is-live) .spotlight2-hint { display: none; }

@media (max-width: 700px) {
  .spotlight2-stage { min-height: 0; padding-block: clamp(72px, 16vw, 110px) clamp(150px, 34vw, 190px); }
  .spotlight2-content { padding-inline: 20px; }
  .spotlight2-content h2 { font-size: clamp(37px, 12vw, 50px); }
  .spotlight2-sub { font-size: 14px; line-height: 1.55; }
  .spotlight2-btn { min-height: 48px; padding: 13px 22px; font-size: 13px; }
  .spotlight2:not(.is-live) .spotlight2-tag { display: none; }
  .spotlight2:not(.is-live) .spotlight2-cats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    bottom: clamp(64px, 12vw, 88px);
  }
}

@media (max-width: 380px) {
  .spotlight2-cta { display: grid; }
  .spotlight2-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .spotlight2-veil, .spotlight2-tag, .spotlight2-btn, .spotlight2-btn span, .spotlight2-cats, .spotlight2-media img, .spotlight2-hint, .spotlight2-stage::after { transition: none; }
  .spotlight2-media img { transform: none !important; }
}