/* Facet Security: extra motion. Everything here is gated on html.mo, which motion.js only sets
   when the visitor has not asked for reduced motion, so the page is identical without it. */

@keyframes moRise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes moSpin { to { transform: rotate(360deg); } }
@keyframes moBlink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes moPulse { 0% { box-shadow: 0 0 0 0 rgba(194, 58, 58, .5); } 70%, 100% { box-shadow: 0 0 0 6px rgba(194, 58, 58, 0); } }
@keyframes moTwinkle { 0%, 55%, 100% { opacity: .75; transform: scale(1) rotate(90deg); } 75% { opacity: 1; transform: scale(1.3) rotate(135deg); } }
@keyframes moSheen { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@keyframes moWipe { to { clip-path: inset(-90px -90px -90px -90px); } }
@keyframes moScan { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% + 90px); opacity: 0; } }
@keyframes moListIn { from { opacity: 0; translate: 14px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes moFade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {

  /* ---------- hero: arrival and ambient life ---------- */
  .hero-copy > * { animation: moRise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-copy > :nth-child(1) { animation-delay: .05s; }
  .hero-copy > :nth-child(2) { animation-delay: .18s; }
  .hero-copy > :nth-child(3) { animation-delay: .32s; }
  .hero-copy > :nth-child(4) { animation-delay: .46s; }
  .hero-points li { animation: moRise .8s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-points li:nth-child(1) { animation-delay: .7s; }
  .hero-points li:nth-child(2) { animation-delay: .82s; }
  .hero-points li:nth-child(3) { animation-delay: .94s; }
  .hero-caption { animation: moFade 1s ease 2.2s both; }

  /* a camera sweep that rotates inside the diamond once it has drawn */
  .mo-scan { transform-origin: 0 0; animation: moFade 1.2s ease 2.4s both, moSpin 11s linear 2.4s infinite; pointer-events: none; }
  .dome-lens { animation: moBlink 2.8s ease-in-out 2.6s infinite; }
  .glint { animation: glint 1.6s ease 2.1s both, moTwinkle 6.5s ease-in-out 4.2s infinite; }
  .hero-art .diamond { transition: transform .5s cubic-bezier(.2, .7, .2, 1); transform: translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--tr, 0deg)); }

  /* gold sheen across the main buttons */
  .btn-gold, .btn-gold:hover {
    background-image: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%);
    background-size: 260% 100%; background-repeat: no-repeat; background-position: 160% 0;
  }
  .btn-gold:hover { background-position: -60% 0; transition: background-position .9s ease, background-color .2s; }
  .hero .btn-gold { animation: moSheen 1.4s ease 2.8s 1 both; }

  /* ---------- header: reading progress and current section ---------- */
  .mo-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold-fill); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; pointer-events: none; }
  @media (min-width: 1041px) {
    .site-nav li:not(:last-child) a { position: relative; }
    .site-nav li:not(:last-child) a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 1px; background: var(--champagne); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
    .site-nav a.is-active { color: var(--diamond); }
    .site-nav a.is-active::after, .site-nav li:not(:last-child) a:hover::after { transform: scaleX(1); }
  }

  /* ---------- scroll reveals ---------- */
  .mo [data-rv] { opacity: 0; translate: 0 22px; transition: opacity .85s ease, translate .85s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--rd, 0) * 90ms); }
  .mo [data-rv].in { opacity: 1; translate: 0 0; }

  /* line-drawn icons: services and the crew */
  .mo-g :is(path, circle, rect, line, polyline) { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .mo-g .fill { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0; transition: opacity .5s ease 1.1s; }
  .in .mo-g :is(path, circle, rect, line, polyline), .mo-g.in :is(path, circle, rect, line, polyline) { animation: draw 1.2s cubic-bezier(.5, 0, .2, 1) calc(var(--rd, 0) * 90ms + .25s) forwards; }
  .in .mo-g .fill, .mo-g.in .fill { opacity: 1; animation: none; }
  .service, .member { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
  @media (hover: hover) {
    .service:hover, .member:hover { transform: translateY(-3px); }
    .service:hover .service-glyph, .member:hover > svg { stroke: var(--diamond); }
    .service-glyph, .member > svg { transition: stroke .3s; }
  }

  /* process: the line runs on, the numbers land */
  .mo .step::before { transform-origin: 0 50%; transition: transform .9s cubic-bezier(.5, 0, .2, 1) calc(var(--rd, 0) * 90ms + .2s); }
  .mo .step:not(.in)::before { transform: scaleX(0); }
  .mo .step .step-n { transition: transform .6s cubic-bezier(.3, 1.6, .5, 1) calc(var(--rd, 0) * 90ms + .1s), opacity .4s ease calc(var(--rd, 0) * 90ms); }
  .mo .step:not(.in) .step-n { transform: scale(.55); opacity: 0; }
  @media (max-width: 1040px) {
    .mo .step::before { transform-origin: 50% 0; }
    .mo .step:not(.in)::before { transform: scaleY(0); }
  }

  /* drawing sheets: scanned onto the page */
  .mo .sheet:not(.in) .sheet-open svg { clip-path: inset(-90px 100% -90px -90px); }
  .mo .sheet.in .sheet-open svg { animation: moWipe 1.3s cubic-bezier(.55, .1, .2, 1) calc(var(--rd, 0) * 120ms + .15s) both; clip-path: inset(-90px 100% -90px -90px); }
  .mo .sheet.in .sheet-open::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; left: 0; background: linear-gradient(180deg, transparent, var(--gold-fill) 15%, var(--gold-fill) 85%, transparent); box-shadow: 0 0 14px 2px rgba(190, 158, 98, .55); animation: moScan 1.3s cubic-bezier(.55, .1, .2, 1) calc(var(--rd, 0) * 120ms + .15s) 1 both; pointer-events: none; }

  /* digital: the ledger is written, then it arrives on the phone */
  .mo .digital-art:not(.in) .hand, .mo .digital-art:not(.in) .da-arrow path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .mo .digital-art.in .hand { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.4s ease-in-out .3s forwards; }
  .mo .digital-art.in .da-arrow path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .8s ease 2.5s forwards; }
  .mo .digital-art:not(.in) .phone { opacity: 0; translate: 0 22px; }
  .mo .digital-art.in .phone { animation: moRise .9s cubic-bezier(.2, .7, .2, 1) 2.7s both; }
  .mo .digital-art:not(.in) .phone-list li { opacity: 0; }
  .mo .digital-art.in .phone-list li { animation: moListIn .6s ease both; }
  .mo .digital-art.in .phone-list li:nth-child(1) { animation-delay: 3.4s; }
  .mo .digital-art.in .phone-list li:nth-child(2) { animation-delay: 3.6s; }
  .mo .digital-art.in .phone-list li:nth-child(3) { animation-delay: 3.8s; }

  /* casting: the pattern tree is built up like a print */
  .mo .casting-art:not(.in) .tree use, .mo .casting-art:not(.in) .tree .base { opacity: 0; }
  .mo .casting-art .tree :is(.sprue, .branch, .base, .layers) { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .mo .casting-art:not(.in) .tree :is(.sprue, .branch, .base, .layers) { animation: none; }
  .mo .casting-art.in .sprue { animation: draw 1.3s cubic-bezier(.5, 0, .2, 1) .1s forwards; }
  .mo .casting-art.in .branch { animation: draw 1.6s cubic-bezier(.5, 0, .2, 1) .6s forwards; }
  .mo .casting-art.in .base { animation: draw 1s ease .2s forwards; }
  .mo .casting-art.in .layers { animation: draw 1.4s ease 2.3s forwards; }
  .mo .casting-art.in .tree .base { opacity: 1; }
  .mo .casting-art.in .tree use { animation: moFade .7s ease both; }
  .mo .casting-art.in .tree use:nth-of-type(1) { animation-delay: 1.2s; }
  .mo .casting-art.in .tree use:nth-of-type(2) { animation-delay: 1.4s; }
  .mo .casting-art.in .tree use:nth-of-type(3) { animation-delay: 1.5s; }
  .mo .casting-art.in .tree use:nth-of-type(4) { animation-delay: 1.7s; }
  .mo .casting-art.in .tree use:nth-of-type(5) { animation-delay: 1.8s; }
  .mo .casting-art.in .tree use:nth-of-type(6) { animation-delay: 2.0s; }
  .mo .casting-art.in .tree use:nth-of-type(7) { animation-delay: 2.1s; }
}

@media print {
  .mo [data-rv] { opacity: 1 !important; translate: none !important; }
  .mo-progress, .mo-scan { display: none; }
}