/* Seven equal portrait strips: soft elemental reveal without moving neighbors. */
@property --strip-reveal { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.strip-instructions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.strip-instructions .cast__label { margin: 0; }
.strip-reset { border: 0; background: none; color: var(--bone); font: .7rem var(--mono); padding: .75rem 0; cursor: pointer; }
.strip-reset:disabled { opacity: .35; cursor: default; }
.cast.cast--strips { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 3px; margin: 0; }
.cast--strips .unit { min-width: 0; border: 0; background: #d9d5cc; overflow: hidden; }
.cast.cast--strips .unit button { display: block; width: 100%; height: clamp(360px,38vw,590px); padding: 0; position: relative; text-align: left; overflow: hidden; background: #d9d5cc; }
.cast.cast--strips .unit__face { position: absolute; inset: 0; width: 100%; height: 100%; background: linear-gradient(160deg,#eae5dc,#c5c2bc); }
.cast--strips .unit__face > img, .cast--strips .strip-powered img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; mix-blend-mode: multiply; }
.cast--strips .strip-powered { position: absolute; inset: 0; background: color-mix(in srgb,var(--el) 38%,#e4ded4); opacity: 0; transition: opacity .55s ease; }
@supports (mask-image: linear-gradient(black, transparent)) {
  .cast--strips .strip-powered { opacity: 1; --strip-reveal: 0%; mask-image: linear-gradient(155deg,black calc(var(--strip-reveal) - 20%),transparent var(--strip-reveal)); transition: --strip-reveal .65s cubic-bezier(.2,.65,.25,1); }
}
.cast--strips button::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg,#090a0dee,transparent 35%); border-bottom: 3px solid var(--el); }
.cast.cast--strips .unit__name { position: absolute; z-index: 2; left: 14px; right: 8px; bottom: 23px; color: var(--bone); font-size: clamp(1.25rem,2.2vw,2.5rem); padding: 0; border: 0; }
.cast.cast--strips .unit__el { position: absolute; z-index: 2; left: 14px; top: 14px; padding: .35rem .4rem; color: #101113; background: color-mix(in srgb,var(--el) 60%,#ece5da); font-size: .6rem; letter-spacing: .03em; }
.cast--strips button[aria-pressed="true"] .strip-powered, .cast--strips button:focus-visible .strip-powered { --strip-reveal: 140%; opacity: 1; }
@media (hover: hover) and (pointer: fine) { .cast--strips button:hover .strip-powered { --strip-reveal: 140%; opacity: 1; } }
.cast--strips .unit:has([aria-pressed="true"]) { outline: 0; box-shadow: none; }
.cast--strips button:focus-visible { outline: 3px solid var(--bone); outline-offset: -5px; }
.guardian-feature--details { margin-top: 1rem; grid-template-columns: 1fr; border-top: 2px solid var(--selected); }
.guardian-feature--details[hidden] { display: none; }
.guardian-feature--details .guardian-feature__copy { display: grid; grid-template-columns: 1fr 1.2fr; gap: .7rem 3rem; }
.guardian-feature--details .guardian-feature__copy > * { margin: 0; }
.guardian-feature--details .guardian-power { grid-column: 2; grid-row: 1/6; border-top: 0; border-left: 1px solid #ffffff22; padding: 0 0 0 2rem; align-self: center; }
.guardian-feature--details h3 { font-size: 3.5rem; }
body.motion-paused .strip-powered { transition: none; }
@media(max-width:750px) {
  .cast.cast--strips { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: 10px; scrollbar-width: thin; scrollbar-color: var(--orange) #222; }
  .cast.cast--strips .unit { flex: 0 0 42%; scroll-snap-align: start; }
  .cast.cast--strips .unit button { height: 410px; }
  .strip-instructions .cast__label { font-size: .6rem; max-width: 30ch; }
  .strip-reset { font-size: .6rem; }
  .guardian-feature--details .guardian-feature__copy { display: block; }
  .guardian-feature--details .guardian-feature__copy > * + * { margin-top: 1rem; }
  .guardian-feature--details .guardian-power { border-left: 0; border-top: 1px solid #ffffff22; padding: 1.5rem 0 0; }
}
@media(prefers-reduced-motion:reduce) { .cast--strips .strip-powered { transition: none; } }