@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
    --bg: #07111f;
    --bg2: #091727;
    --panel: #0d2137;
    --panel2: #112a45;
    --text: #e8f3ff;
    --muted: #a9bfd6;
    --cyan: #4ce7ff;
    --blue: #4a7dff;
    --pink: #f471d0;
    --line: rgba(133, 198, 255, .18);
    --shadow: 0 18px 55px rgba(0, 0, 0, .34);
    --glow: 0 0 0 1px rgba(76, 231, 255, .1), 0 0 28px rgba(0, 194, 255, .16);
    --radius: 24px
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: "Manrope", sans-serif;
    background: radial-gradient(circle at 10% 0%, rgba(58, 147, 255, .18), transparent 28%), radial-gradient(circle at 88% 12%, rgba(0, 234, 255, .1), transparent 25%), linear-gradient(180deg, var(--bg), var(--bg2) 55%, #06101d)
}

a {
    color: inherit;
    text-decoration: none
}

img {
    display: block;
    max-width: 100%
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    min-height: 84px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 12px clamp(18px, 5vw, 72px);
    background: rgba(6, 16, 30, .82);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(89, 170, 255, .13);
    box-shadow: 0 10px 35px rgba(0, 0, 0, .18)
}

.brand {
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: "Outfit";
    font-weight: 800
}

.brand-mark {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    padding: 4px;
    border-radius: 15px;
    background: linear-gradient(145deg, var(--panel2), var(--panel));
    border: 1px solid rgba(100, 192, 255, .2);
    box-shadow: var(--glow);
    overflow: hidden
}

.brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.brand-name {
    white-space: nowrap
}

.header-logo {
    justify-self: center;
    width: 132px;
    height: 58px;
    padding: 5px 10px;
    border: 1px solid rgba(100, 192, 255, .18);
    border-radius: 17px;
    background: linear-gradient(145deg, var(--panel2), var(--panel));
    box-shadow: var(--glow);
    overflow: hidden
}

.header-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.header-actions {
    justify-self: end
}

.nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 17px;
    border-radius: 999px;
    font-weight: 800;
    border: 1px solid rgba(102, 185, 255, .18);
    background: rgba(255, 255, 255, .03);
    transition: .3s
}

.nav-link:hover {
    color: var(--cyan);
    border-color: rgba(76, 231, 255, .48);
    box-shadow: 0 0 20px rgba(76, 231, 255, .13)
}

.hero {
    position: relative;
    isolation: isolate;
    max-width: 1440px;
    margin: auto;
    padding: clamp(54px, 8vw, 110px) clamp(20px, 5vw, 72px) 52px;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(310px, .9fr);
    align-items: center;
    gap: 48px;
    overflow: hidden
}

.hero::before,
.hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(76, 231, 255, .12);
    border-radius: 50%
}

.hero::before {
    width: 430px;
    height: 430px;
    right: -180px;
    top: -190px
}

.hero::after {
    width: 300px;
    height: 300px;
    left: -150px;
    bottom: -120px;
    border-color: rgba(74, 125, 255, .15)
}

.eyebrow,
.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--cyan);
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .17em;
    text-transform: uppercase
}

.eyebrow {
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(76, 231, 255, .08);
    border: 1px solid rgba(76, 231, 255, .18)
}

.hero h1 {
    margin: 18px 0 16px;
    font-family: "Outfit";
    font-size: clamp(2.8rem, 6vw, 5.8rem);
    line-height: .94;
    letter-spacing: -.055em
}

.hero h1 span {
    background: linear-gradient(90deg, #fff, var(--cyan), #72aeff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.hero p {
    max-width: 720px;
    color: var(--muted);
    font-size: clamp(1rem, 1.45vw, 1.17rem);
    line-height: 1.8
}

.hero-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 24px
}

.hero-highlights span {
    padding: 9px 12px;
    border: 1px solid rgba(76, 231, 255, .15);
    border-radius: 999px;
    background: rgba(76, 231, 255, .05);
    color: var(--muted);
    font-size: .75rem;
    font-weight: 800
}

