/* ======================================================================
   CASE STUDY SHELL — FOOTER, BACK LINK, NEXT PROJECT (portfolio-shell.css)
   ======================================================================

   Loaded by: daal-scene.html, case-studies/rizq/rizq.html, case-studies/apnaschool/apnaschool.html

   HOW TO EDIT
   - Same footer as the main site, renamed with a "pc-" prefix.
   - Each section starts with a big "=====" banner. Use Ctrl/Cmd + F
     and search the section number (e.g. "03.") to jump to it.

   TABLE OF CONTENTS
   01. Footer — contact + moving strip
   02. Footer — match the main site
   03. Back link
   04. "Next project" banner
   05. Typography overrides
   ====================================================================== */


/* ======================================================================
   01. FOOTER — CONTACT + MOVING STRIP
   ====================================================================== */
.pc-footer {
  overflow: hidden;
  background: var(--paper);
}

.pc-footer-main {
  padding: clamp(95px, 6.4vw, 145px) var(--gutter) clamp(72px, 4vw, 105px);
}

.pc-footer-question {
  margin: 0 0 clamp(20px, 1.2vw, 30px);
  font-size: clamp(12px, 1.4vw, 28px);
  font-weight: 200;
  line-height: 1.2;
}

.pc-footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.18em;
  max-width: 100%;
  font-size: clamp(46px, 4.9vw, 90px);
  font-weight: 500;
  line-height: 1.04;
  /* letter-spacing: -0.055em; */
  text-decoration: none;
}

.pc-footer-cta-text {
  transition: transform 0.35s ease;
}

.pc-footer-cta:hover .pc-footer-cta-text,
.pc-footer-cta:focus-visible .pc-footer-cta-text {
  transform: scale(0.985);
}

.pc-footer-cta-arrow {
  width: 0.3em;
  height: 0.3em;
  flex: none;
  background: currentColor;
  -webkit-mask: url("../assets/arrow-small.svg") center / contain no-repeat;
  mask: url("../assets/arrow-small.svg") center / contain no-repeat;
  opacity: 0;
  transform: translate(-0.12em, 0.12em);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.pc-footer-cta:hover .pc-footer-cta-arrow,
.pc-footer-cta:focus-visible .pc-footer-cta-arrow {
  opacity: 1;
  transform: translate(0, 0);
}

.pc-socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(18px, 2.8vw, 65px);
  margin-top: clamp(18px, 3vw, 48px);
  font-size: clamp(10px, 1vw, 26px);
  font-weight: 500;
}

.pc-socials a {
  position: relative;
  text-decoration: none;
}

.pc-socials a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s ease;
}

.pc-socials a:hover::after,
.pc-socials a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* --- Moving capability strip (portfolio-shell.js repeats the row) --- */
.pc-footer-marquee {
  overflow: hidden;
  border-top: 1px solid var(--ink);
}

.pc-marquee-track,
.pc-marquee-group {
  display: flex;
  width: max-content;
  align-items: center;
}

.pc-marquee-track.is-ready {
  animation: pc-footer-marquee 55s linear infinite;
}

.pc-marquee-group {
  flex: none;
  min-height: clamp(120px, 8.3vw, 190px);
}

.pc-marquee-item {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding-left: clamp(32px, 2.4vw, 56px);
  font-family: var(--font-main);
  font-size: clamp(20px, 2.5vw, 30px);
  font-weight: 300;
  line-height: 1;
  /* letter-spacing: -0.055em; */
  white-space: nowrap;
}

.pc-marquee-item:nth-child(odd) {
  font-family: var(--font-main);
  font-weight: 500;
}

.pc-marquee-item::after {
  content: "•";
  margin-left: clamp(32px, 2.4vw, 56px);
  font-size: 0.55em;
  font-weight: 300;
}

@keyframes pc-footer-marquee {
  to {
    transform: translateX(-50%);
  }
}

/* --- Mobile: footer --- */
@media (max-width: 600px) {
  .pc-footer-main {
    padding: 88px var(--gutter) 76px;
  }

  .pc-footer-question {
    font-size: 17px;
  }

  .pc-footer-cta {
    font-size: clamp(42px, 10vw, 66px);
  }

  .pc-socials {
    gap: 16px 28px;
    margin-top: 52px;
    font-size: 18px;
  }

  .pc-marquee-group {
    min-height: 100px;
  }

  .pc-marquee-item {
    font-size: 42px;
  }
}


/* ======================================================================
   02. FOOTER — MATCH THE MAIN SITE
   Same colors, spacing and fonts as the Home footer.
   ====================================================================== */
.pc-footer {
  --paper: #fafafa;
  --ink: #1f2022;
  --gutter: clamp(22px, 5.1vw, 220px);
  color: #1f2022;
  background: #fafafa;
  font-family: var(--font-main);
  text-align: left;
}

