/* ShiftDesk Nitro's page: the home page's stage and typography, in Nitro's own colours.
   Loaded after site.css, so it only has to say what differs. */
:root {
  /* The app's accent: electric blue into cyan, instead of ShiftDesk's red into amber. */
  --red: #1b7cff;
  --nitro: #2fd0ff;
  --amber: #7fe3ff;
  /* The workspace tabs, the same palette the app ships with. */
  --ws-1: #eca58f;
  --ws-2: #b8c4f0;
  --ws-3: #f0d9a8;
  --ws-4: #8fb7c4;
}
body {
  background:
    radial-gradient(900px 500px at 50% -120px, rgba(27, 124, 255, 0.18), transparent 70%),
    radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.4px) 0 0 / 26px 26px,
    var(--bg);
}

/* ---------------------------------------------------------------- the stage drawings */

/* A screen: the thing every scene happens on. Named, so it is a desk and not a grey box. */
/* site.css hides every .art and shows the one with .on; saying display here would show them all at once. */
div.nart { display: grid; place-items: center; }
figure.art.nart.on { display: grid; place-items: center; }
/* On the story's stage the scenes sit on top of one another, because only one is shown at a time. In the
   opening they do not: there is one drawing and it takes the room it is given. */
.stage-frame .nart { position: absolute; inset: 0; }
.screen {
  position: relative;
  width: min(86%, 560px);
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  background: linear-gradient(160deg, #11161b, #0a0d10 60%);
  border: 1px solid var(--line-hi);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.screen .wall {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 70% 20%, rgba(47, 208, 255, 0.10), transparent 70%),
    radial-gradient(50% 60% at 20% 80%, rgba(27, 124, 255, 0.10), transparent 70%);
}
.screen .label {
  position: absolute; left: 12px; bottom: 9px;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .34);
}