.hero-panel {
    position: relative;
    overflow: hidden;
    min-height: 370px;
    padding: 34px;
    border-radius: 32px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .02)), linear-gradient(145deg, var(--panel), var(--panel2) 65%, var(--panel));
    border: 1px solid rgba(97, 186, 255, .18);
    box-shadow: var(--shadow), var(--glow)
}

.hero-panel::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -70px;
    bottom: -100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(76, 231, 255, .28), transparent 68%)
}

.hero-panel .number {
    font: 900 5rem/1 "Outfit";
    color: var(--cyan);
    text-shadow: 0 0 22px rgba(76, 231, 255, .22)
}

.hero-panel h2 {
    font: 800 2rem/1.05 "Outfit";
    margin: .55rem 0 .85rem
}

.hero-panel p,
.hero-panel li {
    color: rgba(232, 243, 255, .8);
    line-height: 1.75
}

.gallery-section {
    max-width: 1440px;
    margin: auto;
    padding: 24px clamp(20px, 5vw, 72px) 92px
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 30px;
    margin-bottom: 28px
}

.section-head h2 {
    font: 800 clamp(2.15rem, 4vw, 3.4rem)/1 "Outfit";
    letter-spacing: -.04em;
    margin: 8px 0 0
}

.section-head p {
    max-width: 570px;
    color: var(--muted);
    line-height: 1.75;
    margin: 0
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px
}

.project-card {
    position: relative;
    overflow: hidden;
    min-height: 370px;
    border-radius: var(--radius);
    background: #0b1730;
    border: 1px solid rgba(129, 185, 255, .1);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .22);
    isolation: isolate;
    transition: transform .45s, box-shadow .45s
}

.project-card>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s, filter .5s
}

.project-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(4, 11, 24, .02) 20%, rgba(5, 14, 30, .32) 52%, rgba(4, 11, 24, .97) 100%)
}

.project-card:hover {
    transform: translateY(-7px);
    box-shadow: var(--shadow), var(--glow)
}

.project-card:hover>img {
    transform: scale(1.075);
    filter: saturate(1.08) contrast(1.05)
}

.project-content {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 25px
}

.tag {
    display: inline-flex;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(76, 231, 255, .14);
    border: 1px solid rgba(76, 231, 255, .2);
    color: var(--cyan);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase
}

.project-content h3 {
    margin: 12px 0 8px;
    font: 800 1.5rem/1.08 "Outfit"
}

.project-content p {
    margin: 0;
    color: rgba(232, 243, 255, .8);
    line-height: 1.55
}

.arrow,
.project-number {
    position: absolute;
    top: 18px;
    z-index: 4;
    display: grid;
    place-items: center;
    background: rgba(12, 31, 53, .82);
    border: 1px solid rgba(76, 231, 255, .2);
    color: var(--cyan);
    backdrop-filter: blur(8px)
}

.arrow {
    right: 18px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.15rem
}

.project-number {
    left: 18px;
    min-width: 42px;
    height: 30px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .08em
}

.cta {
    margin-top: 28px;
    padding: 29px;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .02)), linear-gradient(120deg, var(--panel), var(--panel2), var(--panel));
    border: 1px solid rgba(89, 170, 255, .16);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px
}

.cta h3 {
    margin: 0;
    font: 800 clamp(1.4rem, 3vw, 2.3rem)/1.1 "Outfit"
}

.cta p {
    color: var(--muted);
    margin: .5rem 0 0
}

.cta a,
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--cyan), var(--blue));
    color: #06111d;
    font-weight: 900;
    white-space: nowrap
}

.site-footer {
    padding: 28px clamp(20px, 5vw, 72px) 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid rgba(89, 170, 255, .1);
    color: #8faac4
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 11px
}

.footer-brand img {
    width: 44px;
    height: 44px;
    padding: 4px;
    object-fit: contain;
    border-radius: 13px;
    background: linear-gradient(145deg, var(--panel2), var(--panel));
    border: 1px solid rgba(100, 192, 255, .18)
}

