/* Legend Rock International — Professional Hero Carousel
   Designed for 1800 x 700 source banners.
   No framework required.
*/

:root {
  --lri-blue: #0566c8;
  --lri-blue-2: #00a7ef;
  --lri-deep: #06264d;
  --lri-ink: #071a2e;
  --lri-white: #ffffff;
  --lri-transition: 1050ms cubic-bezier(.2,.75,.25,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #0b1c30;
  background: #f4f8fc;
}

button, a { -webkit-tap-highlight-color: transparent; }

.lri-hero {
  width: 100%;
  background: #dceaf7;
  overflow: hidden;
}

.lri-hero__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 18 / 7;
  min-height: 460px;
  max-height: 700px;
  overflow: hidden;
  isolation: isolate;
  background: #dbeaf8;
}

.lri-hero__track,
.lri-slide {
  position: absolute;
  inset: 0;
}

.lri-slide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.015);
  transition:
    opacity var(--lri-transition),
    visibility var(--lri-transition),
    transform 1.2s cubic-bezier(.2,.7,.2,1);
}

.lri-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
  z-index: 2;
}

.lri-slide__image {
  position: absolute;
  inset: -2%;
  width: 104%;
  height: 104%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.065) translate3d(0,0,0);
  will-change: transform;
}

.lri-slide.is-active .lri-slide__image {
  animation: lriKenBurns 7.1s ease-out both;
}

.lri-slide:nth-child(2) .lri-slide__image { object-position: 58% center; }
.lri-slide:nth-child(3) .lri-slide__image { object-position: 60% center; }
.lri-slide:nth-child(4) .lri-slide__image { object-position: 56% center; }
.lri-slide:nth-child(5) .lri-slide__image { object-position: 55% center; }

@keyframes lriKenBurns {
  from { transform: scale(1.07) translate3d(0,0,0); }
  to   { transform: scale(1.015) translate3d(-.6%,0,0); }
}

/* Left-side readability gradient while preserving the visual on the right. */
.lri-slide__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(244,250,255,.97) 0%,
      rgba(244,250,255,.91) 25%,
      rgba(244,250,255,.62) 44%,
      rgba(244,250,255,.10) 67%,
      rgba(244,250,255,0) 100%);
}

.lri-slide[data-theme="dark"] .lri-slide__scrim {
  background:
    linear-gradient(90deg,
      rgba(3,22,45,.93) 0%,
      rgba(3,28,58,.84) 29%,
      rgba(2,39,76,.57) 47%,
      rgba(2,39,76,.10) 70%,
      rgba(2,39,76,0) 100%);
}

.lri-slide__ambient {
  position: absolute;
  width: 520px;
  height: 520px;
  left: -180px;
  bottom: -250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,165,239,.24), rgba(0,165,239,0) 68%);
  filter: blur(4px);
  pointer-events: none;
}

.lri-slide__content {
  position: absolute;
  z-index: 5;
  left: clamp(42px, 6vw, 118px);
  top: 50%;
  width: min(660px, 42vw);
  transform: translateY(-50%);
  color: var(--lri-ink);
}

.lri-slide[data-theme="dark"] .lri-slide__content {
  color: white;
  text-shadow: 0 1px 12px rgba(0,0,0,.12);
}

.lri-slide__eyebrow,
.lri-slide__content h1,
.lri-slide__content h2,
.lri-slide__content p,
.lri-slide__actions {
  opacity: 0;
  transform: translate3d(-36px, 18px, 0);
}

.lri-slide.is-active .lri-slide__eyebrow {
  animation: lriReveal .72s .16s forwards;
}
.lri-slide.is-active .lri-slide__content h1,
.lri-slide.is-active .lri-slide__content h2 {
  animation: lriReveal .82s .26s forwards;
}
.lri-slide.is-active .lri-slide__content p {
  animation: lriReveal .82s .40s forwards;
}
.lri-slide.is-active .lri-slide__actions {
  animation: lriReveal .82s .54s forwards;
}

@keyframes lriReveal {
  to { opacity: 1; transform: translate3d(0,0,0); }
}

.lri-slide__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 19px;
  font-size: clamp(11px, .82vw, 14px);
  font-weight: 800;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--lri-blue);
}

.lri-slide__eyebrow::before {
  content: "";
  width: 38px;
  height: 2px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--lri-blue), var(--lri-blue-2));
}

