/* ==========================================================================
   MAGIK Creative: pieces only the Creative pages have. Loaded after
   /css/magik.css by /creative and its four service pages, as
   /css/pages/creative.css?v=N (one-year immutable cache: bump N on every
   Creative page whenever this file changes).

   The pages are built from the shared division components (css/magik.css
   section 16: .dv-hero, .dv-cards, .dv-head, .dv-folds, .dv-close). This file
   only adds what Creative alone has:

     1  The film: the screening frame, its bar, the still line, and the
        hero player on the Animation page
     2  Cut to a moment: the seven frames under the film
     3  House lights: the room dims while the film plays (never the film)
     4  One field, seen twice: the before and after frames
     5  The story, in four beats (Animation only)
     6  Service pages: the offer row, the steps, what is inside the folds
     7  Small shared bits: labels

   Frames from the film are never dimmed, tinted, filtered, cropped off
   16:9 or typed over: everything here changes the room around them.
   Nothing moves on hover; light changes instead.
   ========================================================================== */


/* 1  THE FILM ---------------------------------------------------------------
   The frame sits in a 1px hairline, true 16:9, never wider than its 1280
   source. The film's own colours spill past its edges (.m-spill), kept
   subtle. The bar beneath: Play, the running time, Sound, the credit. */
.cr-film{ max-width:1280px; }
.cr-film .m-film-screen{ outline:1px solid rgba(255,252,252,.14); scroll-margin-top:96px; }
.cr-film .m-film-bar{ gap:12px 16px; }
.cr-film .m-film-credit{ margin-left:auto; text-align:right; }
.cr-film-clock{
  font-family:var(--m-instrument); letter-spacing:var(--m-instrument-track); font-variant-numeric:tabular-nums;
  font-size:13px; line-height:1.5; color:var(--m-muted); white-space:nowrap;
}
.cr-film-clock .m-film-time{ color:var(--m-muted); }

/* the credits block beside the screening's title (2D animation . 71.3 s) */
.cr-credits{
  flex:none; font-size:12px; font-weight:600; letter-spacing:.14em; line-height:22px;
  text-transform:uppercase; text-align:right; color:var(--m-muted);
}

/* the still on the screen, named: timecode and one plain line. It names the
   frame while the screen holds a still; while the film rolls it steps back. */
.cr-still{
  display:flex; align-items:baseline; gap:4px 16px;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--m-rule);
  font-size:16px; line-height:1.45; color:var(--m-text-2);
}
.cr-still .m-tc{ flex:none; color:var(--m-muted); }
.is-rolling .cr-still-line{ color:var(--m-muted); }

/* the Animation page: the player takes the hero's picture slot */
.cr-hero-film .m-film-bar{ margin-top:14px; }
.cr-hero-film .m-film-credit{ flex-basis:100%; margin-left:0; text-align:left; }

@media (max-width:720px){
  /* the screening bleeds to both screen edges; the bar stays in the gutter */
  .cr-screening .cr-film .m-film-screen{ margin-left:calc(-1 * var(--m-g)); margin-right:calc(-1 * var(--m-g)); outline:0; box-shadow:none; }
  .cr-credits{ text-align:left; }
}
@media (max-width:460px){
  .cr-hero-film .m-film-screen{ margin-left:calc(-1 * var(--m-g)); margin-right:calc(-1 * var(--m-g)); outline:0; box-shadow:none; }
}
@media (max-width:699px){
  .cr-film .m-film-credit{ flex-basis:100%; margin-left:0; text-align:left; }
}
@media (max-width:400px){
  /* Play, the time and Sound keep to one row on a 320px phone */
  .cr-film .m-film-bar{ gap:10px 8px; }
  .cr-film .m-film-toggle, .cr-film .m-film-sound{ gap:8px; padding:0 12px; }
}


/* 2  CUT TO A MOMENT --------------------------------------------------------
   Seven cleared frames (never 00:42, 00:44 or the closing card). Each is a
   button that cuts the screen to that moment. The chosen one takes a white
   hairline and a 2px red rule over its timecode. Hidden in the markup until
   js/pages/creative.js wires it, so it is never a row of dead buttons. */
