@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Outfit:wght@300;400;500&display=swap');

/* ===== Section shell =====
   reference: relative overflow-hidden bg-white py-28 md:pb-40 md:pt-44 */
.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 72px;
  padding-bottom: 72px;
}

@media (min-width: 640px) {
  .cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc {
    padding-top: 112px;
    padding-bottom: 112px;
  }
}

@media (min-width: 768px) {
  .cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc {
    padding-top: 176px;
    padding-bottom: 160px;
  }
}

/* ===== Header =====
   reference: mx-auto mb-10 max-w-[1440px] px-8 md:mb-14 md:px-16 */
.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__header-wrap {
  max-width: 1440px;
  margin: 0 auto;
  margin-bottom: 32px;
  padding: 0 24px;
}

@media (min-width: 640px) {
  .cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__header-wrap {
    margin-bottom: 40px;
    padding: 0 32px;
  }
}

@media (min-width: 768px) {
  .cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__header-wrap {
    margin-bottom: 56px;
    padding: 0 64px;
  }
}

.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

/* ===== Eyebrow =====
   reference: mb-5 font-body text-[10px] uppercase tracking-[0.46em]
   initial:{opacity:0, y:10}, animate:{opacity:1,y:0}, duration:0.9 */
.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: #9A9A9A;
  margin: 0 0 20px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__eyebrow--inview {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Headline =====
   reference: font-display font-light leading-[0.95] tracking-tight
   clamp(2.2rem, 6.5vw, 4.6rem)
   initial:{opacity:0, y:18}, delay:0.1 */
.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.519rem, 6.5vw, 5.266rem);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.025em;  /* tracking-tight = -0.025em */
  color: #1A1A1A;
  margin: 0;
  font-style: normal;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
              transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__headline--inview {
  opacity: 1;
  transform: translateY(0);
}

/* Italic accent — plain silver, not metallic gradient (reference: italic color var(--accent-silver)) */
.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__headline-accent {
  font-style: italic;
  color: #8E9296;
}

/* ===== Track wrapper — positions arrows relative to the scroller =====*/
.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__track-wrap {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
}

/* ===== Horizontal scroll track =====
   reference: flex gap-5 overflow-x-auto scroll-smooth px-8 pb-14 pt-8
   md:gap-6 md:px-16, scrollbar hidden, scroll-snap x mandatory,
   sibling-dim on hover: scale-[0.97] opacity-45 blur-[1.5px] */
.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 24px 24px 44px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__track::-webkit-scrollbar {
  display: none;
}

@media (min-width: 640px) {
  .cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__track {
    gap: 20px;
    padding: 32px 32px 56px;
  }
}

@media (min-width: 768px) {
  .cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__track {
    gap: 24px;
    padding: 32px 64px 56px;
  }
}

/* Sibling dimming when track has a hovered pill */
.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__track--hoverable:has(.arcana-cc__pill:hover) .arcana-cc__pill {
  transform: scale(0.97);
  opacity: 0.45;
  filter: blur(1.5px);
}

.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__track--hoverable .arcana-cc__pill:hover {
  transform: scale(1.04) !important;
  opacity: 1 !important;
  filter: blur(0) !important;
  z-index: 30;
}

/* ===== Pill (card wrapper) =====
   reference: w-[80vw] sm:w-[248px] md:w-[272px] lg:w-[292px]
   snap-start, shrink-0
   initial:{opacity:0, y:30}, stagger delay:0.12+i*0.07 */
.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__pill {
  flex-shrink: 0;
  width: 76vw;
  scroll-snap-align: start;
  position: relative;
  z-index: 0;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1s cubic-bezier(0.16, 1, 0.3, 1),
              scale 0.5s ease-out,
              filter 0.5s ease-out;
}

@media (min-width: 640px)  { .cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__pill { width: 248px; } }
@media (min-width: 768px)  { .cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__pill { width: 272px; } }
@media (min-width: 1024px) { .cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__pill { width: 292px; } }

/* Staggered entrance: delay = 0.12 + i * 0.07 */
.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__pill--0.arcana-cc__pill--inview { opacity: 1; transform: translateY(0); transition-delay: 0.12s; }
.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__pill--1.arcana-cc__pill--inview { opacity: 1; transform: translateY(0); transition-delay: 0.19s; }
.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__pill--2.arcana-cc__pill--inview { opacity: 1; transform: translateY(0); transition-delay: 0.26s; }
.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__pill--3.arcana-cc__pill--inview { opacity: 1; transform: translateY(0); transition-delay: 0.33s; }
.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__pill--4.arcana-cc__pill--inview { opacity: 1; transform: translateY(0); transition-delay: 0.40s; }
.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__pill--5.arcana-cc__pill--inview { opacity: 1; transform: translateY(0); transition-delay: 0.47s; }
.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__pill--6.arcana-cc__pill--inview { opacity: 1; transform: translateY(0); transition-delay: 0.54s; }

/* ===== Card =====
   aspect-[4/5] overflow-hidden rounded-[18px] ring-1 ring-black/5
   shadow-[0_18px_40px_-24px_rgba(0,0,0,0.4)]
   group-hover: -translate-y-3, stronger shadow + ring */
