@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
/* the space between the header and the banner stays black */
body {
  background: #000;
}

/* Palette: black and yellow #FFAA17 everywhere.
   White (#FFFFFF) is used only for small highlights, like the index page. */

/* ---------- HERO (black) ---------- */
.ind-hero {
  position: relative;
  min-height: 62vh;
  overflow: hidden;
  background: #000000;
  display: flex;
  align-items: center;
  padding: 150px 6vw 110px;
  isolation: isolate;
}
/* Faint yellow grid that drifts */
.ind-grid-bg {
  position: absolute;
  inset: -60px;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 170, 23, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 170, 23, 0.1) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 25%, transparent 75%);
          mask-image: radial-gradient(ellipse at 50% 40%, #000 25%, transparent 75%);
  animation: indGrid 16s linear infinite;
  pointer-events: none;
}
@keyframes indGrid {
  to { transform: translate(56px, 56px); }
}
/* Big outlined word behind the heading */
.ind-bg-word {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  transform: translate(-50%, -50%);
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: clamp(90px, 22vw, 340px);
  line-height: 1;
  letter-spacing: 6px;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 170, 23, 0.16);
  pointer-events: none;
  animation: indBgWord 14s ease-in-out infinite alternate;
}
@keyframes indBgWord {
  from { transform: translate(-56%, -50%); }
  to { transform: translate(-44%, -50%); }
}
.ind-hero-inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}
.ind-crumb {
  display: flex;
  gap: 10px;
  margin-bottom: 26px;
  font-family: "Rubik", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffaa17;
  opacity: 0;
  animation: indUp 0.7s ease 0.1s forwards;
}
.ind-crumb a {
  color: #ffaa17;
  text-decoration: none;
  border-bottom: 2px solid #ffaa17;
}
.ind-crumb a:hover { background: #ffaa17; color: #000000; }
.ind-hero h1 {
  margin: 0 0 22px;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: clamp(56px, 10vw, 128px);
  line-height: 0.95;
  text-transform: uppercase;
  color: #ffaa17;
}
/* White highlight, used sparingly */
.ind-hl {
  color: #ffffff;
  font-family: "Oswald", sans-serif;
}
.ind-hero-sub {
  max-width: 560px;
  margin: 0;
  font-family: "Rubik", sans-serif;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  color: rgba(255, 170, 23, 0.8);
  opacity: 0;
  animation: indUp 0.8s ease 0.9s forwards;
}
/* Yellow bar that wipes in along the bottom edge */
.ind-hero-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: #ffaa17;
  transform: scaleX(0);
  transform-origin: left center;
  animation: indBar 1.2s cubic-bezier(0.7, 0, 0.2, 1) 0.2s forwards;
}
@keyframes indBar {
  to { transform: scaleX(1); }
}

/* Heading words: each rises out of a mask */
.ind-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  margin-right: 0.22em;
  padding-bottom: 0.06em;
}
.ind-rise {
  display: inline-block;
  transform: translateY(110%);
  animation: indWord 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(var(--i) * 120ms + 300ms);
}
@keyframes indWord {
  to { transform: none; }
}
@keyframes indUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

