/* =========================================================
   OUTFIT CHECK — IMPACT (light Vinted theme)
   ---------------------------------------------------------
   Scope: slides/25-impact.html only.
   Namespace: .oc-impact
   Fixed 1920x1080. Transparent background: the shell paints.
   ========================================================= */

.slide.oc-impact{
  --oci-ink:#0B2B2A;
  --oci-teal:#007782;
  --oci-teal-2:#00B3A6;
  --oci-mint:#DDF4EF;
  --oci-coral:#FF6F5E;
  --oci-line:rgba(11,43,42,.10);
  --oci-soft:rgba(11,43,42,.46);
  --oci-ease:cubic-bezier(.16,1,.3,1);

  background:transparent;
  color:var(--oci-ink);
  font-family:var(--font-ui,'Inter'),system-ui,-apple-system,sans-serif;
}

/* El fondo animado del shell manda. */
.slide.oc-impact::before,
.slide.oc-impact::after{content:none;display:none;}

.slide.oc-impact .slide__inner{
  padding:92px 96px 82px;
  display:flex;
  flex-direction:column;
}

/* =========================================================
   HEADER
   ========================================================= */
.oc-impact__head{
  position:relative;
  z-index:3;
  flex:0 0 auto;
}

.oc-impact__kicker{
  display:flex;
  align-items:center;
  gap:14px;
  font-family:var(--font-mono,'JetBrains Mono'),monospace;
  font-size:11px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--oci-teal);
}
.oc-impact__kicker::before{
  content:"";
  width:28px;
  height:1px;
  flex:0 0 auto;
  background:var(--oci-teal);
  opacity:.65;
}

.oc-impact__title{
  margin-top:22px;
  font-family:var(--font-display,'Instrument Serif'),Georgia,serif;
  font-size:116px;
  font-weight:400;
  line-height:.98;
  letter-spacing:-.03em;
  color:var(--oci-ink);
  white-space:nowrap;
}
.oc-impact__title em{
  font-style:italic;
  color:var(--oci-teal);
}
.oc-impact__period{
  color:var(--oci-coral);
  font-style:normal;
}

/* =========================================================
   MAIN SPLIT
   ========================================================= */
.oc-impact__main{
  position:relative;
  z-index:3;
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 800px;
  gap:72px;
  align-items:center;
  padding-top:14px;
}

/* ---------- left: the 50% ---------- */
.oc-impact__stat{
  min-width:0;
  padding-left:6px;
}

.oc-impact__label{
  font-family:var(--font-mono,'JetBrains Mono'),monospace;
  font-size:10.5px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--oci-soft);
}

.oc-impact__number{
  display:flex;
  align-items:baseline;
  margin-top:18px;
  margin-left:-7px;
  white-space:nowrap;
  font-variant-numeric:lining-nums;
}
.oc-impact__approx{
  font-family:var(--font-display,'Instrument Serif'),Georgia,serif;
  font-style:italic;
  font-size:92px;
  line-height:1;
  color:var(--oci-teal);
  opacity:.62;
  margin-right:14px;
}
.oc-impact__figure{
  font-family:var(--font-ui,'Inter'),system-ui,sans-serif;
  font-size:300px;
  font-weight:800;
  line-height:.72;
  letter-spacing:-.075em;
  color:var(--oci-ink);
}
.oc-impact__pct{
  display:inline-block;
  margin-left:12px;
  font-size:116px;
  font-weight:700;
  line-height:1;
  letter-spacing:-.04em;
  color:var(--oci-teal);
}

.oc-impact__copy{
  margin-top:28px;
  max-width:560px;
  font-size:31px;
  font-weight:500;
  line-height:1.38;
  letter-spacing:-.015em;
  color:rgba(11,43,42,.70);
  text-wrap:pretty;
}
.oc-impact__copy em{
  font-style:normal;
  font-weight:650;
  color:var(--oci-teal);
}

/* ---------- cart pictogram ---------- */
.oc-impact__carts{
  width:640px;
  max-width:100%;
  margin-top:40px;
}
.oc-impact__cart-row{
  display:flex;
  align-items:center;
}
.oc-impact__cart-group{
  display:flex;
  align-items:center;
  gap:20px;
  color:var(--oci-teal);
}
.oc-impact__cart-group--lost{
  position:relative;
  margin-left:30px;
  padding-left:30px;
  color:rgba(11,43,42,.34);
  opacity:.55;
}
.oc-impact__cart-group--lost::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:1px;
  height:30px;
  transform:translateY(-50%);
  background:rgba(11,43,42,.14);
}
.oc-impact__cart{
  display:block;
  width:42px;
  height:38px;
  flex:0 0 auto;
}
.oc-impact__cart svg{
  display:block;
  width:42px;
  height:38px;
}
.oc-impact__cart-key{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  margin-top:15px;
  font-family:var(--font-mono,'JetBrains Mono'),monospace;
  font-size:9.5px;
  font-weight:400;
  line-height:1.3;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:rgba(11,43,42,.42);
}
.oc-impact__cart-key-lost{color:rgba(11,43,42,.55);}

/* =========================================================
   CARD — the return route
   ========================================================= */