.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__card {
  width: 100%;
}

.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.4);
  outline: 1px solid rgba(0, 0, 0, 0.05);
  transition: transform 600ms ease-out, box-shadow 600ms ease-out, outline-color 600ms ease-out;
}

.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__pill:hover .arcana-cc__media {
  transform: translateY(-12px);
  box-shadow: 0 50px 100px -30px rgba(0, 0, 0, 0.5);
  outline-color: rgba(0, 0, 0, 0.10);
}

/* Image — full cover, scale on hover */
.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms ease-out;
}

.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__pill:hover .arcana-cc__media-img {
  transform: scale(1.06);
}

/* Background fill (used when no image) — also scales on hover */
.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__media > :not(img):first-child {
  transition: transform 900ms ease-out;
}

/* Diagonal sheen overlay */
.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__sheen {
  position: absolute;
  inset: 0;
  opacity: 0.7;
  pointer-events: none;
  background: radial-gradient(120% 90% at 18% 0%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 42%);
}

/* Number watermark — barely visible, top-right */
.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__watermark {
  position: absolute;
  right: 16px;
  top: 12px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 5.438rem;
  line-height: 1;
  color: rgba(0, 0, 0, 0.05);
  pointer-events: none;
  user-select: none;
}

/* Base bottom lift — keeps title legible at rest */
.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__lift-base {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0.16) 30%,
    rgba(255, 255, 255, 0) 52%);
}

/* Hover lift — fades in on hover so the revealed copy reads clearly */
.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__lift-hover {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to top,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.70) 34%,
    rgba(255, 255, 255, 0.10) 66%,
    rgba(255, 255, 255, 0) 84%);
  transition: opacity 0.5s ease-out;
}

.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__pill:hover .arcana-cc__lift-hover {
  opacity: 1;
}

/* ===== Card text content =====
   reference: absolute inset-x-0 bottom-0 p-6 md:p-7 */
.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px;
}

@media (min-width: 768px) {
  .cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__content {
    padding: 28px;
  }
}

/* Card number — font-body text-[11px] tracking-[0.4em] mb-2 color rgba(0,0,0,0.42) */
.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__card-num {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.4em;
  color: rgba(0, 0, 0, 0.42);
  margin: 0 0 8px;
}

/* Card title — font-display text-[1.45rem] md:text-[1.6rem] font-light leading-tight */
.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.66rem;
  font-weight: 300;
  line-height: 1.15;
  color: #1A1A1A;
  margin: 0;
}

@media (min-width: 768px) {
  .cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__card-title {
    font-size: 1.832rem;
  }
}

/* Card desc — hidden at rest, slides open on hover
   reference: max-h-0 overflow-hidden opacity-0
   group-hover: mt-3 max-h-[220px] opacity-100, duration 500ms */
.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__card-desc {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.65;
  color: #4F4F4F;
  max-width: 32ch;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transition: max-height 0.5s ease-out,
              opacity 0.5s ease-out,
              margin-top 0.5s ease-out;
}

@media (min-width: 768px) {
  .cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__card-desc {
    font-size: 15px;
  }
}

.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__pill:hover .arcana-cc__card-desc {
  max-height: 220px;
  opacity: 1;
  margin-top: 12px;
}

/* ===== Floating arrows =====
   reference: absolute left-4/right-4 top-[202px]/lg:top-[214px] z-20
   hidden md:flex h-12 w-12 -translate-y-1/2 rounded-full border
   bg-white/85 backdrop-blur-sm shadow */
.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__arrow {
  display: none;
  position: absolute;
  top: 202px;
  z-index: 20;
  width: 48px;
  height: 48px;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.10);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #1A1A1A;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.3s ease,
              background 0.3s ease, box-shadow 0.3s ease;
}

@media (min-width: 768px) {
  .cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__arrow {
    display: flex;
  }
}

@media (min-width: 1024px) {
  .cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__arrow {
    top: 214px;
  }
}

.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__arrow--prev { left: 16px; }
.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__arrow--next { right: 16px; }

.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__arrow--hidden {
  pointer-events: none;
  transform: translateY(-50%) scale(0.9);
  opacity: 0;
}

.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__arrow:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.5);
}

/* ===== Progress rail =====
   reference: mx-auto mt-4 h-[2px] w-[160px] md:w-[220px] rounded-full
   segment tracks scroll position */
.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__progress-rail {
  position: relative;
  width: 160px;
  height: 2px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.12);
  margin: 16px auto 0;
  overflow: hidden;
}

@media (min-width: 768px) {
  .cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__progress-rail {
    width: 220px;
  }
}

.cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__progress-seg {
  display: block;
  height: 100%;
  border-radius: 9999px;
  background: #1A1A1A;
  transition: margin-left 0.15s ease-out;
}

@media (max-width: 639px) {
  .cc_xzKzT14X1H_Gk2xGIiwmH .arcana-cc__pill {
    scroll-snap-align: center;
  }
}