/* Section 5: the dawn train with pricing (owner: train agent; contract in
   scratch/site-reimagine-2026-10-28/build/site/SECTIONS.md).
   A normal block in the page flow: the price copy on the calm night sky at the top, then the
   dawn valley (the far range, the mist, the viaduct, the train, the foreground), anchored to
   the section's bottom. Every plane is a parallax.js data-px layer: the sky lags most, then
   the range, the hills, the mist, the viaduct; the foreground runs a touch ahead. The planes'
   sizes, places and lazy art are generated (train.gen.css, build/site/tools/gen-train.mjs).
   The train runs a very slow loop while the viaduct is on screen (train.js): it pulls in,
   stands a good while, leaves to the left, the line stays empty a while, the next one comes.
   Around it a little quiet life: the clouds and the mist bands sway a few cells to and fro,
   a flock of three crosses now and then, a few lamps in the train flicker, the wire glints,
   wisps drift past the piers. Light is stepped
   ramp tones: no gradients but hard-stop bands, no soft halos. */

.tr{position:relative;overflow:hidden;background:#000;isolation:isolate}
.tr-art{position:absolute;inset:0;z-index:0;pointer-events:none}
.tr-art>div{position:absolute;background-repeat:no-repeat;background-size:100% 100%;image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:pixelated}
/* The sky runs on up as flat night above its texture (the texture's own top tone). */
.tr-art>.tr-sky{background-color:var(--night);background-position:50% 100%;box-sizing:content-box}
/* The foreground's black ground runs on below the section (it moves a touch faster than
   the page, so its bottom must never show). */
.tr-fg::after{content:"";position:absolute;left:0;right:0;top:100%;height:calc(var(--cell) * 24);background:#000}
.tr-sky>*,.tr-mist>*,.tr-via>*,.tr-fg>*{position:absolute}
.tr-wisps,.tr-glint,.tr-line,.tr-birds{overflow:hidden}
.tr-wisps>i,.tr-glint>i,.tr-birds i,.tr-lamps>i,.tr-train,.tr-cloud,.tr-band{display:block;background-repeat:no-repeat;background-size:100% 100%;image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:pixelated}
.tr-wisps>i{height:100%}
.tr-glint>i{width:100%}
/* The flock: three birds in a loose formation, each in its own box (it bobs and drifts a
   cell or so on its own slow cycle) with its own wing strip (4 frames, its own beat). */
.tr-birds{overflow:visible}
.tr-birds>b{position:absolute;display:block;overflow:hidden}
.tr-birds i{position:absolute;left:0;top:0;width:100%;height:400%;transform:translate3d(0,0,0)}
@keyframes tr-bob{0%{transform:translate3d(0,0,0)}30%{transform:translate3d(0,calc(var(--cell) * -1),0)}55%{transform:translate3d(var(--cell),calc(var(--cell) * -1),0)}80%{transform:translate3d(var(--cell),0,0)}100%{transform:translate3d(0,0,0)}}
/* The train runs in its line (a clip box as wide as the viaduct's plane), its lamps ride it. */
.tr-train{position:absolute}
.tr-lamps,.tr-lamps>i{position:absolute;inset:0}
.tr-lamps>i{background-size:100% 200%}
.tr-lamps>i:nth-child(2){background-position:0 100%;opacity:0}
/* ---------- The copy: on the calm night sky ---------- */
.tr-copy{position:relative;z-index:1;padding-top:max(calc(var(--sec-gap) / 2),calc(var(--cell) * 26))}
.tr .sec-line{max-width:none}
/* Below the copy the valley: its height in cells, so the peaks stand clear under the copy. */
.tr-stage{height:calc(var(--tr-spacer,270) * var(--cell))}

/* The license picker, pixel-native: two plates on the cell grid (stepped corners, a lit top
   edge), a lamp that lights on the chosen one. The radios stay native (site.css hides them;
   site.js follows them). */
.tr-pick{display:flex;flex-wrap:wrap;gap:calc(var(--cell) * 2);margin-top:calc(var(--cell) * 10)}
.tr .pick label{position:relative;z-index:0;height:calc(var(--cell) * 14);gap:calc(var(--cell) * 3);padding:0 calc(var(--cell) * 5) 0 calc(var(--cell) * 4);border-radius:0;background:none;color:var(--tx);font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.tr .pick label:hover{background:none;color:#fff}
/* A touch target of at least 44 px, still a whole number of cells. */
@supports (height:round(up,1px,1px)){.tr .pick label{height:max(calc(var(--cell) * 14),round(up,44px,var(--cell)))}}
.tr .pick label::before{width:calc(var(--cell) * 3);height:calc(var(--cell) * 3);border:0;background:var(--dusk);flex:none}
.tr .pick label::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(var(--dusk) 0 0) 0 0/100% var(--cell) no-repeat,#000;clip-path:polygon(var(--cell) 0,calc(100% - var(--cell)) 0,calc(100% - var(--cell)) var(--cell),100% var(--cell),100% calc(100% - var(--cell)),calc(100% - var(--cell)) calc(100% - var(--cell)),calc(100% - var(--cell)) 100%,var(--cell) 100%,var(--cell) calc(100% - var(--cell)),0 calc(100% - var(--cell)),0 var(--cell),var(--cell) var(--cell))}
.tr .pick label:hover::after{background:linear-gradient(var(--blue) 0 0) 0 0/100% var(--cell) no-repeat,var(--n1)}
.tr .pick label:hover::before{background:var(--deep)}
.tr .pick input:checked+label::after{background:linear-gradient(var(--light) 0 0) 0 0/100% var(--cell) no-repeat,var(--deep)}
.tr .pick input:checked+label:hover::after{background:linear-gradient(var(--ice) 0 0) 0 0/100% var(--cell) no-repeat,var(--deep)}
.tr .pick input:checked+label::before{border:0;background:var(--ice)}
.tr .pick input:focus-visible+label{outline:2px solid var(--light);outline-offset:3px;border-radius:0}
.tr-pp{color:var(--tx2);font-weight:500;transition:color .15s steps(2)}
.tr .pick input:checked+label .tr-pp{color:var(--ice)}

/* Download and Buy. */
.tr-act{display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px;margin-top:calc(var(--cell) * 6)}

/* Trust: the laurel and the Setapp badge, side by side under the actions. */
.tr-trust{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--cell) * 6) calc(var(--cell) * 10);margin-top:calc(var(--cell) * 10)}
/* The official Setapp badge, unmodified, in our own frame: a black cell plate with a lit top
   edge and stepped corners (the badge's own black face sits inside it). */
.tr .card-setapp .setapp-badge{position:relative;z-index:0;display:block;padding:calc(var(--cell) * 2);border-radius:0;background:none}
.tr .card-setapp .setapp-badge::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(var(--deep) 0 0) 0 0/100% var(--cell) no-repeat,#000;clip-path:polygon(var(--cell) 0,calc(100% - var(--cell)) 0,calc(100% - var(--cell)) var(--cell),100% var(--cell),100% calc(100% - var(--cell)),calc(100% - var(--cell)) calc(100% - var(--cell)),calc(100% - var(--cell)) 100%,var(--cell) 100%,var(--cell) calc(100% - var(--cell)),0 calc(100% - var(--cell)),0 var(--cell),var(--cell) var(--cell))}
.tr .card-setapp .setapp-badge:hover{background:none}
.tr .card-setapp .setapp-badge:hover::before{background:linear-gradient(var(--light) 0 0) 0 0/100% var(--cell) no-repeat,#000}
.tr .card-setapp .setapp-badge:focus-visible{border-radius:0}
.tr-badge{display:block;width:auto;height:52px}

/* ---------- Motion: the train's loop and the scene's ambient life ----------
   Everything is transform or opacity on whole cells (steps), and nothing runs off screen
   (parallax.js .is-live), in a hidden tab or as a still (slow device, Save-Data). On a lean
   device (train.js .is-lean) only the train, the wisps and the glint move. */
@keyframes tr-drift{to{transform:translate3d(calc(var(--P) * var(--cell) * -1),0,0)}}
@keyframes tr-strip{to{transform:translate3d(0,-100%,0)}}
@keyframes tr-sway{from{transform:translate3d(calc(var(--A) * var(--cell) * -1),0,0)}to{transform:translate3d(calc(var(--A) * var(--cell)),0,0)}}
@keyframes tr-lamp-a{0%{opacity:1}88%{opacity:0}89.5%{opacity:1}91%{opacity:0}92.5%{opacity:1}}
@keyframes tr-lamp-b{0%{opacity:0}22%{opacity:1}71%{opacity:0}}
.tr-cloud{--A:10}
.tr-band{--A:7}
@media (prefers-reduced-motion:no-preference){
  /* The train's and the flocks' durations are generated with their paths (train.gen.css). */
  .tr-train{animation-timing-function:linear;animation-fill-mode:both}
  .tr-wisps>i{animation-name:tr-drift;animation-timing-function:steps(var(--P));animation-iteration-count:infinite}
  .tr-glint>i{animation-name:tr-strip;animation-duration:7.2s;animation-iteration-count:infinite}
  .tr-cloud{animation:tr-sway 84s steps(20) infinite alternate}
  .tr-band{animation:tr-sway 58s steps(14) -20s infinite alternate-reverse}
  .tr-birds{animation-iteration-count:infinite;animation-fill-mode:both}
  .tr-birds>b{animation:tr-bob 5.3s steps(1,jump-end) infinite}
  .tr-birds i{animation:tr-strip .64s steps(4) infinite}
  /* Each group's pass and each bird's bob and flap beat: train.gen.css. */
  .tr-lamps>i:nth-child(1){animation:tr-lamp-a 13s step-end -4s infinite}
  .tr-lamps>i:nth-child(2){animation:tr-lamp-b 23s step-end -9s infinite}
}
.tr:not(.is-live) :is(.tr-train,.tr-amb>i,.tr-sway,.tr-birds,.tr-birds b,.tr-birds i){animation-play-state:paused}
/* Each bit of ambient life also waits while its own band of the valley is off screen
   (train.js sets .is-off on the watched plane): .is-live starts a quarter screen early, and a
   running animation costs a style pass on every frame the page draws, composited or not.
   The flocks fly in the clouds' band, the lamps ride the line. */
.tr :is(.tr-sway.is-off,.tr-wisps.is-off>i,.tr-glint.is-off>i,.tr-cloud.is-off~.tr-birds,.tr-cloud.is-off~.tr-birds :is(b,i),.tr-line.is-off .tr-lamps>i){animation-play-state:paused}
html.is-lo .tr :is(.tr-amb>i,.tr-sway,.tr-birds,.tr-birds b,.tr-birds i){animation:none}
.tr.is-lean :is(.tr-sway,.tr-birds,.tr-birds b,.tr-birds i,.tr-lamps>i){animation:none}
/* Save-Data: the glint and the flocks only exist for motion, so their art is not loaded. */
html.is-save :is(.tr-glint,.tr-birds){display:none}
/* The banner plane (sprites, path, altitude and pose in train.gen.css): a distant plane
   crosses the sky behind the ranges now and then. One mover (.tr-plane) carries it across;
   inside, the plane (.tr-pl: altitude, its pose, the propeller) and the banner (.tr-bn: the
   same altitude a beat later, so it trails; its ripple travels front to back). It only
   exists for motion: none under reduced motion, as a still (slow device, Save-Data) or on a
   lean device; it waits off screen and with the clouds' band like the flock. */
@keyframes tr-prop{to{transform:translate3d(0,-33.333%,0)}}
.tr-plane{display:none}
.tr-plane>span{position:absolute;display:block;overflow:hidden}
.tr-plane b{position:absolute;inset:0;display:block}
.tr-plane i{position:absolute;left:0;top:0;width:100%;height:600%;transform:translate3d(0,0,0);background-repeat:no-repeat;background-size:100% 100%;image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:pixelated}
@media (prefers-reduced-motion:no-preference){
  .tr-plane{display:block}
  .tr-plane,.tr-plane>span,.tr-pl>b{animation-timing-function:linear;animation-iteration-count:infinite;animation-fill-mode:both}
  .tr-pl>b{animation-timing-function:step-end}
  .tr-pl i{animation:tr-prop .16s steps(2) infinite}
  .tr-bn i{animation:tr-strip 1.2s steps(6) infinite}
}
html:is(.is-lo,.is-save) .tr-plane,.tr.is-lean .tr-plane{display:none}
.tr:not(.is-live) :is(.tr-plane,.tr-plane>span,.tr-plane b,.tr-plane i),.tr .tr-cloud.is-off~.tr-plane,.tr .tr-cloud.is-off~.tr-plane :is(span,b,i){animation-play-state:paused}

/* ---------- Portrait ---------- */
@media (max-width:759px),(max-aspect-ratio:4/5){
  .tr-copy{padding-top:max(calc(var(--sec-gap) / 2),calc(var(--cell) * 26))}
  .tr .pick label{font-size:15px;padding:0 calc(var(--cell) * 5) 0 calc(var(--cell) * 4)}
  .tr-act{gap:12px 12px}
  .tr .btn-ghost{height:54px}
  .tr-badge{height:48px}
}
/* Phones: the price block breathes; the two buttons stack full width. */
@media (max-width:759px){
  .tr .sec-line{margin-top:12px}
  .tr-pick{gap:8px;margin-top:28px}
  .tr-act{flex-direction:column;align-items:stretch;gap:12px;margin-top:20px}
  .tr-act>a{justify-content:center}
  .tr-trust{gap:20px 28px;margin-top:36px}
}
@media (min-width:1680px) and (min-height:960px) and (min-aspect-ratio:4/5){
  .tr-badge{height:60px}
}
@media (prefers-reduced-motion:reduce){
  .tr-pp{transition:none}
}