.lri-slide[data-theme="dark"] .lri-slide__eyebrow {
  color: #8cddff;
}

.lri-slide__content h1,
.lri-slide__content h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 4.1vw, 76px);
  font-weight: 600;
  line-height: .99;
  letter-spacing: -.038em;
}

.lri-slide__content h1 span,
.lri-slide__content h2 span {
  color: var(--lri-blue);
  background: linear-gradient(90deg, #004fb0 0%, #009ee5 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lri-slide[data-theme="dark"] .lri-slide__content h1 span,
.lri-slide[data-theme="dark"] .lri-slide__content h2 span {
  background: linear-gradient(90deg, #64d4ff 0%, #ffffff 92%);
  -webkit-background-clip: text;
  background-clip: text;
}

.lri-slide__content p {
  max-width: 590px;
  margin: 23px 0 0;
  font-size: clamp(15px, 1.03vw, 19px);
  line-height: 1.72;
  color: #3f5268;
}

.lri-slide[data-theme="dark"] .lri-slide__content p {
  color: rgba(255,255,255,.82);
}

.lri-slide__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 31px;
}

.lri-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 24px;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid transparent;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}

.lri-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  transition: transform .65s ease;
}

.lri-btn:hover::after { transform: translateX(120%) skewX(-18deg); }
.lri-btn:hover { transform: translateY(-2px); }

.lri-btn--primary {
  color: #fff;
  background: linear-gradient(135deg, #005dbd, #009de4);
  box-shadow: 0 12px 30px rgba(0,99,197,.24);
}

.lri-btn--primary:hover {
  box-shadow: 0 16px 34px rgba(0,99,197,.32);
}

.lri-btn--ghost {
  color: #12304e;
  border-color: rgba(6,55,98,.26);
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(8px);
}

.lri-slide[data-theme="dark"] .lri-btn--ghost {
  color: #fff;
  border-color: rgba(255,255,255,.42);
  background: rgba(255,255,255,.08);
}

.lri-slide__badge {
  position: absolute;
  z-index: 5;
  right: clamp(30px, 4vw, 78px);
  bottom: 84px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: rgba(255,255,255,.93);
  filter: drop-shadow(0 2px 9px rgba(0,0,0,.25));
}

.lri-slide__badge span {
  font-family: Georgia, serif;
  font-size: 34px;
  line-height: 1;
}
.lri-slide__badge small {
  max-width: 105px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.lri-hero__brand {
  position: absolute;
  z-index: 10;
  left: clamp(38px, 5.9vw, 115px);
  top: 27px;
  width: clamp(185px, 17vw, 330px);
  height: 94px;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.lri-hero__brand img {
  display: block;
  width: 100%;
  max-height: 90px;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 5px 16px rgba(0,38,92,.13));
}

.lri-hero__controls {
  position: absolute;
  z-index: 20;
  right: clamp(23px, 2.4vw, 48px);
  top: 50%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: translateY(-50%);
}

.lri-arrow {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.65);
  background: rgba(7,31,58,.35);
  color: white;
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: background .25s ease, transform .25s ease, border-color .25s ease;
}

.lri-arrow:hover {
  transform: scale(1.07);
  background: rgba(0,100,200,.84);
  border-color: rgba(255,255,255,.95);
}

.lri-arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lri-hero__footer {
  position: absolute;
  z-index: 20;
  left: clamp(42px, 6vw, 118px);
  right: clamp(30px, 4vw, 78px);
  bottom: 27px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.lri-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lri-dot {
  width: 27px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: rgba(12,71,122,.25);
  cursor: pointer;
  transition: width .3s ease, background .3s ease, transform .25s ease;
}

.lri-dot:hover { transform: scaleY(1.8); }
.lri-dot.is-active {
  width: 52px;
  background: linear-gradient(90deg, var(--lri-blue), var(--lri-blue-2));
}

.lri-play-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 6px;
  padding: 7px 10px;
  border: 0;
  background: transparent;
  color: #35516d;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
}

.lri-play-toggle__icon {
  position: relative;
  width: 11px;
  height: 12px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}

.lri-play-toggle.is-paused .lri-play-toggle__icon {
  border: 0;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid currentColor;
}

.lri-counter {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.96);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .08em;
  text-shadow: 0 2px 10px rgba(0,0,0,.28);
}