/* ---------- YELLOW TICKER (glass band, yellow text) ---------- */
.ind-ticker {
  position: relative;
  overflow: hidden;
  padding: 16px 0;
  color: #ffaa17;
  background: linear-gradient(
    135deg,
    rgba(255, 170, 23, 0.22),
    rgba(255, 170, 23, 0.06) 60%,
    rgba(255, 255, 255, 0.04)
  );
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-top: 1px solid rgba(255, 170, 23, 0.45);
  border-bottom: 1px solid rgba(255, 170, 23, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 170, 23, 0.25),
    0 10px 30px rgba(255, 170, 23, 0.15);
}
/* Soft glass sheen across the band */
.ind-ticker::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.16) 50%, transparent 70%);
  pointer-events: none;
}
.ind-track {
  position: relative;
  z-index: 1;
  display: flex;
  width: max-content;
  animation: indMarquee 32s linear infinite;
}
.ind-ticker:hover .ind-track { animation-play-state: paused; }
.ind-track span {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding-right: 22px;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #ffaa17;
  text-shadow: 0 0 12px rgba(255, 170, 23, 0.35);
}
.ind-track i {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #ffaa17;
  box-shadow: 0 0 10px rgba(255, 170, 23, 0.7);
  transform: rotate(45deg);
}
@keyframes indMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- BLACK SECTION ---------- */
.ind-section {
  background: #000000;
  color: #ffaa17;
  padding: 110px 6vw;
  position: relative;
  overflow: hidden;
}
.ind-head {
  max-width: 1196px;
  margin: 0 auto 64px;
}
.ind-label {
  display: inline-block;
  font-family: "Oswald", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #ffaa17;
  border: 1px solid #ffaa17;
  border-radius: 15px;
  padding: 8px 16px;
  margin-bottom: 22px;
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ind-head.in .ind-label {
  opacity: 1;
  transform: none;
}
.ind-head h2 {
  margin: 0 0 16px;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.02;
  text-transform: uppercase;
  color: #ffaa17;
}
.ind-head h2 .ind-rise {
  animation: none;
  transform: translateY(110%);
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(var(--i) * 110ms + 150ms);
  font-family: "Oswald", sans-serif;
}
.ind-head.in h2 .ind-rise { transform: none; }
.ind-head p {
  margin: 0;
  max-width: 560px;
  font-family: "Rubik", sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: #ffffffc9;
}

/* ---------- CARDS ---------- */
.ind-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr; /* every row = same height, based on the tallest card */
  align-items: stretch;
  gap: 30px;
  perspective: 1400px;
}
.ind-card {
  position: relative;
  display: flex;
  flex: 1;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  gap: 14px;
  padding: 34px 30px 28px;
  background: #0b0b0b;
  color: #ffaa17;
  overflow: hidden;
  isolation: isolate;
  cursor: default;
  transform-style: preserve-3d;
  box-shadow: 0 0px 27px rgba(255, 170, 23, 0.25);
  transition:
    transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.6s ease;
  border-radius : 15px;
}

/* 1. Scroll state: the card slides in from its side when it comes into view,
      moves up and fades when you scroll past, and comes back from outside when
      you scroll up. Driven by JavaScript, so it works in every browser. */
.ind-cell {
  perspective: 1200px;
  display: flex;
  height: 100%;
}
.ind-slot {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
  will-change: transform, opacity;
  transition:
    opacity 0.9s ease,
    transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: var(--d, 0s);
}
.ind-slot[data-state="hidden"] {
  opacity: 0;
  transform: translate3d(calc(var(--side) * 180px), 60px, 0) rotateY(calc(var(--side) * -20deg)) scale(0.94);
}
.ind-slot[data-state="shown"] {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotateY(0deg) scale(1);
}
.ind-slot[data-state="up"] {
  opacity: 0;
  transform: translate3d(0, -220px, 0) scale(0.94);
  transition-delay: 0s;
}

/* 2. Border draws itself in: a yellow frame revealed corner to corner */
.ind-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 2px solid #ffaa17;
  pointer-events: none;
  clip-path: inset(0 100% 100% 0);
}
.ind-card.in::before {
  animation: indFrame 1s cubic-bezier(0.7, 0, 0.2, 1) backwards;
  animation-delay: calc(var(--d, 0s) + 0.35s);
}
@keyframes indFrame {
  from { clip-path: inset(0 100% 100% 0); }
  50% { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* 3. Hover: yellow liquid rises from the bottom */
.ind-fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #ffaa17;
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 0.6s cubic-bezier(0.7, 0, 0.2, 1);
  pointer-events: none;
}
.ind-card:hover .ind-fill { transform: scaleY(1); }

/* 4. Hover: a white light sweep crosses the card once */
.ind-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.35) 50%, transparent 62%);
  transform: translateX(-120%);
  pointer-events: none;
}
.ind-card:hover::after {
  animation: indSweep 0.9s ease forwards;
}
@keyframes indSweep {
  to { transform: translateX(120%); }
}

/* Hover lift and glow */
.ind-card:hover {
  transform: translateY(-12px) rotateX(3deg);
  box-shadow: 0 30px 50px rgba(255, 170, 23, 0.28);
}
.ind-card:focus-visible {
  outline: 2px solid #ffaa17;
  outline-offset: 6px;
}

/* Everything inside the card sits above the fill */
.ind-no,
.ind-ico,
.ind-title,
.ind-card p,
.ind-more {
  position: relative;
  z-index: 1;
}