.pc-footer a {
  color: inherit;
}

.pc-footer * {
  box-sizing: border-box;
}

.pc-footer .pc-footer-cta {
  font-family: var(--font-main);
}

.pc-footer .pc-marquee-item {
  font-family: var(--font-main);
}

.pc-footer .pc-marquee-item:nth-child(odd) {
  font-family: var(--font-main);
  font-weight: 500;
}


/* ======================================================================
   03. BACK LINK
   ====================================================================== */
.pc-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.pc-back svg {
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}


/* ======================================================================
   04. "NEXT PROJECT" BANNER
   Big link at the bottom of each case study.
   ====================================================================== */
.case-next {
  --next-bg: #f0f0ee;
  --next-ink: #1f2022;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  min-height: 360px;
  padding: clamp(64px, 7vw, 130px) clamp(22px, 5.1vw, 220px);
  overflow: hidden;
  isolation: isolate;
  background: var(--next-bg);
  color: var(--next-ink);
  text-decoration: none;
  transition:
    background 0.4s,
    color 0.4s;
}

.case-next-kicker {
  font: 500 12px/1.3 var(--font-main);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.case-next-title {
  display: flex;
  align-items: center;
  gap: 0.2em;
  max-width: 60%;
  font: 500 clamp(44px, 6.8vw, 140px)/1 var(--font-main);
  letter-spacing: -0.045em;
}

.case-next-title i {
  display: grid;
  place-items: center;
  width: 0.85em;
  height: 0.85em;
  flex: 0 0 0.85em;
  border-radius: 50%;
  background: var(--next-ink);
  color: var(--next-bg);
  transition: transform 0.5s;
}

.case-next-title svg {
  width: 50%;
  height: 50%;
}

.case-next-image {
  position: absolute;
  right: 5.1%;
  top: 50%;
  width: 30%;
  aspect-ratio: 16/9;
  border-radius: 18px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-35%) rotate(6deg) scale(0.85);
  transition:
    opacity 0.4s,
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 24px 60px #0003;
}

.case-next-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-next:is(:hover, :focus-visible) {
  --next-bg: #171719;
  --next-ink: #fafafa;
}

.case-next:is(:hover, :focus-visible) .case-next-image {
  opacity: 1;
  transform: translateY(-50%) rotate(-3deg) scale(1);
}

.case-next:is(:hover, :focus-visible) .case-next-title i {
  transform: rotate(-45deg);
}

.ds-page .case-next {
  --next-bg: #f15a29;
  --next-ink: #fff4dc;
}

.ds-page .case-next::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../assets/daal-scene/pat_orange.svg") 0 0/1400px auto;
  opacity: 0.3;
}

