/* Work Panels — panels.css */

/* ============================== container ============================== */

.wp {
  position: relative;
  aspect-ratio: 1920 / 1420;
  width: 100%;
  container-type: inline-size;
  display: block;
  font-synthesis: none;
}

.wp > .wp-hero {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  aspect-ratio: 908 / 1416;
}

.wp > .wp-col {
  position: absolute;
  left: 49.27%;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: calc(100cqw * 36 / 1920);
}

/* design-px unit for column children */
.wp > .wp-col > * {
  --u: calc(100cqw / 1920);
}

/* solo (carousel hero slide) */
.wp--solo {
  aspect-ratio: auto;
  height: 100%;
  width: auto;
  aspect-ratio: 908 / 1416;
}
.wp--solo > .wp-hero {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ================================ hero ================================= */

.wp-hero {
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  background: #000;
}
.wp-hero > * {
  --h: calc(100cqw / 908);
}
.wp-hero,
.wp-hero * {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* images inside hero/col get explicit rules so host CSS cannot stretch them */
.wp-host .wp .wp-hero img,
.wp .wp-hero img {
  max-width: none;
  max-height: none;
}
.wp .wp-bg {
  display: block;
}

/* screens: host overrides — win specificity */
.wp.wp .wp-col img {
  max-width: none;
  max-height: none;
  display: block;
}
.wp.wp .wp-hero {
  box-sizing: border-box;
}

/* ============================== screens ================================ */

.wp-shot {
  position: relative;
}
.wp-shot > img {
  width: 100%;
  height: auto;
  display: block;
  background: #fff;
}

/* nova glow overlay */
.wp-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(40% 50% at 30% 40%, rgba(80, 120, 255, .55), transparent 70%),
              radial-gradient(35% 45% at 75% 70%, rgba(150, 60, 255, .45), transparent 70%);
  background-size: 200% 200%;
  opacity: .6;
}
@media (prefers-reduced-motion: no-preference) {
  .wp.is-play .wp-glow {
    animation: nova-glow-drift 8s ease-in-out infinite;
  }
}

/* light sweep */
.wp-sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
  background-size: 250% 100%;
  background-position: 150% 0;
  mix-blend-mode: soft-light;
}

/* ============================ effect classes =========================== */

.fx-rise,
.fx-mask-rise,
.fx-fade,
.fx-pop,
.fx-drop,
.fx-wipe-r,
.fx-zoom-in,
.fx-track,
.fx-roll-l,
.fx-roll-r,
.fx-in-tl,
.fx-in-br,
.fx-squeeze,
.fx-click,
.fx-punch,
.fx-slide-up,
.fx-wipe-up {
  --d: 0s;
  --t: .9s;
}

