@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 =====
   weararcana: py-28 md:py-64 px-8 md:px-16 overflow-hidden relative */
.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: 112px 32px;
}

@media (min-width: 768px) {
  .cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs {
    padding: 256px 64px;
  }
}

/* Grain texture — weararcana: absolute inset-0 pointer-events-none opacity-[0.03] */
.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* weararcana: max-w-6xl mx-auto */
.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__inner {
  max-width: 1152px;
  margin: 0 auto;
}

/* ===== Two-column grid =====
   weararcana: grid md:grid-cols-2 gap-14 md:gap-32 items-start */
.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: start;
}

@media (min-width: 768px) {
  .cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 128px;   /* md:gap-32 = 8rem = 128px */
    row-gap: 56px;
  }
}

/* ===== Left column =====
   reference: motion.div initial={{ opacity: 0 }} animate={inView ? { opacity: 1 } : {}}
   transition: { duration: 1.6, ease: [0.16, 1, 0.3, 1] } */
.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__left {
  opacity: 0;
  transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs--inview .arcana-bs__left {
  opacity: 1;
}

/* ===== Eyebrow — FadeUp =====
   TextReveal FadeUp: opacity 0→1, y 14→0, 0.9s EASE=[0.22,1,0.36,1], viewport -10% 0px */
.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: #9A9A9A;
  margin: 0 0 32px;
  opacity: 0;
  transform: translateY(14px);
  will-change: transform, opacity;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__eyebrow--inview {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Headline =====
   weararcana: font-display font-light leading-[1.0] md:leading-[0.95]
   clamp(2.2rem, 9vw, 4.8rem) mb-10 md:mb-14 */
.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.2rem, 9vw, 4.8rem);
  font-weight: 300;
  line-height: 1.05;
  color: #1A1A1A;
  margin: 0 0 40px;
  display: block;
}

@media (min-width: 768px) {
  .cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__headline {
    margin-bottom: 56px;
  }
}

/* MaskedLines — overflow:hidden wrapper + inner rises from y:115%→0.
   TextReveal: stagger=0.08, duration=1.0, EASE=[0.22,1,0.36,1], viewport -12% 0px */
.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__line-wrap {
  display: block;
  overflow: hidden;
  padding-top: 0.12em;
  margin-top: -0.12em;
  padding-bottom: 0.55em;
  margin-bottom: -0.55em;
}

.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__line-inner {
  display: block;
  transform: translateY(115%);
  will-change: transform;
  transition: transform 1.0s cubic-bezier(0.22, 1, 0.36, 1);
}

.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__line-inner--0.arcana-bs__line-inner--inview {
  transform: translateY(0);
  transition-delay: 0s;
}

.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__line-inner--1.arcana-bs__line-inner--inview {
  transform: translateY(0);
  transition-delay: 0.08s;
}

.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__line-inner--2.arcana-bs__line-inner--inview {
  transform: translateY(0);
  transition-delay: 0.16s;
}

/* Italic metallic accent — chrome gradient, same as hero/hiw/tst */
.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__accent {
  font-style: italic;
  background-image: linear-gradient(
    180deg,
    #d9dbdf 0%,
    #bdc0c5 32%,
    #9a9ea3 66%,
    #84888d 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18))
          drop-shadow(0 1px 4px rgba(0, 0, 0, 0.1));
}

/* ===== Body paragraphs — clip-path wipe =====
   reference: initial:{ clipPath:'inset(0 0 100% 0)' } → animate:{ clipPath:'inset(0 0 0% 0)' }
   transition: duration 1.6s, ease [0.16,1,0.3,1], delay 0.6s (body1) / 0.9s (body2) */
.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__body {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.95;
  color: #4F4F4F;
  max-width: 42ch;
  margin: 0 0 32px;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
  .cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__body {
    font-size: 15px;
    line-height: 2.05;
    max-width: 40ch;
  }
}

.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__body--inview {
  clip-path: inset(0 0 0% 0);
  transition-delay: 0.6s;
}

.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__body--2 {
  margin-bottom: 0;
}

.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__body--2.arcana-bs__body--inview {
  transition-delay: 0.9s;
}

/* ===== Divider — width 0→48px =====
   reference: initial:{ width:0 } → animate:{ width:48 }
   transition: duration 1.2s, delay 1.2s, ease [0.16,1,0.3,1] */
.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__divider {
  width: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.12);
  margin-top: 64px;
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__divider--inview {
  width: 48px;
  transition-delay: 1.2s;
}

/* ===== Closing italic line =====
   reference: initial:{ opacity:0 } → animate:{ opacity:1 }
   transition: duration 1.2s, delay 1.5s
   color: var(--accent-silver) = #8E9296 */
.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__closing {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.4;
  color: #8E9296;
  margin: 28px 0 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__closing--inview {
  opacity: 1;
  transition-delay: 1.5s;
}

/* ===== Right column — values =====
   reference: initial:{ opacity:0, y:28 } → animate:{ opacity:1, y:0 }
   transition: duration 1.4s, delay 0.3s, ease [0.16,1,0.3,1] */
.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__values {
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s,
              transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

@media (min-width: 768px) {
  .cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__values {
    padding-top: 96px;
  }
}

.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__values--inview {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Value items — staggered entrance =====
   reference: animate={inView ? { opacity:1, y:0 } : { opacity:0, y:16 }}
   transition: duration 1.1s, delay 0.5+i*0.18
   i=0 → 0.5s, i=1 → 0.68s, i=2 → 0.86s */
.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__value {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding: 44px 0;
  position: relative;
  cursor: default;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1.1s ease, transform 1.1s ease;
}

.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__value--0.arcana-bs__value--inview {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__value--1.arcana-bs__value--inview {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.68s;
}

.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__value--2.arcana-bs__value--inview {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.86s;
}

/* Value hover — left accent bar slides down =====
   reference: absolute left-0 top-0 w-0.5, height 0→100%, opacity 0→1
   transition: duration 0.45s, ease [0.16,1,0.3,1] */
.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__value-bar {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 0;
  background: #8E9296;
  opacity: 0;
  transition: height 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__value:hover .arcana-bs__value-bar {
  height: 100%;
  opacity: 1;
}

/* weararcana: font-body text-[9px] tracking-[0.4em] uppercase mb-4
   color rgba(0,0,0,0.35), hover → rgba(0,0,0,0.5), x 0→12px */
.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__value-label {
  font-family: 'Outfit', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.35);
  margin: 0 0 16px;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__value:hover .arcana-bs__value-label {
  transform: translateX(12px);
  color: rgba(0, 0, 0, 0.5);
}

/* weararcana: font-display font-light text-[1.2rem] leading-[1.65]
   color rgba(0,0,0,0.62), hover → rgba(0,0,0,0.8), x 0→12px, delay 0.04s */
.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__value-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(0, 0, 0, 0.62);
  margin: 0;
  transition: transform 0.6s 0.04s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.6s 0.04s cubic-bezier(0.16, 1, 0.3, 1);
}

.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__value:hover .arcana-bs__value-text {
  transform: translateX(12px);
  color: rgba(0, 0, 0, 0.8);
}

/* Final border-t after the last value block */
.cc_xzKzT14X1H_lZSjfUzdgN .arcana-bs__values-end {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}