.footer-brand strong,
.footer-brand span {
    display: block
}

.footer-brand strong {
    color: var(--text)
}

.footer-brand span {
    font-size: .72rem;
    margin-top: 2px
}

/* Art detail pages */
.detail-hero {
    position: relative;
    min-height: 68vh;
    display: grid;
    align-items: end;
    overflow: hidden;
    background: #07111f
}

.detail-hero>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.48) saturate(1.08)
}

.detail-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4, 11, 24, .15), rgba(4, 11, 24, .95))
}

.detail-copy {
    position: relative;
    z-index: 2;
    max-width: 1050px;
    padding: clamp(40px, 7vw, 96px)
}

.detail-copy h1 {
    margin: 16px 0;
    font: 900 clamp(3rem, 7vw, 6.3rem)/.92 "Outfit";
    letter-spacing: -.05em
}

.detail-copy p {
    max-width: 720px;
    color: rgba(232, 243, 255, .85);
    font-size: 1.13rem;
    line-height: 1.8
}

.art-story {
    max-width: 1240px;
    margin: auto;
    padding: 72px 22px 90px
}

.story-intro {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 42px;
    align-items: start
}

.story-copy h2 {
    margin: 0 0 18px;
    font: 800 clamp(2rem, 4vw, 3.2rem)/1 "Outfit"
}

.story-copy p {
    color: var(--muted);
    line-height: 1.9
}

.art-facts {
    padding: 28px;
    border-radius: 24px;
    background: linear-gradient(145deg, var(--panel), var(--panel2));
    border: 1px solid rgba(89, 170, 255, .16);
    box-shadow: var(--shadow)
}

.art-facts strong {
    display: block;
    font: 900 3.2rem/1 "Outfit";
    color: var(--cyan)
}

.art-facts dl {
    margin: 22px 0 0;
    display: grid;
    gap: 14px
}

.art-facts div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(133, 198, 255, .12)
}

.art-facts dt {
    color: var(--muted)
}

.art-facts dd {
    margin: 0;
    font-weight: 800;
    text-align: right
}

.art-mosaic {
    margin-top: 54px;
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    grid-template-rows: 310px 310px;
    gap: 18px
}

.art-mosaic figure {
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(129, 185, 255, .12);
    box-shadow: var(--shadow);
    background: var(--panel)
}

.art-mosaic figure:first-child {
    grid-row: 1/3
}

.art-mosaic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s
}

.art-mosaic figure:hover img {
    transform: scale(1.04)
}

.art-mosaic figcaption {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(6, 16, 30, .72);
    backdrop-filter: blur(10px);
    color: #dcebfa;
    font-size: .8rem
}

.creative-note {
    margin-top: 48px;
    padding: 34px;
    border-radius: 28px;
    background: linear-gradient(120deg, rgba(76, 231, 255, .08), rgba(74, 125, 255, .06)), var(--panel);
    border: 1px solid rgba(76, 231, 255, .17)
}

.creative-note h3 {
    margin: 0 0 10px;
    font: 800 2rem/1.1 "Outfit"
}

.creative-note p {
    margin: 0;
    color: var(--muted);
    line-height: 1.8
}

@media(max-width:1050px) {
    .project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .header-logo {
        width: 104px
    }

    .story-intro {
        grid-template-columns: 1fr
    }

    .art-mosaic {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 420px 260px
    }

    .art-mosaic figure:first-child {
        grid-column: 1/3;
        grid-row: auto
    }
}