.ind-no {
  align-self: flex-end;
  font-family: "Oswald", sans-serif;
  font-size: 14px;
  letter-spacing: 3px;
  color: #ffaa17;
  transition: color 0.4s ease;
}
.ind-card:hover .ind-no { color: #000000; }
.ind-card.in .ind-no {
  animation: indCount 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.3) backwards;
  animation-delay: calc(var(--d, 0s) + 0.5s);
}
@keyframes indCount {
  from { opacity: 0; transform: translateX(20px) scale(0.6); }
}

/* 5. Icon: strokes draw on, then the badge spins on hover */
.ind-ico {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border: 2px solid #ffaa17;
  color: #ffaa17;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s ease, color 0.4s ease, background-color 0.4s ease;
}
.ind-card:hover .ind-ico {
  transform: rotate(-135deg);
  border-color: #000000;
  color: #000000;
}
.ind-ico svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.ind-ico-lg { width: 84px; height: 84px; }
.ind-ico-lg svg { width: 46px; height: 46px; }

.draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.ind-card.in .draw {
  animation: indDraw 1.1s ease forwards;
  animation-delay: calc(var(--d, 0s) + 0.6s + var(--i, 0) * 0.15s);
}
@keyframes indDraw {
  to { stroke-dashoffset: 0; }
}

/* 6. Title: letters rise in one by one, then wave on hover */
.ind-title {
  margin: 6px 0 0;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.05;
  text-transform: uppercase;
  color: #ffaa17;
  transition: color 0.4s ease;
}
.ind-title span {
  display: inline-block;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 22ms);
}
.ind-card.in .ind-title span {
  animation: indLetter 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(var(--d, 0s) + 0.45s + var(--i, 0) * 28ms);
  font-family: "Oswald", sans-serif;
}
@keyframes indLetter {
  from { opacity: 0; transform: translateY(16px); }
}
.ind-card:hover .ind-title { color: #000000; }
.ind-card:hover .ind-title span {
  transform: translateY(-6px);
}

.ind-card p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.4s ease;
  text-transform: capitalize;
  font-family: 'Satoshi-Regular';
}
.ind-card:hover p { color: rgba(0, 0, 0, 0.8); }
.ind-card.in p {
  animation: indFadeUp 0.7s ease backwards;
  animation-delay: calc(var(--d, 0s) + 0.7s);
  font-family: 'Satoshi-Regular';
}
@keyframes indFadeUp {
  from { opacity: 0; transform: translateY(10px); }
}

