/* SBVora v3 printhead-transition: theme and language switches are reprinted by a thermal print head. */

/*
 * The head element exists only in the new state of a view transition and sits just below the
 * viewport, so the live page never shows it. Its view-transition group is moved by the sweep
 * keyframes below. Geometry: 40px heat trail, 2px dot line (centre at 41px), 14px glow below.
 */
.fx-printhead{
  position:fixed;left:0;right:0;top:100%;height:56px;
  pointer-events:none;z-index:3000;
  view-transition-name:printhead;
  background:
    linear-gradient(#2dc5f8,#2dc5f8) left 0 top 33px/3px 16px no-repeat,
    linear-gradient(#2dc5f8,#2dc5f8) right 0 top 33px/3px 16px no-repeat;
}
/* Heat trail: the freshly printed rows just above the head. */
.fx-printhead::before{
  content:"";position:absolute;left:0;right:0;top:0;height:40px;
  background:
    repeating-linear-gradient(180deg,rgba(45,197,248,0) 0 3px,rgba(45,197,248,.16) 3px 4px),
    linear-gradient(0deg,rgba(45,197,248,.2),rgba(45,197,248,0));
  -webkit-mask-image:linear-gradient(0deg,#000,transparent);
  mask-image:linear-gradient(0deg,#000,transparent);
}
/* The dot line: a row of heating elements with a hot core. */
.fx-printhead::after{
  content:"";position:absolute;left:0;right:0;top:40px;height:2px;
  background:
    repeating-linear-gradient(90deg,rgba(6,26,54,.32) 0 1px,transparent 1px 6px),
    linear-gradient(90deg,#2dc5f8,#c9f3ff 50%,#2dc5f8);
  box-shadow:0 0 0 1px rgba(36,154,230,.55),0 0 10px 1px rgba(45,197,248,.9),0 0 26px 4px rgba(45,197,248,.38);
}
html[data-theme="dark"] .fx-printhead::before{
  background:
    repeating-linear-gradient(180deg,rgba(45,197,248,0) 0 3px,rgba(45,197,248,.2) 3px 4px),
    linear-gradient(0deg,rgba(45,197,248,.24),rgba(45,197,248,0));
}
html[data-theme="dark"] .fx-printhead::after{
  background:
    repeating-linear-gradient(90deg,rgba(6,26,54,.45) 0 1px,transparent 1px 6px),
    linear-gradient(90deg,#2dc5f8,#e6faff 50%,#2dc5f8);
  box-shadow:0 0 0 1px rgba(45,197,248,.7),0 0 12px 2px rgba(45,197,248,.95),0 0 34px 8px rgba(45,197,248,.32);
}

/*
 * Only transitions started by printhead.js (html[data-sbv-transition]) are styled here, so any
 * other view transition on the page keeps the browser defaults.
 * Old page: stays put. New page: revealed top to bottom in 32 rows. Head: moves with the edge.
 */
html[data-sbv-transition]::view-transition-old(root){animation:none;mix-blend-mode:normal}
html[data-sbv-transition]::view-transition-new(root){animation:sbvPrintReveal .65s steps(32,end) both;mix-blend-mode:normal}
html[data-sbv-transition]::view-transition-group(printhead){animation:sbvPrintheadSweep .65s steps(32,end) both}
html[data-sbv-transition]::view-transition-old(printhead){animation:none;opacity:0}
html[data-sbv-transition]::view-transition-new(printhead){animation:none;mix-blend-mode:normal}

@keyframes sbvPrintReveal{
  from{clip-path:inset(0 0 100% 0)}
  to{clip-path:inset(0 0 0 0)}
}
@keyframes sbvPrintheadSweep{
  from{top:0;transform:translateY(-41px)}
  to{top:100%;transform:translateY(-41px)}
}

/* printhead.js already switches instantly with reduced motion; this is the defensive net. */
@media (prefers-reduced-motion:reduce){
  html[data-sbv-transition]::view-transition-group(*),
  html[data-sbv-transition]::view-transition-old(*),
  html[data-sbv-transition]::view-transition-new(*){animation:none !important}
  .fx-printhead{display:none}
}