.fx-squeeze {
  display: inline-block;
  transform-origin: center;
}
.fx-zoom-in {
  transform-origin: 50% 50%;
}
.fx-in-tl,
.fx-in-br,
.fx-roll-l,
.fx-roll-r {
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {

  /* ---- entrance ---- */
  .wp.is-play .fx-rise {
    animation: fx-rise-k var(--t) cubic-bezier(.2,.75,.2,1) var(--d) both;
  }
  .wp.is-play .fx-mask-rise {
    animation: fx-mask-rise-k var(--t) cubic-bezier(.2,.75,.2,1) var(--d) both;
  }
  .wp.is-play .fx-fade {
    animation: fx-fade-k var(--t) cubic-bezier(.2,.75,.2,1) var(--d) both;
  }
  .wp.is-play .fx-pop {
    animation: fx-pop-k var(--t) cubic-bezier(.2,.75,.2,1) var(--d) both;
  }
  .wp.is-play .fx-drop {
    animation: fx-drop-k var(--t) cubic-bezier(.2,.75,.2,1) var(--d) both;
  }
  .wp.is-play .fx-wipe-r {
    animation: fx-wipe-r-k var(--t) cubic-bezier(.2,.75,.2,1) var(--d) both;
  }
  .wp.is-play .fx-zoom-in {
    animation: fx-zoom-in-k 2.4s ease-out var(--d) both;
    animation-duration: var(--t, 2.4s);
  }
  .wp.is-play .fx-track {
    animation: fx-track-k var(--t) cubic-bezier(.2,.75,.2,1) var(--d) both;
  }
  .wp.is-play .fx-roll-l {
    animation: fx-roll-l-k var(--t) cubic-bezier(.2,.75,.2,1) var(--d) both;
  }
  .wp.is-play .fx-roll-r {
    animation: fx-roll-r-k var(--t) cubic-bezier(.2,.75,.2,1) var(--d) both;
  }
  .wp.is-play .fx-in-tl {
    animation: fx-in-tl-k .8s cubic-bezier(.7,0,.2,1) var(--d) both;
  }
  .wp.is-play .fx-in-br {
    animation: fx-in-br-k .8s cubic-bezier(.7,0,.2,1) var(--d) both;
  }
  .wp.is-play .fx-squeeze {
    animation: fx-squeeze-k var(--t) cubic-bezier(.2,.75,.2,1) var(--d) both;
  }
  .wp.is-play .fx-click {
    animation: fx-click-k .55s cubic-bezier(.25,.9,.3,1.15) var(--d) both;
  }
  .wp.is-play .fx-punch {
    animation: fx-punch-k .7s cubic-bezier(.2,.75,.2,1) var(--d) both;
  }
  .wp.is-play .fx-slide-up {
    animation: fx-slide-up-k var(--t) cubic-bezier(.2,.75,.2,1) var(--d) both;
  }
  .wp.is-play .fx-wipe-up {
    animation: fx-wipe-up-k var(--t) cubic-bezier(.2,.75,.2,1) var(--d) both;
  }

  /* ---- sweep ---- */
  .wp.is-play .wp-sweep {
    animation: wp-sweep-k 2.2s ease-out var(--d) both;
  }
}

/* ---- keyframes ---- */

@keyframes fx-rise-k {
  from { transform: translateY(calc(40 * var(--h))); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@keyframes fx-mask-rise-k {
  from { transform: translateY(105%); }
  to   { transform: translateY(0); }
}

@keyframes fx-fade-k {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fx-pop-k {
  0%   { transform: scale(.6); opacity: 0; }
  60%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes fx-drop-k {
  0%   { transform: translateY(calc(-80 * var(--h))); opacity: 0; }
  60%  { transform: translateY(calc(6 * var(--h))); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes fx-wipe-r-k {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes fx-zoom-in-k {
  from { transform: scale(1.12); }
  to   { transform: scale(1); }
}

@keyframes fx-track-k {
  from { letter-spacing: .6em; opacity: 0; }
  to   { letter-spacing: var(--ls, .22em); opacity: 1; }
}

@keyframes fx-roll-l-k {
  0% {
    transform: translateX(calc(-420 * var(--h))) rotate(-540deg) scale(.6);
    opacity: 0;
    filter: blur(6px);
  }
  70% {
    transform: translateX(calc(12 * var(--h))) rotate(8deg) scale(1.02);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: none;
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes fx-roll-r-k {
  0% {
    transform: translateX(calc(420 * var(--h))) rotate(540deg) scale(.6);
    opacity: 0;
    filter: blur(6px);
  }
  70% {
    transform: translateX(calc(-12 * var(--h))) rotate(-8deg) scale(1.02);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: none;
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes fx-in-tl-k {
  from { transform: translate(-110%, -110%); }
  to   { transform: translate(0, 0); }
}

@keyframes fx-in-br-k {
  from { transform: translate(110%, 110%); }
  to   { transform: translate(0, 0); }
}

@keyframes fx-squeeze-k {
  0%   { transform: scaleX(1); }
  40%  { transform: scaleX(.55); }
  70%  { transform: scaleX(1.08); }
  100% { transform: scaleX(1); }
}

@keyframes fx-click-k {
  0%   { transform: scale(.2); opacity: 0; }
  55%  { transform: scale(1.15); opacity: 1; }
  80%  { transform: scale(.96); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes fx-punch-k {
  0%   { transform: scale(1.25); opacity: 0; filter: blur(8px); }
  100% { transform: scale(1); opacity: 1; filter: blur(0); }
}

@keyframes fx-slide-up-k {
  from { transform: translateY(105%); }
  to   { transform: translateY(0); }
}

@keyframes fx-wipe-up-k {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes wp-sweep-k {
  from { background-position: 150% 0; }
  to   { background-position: -50% 0; }
}

/* ============================ ambient loops =========================== */

/* only under reduced-motion: no-preference via the media block below */

@media (prefers-reduced-motion: no-preference) {

  /* trideca */
  .wp.is-play .tri-breathe {
    will-change: transform, opacity;
    animation: tri-breathe-k 5s ease-in-out infinite alternate;
  }
  .wp.is-play .tri-ring {
    animation:
      fx-fade-k var(--t, 2s) cubic-bezier(.2,.75,.2,1) var(--d, 0s) both,
      tri-ring-rot 60s linear infinite;
    transform-origin: 50% 50%;
  }
  @keyframes tri-breathe-k {
    from { opacity: .75; transform: scale(1); }
    to   { opacity: 1;   transform: scale(1.06); }
  }
  @keyframes tri-ring-rot {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  /* ring entrance rotate override */
  @keyframes tri-ring-in {
    from { transform: rotate(-90deg); opacity: 0; }
    to   { transform: rotate(0deg); opacity: 1; }
  }

  /* nova */
  .wp.is-play .nova-drift {
    animation: nova-drift-k 9s infinite ease-in-out;
  }
  @keyframes nova-drift-k {
    0%   { background-position: 0% 0%; }
    50%  { background-position: 100% 60%; }
    100% { background-position: 0% 0%; }
  }
  .wp.is-play .nova-light {
    will-change: transform;
    animation: nova-light-k 11s infinite ease-in-out;
  }
  @keyframes nova-light-k {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(calc(300 * var(--h)), calc(500 * var(--h))); }
    100% { transform: translate(0, 0); }
  }
  .wp.is-play .nova-shimmer {
    animation:
      fx-mask-rise-k var(--t) cubic-bezier(.2,.75,.2,1) var(--d) both,
      nova-shimmer-k 4s linear infinite;
  }
  @keyframes nova-shimmer-k {
    from { background-position: 0% 0; }
    to   { background-position: 200% 0; }
  }

  /* inlogik */
  .wp.is-play .inl-dark {
    will-change: transform;
    animation:
      fx-drop-k var(--t) cubic-bezier(.2,.75,.2,1) var(--d) both,
      inl-dark-k 4.4s ease-in-out infinite;
  }
  @keyframes inl-dark-k {
    0%, 100% { transform: translate(0, 0) rotate(-28deg); }
    45%      { transform: translate(calc(-60 * var(--h)), calc(-40 * var(--h))) rotate(-36deg); }
  }
  .wp.is-play .inl-white {
    will-change: transform;
    animation:
      fx-drop-k var(--t) cubic-bezier(.2,.75,.2,1) var(--d) both,
      inl-white-k 4.4s ease-in-out .3s infinite;
  }
  @keyframes inl-white-k {
    0%, 100% { transform: translate(0, 0) rotate(-28deg) scale(1); }
    50%      { transform: translate(calc(50 * var(--h)), calc(-32 * var(--h))) rotate(-22deg) scale(1.05); }
  }

  /* ofn */
  .wp.is-play .ofn-bounce {
    will-change: transform;
    animation:
      fx-pop-k var(--t) cubic-bezier(.2,.75,.2,1) var(--d) both,
      ofn-bounce-k 2.2s ease-in-out 2.4s infinite;
  }
  @keyframes ofn-bounce-k {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(calc(-10 * var(--h))); }
  }
  .wp.is-play .ofn-fall {
    animation: ofn-fall-k 1.3s cubic-bezier(.5,0,.8,.4) var(--d) both;
  }
  @keyframes ofn-fall-k {
    0%   { transform: translate(0, calc(-120 * var(--h))); opacity: 0; }
    30%  { opacity: 1; }
    100% { transform: translate(var(--tx), calc(300 * var(--h))) scale(.3); opacity: 0; }
  }

  /* lmr letters */
  .wp.is-play .lmr-letter,
  .wp.is-play .fx-drop {
    /* fx-drop generic handles it; lmr adds rotate */
  }
  /* lmr rotate is applied via --r in the drop variant below */
  .wp.is-play .lmr-letter {
    animation: lmr-drop-k var(--t) cubic-bezier(.2,.75,.2,1) var(--d) both;
  }
  @keyframes lmr-drop-k {
    0%   { transform: translateY(calc(-80 * var(--h))) rotate(var(--r, 0deg)); opacity: 0; }
    60%  { transform: translateY(calc(6 * var(--h))) rotate(0deg); opacity: 1; }
    100% { transform: translateY(0) rotate(0deg); opacity: 1; }
  }

  /* skips */
  .wp.is-play .skip-drive {
    animation: skip-drive-k 1.1s cubic-bezier(.2,.8,.3,1) var(--d) both;
  }
  @keyframes skip-drive-k {
    0%   { transform: translateX(calc(500 * var(--h))); }
    80%  { transform: translateX(calc(-14 * var(--h))); }
    100% { transform: translateX(0); }
  }
  .wp.is-play .skip-idle {
    animation: skip-idle-k .35s infinite alternate 2s;
  }
  @keyframes skip-idle-k {
    from { transform: translateY(0); }
    to   { transform: translateY(calc(-3 * var(--h))); }
  }

  /* sdgi */
  .wp.is-play .sdgi-beam {
    will-change: opacity;
    animation: sdgi-beam-k 3s infinite;
  }
  @keyframes sdgi-beam-k {
    0%   { opacity: .6; }
    18%  { opacity: 1; }
    42%  { opacity: .75; }
    55%  { opacity: 1; }
    75%  { opacity: .65; }
    100% { opacity: 1; }
  }
  .wp.is-play .sdgi-title {
    animation: sdgi-title-k 1.2s cubic-bezier(.2,.75,.2,1) var(--d) both;
  }
  @keyframes sdgi-title-k {
    from { opacity: 0; letter-spacing: .25em; filter: blur(6px); }
    to   { opacity: 1; letter-spacing: -0.01em; filter: blur(0); }
  }

  /* happly */
  .wp.is-play .hap-float {
    will-change: transform;
    animation:
      fx-fade-k var(--t) cubic-bezier(.2,.75,.2,1) both,
      hap-float-k 3s ease-in-out infinite alternate;
  }
  @keyframes hap-float-k {
    from { transform: translateY(0); }
    to   { transform: translateY(calc(-8 * var(--h))); }
  }

  /* negotium old-lines dim */
  .wp.is-play .neg-old {
    animation: neg-dim-k .6s ease 2.2s both;
  }
  @keyframes neg-dim-k {
    from { opacity: 1; }
    to   { opacity: .45; }
  }

  /* nova glow ambient */
  @keyframes nova-glow-drift {
    0%   { background-position: 0% 0%; }
    50%  { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
  }

  /* generic per-letter fx-drop with rotate for lmr (uses --r, fallback) */
  .wp.is-play .fx-drop[style*="--r"] {
    animation: lmr-drop-k var(--t) cubic-bezier(.2,.75,.2,1) var(--d) both;
  }
}

/* at-rest lmr letters */
.lmr-letter {
  display: inline-block;
}

/* ============================ burger helper =========================== */

.wp-burger__bar {
  width: 100%;
  display: block;
}

/* the last bar must not have bottom margin — override via inline where used */

/* ========================== lightbox carousel ========================= */

.wpc {
  position: relative;
  display: block;
  width: 100%;
}

.wpc-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 16px;
  height: min(78vh, 900px);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.wpc-track::-webkit-scrollbar {
  display: none;
}

.wpc-slide {
  flex: 0 0 auto;
  height: 100%;
  scroll-snap-align: center;
  display: flex;
  align-items: center;
}
.wpc-slide img {
  height: 100%;
  width: auto;
  max-width: 86vw;
  object-fit: contain;
  display: block;
}

.wpc-slide--hero .wp--solo {
  height: 100%;
  width: auto;
  aspect-ratio: 908 / 1416;
  flex: 0 0 auto;
}

.wpc-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 2;
}
.wpc-btn--prev { left: 8px; }
.wpc-btn--next { right: 8px; }

.wpc-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.wpc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  border: 0;
  padding: 0;
  cursor: pointer;
}
.wpc-dot.is-active {
  background: #fff;
}

/* =============================== host ================================= */

.wp-host {
  position: relative;
  display: block;
}
.wp-host .wp {
  width: 100%;
}

/* hidden lightbox image */
.lightbox__media img[hidden] {
  display: none !important;
}
/* Column cells: natural height, crop only from the bottom */
.wp-col > .wp-cell { flex: none; overflow: hidden; position: relative; }
.wp-col > .wp-cell--last { flex: 1 1 0; min-height: 0; }
.wp-row { display: flex; gap: calc(36 * var(--u)); overflow: hidden; }
.wp-row > .wp-cell { flex: 1 1 0; min-width: 0; height: 100%; overflow: hidden; position: relative; }

/* PerData: the word after "Partners in" cycles like the live site */
.pd-words { display: block; height: 1.15em; line-height: 1.15em; }
.pd-words > span { display: block; }
.wp-hero--perdata .wp-line-wrap:has(.pd-words) { height: 1.15em; }
@media (prefers-reduced-motion: no-preference) {
  .wp.is-play .pd-words { animation: pd-cycle 6s cubic-bezier(.7,0,.2,1) 1.2s both; }
}
@keyframes pd-cycle {
  0%, 16% { transform: translateY(0); }
  24%, 40% { transform: translateY(-1.15em); }
  48%, 64% { transform: translateY(-2.3em); }
  72%, 88% { transform: translateY(-3.45em); }
  96%, 100% { transform: translateY(-4.6em); }
}

/* Lightbox: the carousel sizes itself, not the old 1920×1420 media box */
.lightbox__media:has(.wpc) { aspect-ratio: auto; overflow: visible; max-height: none; background: transparent; }
.wpc { position: relative; width: 100%; }
.wpc .wpc-track { height: min(68vh, 680px); }
.wpc .wpc-slide { max-width: 100%; justify-content: center; }
.wpc .wpc-slide > img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.wpc .wpc-slide--hero .wp--solo { height: 100%; width: auto; }
.wpc .wpc-shot.wp { aspect-ratio: auto; container-type: normal; flex: none; }
.wpc .wpc-shot .wp-shot, .wpc .wpc-shot .wp-shot > img { width: 100%; height: 100%; }