/* Flogen: a 12-second brief → parallel production → finished master sequence.
   The shared studio-art manager owns play/pause; this file adds no frame loop. */
.studio-art--flogen .studio-art__field { opacity: .16; }
.studio-art--flogen .studio-art__scene { overflow: visible; }
.flogen-cycle { --flogen-duration: 12s; }
.flogen-label { fill: #eee; font: 8px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .7px; }
.flogen-small { fill: #aaa; font: 7px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .6px; }
.flogen-tiny { fill: #aaa; font: 5px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .45px; }
.flogen-brief-heading { fill: #101010; font: 700 25px Arial, Helvetica, sans-serif; letter-spacing: -.9px; }
.flogen-brief-copy { fill: #424242; font: 8px ui-monospace, SFMono-Regular, Menlo, monospace; }
.flogen-copy-word { fill: #f5f5f5; font: 700 19px Arial, Helvetica, sans-serif; letter-spacing: -.7px; }
.flogen-master-word { fill: #fff; font: 700 21px Arial, Helvetica, sans-serif; letter-spacing: -.8px; }
.flogen-stage { fill: #ddd; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1px; }
.flogen-stage-brief, .flogen-stage-production, .flogen-stage-master { opacity: 0; }
.flogen-brief { opacity: 0; transform-origin: 320px 238px; }
.flogen-still { transform-origin: 201px 247px; }
.flogen-film { transform-origin: 445px 252px; }
.flogen-copy { transform-origin: 320px 403px; }
.flogen-master { transform-origin: 320px 258px; }
.flogen-master-back, .flogen-master-mid, .flogen-master-front { transform-origin: 320px 258px; }
.flogen-master-stamp { transform-origin: 408px 382px; }
.flogen-cycle-progress { stroke-dasharray: 100; stroke-dashoffset: 0; }
.flogen-film-time { stroke-dasharray: 100; }
.flogen-image-scan { opacity: 0; }
.flogen-signal-paths { opacity: .45; stroke-dasharray: 2 8; }
/* The default, without animation, is a complete campaign collage. */
.flogen-still { transform: translate(-15px, -14px) scale(.9); }
.flogen-film { transform: translate(9px, -13px) scale(.9); }
.flogen-copy { transform: translate(0, 10px) scale(.95); }
.flogen-cycle-progress { animation: flogenProgress var(--flogen-duration) linear infinite; }
.flogen-brief { animation: flogenBrief var(--flogen-duration) cubic-bezier(.22,.7,.24,1) infinite; }
.flogen-brief-mark { stroke-dasharray: 170; animation: flogenMark var(--flogen-duration) ease infinite; }
.flogen-signal-paths { animation: flogenSignals var(--flogen-duration) linear infinite; }
.flogen-still { animation: flogenStill var(--flogen-duration) cubic-bezier(.22,.7,.24,1) infinite; }
.flogen-film { animation: flogenFilm var(--flogen-duration) cubic-bezier(.22,.7,.24,1) infinite; }
.flogen-copy { animation: flogenCopy var(--flogen-duration) cubic-bezier(.22,.7,.24,1) infinite; }
.flogen-image-render { animation: flogenRender var(--flogen-duration) ease-in-out infinite; }
.flogen-image-scan { animation: flogenPrint var(--flogen-duration) ease-in-out infinite; }
.flogen-film-camera { animation: flogenCamera var(--flogen-duration) ease-in-out infinite; transform-origin: 71px 50px; }
.flogen-film-time { animation: flogenTime var(--flogen-duration) linear infinite; }
.flogen-shot-selection { animation: flogenShots var(--flogen-duration) steps(1,end) infinite; }
.flogen-copy-reveal { animation: flogenWriting var(--flogen-duration) steps(12,end) infinite; }
.flogen-copy-cursor { animation: flogenCursor var(--flogen-duration) steps(1,end) infinite; }
.flogen-master { animation: flogenMaster var(--flogen-duration) cubic-bezier(.22,.7,.24,1) infinite; }
.flogen-master-back { animation: flogenBack var(--flogen-duration) cubic-bezier(.22,.7,.24,1) infinite; }
.flogen-master-mid { animation: flogenMiddle var(--flogen-duration) cubic-bezier(.22,.7,.24,1) infinite; }
.flogen-master-stamp { animation: flogenStamp var(--flogen-duration) cubic-bezier(.16,1,.3,1) infinite; }
.flogen-stage-brief { animation: flogenBriefLabel var(--flogen-duration) linear infinite; }
.flogen-stage-production { animation: flogenProductionLabel var(--flogen-duration) linear infinite; }
.flogen-stage-master { animation: flogenMasterLabel var(--flogen-duration) linear infinite; }
.flogen-stage-static { animation: flogenStaticLabel var(--flogen-duration) linear infinite; }
@keyframes flogenProgress { 0% { stroke-dashoffset:100; } 90%,100% { stroke-dashoffset:0; } }
@keyframes flogenBrief {
  0% { opacity:1; transform:translateY(-28px) rotate(-7deg) scale(.94); }
  7%,15% { opacity:1; transform:translateY(0) rotate(-3deg) scale(1); }
  24% { opacity:0; transform:translateY(11px) rotate(0) scale(.45); }
  95% { opacity:0; transform:translateY(-28px) rotate(-7deg) scale(.94); }
  100% { opacity:1; transform:translateY(-28px) rotate(-7deg) scale(.94); }
}
@keyframes flogenMark { 0%,4% { stroke-dashoffset:170; } 12%,100% { stroke-dashoffset:0; } }
@keyframes flogenSignals {
  0%,14% { opacity:0; stroke-dashoffset:80; }
  23%,55% { opacity:.75; }
  66%,100% { opacity:0; stroke-dashoffset:-100; }
}
@keyframes flogenStill {
  0%,14% { opacity:0; transform:translate(96px,0) scale(.4); }
  24%,55% { opacity:1; transform:translate(0,0) scale(1); }
  65% { opacity:0; transform:translate(118px,0) scale(.86); }
  100% { opacity:0; transform:translate(96px,0) scale(.4); }
}
@keyframes flogenFilm {
  0%,17% { opacity:0; transform:translate(-109px,-4px) scale(.4); }
  27%,55% { opacity:1; transform:translate(0,0) scale(1); }
  65% { opacity:0; transform:translate(-121px,7px) scale(.86); }
  100% { opacity:0; transform:translate(-109px,-4px) scale(.4); }
}
@keyframes flogenCopy {
  0%,20% { opacity:0; transform:translate(0,-143px) scale(.4); }
  31%,55% { opacity:1; transform:translate(0,0) scale(1); }
  65% { opacity:0; transform:translate(0,-99px) scale(.85); }
  100% { opacity:0; transform:translate(0,-143px) scale(.4); }
}
@keyframes flogenRender {
  0%,23% { clip-path:inset(0 0 100% 0); }
  37%,100% { clip-path:inset(0 0 0 0); }
}
@keyframes flogenPrint {
  0%,23% { opacity:0; transform:translateY(0); }
  25% { opacity:1; transform:translateY(0); }
  37% { opacity:1; transform:translateY(139px); }
  40%,100% { opacity:0; transform:translateY(139px); }
}
@keyframes flogenCamera {
  0%,27% { transform:translateX(-13px) scale(.92); }
  36% { transform:translateX(0) scale(1); }
  46% { transform:translate(7px,9px) scale(1.35); }
  55%,100% { transform:translate(-9px,14px) scale(1.65); }
}
@keyframes flogenTime { 0%,27% { stroke-dashoffset:100; } 55%,100% { stroke-dashoffset:0; } }
@keyframes flogenShots { 0%,36% { transform:translateX(0); } 37%,46% { transform:translateX(52px); } 47%,100% { transform:translateX(104px); } }
@keyframes flogenWriting { 0%,30% { clip-path:inset(0 100% 0 0); } 46%,100% { clip-path:inset(0 0 0 0); } }
@keyframes flogenCursor { 0%,31%,35%,39%,43%,47%,51% { opacity:0; } 33%,37%,41%,45%,49%,53%,100% { opacity:1; } }
@keyframes flogenMaster {
  0%,58% { opacity:0; transform:scale(.65); }
  69% { opacity:1; transform:scale(1.07); }
  74%,91% { opacity:1; transform:scale(1); }
  97%,100% { opacity:0; transform:scale(.94); }
}
@keyframes flogenBack { 0%,59% { transform:translate(55px,-40px) rotate(12deg); } 73%,100% { transform:translate(0,0) rotate(0); } }
@keyframes flogenMiddle { 0%,59% { transform:translate(-55px,-20px) rotate(-12deg); } 72%,100% { transform:translate(0,0) rotate(0); } }
@keyframes flogenStamp { 0%,73% { opacity:0; transform:scale(1.8) rotate(-30deg); } 79%,100% { opacity:1; transform:scale(1) rotate(0); } }
@keyframes flogenBriefLabel { 0%,16% { opacity:1; } 22%,97% { opacity:0; } 100% { opacity:1; } }
@keyframes flogenProductionLabel { 0%,19% { opacity:0; } 25%,56% { opacity:1; } 63%,100% { opacity:0; } }
@keyframes flogenMasterLabel { 0%,61% { opacity:0; } 68%,93% { opacity:1; } 98%,100% { opacity:0; } }
@keyframes flogenStaticLabel { 0%,100% { opacity:0; } }
@media (prefers-reduced-motion:reduce) {
  .studio-art--flogen .studio-art__scene * { animation:none !important; transition:none !important; }
}