@media(max-width:760px) {
    .site-header {
        grid-template-columns: auto 1fr auto;
        padding: 11px 14px;
        gap: 9px
    }

    .brand-name {
        display: none
    }

    .header-logo {
        width: 86px;
        height: 48px
    }

    .nav-link {
        padding: 0 11px;
        font-size: .72rem
    }

    .hero {
        grid-template-columns: 1fr;
        padding-top: 48px
    }

    .hero-panel {
        min-height: 290px
    }

    .section-head,
    .cta,
    .site-footer {
        align-items: flex-start;
        flex-direction: column
    }

    .project-grid {
        grid-template-columns: 1fr
    }

    .project-card {
        min-height: 390px
    }

    .art-mosaic {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: none
    }

    .art-mosaic figure,
    .art-mosaic figure:first-child {
        grid-column: auto;
        grid-row: auto;
        height: 320px
    }

    .detail-copy {
        padding: 38px 20px
    }

    .site-footer {
        text-align: left
    }
}

@media(max-width:430px) {
    .nav-link {
        font-size: 0
    }

    .nav-link::after {
        content: "Art Profile";
        font-size: .72rem
    }

    .header-logo {
        width: 76px
    }

    .brand-mark {
        width: 43px;
        height: 43px
    }
}

@media(prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important
    }
}
/* =========================================================
   HERO RIGHT SLIDER PANEL
   ========================================================= */

.hero-slider-panel {
  position: relative;
  overflow: hidden;
  padding: 22px;
}

.hero-slider-head {
  margin-bottom: 16px;
}

.hero-slider-kicker {
  display: inline-block;
  margin-bottom: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(76, 231, 255, 0.18);
  border-radius: 999px;
  background: rgba(76, 231, 255, 0.06);
  color: var(--cyan);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-slider-head h2 {
  margin: 0;
  font-size: 1.65rem;
  line-height: 1.1;
}

.hero-slider {
  position: relative;
  min-height: 420px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(100, 192, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(20, 34, 58, 0.78), rgba(9, 18, 35, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 20px 40px rgba(0,0,0,0.28);
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(80px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease,
    visibility 0.7s ease;
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  z-index: 2;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.04) contrast(1.03);
}

.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(5, 12, 24, 0.08) 0%,
      rgba(5, 12, 24, 0.18) 45%,
      rgba(5, 12, 24, 0.78) 100%
    );
}

.hero-slide-caption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  z-index: 3;
  padding: 16px 18px;
  border: 1px solid rgba(76, 231, 255, 0.14);
  border-radius: 18px;
  background: rgba(7, 18, 35, 0.58);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.24);
}

.hero-slide-caption strong {
  display: block;
  margin-bottom: 6px;
  color: #fff;
  font-size: 1.08rem;
  font-weight: 800;
}

.hero-slide-caption span {
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.5;
}

.hero-slider-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.hero-slider-dots button {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  box-shadow: inset 0 0 0 1px rgba(76,231,255,0.18);
  cursor: pointer;
  transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.hero-slider-dots button.is-active {
  background: var(--cyan);
  transform: scale(1.18);
  box-shadow:
    0 0 16px rgba(76, 231, 255, 0.48);
}

/* Subtle moving glow */
.hero-slider-panel::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -60px;
  top: -60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(76,231,255,0.14), transparent 70%);
  pointer-events: none;
}

@media (max-width: 980px) {
  .hero-slider {
    min-height: 360px;
  }
}

@media (max-width: 760px) {
  .hero-slider-panel {
    padding: 16px;
  }

  .hero-slider {
    min-height: 300px;
    border-radius: 22px;
  }

  .hero-slider-head h2 {
    font-size: 1.3rem;
  }

  .hero-slide-caption {
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 13px 14px;
  }

  .hero-slide-caption strong {
    font-size: 0.98rem;
  }

  .hero-slide-caption span {
    font-size: 0.84rem;
  }
}
/* =========================================================
   CATOLINA MOVING SVG BANNER
   ========================================================= */

.art-marquee {
    position: relative;
    width: 100%;
    height: 55px;
    overflow: hidden;

    /* background:
        linear-gradient(
            90deg,
            rgba(22, 15, 34, 0.98),
            rgba(42, 25, 53, 0.92),
            rgba(22, 15, 34, 0.98)
        );

    border-bottom: 1px solid rgba(255, 151, 207, 0.16);
    box-shadow: 0 10px 30px rgba(15, 6, 22, 0.22); */
}