/* A window on that screen: a title bar, a name, and some furniture. */
.win {
  position: absolute;
  border-radius: 8px;
  background: rgba(20, 25, 30, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  transition: left .5s cubic-bezier(.2,.75,.2,1), top .5s cubic-bezier(.2,.75,.2,1),
              width .5s cubic-bezier(.2,.75,.2,1), height .5s cubic-bezier(.2,.75,.2,1), opacity .35s;
}
.win > b {
  display: block; height: 15px; line-height: 15px;
  padding: 0 7px; font-size: 8.5px; font-weight: 600; letter-spacing: .02em;
  color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.055);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.win i { display: block; height: 3px; margin: 5px 7px 0; border-radius: 2px; background: rgba(255, 255, 255, 0.10); }
.win i:nth-child(3) { width: 62%; }
.win i:nth-child(4) { width: 40%; }
.win.code > b { color: #9fd0ff; }
.win.browser > b { color: #ffd9a8; }
.win.files > b { color: #bfe6c9; }
.win.chat > b { color: #e7b9d8; }

/* The desktop tabs, on the edge of that screen. */
.tabs { position: absolute; top: 0; left: 18%; display: flex; gap: 4px; }
.tab {
  width: 22px; height: 54px;
  border-radius: 0 0 11px 11px;
  background: var(--ws-1);
  opacity: .92;
  transform: translateY(-34px);
  transition: transform .32s cubic-bezier(.2,.75,.2,1);
  position: relative;
}
.tab:nth-child(2) { background: var(--ws-2); }
.tab:nth-child(3) { background: var(--ws-3); }
.tab:nth-child(4) { background: var(--ws-4); }
.tabs.open .tab { transform: translateY(0); }
.tab.on::after {
  content: ""; position: absolute; left: 50%; bottom: 5px; width: 9px; height: 3px; margin-left: -4.5px;
  border-radius: 2px; background: #a8e4ff;
  box-shadow: 0 0 0 1.5px rgba(27, 42, 56, .9), 0 0 10px 3px rgba(47, 208, 255, .55);
}

/* The placement grid drawn over the screen. */
.grid-over { position: absolute; inset: 8%; display: grid; grid-template: repeat(4, 1fr) / repeat(6, 1fr); gap: 3px; }
.grid-over span { border-radius: 3px; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.05); }
.grid-over span.pick { background: rgba(47, 208, 255, 0.22); border-color: rgba(47, 208, 255, 0.55); }

/* Corners: the four dots on the screen's own corners. */
.corner { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--nitro); box-shadow: 0 0 0 5px rgba(47, 208, 255, .18); }
.corner.tl { left: -1px; top: -1px; }
.corner.tr { right: -1px; top: -1px; }
.corner.bl { left: -1px; bottom: -1px; }
.corner.br { right: -1px; bottom: -1px; }
.corner.off { background: transparent; border: 1.5px solid rgba(255, 255, 255, .22); box-shadow: none; }

/* Two displays, for the scenes about plugging one in. */
.pair { display: flex; align-items: center; gap: 10px; width: min(92%, 620px); }
.pair .screen { width: auto; flex: 1 1 0; }
.pair .screen.gone { opacity: .18; filter: grayscale(1); }

/* A badge that names what just happened. */
.said {
  position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%);
  white-space: nowrap; font-size: 11px; color: #cdeaff;
  background: rgba(27, 124, 255, 0.16); border: 1px solid rgba(47, 208, 255, 0.4);
  padding: 4px 10px; border-radius: 999px;
}

/* ---------------------------------------------------------------- price */
.one-off { display: flex; align-items: baseline; gap: 8px; }
.one-off b { font-family: var(--display); font-size: 44px; line-height: 1; }
.one-off span { color: var(--muted); font-size: 14px; }
.plan-note { color: var(--muted); font-size: 13px; margin-top: 10px; }

/* Three buttons, not the home page's six. */
.n-downloads { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 760px; }
@media (max-width: 720px) { .n-downloads { grid-template-columns: minmax(0, 1fr); } }

/* Where each drawn window sits. These were style="" attributes until the site's own
   Content-Security-Policy (style-src 'self') blocked every one of them and the scenes
   collapsed into the top-left corner. */
.box-main-left { left:7%; top:30%; width:44%; height:52%; }
.box-top-right { left:54%; top:30%; width:39%; height:30%; }
.box-low-right { left:54%; top:58%; width:39%; height:18%; }
.box-half-left { left:10%; top:38%; width:35%; height:34%; }
.box-half-right { left:50%; top:38%; width:40%; height:34%; }
.box-tall-left { left:8%; top:30%; width:40%; height:56%; }
.box-tall-right { left:52%; top:30%; width:40%; height:56%; }
.box-small-left { left:12%; top:36%; width:36%; height:36%; }
.box-wide-left { left:12%; top:36%; width:60%; height:36%; }
.box-centre { left:26%; top:34%; width:48%; height:34%; }

/* The price cards. Four of them on this page and the words are longer in most languages than in English:
   $29.99 and "tek seferlik" sat on one line and ran into the card beside it, and "Konuşalım" was wider
   than its card. So the price wraps under itself, and the quote is sized like a heading rather than a
   number. The grid falls to two and then one column rather than squeezing four into a phone. */
.plans { grid-template-columns: repeat(4, minmax(200px, 1fr)); }
.price { flex-wrap: wrap; row-gap: 0; }
.price b { font-size: 36px; }
.price .p-per { flex: 1 0 100%; font-size: 13px; }
.price .p-quote { font-size: 24px; line-height: 1.15; }
@media (max-width: 1040px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .plans { grid-template-columns: minmax(0, 1fr); } }

/* With the canvas drawing the dots, the painted lattice goes; Nitro keeps its own blue glow.
   This file loads after site.css, so it has the last word on the same selector. */
body.has-dotfield {
  background:
    radial-gradient(900px 500px at 50% -120px, rgba(27, 124, 255, 0.18), transparent 70%),
    var(--bg);
}


/* ──────────────────────────────────────────────────────────────────────────────────────────────
   The scenes, in motion.

   Each one runs only while its scene is the one on screen (.art.nart.on), so the loop starts from
   the top every time you scroll to it and nothing burns a frame off-stage. Seven loops, one per
   thing Nitro does, each saying it the way the app does it. Under prefers-reduced-motion site.css
   turns every animation off and the drawings stay as they were.
   ────────────────────────────────────────────────────────────────────────────────────────────── */

/* The pointer that does the showing in two of the scenes. */
.screen .pointer {
  position: absolute; z-index: 4; width: 13px; height: 13px; opacity: 0;
  border-radius: 50% 50% 50% 2px; rotate: -24deg;
  background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}
/* The ring that fills while a corner is held. */
.screen .dwell {
  position: absolute; z-index: 3; width: 34px; height: 34px; opacity: 0;
  border-radius: 50%; border: 2px solid var(--nitro);
}

/* ── 01 · one tab, the whole desk back ───────────────────────────────────────────────────────
   The tab is pressed, and the three windows arrive one after another, each from where a window
   that has not been placed yet tends to be: smaller, and off to one side. */
figure[data-scene="n-restore"].on .tab.on { animation: nTabPress 3.6s ease-in-out infinite; }
figure[data-scene="n-restore"].on .win { animation: nLand 3.6s cubic-bezier(.2,.78,.2,1) infinite; }
figure[data-scene="n-restore"].on .win.browser { animation-delay: .16s; }
figure[data-scene="n-restore"].on .win.files { animation-delay: .32s; }
@keyframes nTabPress {
  0%, 6% { translate: 0 0; }
  12%, 24% { translate: 0 5px; filter: brightness(1.5); }
  34%, 100% { translate: 0 0; filter: none; }
}
@keyframes nLand {
  0%, 16% { opacity: 0; translate: -11% 13%; scale: .9; }
  40%, 92% { opacity: 1; translate: 0 0; scale: 1; }
  100% { opacity: 0; translate: -11% 13%; scale: .9; }
}

/* ── 02 · the app you closed is started again ────────────────────────────────────────────────
   Two windows are only moved, so they slide. The third is not there at all: it has to start,
   which is a different motion - nothing, then a window, title bar first. */
figure[data-scene="n-reopen"].on .win.code,
figure[data-scene="n-reopen"].on .win.files { animation: nSlide 4s cubic-bezier(.2,.78,.2,1) infinite; }
figure[data-scene="n-reopen"].on .win.files { animation-delay: .12s; }
figure[data-scene="n-reopen"].on .win.browser { animation: nLaunch 4s cubic-bezier(.2,.9,.25,1) infinite .5s; }
@keyframes nSlide {
  0%, 10% { opacity: 0; translate: -8% 0; }
  30%, 94% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: -8% 0; }
}
@keyframes nLaunch {
  0%, 14% { opacity: 0; scale: .4; transform-origin: 50% 0; }
  22% { opacity: 1; scale: 1.06 .3; }
  30%, 94% { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: .4; }
}

/* ── 03 · the tabs on the edge of the screen ─────────────────────────────────────────────────
   They are not on screen until they are wanted: they drop down, the one you press lights, and
   they go back up out of the way. */
figure[data-scene="n-tabs"].on .tab { animation: nTabDrop 4s cubic-bezier(.2,.78,.2,1) infinite; }
figure[data-scene="n-tabs"].on .tab:nth-child(2) { animation-delay: .05s; }
figure[data-scene="n-tabs"].on .tab:nth-child(3) { animation-delay: .1s; }
figure[data-scene="n-tabs"].on .tab:nth-child(4) { animation-delay: .15s; }
figure[data-scene="n-tabs"].on .win { animation: nSwap 4s cubic-bezier(.2,.78,.2,1) infinite .9s; }
figure[data-scene="n-tabs"].on .win.browser { animation-delay: 1s; }
@keyframes nTabDrop {
  0%, 8% { transform: translateY(-34px); }
  22%, 62% { transform: translateY(0); }
  80%, 100% { transform: translateY(-34px); }
}
@keyframes nSwap {
  0%, 12% { opacity: 0; translate: 0 -6%; }
  32%, 90% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: 0 -6%; }
}