/* 7. Footer line: a yellow rule grows across, arrow slides */
.ind-more {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffaa17;
  transition: color 0.4s ease;
}
.ind-more::before {
  content: "";
  flex: 1;
  height: 1px;
  background: #000;
  transform-origin: left center;
  transform: scaleX(0.25);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.4s ease;
}
.ind-card:hover .ind-more { color: #000000; }
.ind-card:hover .ind-more::before {
  transform: scaleX(1);
  background: #000000;
}
.ind-more em { font-style: normal; }

/* View Projects is a link now */
a.ind-more {
  text-decoration: none;
  cursor: pointer;
}
a.ind-more:focus-visible {
  outline: 2px solid #ffaa17;
  outline-offset: 4px;
}
.ind-card:hover a.ind-more:focus-visible {
  outline-color: #000000;
}

/* "view more" inside the description, opens the popup */
.ind-readmore {
  position: relative;
  z-index: 2;
  padding: 0;
  border: 0;
  background: none;
  color: #ffaa17;
  font: inherit;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.3s ease;
}
.ind-readmore:hover {
  color: #ffffff;
}
.ind-readmore:focus-visible {
  outline: 2px solid #ffaa17;
  outline-offset: 3px;
}
.ind-card:hover .ind-readmore {
  color: #000000;
}
.ind-card:hover .ind-readmore:hover {
  text-decoration-thickness: 2px;
}
.ind-more b {
  display: inline-block;
  transition: transform 0.4s ease;
}
.ind-card:hover .ind-more b { transform: translateX(8px); }

/* ---------- MODAL (black with yellow frame) ---------- */
@keyframes indFade {
  from { opacity: 0; }
}
@keyframes indPop {
  from { opacity: 0; transform: translateY(30px) scale(0.96); }
}
@keyframes indSlide {
  to { opacity: 1; transform: none; }
}
.ind-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.82);
  animation: indFade 0.3s ease both;
}
.ind-modal-box {
  width: min(560px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: #0b0b0b;
  color: #ffaa17;
  border: 2px solid #ffaa17;
  box-shadow: 14px 14px 0 #ffaa17;
  animation: indPop 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.ind-modal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 30px;
  border-bottom: 2px solid #ffaa17;
}
.ind-modal-top .ind-ico { border-color: #ffaa17; }
.ind-modal-body { padding: 30px 30px 34px; }
.ind-modal-body h3 {
  margin: 0 0 12px;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 34px;
  text-transform: uppercase;
}
.ind-modal-body > p {
  margin: 0 0 22px;
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
}
.ind-modal-top .draw { animation: indDraw 1s ease 0.2s forwards; }
.ind-modal-body ul {
  display: grid;
  gap: 10px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}
.ind-modal-body li {
  position: relative;
  padding-left: 30px;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  color: #ffffff;
  opacity: 0;
  transform: translateX(-14px);
  animation: indSlide 0.5s ease forwards;
  animation-delay: calc(var(--i) * 120ms + 200ms);
}
.ind-modal-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 12px;
  height: 12px;
  background: #ffaa17;
  transform: rotate(45deg);
}
.ind-close {
  width: 44px;
  height: 44px;
  background: #ffaa17;
  border: none;
  color: #000000;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.4s ease, background-color 0.3s ease;
}
.ind-close:hover {
  transform: rotate(90deg);
  background: #ffffff;
}

/* Shared button */
.ind-btn {
  display: inline-block;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  color: #000000;
  background: #ffaa17;
  border: 2px solid #ffaa17;
  padding: 15px 32px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.ind-btn:hover {
  transform: translate(-4px, -4px);
  box-shadow: 6px 6px 0 #ffaa17;
  background: #000000;
  color: #ffaa17;
}

/* ---------- CTA BAND (black, yellow stripes) ---------- */
.ind-cta {
  position: relative;
  overflow: hidden;
  background: #000000;
  color: #ffaa17;
  padding: 100px 6vw;
  text-align: center;
  border-top: 1px solid rgba(255, 170, 23, 0.3);
  isolation: isolate;
}
.ind-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(-45deg, rgba(255, 170, 23, 0.07) 0 2px, transparent 2px 40px);
  animation: indGrid 14s linear infinite;
}
.ind-cta h2 {
  margin: 0 0 16px;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: clamp(34px, 4.6vw, 62px);
  text-transform: uppercase;
  color: #ffaa17;
}
.ind-cta p {
  max-width: 580px;
  margin: 0 auto 34px;
  font-family: 'Satoshi-Regular';  
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
}

/* Scroll progress: a yellow line along the bottom of the screen */
.ind-progress {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  z-index: 150;
  background: #ffaa17;
  transform-origin: 0 50%;
  transform: scaleX(0);
  animation: indProgress linear both;
  animation-timeline: scroll(root);
}
@keyframes indProgress {
  to { transform: scaleX(1); }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .ind-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .ind-hero { padding: 130px 22px 100px; }
  .ind-section { padding: 80px 22px; }
  .ind-grid { grid-template-columns: 1fr; gap: 30px; }
  .ind-track span { font-size: 17px; }
  .ind-modal-top, .ind-modal-body { padding-left: 22px; padding-right: 22px; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .ind-track,
  .ind-grid-bg,
  .ind-bg-word,
  .ind-cta::before { animation: none !important; }
  .ind-slot { transition: none !important; }
}

/* =========================================================
   BANNER (the picture assembles from pieces)
   ========================================================= */
.ib {
  --ib-header-h: 95px; /* your header height, change if needed */
  --ib-gap: clamp(1.5rem, 3vw, 2.5rem); /* space between header and banner */

  position: relative;
  margin-top: calc(var(--ib-header-h) + var(--ib-gap));
  min-height: 80vh;
  padding: 80px 6vw 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: #000000;
  isolation: isolate;
  --scroll: 0px;
  --rx: 0deg;
  --ry: 0deg;
}

@media (max-width: 900px) {
  .ib {
    --ib-header-h: 90px;
  }
}

@media (max-width: 640px) {
  .ib {
    --ib-header-h: 80px;
    --ib-gap: 1rem;
  }
}

/* Picture stack */
.ib-stage {
  position: absolute;
  inset: 0;
  perspective: 1400px;
  overflow: hidden;
}

.ib-scroll {
  position: absolute;
  inset: -12% 0;
  transform: translate3d(0, calc(var(--scroll) * 0.25), 0);
  will-change: transform;
}

.ib-tilt {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Each piece: a full-size layer clipped to its own slice of the picture.
   Scattered pieces sit far away, turned and dim. Formed pieces lock in place. */
.ib-tile {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  transform: translate3d(var(--x, 0), var(--y, 0), var(--z, -600px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  opacity: 0;
  filter: brightness(1.6);
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
  transition:
    transform 2.2s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s),
    opacity 1.4s ease var(--d, 0s),
    filter 1.8s ease var(--d, 0s);
}
.ib-tile.formed {
  transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg);
  opacity: 1;
  filter: brightness(1);
}
.ib-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Dark gradients so the text reads and the picture melts into the black page */
.ib-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top, #000000 0%, rgba(0, 0, 0, 0.6) 35%, rgba(0, 0, 0, 0.12) 70%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.6), transparent 50%);
}

/* One soft light sweep across the picture */
.ib-sweep {
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  z-index: 2;
  width: 24%;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(8px);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 170, 23, 0.14),
    rgba(255, 255, 255, 0.07),
    transparent
  );
  animation: ibSweep 14s ease-in-out infinite alternate;
}