.cr-cuts{ margin-top:clamp(28px, 3vw, 40px); }
.cr-cuts .cr-label{ margin-bottom:14px; }
.cr-cuts-list{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:10px; list-style:none; }
.cr-cuts-list > li{ min-width:0; }
.cr-cut{
  /* positioned, so the hidden words inside stay inside the scrolling row */
  position:relative;
  display:flex; flex-direction:column; align-items:stretch; width:100%; min-height:44px;
  padding:0; background:transparent; border:0; color:var(--m-text); text-align:left; cursor:pointer;
}
.cr-cut-media, .cr-beat-media{
  position:relative; display:block; aspect-ratio:16 / 9; overflow:hidden; background:#000;
}
.cr-cut-media::after, .cr-beat-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,252,252,.14); transition:box-shadow .3s var(--m-dimmer);
}
.cr-cut-media img, .cr-beat-media img{ display:block; width:100%; height:100%; object-fit:cover; }
.cr-cut-tc, .cr-beat-tc{
  display:block; margin-top:10px; padding-top:8px; border-top:2px solid transparent;
  font-family:var(--m-instrument); letter-spacing:var(--m-instrument-track); font-variant-numeric:tabular-nums;
  font-size:13px; line-height:1.4; color:var(--m-muted);
  transition:border-color .3s var(--m-dimmer), color .3s var(--m-dimmer);
}
.cr-cut:hover .cr-cut-media::after, .cr-beat:not(:disabled):hover .cr-beat-media::after{ box-shadow:inset 0 0 0 1px rgba(255,252,252,.5); }
.cr-cut:hover .cr-cut-tc, .cr-beat:not(:disabled):hover .cr-beat-tc{ color:var(--m-text); }
.cr-cut[aria-pressed="true"] .cr-cut-media::after, .cr-beat[aria-pressed="true"] .cr-beat-media::after{ box-shadow:inset 0 0 0 1px #FFFCFC; }
.cr-cut[aria-pressed="true"] .cr-cut-tc, .cr-beat[aria-pressed="true"] .cr-beat-tc{ border-top-color:var(--m-red); color:var(--m-text); }
@media (max-width:720px){
  /* a filmstrip that scrolls sideways inside its own row, bleeding to the
     screen edges, about two and a half frames in view */
  .cr-cuts-list{
    display:flex; gap:10px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity;
    margin:0 calc(-1 * var(--m-g)); padding:0 var(--m-g) 4px; scroll-padding:0 var(--m-g);
  }
  .cr-cuts-list > li{ flex:0 0 38%; scroll-snap-align:start; }
}


/* 3  HOUSE LIGHTS -----------------------------------------------------------
   While the film plays the room goes down to near black around it: the
   header, the page and everything else, never the film itself. Pause, the
   end, a click on the dark, Escape, or moving on (focus or scroll) bring the
   lights back up. js/pages/creative.js adds the layer and the class. A
   division hero isolates its own layers (for its light spill); while the
   lights are down it lets the film rise above the dark, and the spill goes
   out with the rest of the room. */
.cr-house{
  position:fixed; inset:0; z-index:1001;
  background:#0A0506; opacity:0; visibility:hidden;
  transition:opacity .6s var(--m-dimmer), visibility 0s linear .6s;
}
.cr-lights-down .cr-house{ opacity:.92; visibility:visible; transition:opacity .6s var(--m-dimmer), visibility 0s; }
.cr-lights-down [data-house-lights]{ position:relative; z-index:1002; }
.cr-lights-down .dv-hero{ isolation:auto; }


/* 4  ONE FIELD, SEEN TWICE --------------------------------------------------
   The same field at 00:00 and at 00:52, side by side at every width: the
   comparison is the point. */
.cr-diptych{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.cr-diptych .m-frame{ min-width:0; }
.cr-diptych .m-frame-cap{ font-size:16px; line-height:1.45; }
.cr-story-link{ margin-top:clamp(24px, 2.6vw, 36px); }
@media (max-width:720px){
  .cr-diptych{ gap:8px; }
  .cr-diptych .m-frame-cap{ flex-direction:column; align-items:flex-start; gap:2px; }
}


/* 5  THE STORY, IN FOUR BEATS (Animation) -----------------------------------
   Four frames from the film under the hero. Each is a button that cuts the
   hero player to that beat, with the same pressed marks as Cut to a moment.
   Disabled (and plainly still) until the script wires them. 2 by 2 at
   960px, a sideways rail at 620px. */
.cr-beats-list{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; list-style:none; }
.cr-beats-list > li{ min-width:0; }
.cr-beat{
  position:relative; display:flex; flex-direction:column; align-items:stretch; width:100%;
  padding:0; background:transparent; border:0; color:var(--m-text); text-align:left; cursor:pointer;
}
.cr-beat:disabled{ cursor:default; color:var(--m-text); }
.cr-beat-media img{ transition:transform .55s var(--m-dimmer); }
.cr-beat:not(:disabled):hover .cr-beat-media img{ transform:scale(1.045); }
.cr-beat-tc{ margin-top:14px; }
/* the band continues the hero's room: no second full scene gap */
.dv-section.cr-beats{ padding-top:clamp(8px, 1.2vw, 16px); }
.cr-beat-name{ display:block; margin-top:2px; font-size:21px; font-weight:650; line-height:1.2; letter-spacing:-.02em; }
@media (max-width:960px){ .cr-beats-list{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:28px 12px; } }
@media (max-width:620px){
  .cr-beats-list{
    display:flex; gap:12px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
    margin:0 calc(-1 * var(--m-g)); padding:0 var(--m-g) 4px; scroll-padding:0 var(--m-g);
  }
  .cr-beats-list > li{ flex:0 0 72%; scroll-snap-align:start; }
}


/* 6  SERVICE PAGES ----------------------------------------------------------
   What we make: the offer as one hairline row of titles (each explains
   itself), then how it comes together in four short steps, then the detail
   in three folds, closed. */
.cr-offers{
  display:grid; grid-template-columns:repeat(var(--cr-n, 4), minmax(0, 1fr)); list-style:none;
  border-top:1px solid var(--m-rule); border-bottom:1px solid var(--m-rule);
}
.cr-offers > li{
  display:flex; align-items:center; min-width:0; min-height:64px; padding:14px 20px;
  font-size:18px; font-weight:600; line-height:1.3; color:var(--m-text);
}
.cr-offers > li:first-child{ padding-left:0; }
.cr-offers > li + li{ border-left:1px solid var(--m-rule); }
.cr-how{ margin-top:clamp(44px, 4.6vw, 64px); }
.cr-steps{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:28px clamp(24px, 3vw, 48px); margin-top:18px; list-style:none; }
.cr-steps > li{ min-width:0; }
.cr-step-name{ display:block; font-size:21px; font-weight:650; line-height:1.2; letter-spacing:-.02em; color:var(--m-text); overflow-wrap:break-word; hyphens:manual; }
.cr-step-line{ display:block; margin-top:8px; font-size:16px; line-height:1.5; color:var(--m-muted); }
.cr-folds{ margin-top:clamp(48px, 5.2vw, 76px); }
.cr-get{ display:grid; gap:6px; }
.cr-levers{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px 40px; }
.cr-levers dt, .cr-qa dt{ font-weight:600; color:var(--m-text); }
.cr-levers dd, .cr-qa dd{ margin-top:2px; color:var(--m-text-2); }
.cr-qa > div + div{ margin-top:20px; }
.cr-folds .dv-fold-body{ max-width:860px; }
/* Also in Creative continues the room above it */
.dv-section.cr-flush{ padding-top:0; }
@media (max-width:960px){
  .cr-offers{ grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:24px; border-bottom:0; }
  .cr-offers > li{ min-height:56px; padding:12px 0; border-bottom:1px solid var(--m-rule); }
  .cr-offers > li + li{ border-left:0; }
  .cr-offers > li:last-child:nth-child(odd){ grid-column:1 / -1; }
  .cr-steps{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:620px){
  .cr-levers{ grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:460px){
  .cr-offers > li{ font-size:16px; }
  .cr-steps{ column-gap:20px; }
  .cr-step-name{ font-size:19px; }
}


/* 7  SMALL SHARED BITS ------------------------------------------------------ */
/* a small label in credits type (Cut to a moment, How it comes together) */
.cr-label{
  font-size:12px; font-weight:600; letter-spacing:.15em; line-height:16px;
  text-transform:uppercase; color:var(--m-muted);
}