/* ── 04 · drag across the boxes ──────────────────────────────────────────────────────────────
   The pointer crosses the grid, the boxes it covers light as it goes, and the window it was
   drawing lands on exactly those boxes. */
/* Exactly the boxes the pointer covered, and not approximately. The grid is inset 8% on every side,
   so it spans 84%; six columns of 14% and four rows of 21%. The picked cells are columns 2-3 and
   rows 1-2, which is 8% + 14% across, 8% down, 28% wide and 42% tall. The whole point of the scene
   is that the window lands where you drew it, so a window that lands near it says the opposite. */
.box-grid-drop { left: 22%; top: 8%; width: 28%; height: 42%; opacity: 0; }
figure[data-scene="n-grid"].on .pointer { animation: nDrag 4.4s cubic-bezier(.3,.6,.3,1) infinite; }
figure[data-scene="n-grid"].on .grid-over span.pick { animation: nLight 4.4s ease-out infinite; }
figure[data-scene="n-grid"].on .grid-over span.pick:nth-child(3) { animation-delay: .1s; }
figure[data-scene="n-grid"].on .grid-over span.pick:nth-child(8) { animation-delay: .2s; }
figure[data-scene="n-grid"].on .grid-over span.pick:nth-child(9) { animation-delay: .3s; }
figure[data-scene="n-grid"].on .box-grid-drop { animation: nDrop 4.4s cubic-bezier(.2,.9,.25,1) infinite; }
/* From the first box's corner to the last one's, so the drag covers exactly what lights up. */
@keyframes nDrag {
  0%, 6% { opacity: 0; left: 23%; top: 10%; }
  10% { opacity: 1; }
  32%, 44% { opacity: 1; left: 48%; top: 47%; }
  52%, 100% { opacity: 0; left: 48%; top: 47%; }
}
@keyframes nLight {
  0%, 8% { background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .05); }
  20%, 46% { background: rgba(47, 208, 255, .22); border-color: rgba(47, 208, 255, .55); }
  60%, 100% { background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .05); }
}
@keyframes nDrop {
  0%, 44% { opacity: 0; scale: .96; }
  54%, 90% { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: .96; }
}