@keyframes ibSweep {
  from { transform: translateX(-30vw); }
  to   { transform: translateX(130vw); }
}

/* Pulse ring from the sun */
.ib-rings {
  position: absolute;
  width: 0;
  height: 0;
  z-index: 2;
  pointer-events: none;
}
.ib-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 1px solid rgba(255, 170, 23, 0.6);
  border-radius: 50%;
  opacity: 0;
  animation: ibRing 7s ease-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes ibRing {
  0%   { transform: scale(0.4); opacity: 0.7; }
  100% { transform: scale(12);  opacity: 0; }
}

/* Small floating particles */
.ib-dot {
  position: absolute;
  z-index: 2;
  border-radius: 50%;
  background: #ffaa17;
  opacity: 0.6;
  filter: blur(calc((1 - var(--z, 0.5)) * 1px));
  animation: ibFloat var(--t, 12s) ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes ibFloat {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(var(--z, 0.5) * 40px), calc(var(--z, 0.5) * -60px), 0); }
}

/* Banner text */
.ib-copy {
  position: relative;
  z-index: 3;
  max-width: 900px;
  margin: 0 auto;
}

.ib-eyebrow {
  display: inline-block;
  font-family: "Oswald", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #ffaa17;
  border: 1px solid #ffaa17;
  border-radius: 999px;
  padding: 8px 18px;
  margin-bottom: 26px;
}

.ib-title {
  margin: 0 0 1rem;
  font-family: "Oswald", sans-serif !important;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.1;
  text-transform: uppercase;
  color: #ffaa17;
}
/* Each heading word sits in a mask, so it rises out of its own line */
.ib-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  margin-right: 0.24em;
  padding-bottom: 0.06em;
  font-family: "Oswald", sans-serif !important;
}
.ib-w:last-child {
  margin-right: 0;
}
.ib-rise {
  display: inline-block;
  transform: translateY(110%);
  animation: ibWord 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(var(--i, 0) * 0.14s + 0.25s);
  font-family: "Oswald", sans-serif !important;
}
.ib-rise.hl {
  color: #ffffff;
}
@keyframes ibWord {
  to { transform: none; }
}

.ib-sub {
  max-width: 560px;
  margin: 0 auto;
  /* font-family: "Rubik", sans-serif; */
  font-family: 'Satoshi-Regular';
  font-size: 18px;
  line-height: 1.7;
  color: rgb(255, 255, 255);
  opacity: 0;
  animation: ibRise 1s ease 0.9s forwards;
}

@keyframes ibRise {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: none; }
}

/* Banner responsive */
@media (max-width: 700px) {
  .ib {
    min-height: 70vh;
    padding: 60px 20px 70px;
  }
  .ib-sub {
    font-size: 16px;
  }
  .ib-sweep {
    display: none;
  }
}

/* Banner reduced motion: show the whole picture, stop the movement */
@media (prefers-reduced-motion: reduce) {
  .ib *,
  .ib {
    animation: none !important;
    transition: none !important;
  }
  .ib-tile {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .ib-rise,
  .ib-sub {
    opacity: 1 !important;
    transform: none !important;
  }
  .ib-ring,
  .ib-dot,
  .ib-sweep {
    display: none;
  }
}