.oc-impact__card{
  position:relative;
  z-index:3;
  width:800px;
  height:560px;
  padding:44px 48px 38px;
  display:flex;
  flex-direction:column;
  border:1px solid var(--oci-line);
  border-radius:30px;
  background:
    radial-gradient(120% 82% at 100% 0%,rgba(221,244,239,.55) 0%,rgba(221,244,239,0) 54%),
    linear-gradient(180deg,#FFFFFF 0%,#FFFEFB 100%);
  box-shadow:
    0 30px 80px rgba(11,43,42,.09),
    0 2px 6px rgba(11,43,42,.035),
    inset 0 1px 0 rgba(255,255,255,.95);
  overflow:hidden;
}

.oc-impact__card-head{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.oc-impact__card-kicker{
  font-family:var(--font-mono,'JetBrains Mono'),monospace;
  font-size:10px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:rgba(11,43,42,.44);
}
.oc-impact__leaf{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:50%;
  border:1px solid rgba(0,119,130,.08);
  background:linear-gradient(160deg,#F1FBF7 0%,#E2F5EF 100%);
  color:var(--oci-teal);
}
.oc-impact__leaf svg{
  display:block;
  width:21px;
  height:21px;
}

.oc-impact__card-copy{
  margin-top:24px;
  font-family:var(--font-display,'Instrument Serif'),Georgia,serif;
  font-size:46px;
  font-weight:400;
  line-height:1.14;
  letter-spacing:-.02em;
  color:var(--oci-ink);
}
.oc-impact__card-copy span{display:block;}
.oc-impact__card-copy em{
  font-style:italic;
  color:var(--oci-teal);
}

.oc-impact__route{
  margin-top:auto;
  padding-top:12px;
}
.oc-impact__route svg{
  display:block;
  width:704px;
  height:250px;
  overflow:visible;
}

/* main route */
.oc-impact__route-main{
  fill:none;
  stroke:rgba(11,43,42,.18);
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-dasharray:100;
  stroke-dashoffset:100;
  transition:stroke-dashoffset 1.15s var(--oci-ease) .55s;
}
.slide.visible.oc-impact .oc-impact__route-main{stroke-dashoffset:0;}

.oc-impact__route-chev{
  fill:none;
  stroke:rgba(11,43,42,.32);
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:0;
  transition:opacity .5s var(--oci-ease) 1.1s;
}
.slide.visible.oc-impact .oc-impact__route-chev{opacity:1;}

.oc-impact__node circle{
  fill:#FFFFFF;
  stroke:var(--oci-teal);
  stroke-width:2.2;
  opacity:0;
  transform:scale(.6);
  transform-box:fill-box;
  transform-origin:center;
  transition:opacity .5s var(--oci-ease) .9s,transform .55s var(--oci-ease) .9s;
}
.slide.visible.oc-impact .oc-impact__node circle{
  opacity:1;
  transform:scale(1);
}
.oc-impact__node circle:nth-child(2){transition-delay:1.02s;}
.oc-impact__node circle:nth-child(3){transition-delay:1.14s;}

.oc-impact__route-label{
  font-family:var(--font-mono,'JetBrains Mono'),monospace;
  font-size:10px;
  font-weight:500;
  letter-spacing:.11em;
  fill:rgba(11,43,42,.58);
  opacity:0;
  transition:opacity .7s var(--oci-ease) 1s;
}
.slide.visible.oc-impact .oc-impact__route-label{opacity:1;}

/* the return loop, cut before it can come back */
.oc-impact__route-loop{
  opacity:0;
  transition:opacity .9s var(--oci-ease) 1.05s;
}
.slide.visible.oc-impact .oc-impact__route-loop{opacity:1;}

.oc-impact__loop-path{
  fill:none;
  stroke:rgba(255,111,94,.55);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-dasharray:3 7;
}
.oc-impact__route-cut{
  fill:none;
  stroke:rgba(255,111,94,.82);
  stroke-width:1.6;
  stroke-linecap:round;
}
.oc-impact__route-avoid{
  font-family:var(--font-mono,'JetBrains Mono'),monospace;
  font-size:9px;
  font-weight:500;
  letter-spacing:.20em;
  fill:rgba(255,111,94,.88);
}

/* =========================================================
   SOURCE
   ========================================================= */
.oc-impact__source{
  position:absolute;
  left:96px;
  bottom:36px;
  z-index:4;
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-mono,'JetBrains Mono'),monospace;
  font-size:10.5px;
  font-weight:400;
  line-height:1.4;
  letter-spacing:.035em;
  color:rgba(11,43,42,.44);
  white-space:nowrap;
}
.oc-impact__source::before{
  content:"";
  width:20px;
  height:1px;
  flex:0 0 auto;
  background:rgba(11,43,42,.22);
}

/* =========================================================
   MOTION
   ========================================================= */
.slide.oc-impact .reveal{
  opacity:0;
  transform:translateY(26px);
  transition:
    opacity .9s var(--oci-ease),
    transform 1s var(--oci-ease);
  transition-delay:var(--d,0s);
}
.slide.visible.oc-impact .reveal{
  opacity:1;
  transform:none;
}

/* =========================================================
   CHROME — tinta sobre la slide clara
   ========================================================= */
body:has(.slide.oc-impact.visible) .deck-chrome{color:#0B2B2A;}
body:has(.slide.oc-impact.visible) .deck-top__section,
body:has(.slide.oc-impact.visible) .deck-top__right,
body:has(.slide.oc-impact.visible) .deck-count{color:rgba(11,43,42,.52);}
body:has(.slide.oc-impact.visible) .deck-count b{color:#0B2B2A;}
body:has(.slide.oc-impact.visible) .brand__mark{color:#007782;filter:none;}
body:has(.slide.oc-impact.visible) .progress{background:rgba(11,43,42,.07);}
body:has(.slide.oc-impact.visible) .progress__bar{
  background:linear-gradient(90deg,#007782,#00B3A6);
  box-shadow:none;
}