.art-marquee__track {
    width: max-content;
    height: 100%;

    display: flex;
    align-items: right;

    animation: catolinaMarquee 24s linear infinite;
    will-change: transform;
}

.art-marquee__track img {
    width: auto;
    height: 45px;
    max-width: none;

    flex: 0 0 auto;
    margin-right: 50px;

    object-fit: contain;

    filter:
        drop-shadow(0 8px 18px rgba(0, 0, 0, 0.30));
}

.art-marquee::before,
.art-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 4;

    width: 100px;
    pointer-events: none;
}

.art-marquee::before {
    left: 0;

    background:
        linear-gradient(
            90deg,
            var(--bg),
            transparent
        );
}

.art-marquee::after {
    right: 0;

    background:
        linear-gradient(
            270deg,
            var(--bg),
            transparent
        );
}

.art-marquee__track {
    position: absolute;
    top: 0;
    left: 80%;

    width: max-content;
    height: 100%;

    display: flex;
    align-items: center;

    animation: catolinaMarqueeRightToLeft 30s linear infinite;
    will-change: transform;
}

@keyframes catolinaMarqueeRightToLeft {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-100% - 100vw));
    }
}

@media (max-width: 760px) {
    .art-marquee {
        height: 95px;
    }

    .art-marquee__track img {
        height: 76px;
        margin-right: 30px;
    }

    .art-marquee::before,
    .art-marquee::after {
        width: 45px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .art-marquee__track {
        animation: none;
    }
}
/* =========================================================
   CATOLINA 15-SECOND MODERN LASER LOADER
   ========================================================= */

body.catolina-is-loading {
    overflow: hidden !important;
}

.catolina-loader {
    position: fixed;
    inset: 0;
    z-index: 999999;

    display: grid;
    place-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(240, 90, 166, 0.16),
            transparent 34%
        ),
        radial-gradient(
            circle at 70% 25%,
            rgba(185, 156, 255, 0.13),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #120a1a,
            #21102a 48%,
            #110817
        );

    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.9s ease,
        visibility 0.9s ease;
}

.catolina-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* Background grid */

.catolina-loader__background {
    position: absolute;
    inset: -20%;

    background-image:
        linear-gradient(
            rgba(255, 127, 189, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(185, 156, 255, 0.035) 1px,
            transparent 1px
        );

    background-size: 54px 54px;

    transform:
        perspective(700px)
        rotateX(62deg)
        translateY(34%);

    transform-origin: center bottom;

    animation: catolinaGridMove 6s linear infinite;
}


/* Laser beams */

.catolina-loader__laser {
    position: absolute;

    width: 160%;
    height: 2px;

    left: -30%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 127, 189, 0.15),
            rgba(255, 127, 189, 0.95),
            rgba(185, 156, 255, 0.85),
            transparent
        );

    box-shadow:
        0 0 8px rgba(255, 127, 189, 0.92),
        0 0 22px rgba(240, 90, 166, 0.62),
        0 0 45px rgba(185, 156, 255, 0.36);

    transform-origin: center;
    pointer-events: none;
}

.catolina-loader__laser--one {
    top: 22%;
    transform: rotate(-13deg);
    animation: catolinaLaserOne 4.5s ease-in-out infinite;
}

.catolina-loader__laser--two {
    top: 72%;
    transform: rotate(11deg);
    animation: catolinaLaserTwo 5.5s ease-in-out infinite;
}

.catolina-loader__laser--three {
    top: 48%;
    opacity: 0.55;
    animation: catolinaLaserThree 3.8s ease-in-out infinite;
}


/* Main content */

.catolina-loader__content {
    position: relative;
    z-index: 10;

    width: min(480px, calc(100vw - 36px));

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

.catolina-loader__logo-wrap {
    position: relative;

    width: clamp(190px, 25vw, 285px);
    aspect-ratio: 1;

    display: grid;
    place-items: center;

    margin-bottom: 24px;
}

.catolina-loader__logo-wrap::before {
    content: "";

    position: absolute;
    inset: 20%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 127, 189, 0.28),
            rgba(185, 156, 255, 0.12),
            transparent 72%
        );

    filter: blur(18px);

    animation: catolinaLogoAura 2.5s ease-in-out infinite;
}


