/* Rotating showcase backdrop and first-paint image treatment.
   This file and its companion module stay isolated from the board styling. */

body[data-page="planning"]::before,
body[data-page="planning"]::after {
  z-index: 1;
}

body[data-page="planning"] > .planning-site-shell {
  z-index: 3;
}

.planning-background {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(0.22, 0.7, 0.24, 1);
  contain: strict;
}

.planning-background.is-ready {
  opacity: 1;
}

.planning-background__slide {
  --planning-background-image: none;
  --planning-background-position-desktop: 50% 42%;
  --planning-background-position-wide: 50% 40%;
  --planning-background-position-mobile: 50% 44%;
  --planning-background-size-desktop: auto max(105%, 59.0625vw);
  --planning-background-size-mobile: auto max(108%, 60.75vw);
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1500ms cubic-bezier(0.22, 0.7, 0.24, 1);
  will-change: opacity;
}

.planning-background:not(.is-ready) .planning-background__slide {
  transition: none;
}

.planning-background__slide.is-active {
  opacity: 1;
}

.planning-background__slide::before,
.planning-background__slide::after {
  content: "";
  position: absolute;
  inset: -3%;
  background-image: var(--planning-background-image);
  background-repeat: no-repeat;
  background-position: var(--planning-background-position-desktop);
  background-size: cover;
  background-size: var(--planning-background-size-desktop);
}

/* The upper copy stays legible enough for the character silhouette and face to
   emerge through the toolbar, then dissolves before the dense card field. */
.planning-background__slide::before {
  inset: 0;
  opacity: 0.95;
  filter: brightness(0.94) contrast(1.05) saturate(0.84);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 8.5rem, rgba(0, 0, 0, 0.55) 11rem, transparent 17.5rem);
  mask-image: linear-gradient(to bottom, #000 0, #000 8.5rem, rgba(0, 0, 0, 0.55) 11rem, transparent 17.5rem);
}

/* A second rendering owns the board area. Its wider mask overlap removes a
   visible seam while blur, desaturation, and the veil keep card text dominant. */
.planning-background__slide::after {
  inset: -1.25rem;
  opacity: 0.64;
  filter: blur(4px) brightness(0.87) saturate(0.84);
  -webkit-mask-image: linear-gradient(to bottom, transparent 4rem, rgba(0, 0, 0, 0.48) 9rem, #000 16rem);
  mask-image: linear-gradient(to bottom, transparent 4rem, rgba(0, 0, 0, 0.48) 9rem, #000 16rem);
}

.planning-background__veil {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    radial-gradient(ellipse 74% 38% at 50% -9%, rgba(181, 219, 241, 0.075), transparent 70%),
    linear-gradient(90deg, rgba(8, 12, 15, 0.09), rgba(10, 14, 17, 0.015) 48%, rgba(8, 12, 15, 0.09)),
    linear-gradient(180deg, rgba(9, 13, 16, 0) 0, rgba(10, 14, 17, 0.045) 10rem, rgba(10, 14, 17, 0.25) 34rem, rgba(9, 13, 16, 0.38) 100%);
}

/* While the first decoded image is the whole experience, show its crisp layer
   across the viewport. The board treatment returns as the loader leaves. */
body.planning-is-loading .planning-background__slide::before {
  inset: 0;
  opacity: 0.96;
  filter: brightness(0.9) contrast(1.04) saturate(0.88);
  -webkit-mask-image: none;
  mask-image: none;
}

body.planning-is-loading .planning-background__slide::after {
  opacity: 0;
}

body.planning-is-loading .planning-background__veil {
  background:
    radial-gradient(ellipse 70% 62% at 50% 46%, transparent 36%, rgba(7, 11, 14, 0.16) 100%),
    linear-gradient(180deg, rgba(8, 12, 15, 0.035), rgba(7, 11, 14, 0.18));
}

/* Let the artwork register through the control surface without sacrificing the
   crisp glass boundary or the board's existing contrast hierarchy. */
body[data-page="planning"] .planning-toolbar {
  background:
    linear-gradient(135deg, rgba(224, 239, 247, 0.045), transparent 38%),
    rgba(18, 23, 27, 0.25);
  -webkit-backdrop-filter: blur(3px) saturate(1.06);
  backdrop-filter: blur(3px) saturate(1.06);
}

/* The character remains clear in the open canvas, while each week is a fully
   opaque work surface. No part of the rotating artwork passes through these
   columns or either of their header treatments. */
body[data-page="planning"] #planning-card-board[data-view="weeks"] .week-column[data-lane="pool"] {
  background:
    radial-gradient(ellipse at 78% -8%, rgba(126, 189, 229, 0.068), transparent 46%),
    linear-gradient(155deg, rgba(245, 250, 252, 0.034), transparent 42%),
    #11171b;
}

body[data-page="planning"] #planning-card-board[data-view="weeks"] .week-column[data-lane="working"] {
  background:
    radial-gradient(ellipse at 24% -12%, rgba(151, 213, 246, 0.085), transparent 48%),
    linear-gradient(155deg, rgba(224, 243, 252, 0.035), transparent 45%),
    #12191d;
}

body[data-page="planning"] #planning-card-board[data-view="weeks"] .week-header {
  background: #141a1e;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body[data-page="planning"] #planning-card-board[data-view="weeks"] .week-header__week-slot {
  background:
    radial-gradient(ellipse at 12% -30%, rgba(132, 199, 239, 0.17), transparent 66%),
    radial-gradient(ellipse at 94% 140%, rgba(191, 224, 243, 0.085), transparent 65%),
    linear-gradient(118deg, rgba(255, 255, 255, 0.075), transparent 31%, rgba(0, 0, 0, 0.12) 68%),
    #20272c;
}

body[data-page="planning"] #planning-card-board[data-view="weeks"] .week-header__details {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent),
    #111715;
}

body[data-page="planning"] #planning-card-board[data-view="weeks"] .week-header--working {
  background:
    linear-gradient(90deg, rgba(151, 211, 243, 0.052), transparent 46%),
    #151c20;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (min-aspect-ratio: 2 / 1) {
  .planning-background__slide::before,
  .planning-background__slide::after {
    background-position: var(--planning-background-position-wide);
  }
}

@media (max-width: 760px) {
  .planning-background__slide::before,
  .planning-background__slide::after {
    background-position: var(--planning-background-position-mobile);
    background-size: var(--planning-background-size-mobile);
  }

  .planning-background__slide::before {
    opacity: 0.78;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0.62) 9rem, transparent 17rem);
    mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0.62) 9rem, transparent 17rem);
  }

  .planning-background__slide::after {
    opacity: 0.5;
    filter: blur(4px) brightness(0.81) saturate(0.77);
    -webkit-mask-image: linear-gradient(to bottom, transparent 3rem, rgba(0, 0, 0, 0.52) 8rem, #000 16rem);
    mask-image: linear-gradient(to bottom, transparent 3rem, rgba(0, 0, 0, 0.52) 8rem, #000 16rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .planning-background,
  .planning-background__slide {
    transition: none;
  }
}