/* =========================================================================
   Welcome iPhone Duo -- the scene's stylesheet (source of truth)
   =========================================================================

   Used twice, unchanged: by the social videos (source/render/stage.html,
   rendered frame by frame) and by the website (super-website/assets/duo/
   for the published News page and super-website/demos/iphone-duo/ for the
   demo, copies made by the sync step in the README). scene.js sets every value that moves, inline, from the time t;
   this file holds only what never changes. There are deliberately NO CSS
   transitions and NO CSS animations here, so a frame at time t is exact.

   Every class is prefixed duo- : the site already owns .device, .tablet,
   .screen, .bezel, .stage and more.

   Fonts: Plus Jakarta Sans (SIL OFL 1.1, fonts/OFL.txt), the app's own
   font, under a private family name so a copy installed on the computer is
   never picked instead.
   ========================================================================= */

@font-face {
  font-family: 'Duo Jakarta';
  src: url('fonts/PlusJakartaSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Duo Jakarta';
  src: url('fonts/PlusJakartaSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Duo Jakarta';
  src: url('fonts/PlusJakartaSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

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

.duo-stage {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: var(--duo-ground, transparent);
  color: var(--duo-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

.duo-stage *,
.duo-stage *::before,
.duo-stage *::after {
  box-sizing: border-box;
}

/* Inside the phone everything is the app's font. */
.duo-app,
.duo-app * {
  font-family: 'Duo Jakarta', sans-serif;
  letter-spacing: 0;
}

/* The videos draw ALL their text in Plus Jakarta Sans; the website's
   captions use the site's own font stack (inherited). */
.duo-font-app .duo-text {
  font-family: 'Duo Jakarta', sans-serif;
}

.duo-abs {
  position: absolute;
  left: 0;
  top: 0;
}

/* The site's colours, live: the website passes theme "site", and the stage
   takes the page's own tokens, so the theme switch repaints it at once. */
.duo-site {
  --duo-ground: transparent;
  --duo-ink: var(--ink, #f5f5f7);
  --duo-ink2: var(--ink-2, #a1a1a6);
  --duo-blue: var(--blue, #2997ff);
  --duo-line: rgba(245, 245, 247, 0.5);
  --duo-shadow: rgba(0, 0, 0, 0.7);
  --duo-grad: linear-gradient(118deg, #7738da, #b345b3 52%, #f28a35);
}

:root[data-theme='light'] .duo-site {
  --duo-line: rgba(29, 29, 31, 0.42);
  --duo-shadow: rgba(0, 0, 0, 0.24);
  --duo-grad: linear-gradient(100deg, #7738da, #b345b3);
}

/* ------------------------------------------------------------ the text */

.duo-text {
  position: absolute;
  left: 0;
  width: 100%;
  margin: 0;
  text-align: center;
  white-space: normal;
  text-wrap: balance;
  /* no will-change: a layer kept from an earlier frame would carry that frame's anti-aliasing */
}

.duo-eyebrow {
  font-weight: 600;
  letter-spacing: 0.004em;
  color: var(--duo-blue);
  line-height: 1.2;
}

.duo-headline {
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.05;
  color: var(--duo-ink);
}

.duo-caption {
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.12;
  color: var(--duo-ink);
}

/* A label on the picture, not a second headline: secondary ink, with the
   blue ring, hairline and dot as its accent. */
.duo-callout {
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--duo-ink2);
  text-align: left;
  width: auto;
  white-space: nowrap;
  text-wrap: nowrap;
}

.duo-callout-line {
  position: absolute;
  background: var(--duo-blue);
  border-radius: 2px;
}

.duo-callout-dot {
  position: absolute;
  border-radius: 50%;
  background: var(--duo-blue);
}

.duo-ring {
  position: absolute;
  border-style: solid;
  border-color: var(--duo-blue);
}

/* The end card. */
.duo-end-logo {
  position: absolute;
  display: block;
  aspect-ratio: 1;
  border-radius: 22.37%;
  background: #ffffff;
}

.duo-name {
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  padding-bottom: 0.08em;
  background-image: var(--duo-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.duo-tagline {
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.12;
  color: var(--duo-ink);
}

/* duo-end-howto, not duo-howto: the demo page has its own how-to line. */
.duo-end-howto {
  font-weight: 400;
  letter-spacing: 0.004em;
  line-height: 1.3;
  color: var(--duo-ink2);
}

.duo-small {
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--duo-ink2);
}

/* ---------------------------------------------------------- the device */

.duo-persp {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.duo-shadow {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--duo-shadow) 0%, rgba(0, 0, 0, 0) 100%);
}

.duo-body {
  position: absolute;
  transform-style: preserve-3d;
  will-change: transform;
}

.duo-face {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* The frame seen from the face: natural titanium. */
  background: linear-gradient(135deg, #d3cfc7 0%, #a7a39b 38%, #8e8a83 62%, #c3bfb7 100%);
}

.duo-strip {
  position: absolute;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.duo-glass {
  position: absolute;
  overflow: hidden;
  background: linear-gradient(160deg, #1b1b1d 0%, #0a0a0b 60%, #141416 100%);
}

.duo-sheen,
.duo-shade {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.duo-shade {
  background: #000;
}

.duo-sheen {
  background: linear-gradient(105deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 62%,
    rgba(255, 255, 255, 0) 100%);
  background-repeat: no-repeat;
  background-size: 260% 100%;
}

/* ------------------------------------------------- the inner screen (app) */

.duo-inner {
  position: absolute;
  overflow: hidden;
  background: #f3f7fe;
  color: #0c1734;
}

.duo-crease {
  position: absolute;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg,
    rgba(12, 23, 52, 0) 0%,
    rgba(12, 23, 52, 0.018) 35%,
    rgba(255, 255, 255, 0.07) 50%,
    rgba(12, 23, 52, 0.018) 65%,
    rgba(12, 23, 52, 0) 100%);
  pointer-events: none;
}

.duo-title {
  position: absolute;
  font-weight: 700;
  color: #0c1734;
  white-space: nowrap;
  line-height: 1;
}

.duo-seg {
  position: absolute;
  background: #e6edfb;
}

.duo-seg-on {
  position: absolute;
  background: #2f5bea;
}

.duo-seg-label {
  position: absolute;
  white-space: nowrap;
  line-height: 1;
}

.duo-svg {
  position: absolute;
  overflow: visible;
  line-height: 0;
}

.duo-svg svg {
  display: block;
}

.duo-cell {
  position: absolute;
  border-style: solid;
  overflow: hidden;
}

.duo-sym {
  position: absolute;
  background-repeat: no-repeat;
}

.duo-cell-label {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  font-weight: 600;
  color: #0c1734;
  white-space: nowrap;
  line-height: 1.26;
}

.duo-press {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #0c1734;
}

.duo-write {
  position: absolute;
  border-style: solid;
  border-color: #2f5bea;
  background: #ffffff;
  overflow: hidden;
}

.duo-word {
  position: absolute;
  /* no will-change (see .duo-text) */
}

.duo-word span {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  font-weight: 400;
  color: #0c1734;
  white-space: nowrap;
  line-height: 1.26;
}

.duo-cam {
  position: absolute;
  overflow: hidden;
  background: #e4ded5;
}

/* The camera's picture (the man's photo), zoomed in a little and drifting
   slowly (scene.js sets its transform on every frame). */
.duo-cam-img {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 50%;
}

.duo-touch {
  position: absolute;
  border-radius: 50%;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.92);
  background: radial-gradient(circle, rgba(18, 24, 44, 0.34) 0%, rgba(18, 24, 44, 0.24) 62%, rgba(18, 24, 44, 0.14) 100%);
}

.duo-ripple {
  position: absolute;
  border-radius: 50%;
  border-style: solid;
  border-color: rgba(47, 91, 234, 0.9);
}

/* ------------------------------------------------ the back of the phone */

.duo-back-glass {
  position: absolute;
  overflow: hidden;
  /* Frosted glass in the titanium's own tone, lit from the upper left:
     a soft diagonal sweep of light, a glow at the top outer corner, the
     tone deepening towards the hinge (its right edge, seen from behind)
     and a fine bright rim just inside the frame. The Apple logo sits
     on it (.duo-applelogo). */
  background:
    linear-gradient(122deg,
      rgba(255, 255, 255, 0) 24%,
      rgba(255, 255, 255, 0.085) 37%,
      rgba(255, 255, 255, 0.13) 43%,
      rgba(255, 255, 255, 0.05) 50%,
      rgba(255, 255, 255, 0) 62%),
    linear-gradient(90deg,
      rgba(40, 36, 30, 0) 0%,
      rgba(40, 36, 30, 0) 58%,
      rgba(40, 36, 30, 0.1) 88%,
      rgba(40, 36, 30, 0.2) 100%),
    radial-gradient(90% 60% at 10% 0%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(140% 90% at 50% 120%, rgba(30, 27, 22, 0.16) 0%, rgba(30, 27, 22, 0) 70%),
    linear-gradient(150deg, #aaa69e 0%, #96928b 42%, #848079 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.16),
    inset 0 0 0 2px rgba(255, 255, 255, 0.14),
    inset 0 3px 2px -1px rgba(255, 255, 255, 0.3),
    inset 0 -3px 3px -2px rgba(0, 0, 0, 0.18);
}

.duo-hinge {
  position: absolute;
  background: linear-gradient(90deg, #6f6b65 0%, #b9b5ad 30%, #d6d2ca 50%, #b9b5ad 70%, #6f6b65 100%);
}

.duo-applelogo {
  position: absolute;
  overflow: visible;
  filter: drop-shadow(0 0.5px 0.5px rgba(255, 255, 255, 0.35));
}

.duo-cammod {
  position: absolute;
  background: linear-gradient(150deg, #8a8680 0%, #77736d 100%);
}

.duo-lens {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #9d998f 0%, #9d998f 58%, #5f5c57 64%, #c9c5bd 72%, #77746e 100%);
}

.duo-lens-glass {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #3a4a63 0%, #141a24 34%, #05070a 70%, #000 100%);
}

.duo-lens-glint {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 70%);
}

.duo-flash {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, #fffdf4 0%, #efe6c8 55%, #b8ad8c 100%);
}

/* The outer display: SuperAAC's own outer face (a picture the app draws,
   assets/outer-face*.png) fills it, aspect-fit on the face's ground, as
   the native views show it; the sensor bar is drawn over it. */
.duo-outer {
  position: absolute;
  overflow: hidden;
  background: #f3f7fe;
}

.duo-face-img {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.duo-island {
  position: absolute;
  background: #000;
}