/* Logo */

.catolina-loader__logo {
    position: relative;
    z-index: 6;

    width: 66%;
    height: 66%;

    object-fit: contain;

    padding: 13px;

    border: 1px solid rgba(255, 151, 207, 0.34);
    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            rgba(58, 31, 68, 0.88),
            rgba(29, 15, 38, 0.94)
        );

    box-shadow:
        0 0 0 5px rgba(255, 127, 189, 0.04),
        0 0 28px rgba(240, 90, 166, 0.34),
        0 0 65px rgba(185, 156, 255, 0.17),
        0 20px 50px rgba(0, 0, 0, 0.42);

    animation: catolinaLogoFloat 3s ease-in-out infinite;
}


/* Laser scanning over logo */

.catolina-loader__scan {
    position: absolute;
    z-index: 8;

    left: 18%;
    right: 18%;
    top: 25%;

    height: 3px;

    border-radius: 50%;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ff8ec9,
            #ffffff,
            #bd9cff,
            transparent
        );

    box-shadow:
        0 0 10px rgba(255, 142, 201, 0.95),
        0 0 28px rgba(185, 156, 255, 0.70);

    animation: catolinaLogoScan 2.6s ease-in-out infinite;
}


/* Rotating orbital rings */

.catolina-loader__orbit {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.catolina-loader__orbit--outer {
    inset: 2%;

    border:
        1px solid
        rgba(255, 127, 189, 0.34);

    box-shadow:
        inset 0 0 20px rgba(255, 127, 189, 0.05),
        0 0 20px rgba(240, 90, 166, 0.10);

    animation: catolinaOrbitClockwise 7s linear infinite;
}

.catolina-loader__orbit--outer::before,
.catolina-loader__orbit--middle::before,
.catolina-loader__orbit--inner::before {
    content: "";

    position: absolute;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: #ff8ec9;

    box-shadow:
        0 0 8px #ff8ec9,
        0 0 22px rgba(255, 127, 189, 0.80);
}

.catolina-loader__orbit--outer::before {
    top: 11%;
    left: 16%;
}

.catolina-loader__orbit--middle {
    inset: 10%;

    border:
        1px dashed
        rgba(185, 156, 255, 0.38);

    animation: catolinaOrbitReverse 5.6s linear infinite;
}

.catolina-loader__orbit--middle::before {
    right: 3%;
    top: 44%;

    background: #bd9cff;

    box-shadow:
        0 0 8px #bd9cff,
        0 0 22px rgba(185, 156, 255, 0.78);
}

.catolina-loader__orbit--inner {
    inset: 18%;

    border:
        1px solid
        rgba(255, 182, 157, 0.28);

    animation: catolinaOrbitClockwise 4.2s linear infinite;
}

.catolina-loader__orbit--inner::before {
    left: 26%;
    bottom: 2%;

    width: 8px;
    height: 8px;

    background: #ffb69d;

    box-shadow:
        0 0 8px #ffb69d,
        0 0 18px rgba(255, 182, 157, 0.75);
}


/* Loader title */

.catolina-loader h1 {
    margin: 0;

    color: #fff8fc;

    font-family: "Outfit", "Segoe UI", sans-serif;
    font-size: clamp(28px, 5vw, 46px);
    font-weight: 800;
    letter-spacing: -0.04em;

    text-shadow:
        0 0 24px rgba(240, 90, 166, 0.20);
}

.catolina-loader p {
    margin: 8px 0 22px;

    color: #d8bfd0;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}


/* Progress */

.catolina-loader__progress {
    position: relative;

    width: min(370px, 100%);
    height: 5px;

    overflow: hidden;

    border: 1px solid rgba(255, 151, 207, 0.18);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.06);

    box-shadow:
        inset 0 1px 4px rgba(0, 0, 0, 0.46);
}

.catolina-loader__progress span {
    display: block;

    width: 0;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #f05aa6,
            #ff8ec9,
            #bd9cff,
            #ffb69d
        );

    box-shadow:
        0 0 10px rgba(255, 127, 189, 0.80),
        0 0 24px rgba(185, 156, 255, 0.50);
}