@media (hover: none), (max-width: 700px) {
  .case-next {
    min-height: 0;
  }

  .case-next-title {
    max-width: 100%;
    font-size: clamp(40px, 8vw, 72px);
  }

  .case-next-image {
    position: relative;
    top: auto;
    right: auto;
    width: min(100%, 480px);
    margin-top: 12px;
    opacity: 1;
    transform: none;
  }

  .case-next:is(:hover, :focus-visible) .case-next-image {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-next,
  .case-next * {
    transition: none;
  }

  .pc-marquee-track.is-ready {
    animation: none;
  }

  .pc-footer-marquee {
    overflow-x: auto;
  }
}


/* ======================================================================
   05. TYPOGRAPHY OVERRIDES
   ====================================================================== */
.pc-footer .pc-footer-question {
  font-weight: 500;
}


.pc-footer { --paper: #E7E3D6; background: var(--paper); }

/* Full-size footer statement with a separate contact button. */
.footer-contact-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(64px, 7vw, 160px);
  row-gap: 36px;
  width: 100%;
}
.footer-contact-row .footer-cta,
.footer-contact-row .pc-footer-cta { margin: 0; }
.connect-button-wrap { display: inline-flex; padding: 12px; margin: -12px; justify-self: end; }
.connect-button,
.pc-footer .connect-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 80px;
  min-width: 230px;
  padding: 25px 36px;
  border: 1px solid #1f2022;
  border-radius: 999px;
  background: #1f2022;
  color: #fff;
  font: 500 20px/1.2 var(--font-main, Inter, Arial, sans-serif);
  text-decoration: none;
  white-space: nowrap;
  transform: translate(var(--connect-x, 0px), var(--connect-y, 0px));
  transition: transform 220ms ease-out, background 180ms ease-out;
}
.connect-button:hover,
.pc-footer .connect-button:hover { background: #353936; }
.connect-button:focus-visible { outline: 2px solid #1f2022; outline-offset: 5px; }
@media (max-width: 760px) {
  .footer-contact-row { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .connect-button-wrap { justify-self: end; }
  .connect-button, .pc-footer .connect-button {
    min-height: 72px;
    min-width: 210px;
    padding: 22px 30px;
    font-size: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .connect-button { transform: none !important; transition: none; }
}

/* Home footer styles shared by all three case studies. */
@font-face {
  font-family: PortfolioFooterInter;
  src: url("../assets/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
.pc-footer {
  --paper: #E7E3D6;
  --ink: #1f2022;
  --gutter: clamp(22px, 5.1vw, 220px);
  --font-main: PortfolioFooterInter, Inter, Arial, sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-main);
  text-align: left;
  letter-spacing: normal;
}
.pc-footer * { box-sizing: border-box; }
.pc-footer p { margin: 0; }
.pc-footer a { color: inherit; }
.pc-footer {
  overflow: hidden;
  background: var(--paper);
}

.pc-footer-main {
  padding: clamp(95px, 6.4vw, 145px) var(--gutter) clamp(72px, 4vw, 105px);
}

.pc-footer-question {
  margin: 0 0 clamp(20px, 1.2vw, 30px);
  font-size: clamp(18px, 1.4vw, 28px);
  font-weight: 200;
  line-height: 1.2;
}

.pc-footer .pc-footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.18em;
  max-width: 100%;
  font-size: clamp(190px, 4.9vw, 90px);
  font-weight: 300;
  line-height: 1.04;
  text-decoration: none;
}

.pc-footer .pc-footer-cta-text {
  transition: transform 0.35s ease;
}

.pc-footer .pc-footer-cta:hover .pc-footer .pc-footer-cta-text,
.pc-footer .pc-footer-cta:focus-visible .pc-footer .pc-footer-cta-text {
  transform: scale(0.985);
}

.pc-footer .pc-footer-cta-arrow {
  width: 0.3em;
  height: 0.3em;
  flex: none;
  background: currentColor;
  -webkit-mask: url("../assets/arrow-small.svg") center / contain no-repeat;
  mask: url("../assets/arrow-small.svg") center / contain no-repeat;
  opacity: 0;
  transform: translate(-0.12em, 0.12em);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.pc-footer .pc-footer-cta:hover .pc-footer .pc-footer-cta-arrow,
.pc-footer .pc-footer-cta:focus-visible .pc-footer .pc-footer-cta-arrow {
  opacity: 1;
  transform: translate(0, 0);
}

.pc-socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(18px, 2.8vw, 65px);
  margin-top: clamp(18px, 3vw, 48px);
  font-size: clamp(10px, 1vw, 26px);
  font-weight: 500;
}

.pc-socials a {
  position: relative;
  text-decoration: none;
}

.pc-socials a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s ease;
}

.pc-socials a:hover::after,
.pc-socials a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* --- Moving capability strip (script.js repeats the row) --- */
.pc-footer-marquee {
  overflow: hidden;
  border-top: 1px solid var(--ink);
}

.pc-marquee-track,
.pc-marquee-group {
  display: flex;
  width: max-content;
  align-items: center;
}

.pc-marquee-track.is-ready {
  animation: pc-footer-marquee 55s linear infinite;
}

.pc-marquee-group {
  flex: none;
  min-height: clamp(120px, 8.3vw, 190px);
}

.pc-marquee-item {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding-left: clamp(32px, 2.4vw, 56px);
  font-family: var(--font-main);
  font-size: clamp(20px, 2.5vw, 30px);
  font-weight: 300;
  line-height: 1;
  white-space: nowrap;
}

.pc-marquee-item:nth-child(odd) {
  font-family: var(--font-main);
  font-weight: 500;
}

.pc-marquee-item::after {
  content: "•";
  margin-left: clamp(32px, 2.4vw, 56px);
  font-size: 0.55em;
  font-weight: 300;
}

@keyframes pc-footer-marquee {
  to {
    transform: translateX(-50%);
  }
}

/* --- Mobile: footer --- */
@media (max-width: 600px) {
  .pc-footer-main {
    padding: 88px var(--gutter) 76px;
  }

  .pc-footer-question {
    font-size: 17px;
  }

  .pc-footer .pc-footer-cta {
    font-size: clamp(42px, 10vw, 66px);
  }

  .pc-socials {
    gap: 16px 28px;
    margin-top: 52px;
    font-size: 18px;
  }

  .pc-marquee-group {
    min-height: 100px;
  }

  .pc-marquee-item {
    font-size: 42px;
  }
}



.pc-footer .pc-footer-question { font-weight: 500; margin: 0 0 clamp(20px, 1.2vw, 30px); }
.pc-footer .footer-contact-row .pc-footer-cta { margin: 0; }
.pc-footer .connect-button { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .pc-footer-marquee { overflow-x: auto; }
  .pc-marquee-track.is-ready { animation: none; }
}