/* A route-scoped, fixed canvas keeps each editorial scene behind the full page. */
body[data-catalog-world="power"] { --world-image: url('/assets/editorial/power-world-v1.png'); --world-mobile-image: url('/assets/editorial/power-world-mobile-v1.png'); }
body[data-catalog-world="fpv"] { --world-image: url('/assets/editorial/fpv-world-v1.png'); --world-mobile-image: url('/assets/editorial/fpv-world-mobile-v1.png'); }
body[data-catalog-world="dji"] { --world-image: url('/assets/editorial/dji-world-v1.png'); --world-mobile-image: url('/assets/editorial/dji-world-mobile-v2.png'); }
body[data-catalog-world="protection"] { --world-image: url('/assets/editorial/protection-world-v1.png'); --world-mobile-image: url('/assets/editorial/protection-world-mobile-v1.png'); }

body[data-catalog-world] { isolation: isolate; --world-bleed: 44px; }
body[data-catalog-world]::before {
  content: '';
  position: fixed;
  inset: calc(-1 * var(--world-bleed));
  z-index: -2;
  pointer-events: none;
  background-image: linear-gradient(180deg, #eaf5ff38, #eaf5ff24 55%, #eaf5ff4d), var(--world-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: translate3d(var(--world-shift-x, 0px), var(--world-shift-y, 0px), 0);
  will-change: transform;
}

/* Sun bloom and an anamorphic blue glint remain behind readable glass panels. */
body[data-catalog-world]::after {
  content: '';
  position: fixed;
  inset: calc(-1 * var(--world-bleed));
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 78px 62px at var(--world-sun-x, 15%) var(--world-sun-y, 35%), #ffffffe0 0%, #fff4bb85 36%, transparent 100%),
    radial-gradient(ellipse 280px 175px at var(--world-sun-x, 15%) var(--world-sun-y, 35%), #fff2c23b, transparent 76%),
    radial-gradient(ellipse 380px 2px at var(--world-sun-x, 15%) var(--world-sun-y, 35%), #fff 0%, #6bcaffaf 20%, #5fb6ff42 50%, transparent 100%),
    radial-gradient(ellipse 200px 13px at calc(var(--world-sun-x, 15%) + 100px) calc(var(--world-sun-y, 35%) + 90px), #87d0ff26, transparent 100%);
  transform: translate3d(var(--world-shift-x, 0px), calc(var(--world-shift-y, 0px) + var(--world-light-shift, 0px)), 0);
  animation: world-sun-breathe 9s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes world-sun-breathe { from { opacity: .46; } to { opacity: .86; } }
body.world-paused::after { animation-play-state: paused; }

body[data-catalog-world] main { position: relative; }
body[data-catalog-world] .site-legal-footer { position: relative; z-index: 1; background: #f1f8ffdf; }
body[data-catalog-world] .back-link { padding: 0 14px; border-radius: 12px; background: #ffffffb8; color: #234d6e; }
body[data-catalog-world] .catalog-toolbar,
body[data-catalog-world] .filter-line {
  padding: 14px 18px;
  border: 1px solid #ffffffdf;
  border-radius: 18px;
  background: #f4faffdc;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
body[data-catalog-world] #product-grid .product-card {
  background: linear-gradient(145deg, #f7fbffed, #edf6ffdb);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
body[data-catalog-world] .catalog-footer { padding: 20px; border-radius: 18px; background: #f4faffdc; }
body[data-catalog-world="protection"] #protection .protection-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .65fr);
  align-items: end;
  gap: clamp(24px, 4vw, 64px);
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: clamp(24px, 3vw, 40px);
  margin: clamp(140px, 28svh, 300px) 0 36px;
  border: 1px solid #ffffffe0;
  border-radius: 24px;
  background: linear-gradient(130deg, #ffffffd4, #eef8ffaf);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
body[data-catalog-world="protection"] #protection .protection-heading h1 { font-size: clamp(34px, 3.6vw, 54px); }
body[data-catalog-world="protection"] #protection .protection-heading > p { max-width: 48ch; margin: 0; color: #294c65; }
body[data-catalog-world="protection"] #protection .protection-services { background: #f4faffe3; }
body[data-catalog-world="protection"] :is(#interceptors, #lasers) .direction-heading { padding: 28px; border-radius: 24px; background: #f4faffed; }
body[data-catalog-world="protection"] :is(#interceptors, #lasers) .direction-context article,
body[data-catalog-world="protection"] :is(#interceptors, #lasers) .direction-information-note { padding: 24px; border-radius: 20px; background: #f4faffed; }

/* A full-width glass band follows the catalogue grid; the scene fills the page. */
#catalog[data-world]:not([data-world=""]) .catalog-heading {
  min-height: clamp(360px, 53svh, 630px);
  display: flex;
  align-items: flex-end;
  width: 100%;
  min-width: 0;
  padding: 0;
  margin: 24px 0 30px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

#catalog[data-world]:not([data-world=""]) .catalog-world-art { display: none !important; }

#catalog[data-world]:not([data-world=""]) .catalog-heading-copy {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, .36fr);
  column-gap: clamp(24px, 4vw, 64px);
  row-gap: 0;
  width: 100%;
  min-width: 0;
  border: 1px solid #ffffffc7;
  border-radius: 24px;
  padding: clamp(24px, 3vw, 40px);
  background: linear-gradient(130deg, #ffffffc7, #edf7ff8c);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  box-shadow: inset 0 1px 1px #fff, 0 15px 35px #195d8c18;
}

.catalog-world-logo { width: 148px; height: auto; margin-bottom: 20px; }
#catalog[data-world]:not([data-world=""]) .catalog-world-logo { grid-column: 2; grid-row: 1 / 3; justify-self: end; align-self: start; margin: 0; }
#catalog[data-world]:not([data-world=""]) .catalog-heading .eyebrow { grid-column: 1; grid-row: 1; font-size: 9px; letter-spacing: .14em; margin-bottom: 12px; }
#catalog[data-world]:not([data-world=""]) #catalog-title { grid-column: 1; grid-row: 2; min-width: 0; font-size: clamp(32px, 3.4vw, 53px); line-height: 1.08; letter-spacing: -.045em; color: #113750; overflow-wrap: break-word; }
.catalog-world-description { grid-column: 1; grid-row: 3; max-width: 65ch; margin-top: 15px; color: #25465e; font-size: 13px; line-height: 1.75; }
.power-delivery-explanation { margin-top: 19px; padding-top: 17px; border-top: 1px solid #8baccb4d; }
.power-delivery-explanation p { font-size: 11px; line-height: 1.8; color: #234963; max-width: 390px; }
.power-delivery-explanation strong { display: block; font-size: 12px; color: #153c57; margin-bottom: 5px; }
.power-delivery-explanation .text-link { margin-top: 10px; min-height: 44px; font-size: 12px; color: #0864bc; gap: 10px; display: inline-flex; align-items: center; text-align: left; }
.power-delivery-explanation .text-link svg { width: 16px; height: 16px; }
#catalog[data-world]:not([data-world=""]) .power-delivery-explanation { grid-column: 1 / -1; grid-row: 4; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px 28px; }
.power-delivery-explanation[hidden] { display: none !important; }
#catalog[data-world]:not([data-world=""]) .power-delivery-explanation p { max-width: 80ch; }
#catalog[data-world]:not([data-world=""]) .power-delivery-explanation .text-link { margin: 0; }
#catalog[data-world]:not([data-world=""]) .catalog-heading-copy .section-caption { grid-column: 2; grid-row: 3; align-self: end; justify-self: end; max-width: 100%; position: static; margin: 14px 0 0; text-align: right; font-size: 10px; line-height: 1.6; color: #285e8e; }
#catalog[data-world]:not([data-world=""]) .glossary-catalog-link { display: inline-flex; max-width: 300px; padding: 7px 0 0; margin: 0; color: #285e8e; font-size: 11px; line-height: 1.6; }

/* Existing contact actions retain their shared sizing and wrap cleanly. */
.consult-contacts article > div { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.consult-contacts article .btn { min-width: 130px; }

@media (max-width: 1000px) {
  #catalog[data-world]:not([data-world=""]) .catalog-heading { min-height: clamp(340px, 52svh, 570px); }
  #catalog[data-world]:not([data-world=""]) .catalog-heading-copy { grid-template-columns: minmax(0, 1fr) minmax(155px, .32fr); column-gap: 24px; padding: 26px; }
  #catalog[data-world]:not([data-world=""]) #catalog-title { font-size: clamp(30px, 4vw, 39px); }
  .catalog-world-description { font-size: 12px; }
  body[data-catalog-world]::before { background-position: 62% center; }
}

@media (max-width: 650px) {
  body[data-catalog-world] { --world-bleed: 28px; }
  body[data-catalog-world]::before {
    background-image: linear-gradient(180deg, #eaf5ff1c, #eaf5ff30 62%, #eaf5ff5c), var(--world-mobile-image, var(--world-image));
    background-position: center top;
    background-size: cover;
  }
  #catalog[data-world]:not([data-world=""]) .catalog-heading { min-height: max(470px, calc(100svh - 205px)); padding: 135px 0 0; margin: 14px 0 24px; }
  body[data-catalog-world="protection"] #protection .protection-heading { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: clamp(150px, 30svh, 280px); padding: 22px; margin-bottom: 30px; }
  body[data-catalog-world="protection"] #protection .protection-heading h1 { font-size: clamp(24px, 8.75vw, 38px); overflow-wrap: break-word; }
  body[data-catalog-world] .catalog-toolbar { padding: 12px 10px; }
  body[data-catalog-world] .filter-line { padding: 10px 12px; }
  #catalog[data-world]:not([data-world=""]) .catalog-heading-copy { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 22px; border-radius: 21px; background: linear-gradient(125deg, #ffffffd9, #eaf6ffb8); }
  .catalog-world-logo { width: 124px; margin-bottom: 15px; }
  #catalog[data-world]:not([data-world=""]) .catalog-world-logo { width: 124px; align-self: flex-start; margin-bottom: 17px; }
  #catalog[data-world]:not([data-world=""]) #catalog-title { font-size: clamp(28px, 8vw, 38px); }
  .catalog-world-description { max-width: none; margin-top: 11px; font-size: 12px; line-height: 1.65; }
  #catalog[data-world]:not([data-world=""]) .catalog-heading .eyebrow { font-size: 7px; margin-bottom: 10px; }
  #catalog[data-world]:not([data-world=""]) .catalog-heading-copy .section-caption { display: block; align-self: flex-start; margin-top: 15px; text-align: left; }
  #catalog[data-world]:not([data-world=""]) .power-delivery-explanation { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  #catalog[data-world]:not([data-world=""]) .power-delivery-explanation .text-link { justify-self: start; }
  #catalog[data-world]:not([data-world=""]) .glossary-catalog-link { max-width: 240px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-catalog-world]::before,
  body[data-catalog-world]::after { transform: none; will-change: auto; }
  body[data-catalog-world]::after { animation: none; opacity: .55; }
}

@media (prefers-reduced-transparency: reduce) {
  #catalog[data-world]:not([data-world=""]) .catalog-heading-copy { background: #f2f9fff2; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Portrait tablets use the composed vertical scene rather than cropping a wide hero. */
@media (min-width: 651px) and (max-width: 1000px) and (max-aspect-ratio: 1/1) {
  body[data-catalog-world]::before {
    background-image: linear-gradient(180deg, #eaf5ff1c, #eaf5ff30 62%, #eaf5ff5c), var(--world-mobile-image);
    background-position: center top;
  }
  #catalog[data-world]:not([data-world=""]) .catalog-heading { min-height: max(520px, calc(100svh - 230px)); padding: 150px 0 0; }
  body[data-catalog-world="protection"] #protection .protection-heading { width: 100%; margin-top: 36svh; }
}