/* ── 05 · a display is unplugged, and the layout follows ─────────────────────────────────────
   The second screen goes dark with a window still on it; that window reappears on the one that
   is left, which is the whole point - nothing is stranded on a display that is not there. */
figure[data-scene="n-dock"].on .screen.gone { animation: nUnplug 4.4s ease-in-out infinite; }
figure[data-scene="n-dock"].on .screen.gone .win { animation: nStranded 4.4s ease-in-out infinite; }
figure[data-scene="n-dock"].on .screen:not(.gone) .win.browser { animation: nRescued 4.4s cubic-bezier(.2,.78,.2,1) infinite; }
@keyframes nUnplug {
  0%, 26% { opacity: 1; filter: none; }
  44%, 92% { opacity: .18; filter: grayscale(1); }
  100% { opacity: 1; filter: none; }
}
@keyframes nStranded {
  0%, 26% { opacity: 1; translate: 0 0; }
  40%, 92% { opacity: 0; translate: -30% 0; }
  100% { opacity: 1; translate: 0 0; }
}
@keyframes nRescued {
  0%, 34% { opacity: 0; translate: 40% 0; scale: .94; }
  52%, 92% { opacity: 1; translate: 0 0; scale: 1; }
  100% { opacity: 0; translate: 40% 0; scale: .94; }
}

/* ── 06 · it goes to the desktop your layout lives on ────────────────────────────────────────
   The lit tab moves from the first desktop to the second, the first dims as you leave it, and
   the window waiting over there comes up. */
figure[data-scene="n-vdesk"].on .screen:first-child { animation: nLeave 4.4s ease-in-out infinite; }
figure[data-scene="n-vdesk"].on .screen:last-child { animation: nArrive 4.4s ease-in-out infinite; }
figure[data-scene="n-vdesk"].on .screen:last-child .win { animation: nLand 4.4s cubic-bezier(.2,.78,.2,1) infinite .6s; }
figure[data-scene="n-vdesk"].on .screen:last-child .tab.on::after { animation: nGlow 4.4s ease-out infinite .5s; }
@keyframes nLeave {
  0%, 24% { opacity: 1; scale: 1; }
  46%, 92% { opacity: .34; scale: .97; }
  100% { opacity: 1; scale: 1; }
}
@keyframes nArrive {
  0%, 24% { opacity: .34; scale: .97; }
  46%, 92% { opacity: 1; scale: 1; }
  100% { opacity: .34; scale: .97; }
}
@keyframes nGlow {
  0%, 20% { box-shadow: 0 0 0 1.5px rgba(27, 42, 56, .9); }
  40%, 90% { box-shadow: 0 0 0 1.5px rgba(27, 42, 56, .9), 0 0 14px 5px rgba(47, 208, 255, .75); }
  100% { box-shadow: 0 0 0 1.5px rgba(27, 42, 56, .9); }
}

/* ── 07 · a task on each corner ──────────────────────────────────────────────────────────────
   The pointer runs into the top-right corner and stays there. The ring closes while it waits -
   that wait is the setting nobody else lets you change - and then the corner does its job. */
figure[data-scene="n-corners"].on .pointer { animation: nToCorner 4.6s cubic-bezier(.4,.1,.2,1) infinite; }
figure[data-scene="n-corners"].on .dwell { animation: nDwell 4.6s linear infinite; }
figure[data-scene="n-corners"].on .corner.tr { animation: nFire 4.6s ease-out infinite; }
figure[data-scene="n-corners"].on .win { animation: nDrop 4.6s cubic-bezier(.2,.9,.25,1) infinite; }
@keyframes nToCorner {
  0%, 4% { opacity: 0; left: 46%; top: 62%; }
  10% { opacity: 1; }
  30%, 62% { opacity: 1; left: calc(100% - 15px); top: 4px; }
  70%, 100% { opacity: 0; left: calc(100% - 15px); top: 4px; }
}
@keyframes nDwell {
  0%, 30% { opacity: 0; right: -17px; top: -17px; clip-path: inset(0 0 100% 0); }
  34% { opacity: 1; right: -17px; top: -17px; clip-path: inset(0 0 100% 0); }
  52% { opacity: 1; right: -17px; top: -17px; clip-path: inset(0 0 0 0); }
  58%, 100% { opacity: 0; right: -17px; top: -17px; clip-path: inset(0 0 0 0); }
}
@keyframes nFire {
  0%, 48% { box-shadow: 0 0 0 5px rgba(47, 208, 255, .18); scale: 1; }
  56% { box-shadow: 0 0 0 16px rgba(47, 208, 255, 0); scale: 1.5; }
  64%, 100% { box-shadow: 0 0 0 5px rgba(47, 208, 255, .18); scale: 1; }
}