.catolina-loader__status {
    width: min(370px, 100%);

    margin-top: 10px;

    display: flex;
    justify-content: space-between;
    gap: 15px;

    color: rgba(255, 247, 251, 0.58);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.catolina-loader__status strong {
    color: var(--rose, #ff7fbd);
}


/* Floating light particles */

.catolina-loader__particles span {
    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #ff8ec9;

    box-shadow:
        0 0 10px #ff8ec9,
        0 0 22px rgba(255, 127, 189, 0.85);

    animation: catolinaParticle 5s ease-in-out infinite;
}

.catolina-loader__particles span:nth-child(1) {
    left: 12%;
    top: 24%;
}

.catolina-loader__particles span:nth-child(2) {
    right: 14%;
    top: 18%;
    animation-delay: -1s;
}

.catolina-loader__particles span:nth-child(3) {
    left: 18%;
    bottom: 18%;
    animation-delay: -2s;
}

.catolina-loader__particles span:nth-child(4) {
    right: 20%;
    bottom: 23%;
    animation-delay: -3s;
}

.catolina-loader__particles span:nth-child(5) {
    left: 47%;
    top: 9%;
    animation-delay: -1.6s;
}

.catolina-loader__particles span:nth-child(6) {
    right: 42%;
    bottom: 8%;
    animation-delay: -2.6s;
}


/* Animations */

@keyframes catolinaGridMove {
    from {
        background-position: 0 0, 0 0;
    }

    to {
        background-position: 0 54px, 54px 0;
    }
}

@keyframes catolinaLaserOne {
    0%,
    100% {
        transform: translateX(-28%) rotate(-13deg);
        opacity: 0;
    }

    35%,
    65% {
        opacity: 0.85;
    }

    50% {
        transform: translateX(28%) rotate(-13deg);
    }
}

@keyframes catolinaLaserTwo {
    0%,
    100% {
        transform: translateX(30%) rotate(11deg);
        opacity: 0;
    }

    35%,
    65% {
        opacity: 0.75;
    }

    50% {
        transform: translateX(-30%) rotate(11deg);
    }
}

@keyframes catolinaLaserThree {
    0%,
    100% {
        transform: translateX(-35%);
        opacity: 0;
    }

    50% {
        transform: translateX(35%);
        opacity: 0.55;
    }
}

@keyframes catolinaLogoFloat {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-8px) scale(1.025);
    }
}

@keyframes catolinaLogoAura {
    0%,
    100% {
        opacity: 0.52;
        transform: scale(0.90);
    }

    50% {
        opacity: 1;
        transform: scale(1.12);
    }
}

@keyframes catolinaLogoScan {
    0%,
    100% {
        top: 25%;
        opacity: 0;
    }

    15%,
    85% {
        opacity: 1;
    }

    50% {
        top: 73%;
    }
}

@keyframes catolinaOrbitClockwise {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes catolinaOrbitReverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@keyframes catolinaParticle {
    0%,
    100% {
        opacity: 0.18;
        transform: translateY(10px) scale(0.55);
    }

    50% {
        opacity: 1;
        transform: translateY(-16px) scale(1.25);
    }
}


/* Mobile */

@media (max-width: 600px) {
    .catolina-loader__logo-wrap {
        width: 220px;
    }

    .catolina-loader p {
        font-size: 9px;
        letter-spacing: 0.13em;
    }

    .catolina-loader__progress,
    .catolina-loader__status {
        width: calc(100vw - 54px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .catolina-loader *,
    .catolina-loader *::before,
    .catolina-loader *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}