.lri-counter i {
  display: block;
  width: 34px;
  height: 1px;
  background: rgba(255,255,255,.55);
}

.lri-progress {
  position: absolute;
  z-index: 25;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(0,63,125,.10);
}

.lri-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #005cc1, #00b3f4);
  transform-origin: left center;
}

.lri-progress.is-running span {
  animation: lriProgress var(--interval, 6500ms) linear forwards;
}

@keyframes lriProgress { from { width: 0; } to { width: 100%; } }

.demo-content {
  max-width: 1180px;
  margin: 0 auto;
  padding: 80px 32px 100px;
}
.demo-kicker {
  margin: 0 0 10px;
  color: #0578cf;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.demo-content h3 {
  margin: 0 0 14px;
  font: 600 clamp(30px,4vw,52px)/1.1 Georgia, serif;
}
.demo-content p { max-width: 720px; color: #5c6f82; line-height: 1.75; }
.demo-content code { color: #075dae; }

@media (max-width: 1100px) {
  .lri-hero__viewport {
    min-height: 590px;
    max-height: none;
    aspect-ratio: auto;
  }
  .lri-slide__content {
    width: min(610px, 58vw);
  }
  .lri-slide__badge { display: none; }
}

@media (max-width: 760px) {
  .lri-hero__viewport { min-height: 650px; }
  .lri-slide__image {
    inset: 0;
    width: 100%;
    height: 100%;
    object-position: 64% center !important;
  }
  .lri-slide__scrim,
  .lri-slide[data-theme="dark"] .lri-slide__scrim {
    background:
      linear-gradient(0deg,
        rgba(3,21,43,.94) 0%,
        rgba(3,27,54,.85) 45%,
        rgba(3,32,62,.28) 82%,
        rgba(3,32,62,.12) 100%);
  }
  .lri-slide__content,
  .lri-slide[data-theme="dark"] .lri-slide__content {
    left: 24px;
    right: 24px;
    bottom: 92px;
    top: auto;
    width: auto;
    transform: none;
    color: white;
    text-shadow: 0 2px 12px rgba(0,0,0,.22);
  }
  .lri-slide__content h1,
  .lri-slide__content h2 {
    font-size: clamp(37px, 10vw, 54px);
  }
  .lri-slide__content h1 span,
  .lri-slide__content h2 span,
  .lri-slide[data-theme="dark"] .lri-slide__content h1 span,
  .lri-slide[data-theme="dark"] .lri-slide__content h2 span {
    background: linear-gradient(90deg, #74dcff, #fff);
    -webkit-background-clip: text;
    background-clip: text;
  }
  .lri-slide__content p,
  .lri-slide[data-theme="dark"] .lri-slide__content p {
    color: rgba(255,255,255,.87);
    font-size: 15px;
    line-height: 1.55;
    margin-top: 16px;
  }
  .lri-slide__eyebrow,
  .lri-slide[data-theme="dark"] .lri-slide__eyebrow { color: #8ddfff; }
  .lri-slide__actions { margin-top: 21px; gap: 9px; }
  .lri-btn { min-height: 45px; padding: 0 16px; font-size: 11px; }
  .lri-btn--ghost,
  .lri-slide[data-theme="dark"] .lri-btn--ghost {
    color: white;
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.40);
  }
  .lri-hero__brand {
    left: 21px;
    top: 16px;
    width: 218px;
    filter: brightness(0) invert(1);
  }
  .lri-hero__controls {
    right: 17px;
    top: 28px;
    transform: none;
    flex-direction: row;
  }
  .lri-arrow { width: 40px; height: 40px; }
  .lri-hero__footer {
    left: 24px;
    right: 24px;
    bottom: 24px;
  }
  .lri-counter,
  .lri-play-toggle__label { display: none; }
  .lri-play-toggle { margin-left: auto; color: white; }
  .lri-dot { width: 18px; background: rgba(255,255,255,.35); }
  .lri-dot.is-active { width: 34px; background: white; }
}

@media (max-width: 470px) {
  .lri-hero__viewport { min-height: 690px; }
  .lri-slide__content { bottom: 80px; }
  .lri-slide__content p { max-width: 95%; }
  .lri-slide__actions { flex-direction: column; align-items: flex-start; }
  .lri-btn { width: auto; }
  .lri-hero__brand { width: 185px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}