/* JNSN ident shared by the public landing page and local smile lab. */
#loader.brand-loader {
  --intro-duration: 3400ms;
  --intro-ease: cubic-bezier(.76, 0, .24, 1);
  display: block;
  overflow: hidden;
  background: #d8371d;
  color: #171715;
  clip-path: inset(0 0 0 0);
  transition: clip-path 820ms var(--intro-ease);
  isolation: isolate;
}
body.loader-active { overflow: hidden; }
#loader.brand-loader.is-done { opacity: 1; clip-path: inset(0 0 100% 0); }
#loader.brand-loader.is-hidden { display: none; }
.loader__composition { position: absolute; inset: 0; padding: clamp(22px, 3.5vw, 54px); }
.loader__masthead { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 18px; border-bottom: 1px solid #17171555; font: 500 10px/1.4 var(--mono); letter-spacing: .06em; }
.loader__masthead > span:first-child::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 10px; background: currentColor; }
.loader__brand-window { position: absolute; inset: 17% 0 23%; display: grid; place-items: center; overflow: hidden; }
.loader__brand { position: relative; width: max-content; line-height: 0; }
.loader__brand jnsn-wordmark { --jnsn-wordmark-size: clamp(74px, 25vw, 350px); --jnsn-wordmark-color: #fffaf2; line-height: 1; }
.loader__lockup { opacity: 0; }
.loader__slice { position: absolute; inset: 0; opacity: 0; will-change: transform; }
.loader__slice--top { clip-path: inset(0 0 66.5% 0); }
.loader__slice--middle { clip-path: inset(33% 0 33% 0); }
.loader__slice--bottom { clip-path: inset(66.5% 0 0 0); }
.loader__slice--middle jnsn-wordmark { --jnsn-wordmark-color: #171715; }
.loader__shutter { position: absolute; top: 33%; left: -12%; width: 124%; height: 34%; background: #171715; transform: translateX(-130%); opacity: 0; }
.loader__baseline { position: absolute; top: 67%; left: clamp(22px, 3.5vw, 54px); right: clamp(22px, 3.5vw, 54px); display: flex; justify-content: space-between; padding-top: 14px; border-top: 1px solid #17171555; font: 500 9px/1.5 var(--mono); letter-spacing: .07em; }
.loader__phase-mark { color: #fffaf2; }
.loader__bottom { position: absolute; left: clamp(22px, 3.5vw, 54px); right: clamp(22px, 3.5vw, 54px); bottom: clamp(46px, 6vw, 82px); display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.loader__statement { font: 900 clamp(19px, 3vw, 42px)/.94 Arial, sans-serif; letter-spacing: -.045em; }
.loader__statement > span { display: block; margin-top: 18px; font: 500 9px/1.5 var(--mono); letter-spacing: .04em; }
.brand-loader .loader__box { min-width: 0; padding: 12px 16px 13px; }
.brand-loader .loader__label { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 10px; font-size: 9px; opacity: 1; }
.brand-loader .loader__label > span { color: #e87860; font-size: 13px; }
.brand-loader .loader__num { font-size: clamp(44px, 6vw, 86px); letter-spacing: -.065em; }
.brand-loader .loader__pct { margin-left: .2em; letter-spacing: 0; }
.brand-loader .loader__rule { position: absolute; left: clamp(22px, 3.5vw, 54px); right: clamp(22px, 3.5vw, 54px); bottom: clamp(22px, 3.5vw, 46px); width: auto; height: 2px; background: #17171555; }
.brand-loader .loader__rule > i { background: #fffaf2; transition: none; }

/* Opposing sliced entrances, one shutter pass, then a quiet, readable lockup. */
.brand-loader.is-running .loader__slice--top { animation: jnsn-top var(--intro-duration) both; }
.brand-loader.is-running .loader__slice--middle { animation: jnsn-middle var(--intro-duration) both; }
.brand-loader.is-running .loader__slice--bottom { animation: jnsn-bottom var(--intro-duration) both; }
.brand-loader.is-running .loader__lockup { animation: jnsn-lock var(--intro-duration) both; }
.brand-loader.is-running .loader__shutter { animation: jnsn-shutter var(--intro-duration) both; }
.brand-loader.is-running .loader__masthead { animation: jnsn-metadata 800ms 120ms both; }
.brand-loader.is-running .loader__bottom { animation: jnsn-metadata 800ms 280ms both; }
.brand-loader.is-done .loader__brand-window { transform: translateY(-60px); transition: transform 820ms var(--intro-ease); }

@keyframes jnsn-top {
  0%, 5% { transform: translate3d(-125%, -22%, 0) skewX(-12deg); opacity: 0; }
  6% { opacity: 1; }
  34% { transform: translate3d(1.5%, 0, 0) skewX(0); opacity: 1; animation-timing-function: cubic-bezier(.16,1,.3,1); }
  42%, 48% { transform: none; opacity: 1; }
  49%, 100% { transform: none; opacity: 0; }
}
@keyframes jnsn-middle {
  0%, 10% { transform: translate3d(125%, 0, 0) skewX(-12deg); opacity: 0; }
  11% { opacity: 1; animation-timing-function: cubic-bezier(.16,1,.3,1); }
  37% { transform: translate3d(-1.5%, 0, 0); opacity: 1; }
  43%, 48% { transform: none; opacity: 1; }
  49%, 100% { transform: none; opacity: 0; }
}
@keyframes jnsn-bottom {
  0%, 15% { transform: translate3d(-110%, 30%, 0) skewX(12deg); opacity: 0; }
  16% { opacity: 1; animation-timing-function: cubic-bezier(.16,1,.3,1); }
  39% { transform: translate3d(1%, 0, 0); opacity: 1; }
  44%, 48% { transform: none; opacity: 1; }
  49%, 100% { transform: none; opacity: 0; }
}
@keyframes jnsn-lock {
  0%, 46% { opacity: 0; transform: scale(1.025); }
  47% { opacity: 1; transform: scale(1.025); animation-timing-function: cubic-bezier(.16,1,.3,1); }
  67%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes jnsn-shutter {
  0%, 38% { opacity: 0; transform: translateX(-130%); }
  39% { opacity: 1; transform: translateX(-130%); animation-timing-function: cubic-bezier(.76,0,.24,1); }
  57% { opacity: 1; transform: translateX(130%); }
  58%, 100% { opacity: 0; transform: translateX(130%); }
}
@keyframes jnsn-metadata { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 600px) {
  .loader__edition { display: none; }
  .loader__brand-window { inset: 19% 0 31%; }
  .loader__baseline { top: 58%; font-size: 8px; }
  .loader__phase-mark { letter-spacing: 0; }
  .loader__statement { font-size: clamp(18px, 5.5vw, 30px); }
  .loader__statement > span { max-width: 15ch; font-size: 8px; line-height: 1.6; }
  .brand-loader .loader__box { padding: 10px 12px 12px; }
  .brand-loader .loader__num { font-size: 44px; }
}
@media (max-height: 480px) {
  .loader__masthead { padding-bottom: 10px; font-size: 8px; }
  .loader__brand-window { inset: 16% 0 34%; }
  .loader__brand jnsn-wordmark { --jnsn-wordmark-size: min(23vw, 32vh); }
  .loader__bottom { bottom: 40px; }
  .loader__statement { font-size: 20px; }
  .loader__statement > span { margin-top: 8px; }
  .brand-loader .loader__num { font-size: 36px; }
  .brand-loader .loader__label { margin-bottom: 6px; }
  .loader__baseline { display: none; }
  .brand-loader .loader__rule { bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  #loader.brand-loader, .brand-loader * { animation: none !important; transition: none !important; }
  .brand-loader .loader__slice, .brand-loader .loader__shutter { display: none; }
  .brand-loader .loader__lockup { opacity: 1; transform: none; }
  .brand-loader.is-done .loader__brand-window { transform: none; }
}