/* =============================================================================
   themes/fishinforlove.css — Fishin' for Love (RMITV) case study
   -----------------------------------------------------------------------------
   Art direction: "the studio floor". The opening is a programme monitor with
   camera tallies; the two seasons are told on production slates (clapper
   stripes in bone and sumi), because the story here is about roles changing
   between seasons — and saying so plainly.
   ============================================================================= */

.studio__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px clamp(16px, 2.6vw, 44px); align-items: center; }
.studio__id { grid-column: 1 / span 5; }
.studio__monitor { grid-column: 7 / span 6; }
@media (max-width: 960px) { .studio__id, .studio__monitor { grid-column: 1 / -1; } }

/* Programme monitor */
.monitor { padding: clamp(10px, 1.2vw, 16px); background: #050409; border-radius: 8px; box-shadow: 0 0 0 1px rgba(243, 237, 226, .14), 0 40px 90px rgba(0, 0, 0, .7); }
.monitor .frame { --frame-max-h: min(56vh, 560px); }
.monitor__bar { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: .62rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--text-faint); }
.tallies { display: flex; gap: 16px; }
.tallies span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; border: 1px solid currentColor; vertical-align: 0; }
.tallies .is-live { color: var(--light); }
.tallies .is-live::before { background: var(--light); box-shadow: 0 0 10px rgba(243, 237, 226, .8); }

/* ---- Production slates for the two seasons --------------------------------- */
.slates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 40px); }
@media (max-width: 860px) { .slates { grid-template-columns: 1fr; } }
.slate { background: var(--bone); color: var(--sumi); box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }
.slate__clapper {
  height: 34px;
  background: repeating-linear-gradient(-45deg, var(--sumi) 0 22px, var(--bone) 22px 44px);
  border-bottom: 2px solid var(--sumi);
}
.slate__body { padding: clamp(18px, 2.4vw, 30px); display: grid; gap: 12px; }
.slate__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1.5px solid var(--sumi); }
.slate__fields div { padding: 8px 10px; }
.slate__fields div + div { border-left: 1px solid rgba(18, 16, 21, .3); }
.slate__fields dt { font-size: .58rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(18, 16, 21, .65); }
.slate__fields dd { font-size: 1.2rem; line-height: 1.2; }
.slate h3 { font-size: var(--fs-h3); }
.slate p, .slate li { color: rgba(18, 16, 21, .82); }
.slate .ticks li { color: rgba(18, 16, 21, .82); }
/* A struck-through role, then the role it became — said honestly */
.role-change { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: 1.15rem; }
.role-change s { color: rgba(18, 16, 21, .55); text-decoration-thickness: 1.5px; }
.role-change b { font-weight: 600; }

/* Policy card */
.policy { border: 1.5px solid var(--rule-strong); padding: clamp(20px, 2.6vw, 34px); display: grid; gap: 12px; max-width: 760px; }
.policy__fields { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.policy__fields span { padding: 6px 12px; border: 1px solid var(--rule-strong); font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--text-soft); }


/* ---- The world: under the water, from the show's title card ------------------
   Its blues (#1E6096 to #1E488A), light falling from the surface, and bubbles
   rising past the programme monitor. */
.world--fishin { background: linear-gradient(180deg, #1E6096 0%, #1E4E8A 45%, #10264F 100%); }
.fish-rays { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.fish-rays i {
  position: absolute;
  top: -20%;
  width: 12vw;
  height: 140%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 70%);
  transform-origin: 50% 0;
  rotate: 16deg;
}
.fish-rays i:nth-child(1) { left: 6%; }
.fish-rays i:nth-child(2) { left: 30%; width: 7vw; opacity: .7; }
.fish-rays i:nth-child(3) { left: 55%; width: 16vw; opacity: .55; }
.fish-rays i:nth-child(4) { left: 82%; width: 9vw; opacity: .6; }
.fish-bubbles { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fish-bubbles i {
  position: absolute;
  left: var(--x);
  bottom: -40px;
  width: calc(18px * var(--s));
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .5);
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .5), rgba(255, 255, 255, .04) 60%);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.calm) .fish-rays i { animation: fish-rays 11s ease-in-out infinite alternate; }
  html:not(.calm) .fish-rays i:nth-child(2) { animation-delay: -4s; }
  html:not(.calm) .fish-rays i:nth-child(3) { animation-delay: -7s; }
  html:not(.calm) .fish-rays i:nth-child(4) { animation-delay: -2s; }
  html:not(.calm) .fish-bubbles i { animation: fish-bubble var(--d) linear var(--o) infinite; }
}
@keyframes fish-rays { from { transform: translate3d(-3vw, 0, 0); opacity: .45; } to { transform: translate3d(3vw, 0, 0); opacity: 1; } }
@keyframes fish-bubble {
  0%   { opacity: 0; transform: translate3d(0, 0, 0); }
  10%  { opacity: .9; }
  50%  { transform: translate3d(18px, -45vh, 0); }
  90%  { opacity: .6; }
  100% { opacity: 0; transform: translate3d(-12px, -95vh, 0); }
}
.world--fishin .tallies .is-live { color: #fff; }
.world--fishin .tallies .is-live::before { background: #E5403A; box-shadow: 0 0 10px #E5403A; border-color: #E5403A; }   /* the studio's red tally */