/* ==========================================================================
   reverso-experience.css
   "Story Experience" — an animated, frame-by-frame telling of a collector
   story, played in a full-screen overlay on top of the story page.

   Design rules this file follows:
   - Colour comes from the site tokens. The player pins the dark palette in
     both themes (see .xp-overlay) because a told story reads better on a
     dark ground and the archive photography is shot on black.
   - Illustrations are hand-built HTML/CSS/SVG; the watches themselves are
     the site's own archive photographs.
   - Inner animations start paused and are released when the frame goes
     live, so a frame always plays from its first beat — which is also what
     makes pause, scrub and replay behave.
   ========================================================================== */

:root{
  --xp-blue:#123a63;
  --xp-blue-lo:#07192e;
  --xp-foam:#ece5d8;
}

/* --------------------------------------------------------------------------
   1. The invitation on the story page
   -------------------------------------------------------------------------- */
.xp-invite{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; column-gap:38px;
  border:1px solid var(--line); background:var(--panel);
  padding:34px 40px; margin:0 0 48px;
}
/* a brass hairline down the leading edge, so the card reads as an opening */
.xp-invite::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(to bottom, transparent, var(--brass) 22%, var(--brass) 78%, transparent);
}
.xp-invite::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 35%, rgba(201,163,94,.10) 50%, transparent 65%);
  transform:translateX(-120%);
  animation:xp-sheen 7s ease-in-out infinite;
}
@keyframes xp-sheen{ 0%,55%{transform:translateX(-120%);} 100%{transform:translateX(120%);} }

.xp-play{
  flex:0 0 auto; position:relative; width:74px; height:74px; border-radius:50%;
  border:1px solid var(--brass); background:transparent; cursor:pointer;
  display:grid; place-items:center; z-index:1;
  transition:border-color .35s ease, transform .35s ease, background .35s ease;
}
.xp-play svg{ width:22px; height:22px; margin-left:3px; fill:var(--brass-bright); transition:fill .35s ease; }
.xp-play::before,
.xp-play::after{
  content:''; position:absolute; inset:-1px; border-radius:50%;
  border:1px solid var(--brass); opacity:0;
  animation:xp-pulse 3.4s ease-out infinite;
}
.xp-play::after{ animation-delay:1.7s; }
@keyframes xp-pulse{ 0%{ transform:scale(1); opacity:.55; } 100%{ transform:scale(1.5); opacity:0; } }
.xp-play:hover{ background:var(--brass); border-color:var(--brass-bright); transform:scale(1.05); }
.xp-play:hover svg{ fill:var(--void); }
.xp-play:focus-visible{ outline:2px solid var(--brass-bright); outline-offset:4px; }

.xp-play{ width:86px; height:86px; }
.xp-invite-copy{ z-index:1; min-width:0; }
.xp-invite-copy .xp-kicker{
  font-family:'Jost',sans-serif; font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--brass); margin-bottom:10px;
}
.xp-invite-copy h2{
  font-family:'Cormorant Garamond',serif; font-weight:600; font-size:32px; line-height:1.15;
  color:var(--ink); margin-bottom:10px; text-wrap:balance;
}
.xp-invite-copy p:not(.xp-kicker){ color:var(--ink-dim); font-size:19px; line-height:1.6; text-wrap:pretty; }
/* the facts, set apart on the right behind a rule */
.xp-invite-meta{
  z-index:1; margin:0; align-self:stretch; display:flex; flex-direction:column; justify-content:center; gap:16px;
  width:240px; box-sizing:border-box; padding-left:36px; border-left:1px solid var(--line);
}
.xp-invite-meta div{ margin:0; }
.xp-invite-meta dt{
  font-family:'Jost',sans-serif; font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--brass); margin-bottom:3px;
}
.xp-invite-meta dd{ margin:0; font-family:'Cormorant Garamond',serif; font-size:19px; line-height:1.25; color:var(--ink); }
@media (max-width:980px){
  .xp-invite{ grid-template-columns:auto minmax(0,1fr); row-gap:24px; column-gap:28px; padding:28px 30px; }
  .xp-invite-meta{
    grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; gap:14px 40px; width:auto;
    padding:20px 0 0; border-left:0; border-top:1px solid var(--line);
  }
}
@media (max-width:600px){
  .xp-invite{ grid-template-columns:minmax(0,1fr); padding:26px 24px; }
  .xp-play{ width:74px; height:74px; }
  .xp-invite-copy h2{ font-size:27px; }
  .xp-invite-copy p:not(.xp-kicker){ font-size:17px; }
  .xp-invite-meta{ gap:12px 28px; }
}

/* --------------------------------------------------------------------------
   2. The overlay shell
   -------------------------------------------------------------------------- */
/* The player deliberately keeps the dark "cinema" palette in both themes.
   A full-screen told story reads better on a dark ground, and the archive
   photography is shot on black. The invitation card stays theme-aware. */
.xp-overlay{
  --void:#0b0e12; --panel:#151b22; --panel-2:#1c232c;
  --ink:#ece5d8; --ink-dim:#a79f8f;
  --brass:#c9a35e; --brass-bright:#eecb8d;
  --line:rgba(201,163,94,.28); --line-soft:rgba(201,163,94,.14);
  color-scheme:dark;
  position:fixed; inset:0; z-index:10000; background:var(--void);
  opacity:0; transition:opacity .5s ease;
  display:flex; flex-direction:column;
}
.xp-overlay.on{ opacity:1; }
.xp-overlay .xp-grain{
  position:absolute; inset:0; z-index:5; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
}
.xp-overlay::after{
  content:''; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:radial-gradient(130% 95% at 50% 45%, transparent 48%, rgba(0,0,0,.6) 100%);
}

.xp-stage{ position:relative; flex:1; overflow:hidden; }
/* Fixed 1600x900 design canvas, scaled to fit, so illustrations can be
   composed at real coordinates instead of fighting percentages. */
.xp-canvas{
  position:absolute; top:50%; left:50%;
  width:var(--xp-w,1600px); height:var(--xp-h,900px);
  transform:translate(-50%,-50%) scale(var(--xp-scale,1));
  transform-origin:center center;
}
.xp-frame{ position:absolute; inset:0; opacity:0; transition:opacity .55s ease .18s; }
.xp-frame.on{ opacity:1; }
.xp-frame.out{ opacity:0; transition:opacity .32s ease; }
.xp-frame *{ animation-play-state:paused; }
.xp-frame.on *{ animation-play-state:running; }
.xp-overlay.paused .xp-frame.on *{ animation-play-state:paused; }

/* --------------------------------------------------------------------------
   3. Preloader — the archive photographs are large, and a scene that arrives
   half-painted breaks the spell, so nothing starts until they are decoded.
   -------------------------------------------------------------------------- */
.xp-boot{
  position:absolute; inset:0; z-index:7; display:grid; place-items:center;
  background:var(--void); transition:opacity .6s ease;
}
.xp-boot.gone{ opacity:0; pointer-events:none; }
.xp-boot p{
  font-family:'Jost',sans-serif; font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-dim); margin-bottom:16px; text-align:center;
}
.xp-boot .track{ width:220px; height:1px; background:var(--line-soft); margin:0 auto; }
.xp-boot .track i{
  display:block; height:100%; width:0; background:var(--brass-bright);
  transition:width .4s ease;
}

/* --------------------------------------------------------------------------
   4. Controls
   -------------------------------------------------------------------------- */
.xp-bar{
  position:relative; z-index:6; flex:0 0 auto;
  display:flex; align-items:center; gap:22px;
  padding:16px 28px; border-top:1px solid var(--line-soft);
  background:linear-gradient(to top, rgba(0,0,0,.35), transparent);
  transition:opacity .4s ease;
}
.xp-overlay.idle .xp-bar{ opacity:0; }
.xp-overlay.idle .xp-stage{ cursor:none; }

.xp-ticks{ display:flex; gap:5px; flex:0 0 auto; }
.xp-tick{
  width:26px; height:2px; background:var(--line-soft); position:relative;
  border:0; padding:0; cursor:pointer;      /* no overflow:hidden: it would clip the hit area below */
}
.xp-tick::before{ content:''; position:absolute; inset:-9px 0; }  /* easier hit area */
.xp-tick i{
  position:absolute; inset:0; transform-origin:left center; transform:scaleX(0);
  background:var(--brass-bright);
}
.xp-tick.done i{ transform:scaleX(1); }
.xp-tick.live i{ animation:xp-fill linear forwards; animation-duration:var(--xp-dur,8s); }
.xp-overlay.paused .xp-tick.live i{ animation-play-state:paused; }
@keyframes xp-fill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

.xp-scene{
  font-family:'Jost',sans-serif; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-dim); flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.xp-scene b{ color:var(--brass); font-weight:500; }

.xp-btns{ display:flex; align-items:center; gap:6px; }
.xp-btn{
  width:38px; height:38px; display:grid; place-items:center; cursor:pointer;
  background:transparent; border:1px solid transparent; border-radius:50%;
  transition:border-color .3s ease, background .3s ease;
}
.xp-btn svg{ width:16px; height:16px; fill:none; stroke:var(--ink-dim); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; transition:stroke .3s ease; }
.xp-btn.solid svg{ fill:var(--ink-dim); stroke:none; }
.xp-btn:hover{ border-color:var(--line); background:rgba(201,163,94,.07); }
.xp-btn:hover svg{ stroke:var(--brass-bright); }
.xp-btn.solid:hover svg{ fill:var(--brass-bright); stroke:none; }
.xp-btn:focus-visible{ outline:1px solid var(--brass-bright); outline-offset:2px; }

/* On a phone the bar is narrower than its contents: the scene marks give way
   (they shrink, and the scene name is dropped) so every button stays on screen. */
@media (max-width:600px){
  .xp-bar{ gap:14px; padding:12px 14px; }
  .xp-ticks{ flex:1 1 0; min-width:0; gap:4px; }
  .xp-tick{ flex:1 1 0; min-width:0; max-width:26px; }
  .xp-scene{ display:none; }
  .xp-btns{ flex:0 0 auto; gap:2px; }
}

/* --------------------------------------------------------------------------
   5. Shared typography inside frames
   -------------------------------------------------------------------------- */
.xp-cap{
  font-family:'Jost',sans-serif; font-size:13px; letter-spacing:.26em; text-transform:uppercase;
  color:#f0d9a8; opacity:0;
  animation:xp-rise 1.4s cubic-bezier(.2,.7,.25,1) forwards;
}
.xp-say{
  font-family:'Cormorant Garamond',serif; font-size:34px; line-height:1.45; color:var(--ink);
  opacity:0; animation:xp-rise 1.6s cubic-bezier(.2,.7,.25,1) forwards;
}
.xp-say.sm{ font-size:27px; color:#ddd6c7; }
.xp-say.lg{ font-size:46px; }
.xp-say em{ font-style:italic; color:var(--brass-bright); }
.xp-say b{ font-weight:600; color:var(--ink); }
/* a plain centred column — the frame itself does the centring, so nothing
   here fights the rise animation's own transform */
.xp-col{ width:1180px; margin:0 auto; text-align:center; }
.xp-col > *{ margin-bottom:26px; }
.xp-col > *:last-child{ margin-bottom:0; }
@keyframes xp-rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }
@keyframes xp-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes xp-dim{ to{ opacity:.18; filter:grayscale(.8); } }
.xp-center{ display:grid; place-items:center; }

/* --------------------------------------------------------------------------
   6. Archive photographs
   The watches are shot on black, so they are feathered into the stage with a
   soft elliptical mask: the case stays crisp, the strap dissolves away.
   -------------------------------------------------------------------------- */
/* The archive files are square product shots of the whole watch on its strap.
   The story wants the case, large — so the frame crops to it: the case fills
   50% of the image's width and sits at 43.3% of its height, which is where
   these two numbers come from. Edges are feathered so the crop never shows. */
.xp-shot{
  --zoom:150%;      /* how far into the frame to crop */
  --shift:6.7%;     /* where the case sits vertically in that frame */
  position:relative; overflow:hidden; aspect-ratio:200/264;
}
/* The archive files are product shots of the whole watch on its strap, lit on
   black — but studio black, which is lighter than the stage and carries its
   own glow. A rectangular feather only hides the crop edge and leaves that
   glow sitting there as a visible panel. So the mask is a falloff centred on
   the case instead: the case stays crisp inside the solid stop, and
   everything around it dissolves, glow included. The files are not framed
   alike — some are not even the same proportion — so zoom and shift are
   per-shot. */
.xp-shot img{
  position:absolute; left:50%; top:50%; width:var(--zoom); height:auto; display:block;
  transform:translate(-50%,-50%) translateY(var(--shift));
}
.xp-shot{
  -webkit-mask-image:radial-gradient(ellipse 60% 62% at 50% 48%, #000 0 58%, transparent 100%);
          mask-image:radial-gradient(ellipse 60% 62% at 50% 48%, #000 0 58%, transparent 100%);
}
.xp-shot.tall{ --zoom:100%; --shift:-1%; }      /* the 2752x4128 originals */
/* Close on the engraving. Held at 165% rather than tighter: the engraved
   plate occupies about a third of the source frame, so a harder crop would
   be enlarging pixels that were never captured. At this zoom the rendered
   width lands on the 1254px tier almost exactly on a 2x display. */
.xp-shot.detail{ --zoom:148%; --shift:5.5%; }
/* the payoff shot is lit warmer and brighter than the catalogue files; a
   light tonal match only — no hue shift — so it reads as the same watch */
.xp-shot.match img{ filter:brightness(.9) contrast(1.06); }
/* a slow drift, so a held photograph is never completely still */
.xp-shot.drift img{ animation:xp-drift 18s ease-in-out infinite; }
@keyframes xp-drift{
  0%,100%{ transform:translate(-50%,-50%) translateY(var(--shift)) scale(1); }
  50%{ transform:translate(-50%,-50%) translateY(calc(var(--shift) - 1.5%)) scale(1.08); }
}

/* the swivel — the Reverso's own gesture, used as the story's punctuation */
.xp-swivel{ perspective:2200px; position:relative; }
.xp-swivel-in{
  position:relative; width:100%; height:100%; transform-style:preserve-3d;
  transition:transform 1.6s cubic-bezier(.62,.03,.26,1);
}
.xp-swivel.flip .xp-swivel-in{ transform:rotateY(180deg); }
.xp-swivel .sf{ position:absolute; inset:0; backface-visibility:hidden; }
.xp-swivel .sf .xp-shot{ width:100%; height:100%; aspect-ratio:auto; }
.xp-swivel .sf.b{ transform:rotateY(180deg); }
/* indecision: turning the watch over, and over, and over */
.xp-swivel.waver .xp-swivel-in{
  transition:none; animation:xp-waver 7s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes xp-waver{
  0%,20%{ transform:rotateY(0deg); }
  36%,70%{ transform:rotateY(180deg); }
  86%,100%{ transform:rotateY(360deg); }
}
/* the explaining turn: slower, so the mechanism itself is legible */
.xp-swivel.waver.slow .xp-swivel-in{ animation-duration:9s; }
.xp-dimmed{ animation:xp-dim 1.4s ease forwards; }

/* a brass caption under a photograph */
.xp-tag{
  margin-top:24px; text-align:center;
  font-family:'Jost',sans-serif; font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  color:#e4ddce; line-height:1.55; opacity:0; animation:xp-fade 1.2s ease forwards;
}
.xp-tag b{ display:block; color:#f0d9a8; letter-spacing:.18em; margin-bottom:6px;
  font-weight:500; font-size:12px; }

/* --------------------------------------------------------------------------
   7. Scene 1 — the title card
   -------------------------------------------------------------------------- */
.xpF-title{ display:grid; place-items:center; }
.xpF-title .halo{
  position:absolute; width:1100px; height:1100px; border-radius:50%;
  background:radial-gradient(circle, rgba(201,163,94,.11), transparent 62%);
  animation:xp-breathe 9s ease-in-out infinite;
}
@keyframes xp-breathe{
  0%,100%{ transform:scale(.9); opacity:.6; }
  50%{ transform:scale(1.08); opacity:1; }
}
.xpF-title .ghost{ position:absolute; width:520px; height:720px; opacity:.5;
  animation:xp-tilt 14s ease-in-out infinite; }
.xpF-title .ghost rect,
.xpF-title .ghost line{
  fill:none; stroke:var(--brass); stroke-width:1; opacity:.5;
  stroke-dasharray:2600; stroke-dashoffset:2600;
  animation:xp-draw 3.4s cubic-bezier(.3,.7,.3,1) forwards;
}
@keyframes xp-draw{ to{ stroke-dashoffset:0; } }
@keyframes xp-tilt{
  0%,100%{ transform:rotateY(-7deg) rotateX(2deg); }
  50%{ transform:rotateY(7deg) rotateX(-2deg); }
}
.xpF-title .swell{ position:absolute; bottom:0; left:0; width:100%; height:300px; }
.xpF-title .swell path{
  fill:none; stroke:var(--brass); stroke-width:1.2; opacity:0;
  stroke-dasharray:3000; stroke-dashoffset:3000;
  animation:xp-swell 6s cubic-bezier(.25,.8,.3,1) forwards;
}
@keyframes xp-swell{
  0%{ stroke-dashoffset:3000; opacity:0; }
  18%{ opacity:.55; }
  70%{ stroke-dashoffset:0; opacity:.45; }
  100%{ stroke-dashoffset:0; opacity:.14; }
}
.xpF-title .words{ position:relative; z-index:2; text-align:center; }
.xpF-title .year{
  font-family:'Cinzel',serif; font-size:15px; letter-spacing:.5em; color:var(--brass);
  opacity:0; animation:xp-rise 1.4s ease-out .5s forwards;
}
.xpF-title h1{
  font-family:'Poiret One',cursive; font-weight:400;
  font-size:118px; line-height:1; letter-spacing:.02em; color:var(--ink); margin:20px 0 0;
}
.xpF-title h1 span{
  display:inline-block; opacity:0; transform:translateY(42px) rotate(3deg);
  animation:xp-letter 1.5s cubic-bezier(.16,.84,.26,1) forwards;
}
@keyframes xp-letter{ to{ opacity:1; transform:translateY(0) rotate(0); } }
.xpF-title .rule{ width:0; height:1px; background:var(--brass); margin:34px auto 0;
  animation:xp-rule 1.8s cubic-bezier(.2,.8,.2,1) 2.5s forwards; }
@keyframes xp-rule{ to{ width:230px; } }
.xpF-title .by{
  margin-top:26px; font-family:'Jost',sans-serif; font-size:16px; letter-spacing:.22em;
  text-transform:uppercase; color:#e4ddce;
  opacity:0; animation:xp-rise 1.6s ease-out 2.4s forwards;
}
.xpF-title .watchline{
  margin-top:12px; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:21px;
  color:var(--brass); opacity:0; animation:xp-rise 1.6s ease-out 3.4s forwards;
}

/* --------------------------------------------------------------------------
   8. The three-watch scenes (2 and 3)
   -------------------------------------------------------------------------- */
.xpF-trio{ display:flex; flex-direction:column; justify-content:center; padding:40px 0 20px; }
.xpF-trio .head{ text-align:center; flex:0 0 auto; margin-bottom:40px; }
.xpF-trio .row{ display:flex; justify-content:center; gap:58px; flex:0 0 auto; }
.xpF-trio .slot{ width:310px; opacity:0; animation:xp-rise 1.5s cubic-bezier(.2,.7,.25,1) forwards; }
.xpF-trio .xp-swivel{ width:310px; height:409px; }
.xpF-trio .foot{
  margin-top:42px; text-align:center;
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:26px; color:var(--ink-dim);
  opacity:0; animation:xp-rise 1.7s cubic-bezier(.2,.7,.25,1) forwards;
}
.xpF-trio .tally{ margin-top:12px; display:flex; justify-content:center; gap:5px; height:13px; }
.xp-run{ display:flex; justify-content:center; align-items:flex-end; gap:30px; height:92px; }
.xp-run i{
  display:block; width:3px; height:92px; background:var(--brass); opacity:.75;
  transform:scaleY(0); transform-origin:bottom; animation:xp-tally .4s ease-out forwards;
}
.xp-run i.pulled{
  animation:xp-tally .4s ease-out forwards, xp-pull 2.4s cubic-bezier(.3,.8,.3,1) forwards;
}
.xpF-trio .tally i{
  width:1px; height:13px; background:var(--brass); transform:scaleY(0); transform-origin:bottom;
  animation:xp-tally .34s ease-out forwards;
}
@keyframes xp-tally{ to{ transform:scaleY(1); } }
/* the one piece lifted out of the production run */
.xpF-trio .tally i.pulled, .xp-pulled{
  animation:xp-tally .34s ease-out forwards, xp-pull 2.2s cubic-bezier(.3,.8,.3,1) 1.6s forwards;
}
@keyframes xp-pull{
  to{ transform:translateY(-62px) scaleY(1); opacity:1; background:var(--brass-bright);
      box-shadow:0 0 18px var(--brass-bright), 0 0 44px rgba(238,203,141,.5); }
}

/* --------------------------------------------------------------------------
   9. Split scenes — photograph on one side, words on the other
   -------------------------------------------------------------------------- */
.xpF-split{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:60px; padding:0 110px; }
.xpF-split.rev{ grid-template-columns:1fr 1fr; }
.xpF-split .pane-art{ display:grid; place-items:center; }
.xpF-split .pane-art .xp-shot,
.xpF-split .pane-art .xp-swivel{ width:430px; height:568px; }
.xpF-split .pane-txt > *{ margin-bottom:26px; }
.xpF-split .pane-txt > *:last-child{ margin-bottom:0; }

/* the guilloché lattice drawn over the real dial, to show what it is */
.xp-lattice{ position:absolute; inset:0; pointer-events:none; }
.xp-lattice line{
  stroke:var(--brass-bright); stroke-width:.6; opacity:.75;
  stroke-dasharray:300; stroke-dashoffset:300;
  animation:xp-draw 1.5s ease forwards, xp-fadeout 2s ease 3.4s forwards;
}
@keyframes xp-fadeout{ to{ opacity:0; } }

/* --------------------------------------------------------------------------
   10. The prints — real woodblock artworks, hung like prints.
   Sizes go on the images, not the frames: the frames then size to their
   content, which keeps mixed portrait/landscape artworks on one baseline.
   -------------------------------------------------------------------------- */
.xp-prints{ display:flex; gap:44px; align-items:center; justify-content:center; }
.xp-print{
  position:relative; margin:0; padding:10px; background:#efe9db;
  box-shadow:0 22px 56px rgba(0,0,0,.65); opacity:0;
  animation:xp-rise 1.5s cubic-bezier(.2,.7,.25,1) forwards;
}
/* explicit boxes on both figure and image: the three artworks are different
   proportions, and leaving either dimension to resolve from the other let the
   frame grow to the flex line's height and show as a cream slab */
.xp-print img{ display:block; }
.xp-print.xp-side{ height:258px; }
.xp-print.xp-side img{ height:238px; width:auto; }
.xp-print.xp-hero{ width:548px; height:350px; }
.xp-print.xp-hero img{ width:528px; height:330px; }

/* --------------------------------------------------------------------------
   11. Scene 7 — the motif, reproduced to death
   -------------------------------------------------------------------------- */
.xpF-flood .field{
  position:absolute; inset:0; display:grid;
  animation:xp-flood-dim 1.6s ease var(--xp-dim, 11.4s) forwards;
  grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(5,1fr); gap:10px; padding:22px;
}
.xpF-flood .tile{
  position:relative; overflow:hidden; opacity:0; transform:scale(.6);
  animation:xp-pop .5s cubic-bezier(.2,1.3,.4,1) forwards;
}
.xpF-flood .tile img{ width:100%; height:100%; object-fit:cover; display:block; }
@keyframes xp-pop{ to{ opacity:.92; transform:scale(1); } }
@keyframes xp-flood-dim{ to{ opacity:.16; filter:grayscale(.45); } }

.xpF-flood .xp-prints{ position:absolute; inset:0; align-items:center; z-index:2; }
/* the two he has no quarrel with step away; the Wave stays — and then there
   are forty of it */
/* two animations per print — arrive, then leave. Both delays are supplied
   inline per print, because an inline animation-delay replaces the whole
   list and would otherwise fire the exit at the entrance's delay. */
.xpF-flood .xp-print{
  animation:xp-rise 1.5s cubic-bezier(.2,.7,.25,1) forwards, xp-swallow 1.2s ease forwards;
}
@keyframes xp-swallow{ to{ opacity:0; transform:scale(.9); } }

.xpF-flood .lead{
  position:absolute; left:0; right:0; top:84px; text-align:center; z-index:5; padding:0 240px;
}
.xpF-flood .lead .xp-say{ text-shadow:0 2px 16px #000, 0 0 48px #000; }

.xpF-flood .words{ position:absolute; inset:0; z-index:4; }
.xpF-flood .words div{
  position:absolute; font-family:'Jost',sans-serif; text-transform:uppercase;
  letter-spacing:.34em; font-size:44px; font-weight:500; color:#fff;
  text-shadow:0 2px 10px #000, 0 0 36px #000, 0 0 90px #000; opacity:0;
  animation:xp-stamp 2.1s ease forwards;
}
@keyframes xp-stamp{
  0%{ opacity:0; transform:scale(1.5); letter-spacing:.7em; }
  22%{ opacity:1; transform:scale(1); letter-spacing:.34em; }
  72%{ opacity:1; }
  100%{ opacity:0; }
}
.xpF-flood .verdict{
  position:absolute; inset:0; display:grid; place-items:center; z-index:6; padding:0 240px;
}
.xpF-flood .verdict::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 52% 30% at 50% 50%, rgba(11,14,18,.96) 35%, transparent 100%);
  opacity:0; animation:xp-fade 1.4s ease var(--xp-dim, 11.4s) forwards;
}
.xpF-flood .verdict .xp-say{ position:relative; font-size:40px; line-height:1.4; }

/* --------------------------------------------------------------------------
   12. Scene 9 — the question, typed into silence
   -------------------------------------------------------------------------- */
.xp-type{
  display:inline-block; overflow:hidden; white-space:nowrap; vertical-align:bottom;
  border-right:1px solid var(--brass-bright);
  width:0; animation:xp-type 2.6s steps(44,end) forwards, xp-caret .8s step-end infinite;
}
@keyframes xp-type{ to{ width:var(--xp-w,20ch); } }
@keyframes xp-caret{ 50%{ border-color:transparent; } }
.xp-wait{ display:inline-block; }
.xp-wait i{
  display:inline-block; width:4px; height:4px; border-radius:50%; background:var(--brass);
  margin:0 5px; opacity:.2; animation:xp-blink 2.4s ease-in-out infinite;
}
@keyframes xp-blink{ 0%,100%{ opacity:.15; } 50%{ opacity:1; } }

/* --------------------------------------------------------------------------
   13. Scene 10/11 — the answer, and the one they refused
   -------------------------------------------------------------------------- */
.xp-verdict{
  font-family:'Poiret One',cursive; font-size:150px; line-height:1; color:var(--brass-bright);
  opacity:0; animation:xp-verdict 2.4s cubic-bezier(.16,.9,.3,1) forwards;
}
.xp-verdict.no{ color:var(--ink-dim); }
@keyframes xp-verdict{
  0%{ opacity:0; transform:scale(.8); filter:blur(12px); }
  55%{ opacity:1; transform:scale(1); filter:blur(0); }
  100%{ opacity:1; transform:scale(1); filter:blur(0); }
}
.xp-engraved{
  display:inline-block; position:relative;
  font-family:'Cinzel',serif; font-size:50px; letter-spacing:.3em; color:#8d7340;
  text-shadow:0 1px 0 rgba(236,229,216,.22), 0 -1px 1px rgba(0,0,0,.8);
  opacity:0; animation:xp-rise 1.6s ease forwards;
}
.xp-engraved::after{
  content:''; position:absolute; left:-6px; top:52%; height:2px; width:0;
  background:#d98a8a; opacity:.95;
  animation:xp-strike .8s cubic-bezier(.3,.8,.3,1) forwards;
}
@keyframes xp-strike{ to{ width:100%; } }

/* --------------------------------------------------------------------------
   14. Closing card
   -------------------------------------------------------------------------- */
.xpF-end{ display:grid; place-items:center; text-align:center; }
.xpF-end .deco{ width:0; height:1px; background:var(--brass); margin:0 auto 42px;
  animation:xp-rule 1.6s ease .3s forwards; }
.xpF-end .sig{
  margin-top:52px; font-family:'Cinzel',serif; font-size:12px; letter-spacing:.3em;
  text-transform:uppercase; color:#f0d9a8; opacity:0;
  animation:xp-rise 1.6s ease forwards;
}
.xpF-end .hint{
  margin-top:18px; font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:#b8b0a0; opacity:0;
  animation:xp-rise 1.6s ease forwards;
}

/* --------------------------------------------------------------------------
   15. Reduced motion — keep the story, drop the movement
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .xp-invite::after, .xp-play::before, .xp-play::after,
  .xp-shot.drift img, .xp-swivel.waver .xp-swivel-in,
  .xpF-title .halo, .xpF-title .ghost, .xp-wait i{ animation:none !important; }
  .xp-frame *{ animation-duration:.01ms !important; animation-delay:0ms !important; }
  .xp-swivel-in{ transition-duration:.01ms !important; }
  .xpF-title .rule, .xpF-end .deco{ width:230px; }
  .xp-type{ width:auto !important; border-right:0; }
}

/* --------------------------------------------------------------------------
   16. Portrait — a phone held upright
   The canvas becomes 900x1600 and the two-column scenes stack, so the stage
   fills the screen instead of letterboxing into a band across the middle.
   Type is unchanged: against a narrower canvas it simply reads larger.
   -------------------------------------------------------------------------- */
.xp-canvas.portrait .xpF-split{
  grid-template-columns:1fr; grid-template-rows:auto auto;
  align-content:center; gap:52px; padding:0 54px;
}
/* the photograph leads, the words follow underneath, whichever order the
   scene declares them in */
.xp-canvas.portrait .xpF-split .pane-art{ grid-row:1; }
.xp-canvas.portrait .xpF-split .pane-txt{ grid-row:2; text-align:left !important; }
.xp-canvas.portrait .xpF-split .pane-art .xp-shot,
.xp-canvas.portrait .xpF-split .pane-art .xp-swivel{ width:560px; height:739px; }

.xp-canvas.portrait .xpF-trio{ padding:30px 0; }
.xp-canvas.portrait .xpF-trio .row{ gap:18px; }
.xp-canvas.portrait .xpF-trio .slot{ width:258px; }
.xp-canvas.portrait .xpF-trio .xp-swivel{ width:258px; height:341px; }
.xp-canvas.portrait .xpF-trio .head{ margin-bottom:30px; padding:0 50px; }
.xp-canvas.portrait .xpF-trio .foot{ margin-top:34px; padding:0 50px; }

.xp-canvas.portrait .xp-col{ width:800px; }
.xp-canvas.portrait .xpF-title h1{ font-size:84px; }
.xp-canvas.portrait .xpF-title .ghost{ width:400px; height:554px; }
.xp-canvas.portrait .xp-say{ font-size:30px; }
.xp-canvas.portrait .xp-say.sm{ font-size:25px; }
.xp-canvas.portrait .xp-say.lg{ font-size:40px; }
.xp-canvas.portrait .xp-verdict{ font-size:112px; }
.xp-canvas.portrait .xp-engraved{ font-size:38px; }

/* the flood turns tall: fewer columns, more rows */
.xp-canvas.portrait .xpF-flood .field{
  grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(8,1fr);
}
.xp-canvas.portrait .xpF-flood .xp-prints{ flex-direction:column; gap:22px; }
.xp-canvas.portrait .xpF-flood .lead,
.xp-canvas.portrait .xpF-flood .verdict{ padding:0 70px; }
.xp-canvas.portrait .xpF-flood .words div{ font-size:34px; }
.xp-canvas.portrait .xp-print.xp-hero{ width:420px; height:272px; }
.xp-canvas.portrait .xp-print.xp-hero img{ width:400px; height:252px; }
.xp-canvas.portrait .xp-print.xp-side{ height:206px; }
.xp-canvas.portrait .xp-print.xp-side img{ height:186px; }

/* --------------------------------------------------------------------------
   17. Our Istanbul — components this story needs
   -------------------------------------------------------------------------- */


/* A photograph that is not a watch: an illustration, a snapshot, a sheet of
   drawings. Soft-edged, so it sits in the stage rather than on it. */
.xp-photo{ position:relative; overflow:hidden; }
.xp-photo img{ width:100%; height:100%; display:block; }
.xp-photo{
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,  transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-composite:intersect;
}
/* a printed photograph, held: a mat and a shadow instead of a soft edge */
.xp-photo.frame{
  padding:0; border:1px solid var(--line); background:#0f1317;
  box-shadow:0 26px 64px rgba(0,0,0,.7);
  -webkit-mask-image:none; mask-image:none;
}
.xp-photo.drift img{ animation:xp-pan 22s ease-in-out infinite; }
@keyframes xp-pan{
  0%,100%{ transform:scale(1.03) translate(0,0); }
  50%{ transform:scale(1.1) translate(-10px,-8px); }
}
.xp-photo.tallphoto{ width:100%; height:100%; background:transparent; }
.xp-photo.fill{ width:100%; height:100%; }
/* a slow push into the engraving, so the detail is read rather than shown */
.xp-photo.zoomin img{ animation:xp-zoomin 13s cubic-bezier(.4,.05,.3,1) forwards; }
@keyframes xp-zoomin{
  0%{ transform:scale(1.05); }
  100%{ transform:scale(2.35) translate(1%, -3%); }
}
/* engraved steel is low-contrast by nature; lift it so the composition can
   actually be read at the size the frame shows it */
.xp-photo.punch img{ filter:contrast(1.3) brightness(1.08) saturate(.9); }

/* Scene 5: the Statue of Freedom, shrinking to the size it would actually be
   on a case-back — the argument made by letting the detail disappear. */
.xp-shrink{
  position:relative; width:420px; height:600px; display:grid; place-items:center;
}
.xp-shrink .xp-photo{
  width:420px; height:600px; transform-origin:center center;
  animation:xp-shrink 7s cubic-bezier(.5,.02,.3,1) 3.2s forwards;
}
@keyframes xp-shrink{
  0%{ transform:scale(1); filter:blur(0); }
  70%{ transform:scale(.2); filter:blur(.6px); }
  100%{ transform:scale(.17); filter:blur(1.4px) contrast(.75); }
}
/* the case-back it has to fit inside */
.xp-shrink::after{
  content:''; position:absolute; width:74px; height:98px; border:1px solid var(--brass);
  border-radius:4px; opacity:0; animation:xp-fade 1.4s ease 7.4s forwards;
}

/* a name put up and then taken away again */
.xp-reject{
  display:inline-block; position:relative; margin:0 18px;
  font-family:'Cormorant Garamond',serif; font-size:32px; color:var(--ink);
  opacity:0; animation:xp-rise 1s ease forwards, xp-reject-dim 1.4s ease forwards;
}
@keyframes xp-reject-dim{ to{ opacity:.34; } }
.xp-reject::after{
  content:''; position:absolute; left:-4px; right:-4px; top:54%; height:1px;
  background:var(--brass); transform:scaleX(0); transform-origin:left center;
  animation:xp-reject-line .5s ease forwards; animation-delay:inherit;
}
@keyframes xp-reject-line{ to{ transform:scaleX(1); } }

/* the empty plate in scene 3 */
.xp-blank{
  width:200px; height:264px; margin:30px auto; border:1px solid var(--line);
  border-radius:5px; background:linear-gradient(145deg, rgba(236,229,216,.05), transparent 60%);
  opacity:0; animation:xp-rise 1.6s ease forwards;
}

@media (prefers-reduced-motion: reduce){
  .xp-photo.drift img, .xp-shrink .xp-photo, .xp-photo.zoomin img{ animation:none !important; }
}

/* portrait variants */
.xp-canvas.portrait .xp-shrink{ width:360px; height:514px; }
.xp-canvas.portrait .xp-shrink .xp-photo{ width:360px; height:514px; }
.xp-canvas.portrait .xpF-split .pane-art .xp-photo.frame{ width:460px !important; height:614px !important; }
.xp-canvas.portrait .xp-reject{ font-size:27px; margin:0 12px; }
.xp-canvas.portrait .xp-picks .slot{ width:246px; }

/* --------------------------------------------------------------------------
   18. Full-bleed photographic scenes
   A photograph that fills the stage, with the words laid over it — used where
   the picture IS the point rather than an illustration beside the point.
   -------------------------------------------------------------------------- */
/* .xp-frame is already position:absolute with inset:0 — re-declaring position
   here would make it static-size and collapse the whole scene to nothing. */
.xpF-full{ overflow:hidden; }
.xp-photo.bleed{
  position:absolute; inset:0; width:100%; height:100%;
  -webkit-mask-image:none; mask-image:none;
}
.xp-photo.bleed img{ width:100%; height:100%; object-fit:cover;
  animation:xp-bleedpan 26s ease-in-out infinite; }
@keyframes xp-bleedpan{
  0%,100%{ transform:scale(1.06) translate(0,0); }
  50%{ transform:scale(1.14) translate(-1.5%,-1%); }
}
/* the words need a ground to sit on, whatever the photograph is doing */
.xp-scrim{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(to top, rgba(8,10,13,.94) 0%, rgba(8,10,13,.82) 34%,
             rgba(8,10,13,.42) 62%, rgba(8,10,13,.28) 100%);
}
.xpF-full .xp-over{
  position:absolute; left:0; right:0; bottom:88px; z-index:3;
  padding:0 150px; text-align:center;
}
.xpF-full .xp-over > *{ margin-bottom:24px; }
.xpF-full .xp-over > *:last-child{ margin-bottom:0; }

/* two pictures side by side, arriving one after the other */
.xp-stack{ display:flex; flex-direction:column; align-items:center; }
.xp-pair{ display:flex; align-items:flex-end; justify-content:center; gap:34px; }
.xp-photo.rise{ opacity:0; animation:xp-rise 1.6s cubic-bezier(.2,.7,.25,1) .6s forwards; }
.xp-photo.rise.two{ animation-delay:1.3s; }

.xp-canvas.portrait .xpF-full .xp-over{ padding:0 60px; bottom:120px; }
.xp-canvas.portrait .xp-pair{ flex-direction:column; align-items:center; gap:22px; }
.xp-canvas.portrait .xp-pair .xp-photo{ width:420px !important; }
.xp-canvas.portrait .xp-pair .xp-photo:first-child{ height:746px !important; }
.xp-canvas.portrait .xp-pair .xp-photo.two{ height:280px !important; }

@media (prefers-reduced-motion: reduce){ .xp-photo.bleed img{ animation:none !important; } }

/* --------------------------------------------------------------------------
   19. Offline render mode
   The overlay is the whole frame: no controls, no cursor, no vignette fighting
   the encoder. Used by tools/capture.mjs; never reached in the browser.
   -------------------------------------------------------------------------- */
.xp-overlay.xp-render{ opacity:1; transition:none; }
.xp-overlay.xp-render .xp-bar,
.xp-overlay.xp-render .xp-boot{ display:none !important; }
.xp-overlay.xp-render .xp-stage{ cursor:none; }

/* --------------------------------------------------------------------------
   20. Vertical reel layout
   The reel is a separate edit rendered at 1080x1920, so it gets its own
   composition: one picture filling the frame, the words banded across the
   lower third where a phone's thumb and the platform's UI are not.
   -------------------------------------------------------------------------- */
.xp-scrim.soft{
  background:linear-gradient(to top, rgba(8,10,13,.96) 0%, rgba(8,10,13,.9) 26%,
             rgba(8,10,13,.34) 52%, transparent 78%);
}
/* reel type: bigger, because this is watched at phone size with no zoom */
.xp-canvas.portrait .xpF-full .xp-over{ bottom:170px; padding:0 72px; }
.xp-canvas.portrait .xpF-full .xp-over .xp-say{ font-size:40px; line-height:1.38; }
.xp-canvas.portrait .xpF-full .xp-over .xp-say.sm{ font-size:34px; }
.xp-canvas.portrait .xpF-full .xp-over .xp-say.lg{ font-size:52px; line-height:1.28; }
.xp-canvas.portrait .xpF-full .xp-over .xp-cap{ font-size:19px; letter-spacing:.3em; }
.xp-canvas.portrait .xpF-full .xp-over .sig{ font-size:18px; }

/* In the vertical cut the photograph has to survive a bright phone screen and
   platform re-compression, so the scrim is pulled down into the lower third
   instead of washing the whole frame, and the stage vignette is eased off. */
.xp-canvas.portrait .xp-scrim{
  background:linear-gradient(to top, rgba(8,10,13,.97) 0%, rgba(8,10,13,.93) 18%,
             rgba(8,10,13,.62) 32%, rgba(8,10,13,.16) 48%, transparent 62%);
}
.xp-canvas.portrait .xp-scrim.soft{
  background:linear-gradient(to top, rgba(8,10,13,.97) 0%, rgba(8,10,13,.9) 16%,
             rgba(8,10,13,.42) 30%, transparent 50%);
}
.xp-overlay.xp-render::after{
  background:radial-gradient(135% 100% at 50% 45%, transparent 62%, rgba(0,0,0,.34) 100%);
}

/* --------------------------------------------------------------------------
   21. My Baby — components this story needs
   -------------------------------------------------------------------------- */
/* the watch held whole, then a slow push onto the engraved letter. Kept to
   1.4x: the source is 1254px and a harder crop would be enlarging pixels. */
.xpF-split .pane-art .xp-shot.xp-toK{ width:470px; height:620px; }
.xp-shot.xp-toK img{ animation:xp-toK 6.5s cubic-bezier(.45,.05,.25,1) 7.6s forwards; }
@keyframes xp-toK{
  from{ transform:translate(-50%,-50%) translateY(var(--shift)) scale(1); }
  to{   transform:translate(-50%,-50%) translateY(1.2%) scale(1.4); }
}
/* the Atmos was photographed on white. Left as it is, that is a lightbox on
   a dark stage; so it is held as a print and its white pulled down to the
   warm paper tone the site's own ink uses. The push is small because the
   clock nearly fills the frame. */
.xp-photo.atmos img{ filter:sepia(.28) brightness(.84) contrast(1.04);
  animation:xp-atmos 9s ease-out forwards; }
@keyframes xp-atmos{ from{ transform:scale(1); } to{ transform:scale(1.045); } }

/* one watch becoming twenty */
.xp-count{
  height:180px; overflow:hidden; margin:24px auto 12px;
  font-family:'Cormorant Garamond',serif; font-size:140px; line-height:180px;
  color:var(--brass-bright);
}
.xp-count .reel{ animation:xp-count 4.6s steps(19, end) forwards; }
.xp-count .reel b{ display:block; height:180px; font-weight:400; }
@keyframes xp-count{ to{ transform:translateY(-95%); } }
.xp-marks{ display:flex; justify-content:center; align-items:flex-end; gap:16px; height:54px; }
.xp-marks i{
  display:block; width:3px; height:54px; background:var(--brass); opacity:.7;
  transform:scaleY(0); transform-origin:bottom; animation:xp-tally .4s ease-out forwards;
}
.xp-marks i.first{ background:var(--brass-bright); opacity:1; width:4px; }

/* the watch again, small, above the last words */
.xpF-end .xp-shot.xp-keep{ width:190px; height:251px; margin:0 auto 26px;
  opacity:0; animation:xp-fade 2s ease .2s forwards; }

.xp-canvas.portrait .xpF-split .pane-art .xp-shot.xp-toK{ width:580px; height:765px; }
.xp-canvas.portrait .xpF-split .pane-art .xp-photo.frame.wide{ width:780px !important; height:586px !important; }
.xp-canvas.portrait .xpF-split .pane-art .xp-photo.frame.atmos{ width:500px !important; height:750px !important; }
.xp-canvas.portrait .xp-marks{ gap:12px; }
.xp-canvas.portrait .xpF-end .xp-shot.xp-keep{ width:230px; height:304px; }

@media (prefers-reduced-motion: reduce){
  .xp-shot.xp-toK img, .xp-photo.atmos img{ animation:none !important; }
  .xp-count .reel{ animation:none !important; transform:translateY(-95%); }
}

/* --------------------------------------------------------------------------
   22. The Reverso of Belief — line work
   Abstract on purpose: a crossing, a correspondence, a halo, a sunburst. None
   of it depicts anything; it only moves the way the sentence does.
   -------------------------------------------------------------------------- */
.xpF-title h1.xp-h1long{ font-size:86px; }
.xp-canvas.portrait .xpF-title h1.xp-h1long{ font-size:54px; }

/* two rings, drawn one after the other */
.xp-rings{ width:200px; height:110px; display:block; margin:0 auto 34px; overflow:visible; }
.xp-rings circle{
  fill:none; stroke:var(--brass); stroke-width:1; stroke-dasharray:264; stroke-dashoffset:264;
  animation:xp-draw 2.4s cubic-bezier(.3,.7,.3,1) .3s forwards;
}

/* a crossing: a line drawn between two named points, and something small
   making the journey along it */
.xp-route{ position:relative; width:900px; height:112px; margin:40px auto 34px; }
.xp-route .ln{
  position:absolute; left:0; right:0; top:44px; height:1px; background:var(--brass);
  transform:scaleX(0); transform-origin:right center;
  animation:xp-routeline 4.4s cubic-bezier(.45,0,.2,1) 2.4s forwards;
}
@keyframes xp-routeline{ to{ transform:scaleX(1); } }
.xp-route .pt{
  position:absolute; top:38px; width:13px; height:13px; border-radius:50%;
  border:1px solid var(--brass-bright); background:#0b0e12; opacity:0;
  animation:xp-fade .9s ease forwards;
}
.xp-route .pt.a{ right:-6px; animation-delay:1.8s; }
.xp-route .pt.b{ left:-6px;  animation-delay:6.6s; }
.xp-route .dot{
  position:absolute; top:40px; right:-4px; width:9px; height:9px; border-radius:50%;
  background:var(--brass-bright); box-shadow:0 0 14px rgba(240,217,168,.7); opacity:0;
  animation:xp-sail 4.4s cubic-bezier(.45,0,.2,1) 2.4s forwards;
}
@keyframes xp-sail{ 0%{ right:-4px; opacity:1; } 100%{ right:calc(100% - 5px); opacity:1; } }
.xp-route .lb{
  position:absolute; top:70px; font-family:'Cinzel',serif; font-size:13px; letter-spacing:.3em;
  text-transform:uppercase; color:#f0d9a8; opacity:0; animation:xp-fade 1.2s ease forwards;
}
.xp-route .lb.a{ right:-6px; animation-delay:1.8s; }
.xp-route .lb.b{ left:-6px;  animation-delay:6.6s; }
.xp-route .yr{
  position:absolute; right:-6px; top:-8px; font-family:'Cormorant Garamond',serif; font-size:30px;
  color:var(--brass-bright); opacity:0; animation:xp-fade 1.2s ease 2.0s forwards;
}
/* the correspondence: a dashed line, and a letter that goes and comes back,
   slowly, which is the whole point */
.xp-route.post{ margin-top:30px; }
.xp-route.post .ln{
  background:repeating-linear-gradient(to right, var(--brass) 0 10px, transparent 10px 20px);
  transform-origin:left center; animation:xp-routeline 2.2s ease 4.4s forwards;
}
.xp-route.post .pt.a, .xp-route.post .lb.a{ animation-delay:5.6s; }
.xp-route.post .pt.b, .xp-route.post .lb.b{ animation-delay:4.2s; }
.xp-route.post .dot{ right:auto; left:-4px; animation:xp-post 7.4s ease-in-out 5.2s infinite; }
@keyframes xp-post{
  0%{ left:-4px; opacity:1; } 46%,54%{ left:calc(100% - 5px); opacity:1; } 100%{ left:-4px; opacity:1; }
}

/* the blank reverse, waiting */
.xp-plate-empty{
  width:120px; height:160px; margin:0 auto 34px; border:1px solid var(--brass); border-radius:4px;
  position:relative; opacity:0; animation:xp-fade 1.6s ease .2s forwards;
}
.xp-plate-empty i{
  position:absolute; inset:14px; border:1px solid var(--line); border-radius:2px;
  animation:xp-wait 3.2s ease-in-out infinite;
}
@keyframes xp-wait{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }

/* haloes, widening behind the words */
.xp-haloes{ position:absolute; left:50%; top:50%; width:0; height:0; }
.xp-haloes i{
  position:absolute; left:-190px; top:-190px; width:380px; height:380px; border-radius:50%;
  border:1px solid var(--brass-bright); opacity:0;
  animation:xp-haloring 6s ease-out infinite;
}
@keyframes xp-haloring{
  0%{ transform:scale(.35); opacity:0; } 18%{ opacity:.34; } 100%{ transform:scale(2.7); opacity:0; }
}
.xp-w{ opacity:0; animation:xp-fade 1s ease forwards; color:var(--ink); }

/* the push onto the portrait */
.xp-photo.xp-toBapa img{ animation:xp-toBapa 9s cubic-bezier(.45,.05,.25,1) 4.6s forwards; }
@keyframes xp-toBapa{
  from{ transform:scale(1); } to{ transform:scale(1.62) translate(1.5%, 3.5%); }
}

/* a photograph as one face of the turning case */
.xp-photo.xp-plate{
  width:100%; height:100%; -webkit-mask-image:none; mask-image:none;
  border:1px solid var(--line); box-shadow:0 26px 64px rgba(0,0,0,.7);
}
/* the sunburst: the dial's own Art Deco rays, carried out past the frame */
.xp-rayswrap{ position:relative; }
.xp-rayswrap .xp-swivel{ z-index:1; }
.xp-rays{ position:absolute; left:50%; top:50%; width:0; height:0; }
.xp-rays i{
  position:absolute; left:0; bottom:0; width:1px; height:335px; transform-origin:bottom center;
  background:linear-gradient(to top, transparent 0 66%, var(--brass) 100%); opacity:.6;
  transform:rotate(var(--a)) scaleY(0);
  animation:xp-ray 1.5s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes xp-ray{ to{ transform:rotate(var(--a)) scaleY(1); } }

/* three things one watch carries, laid down one over the next */
.xp-layer{
  position:relative; display:grid; grid-template-columns:190px 1fr; gap:30px; align-items:baseline;
  width:860px; margin:0 auto; padding:20px 0; text-align:left;
  opacity:0; animation:xp-rise 1.4s cubic-bezier(.2,.7,.25,1) forwards;
}
.xp-col > .xp-layer{ margin-bottom:0; }
.xp-layer::before{
  content:''; position:absolute; left:0; top:0; height:1px; width:100%; background:var(--brass);
  transform:scaleX(0); transform-origin:left center;
  animation:xp-routeline 1.8s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:inherit;
}
.xp-layer b{
  font-family:'Cinzel',serif; font-weight:400; font-size:14px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--brass-bright);
}
.xp-layer span{ font-family:'Cormorant Garamond',serif; font-size:28px; line-height:1.35; color:var(--ink); }

.xp-canvas.portrait .xp-route{ width:700px; }
.xp-canvas.portrait .xp-layer{ width:780px; grid-template-columns:160px 1fr; gap:20px; }
.xp-canvas.portrait .xp-layer span{ font-size:25px; }
.xp-canvas.portrait .xp-rays i{ height:430px; }

@media (prefers-reduced-motion: reduce){
  .xp-photo.xp-toBapa img, .xp-haloes i, .xp-plate-empty i{ animation:none !important; }
}

/* --------------------------------------------------------------------------
   23. Wisdom — line work
   -------------------------------------------------------------------------- */
/* a pair of dividers opening: two lines from one point */
.xp-compass{ position:relative; width:220px; height:150px; margin:0 auto 34px; }
.xp-compass::before{
  content:''; position:absolute; left:50%; top:4px; width:9px; height:9px; margin-left:-5px;
  border-radius:50%; background:var(--brass-bright); opacity:0; animation:xp-fade 1s ease .2s forwards;
}
.xp-compass i{
  position:absolute; left:50%; top:10px; width:1px; height:136px; background:var(--brass-bright);
  transform-origin:top center; transform:scaleY(0);
  animation:xp-legL 3s cubic-bezier(.3,.7,.25,1) .4s forwards;
}
.xp-compass i.r{ animation-name:xp-legR; }
@keyframes xp-legL{ 0%{ transform:rotate(0) scaleY(0); } 35%{ transform:rotate(0) scaleY(1); } 100%{ transform:rotate(30deg) scaleY(1); } }
@keyframes xp-legR{ 0%{ transform:rotate(0) scaleY(0); } 35%{ transform:rotate(0) scaleY(1); } 100%{ transform:rotate(-30deg) scaleY(1); } }

/* a stepped tower, raised a line at a time from the middle out */
.xp-tower{ display:flex; justify-content:center; align-items:flex-end; gap:10px; height:168px; margin:0 auto 38px; }
.xp-tower i{
  display:block; width:2px; background:linear-gradient(to top, var(--brass), var(--brass-bright));
  transform:scaleY(0); transform-origin:bottom; animation:xp-routeY 1.3s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes xp-routeY{ to{ transform:scaleY(1); } }

/* a rising fan — the Deco sunburst */
.xp-fan{ position:relative; width:0; height:130px; margin:0 auto 34px; }
.xp-fan i{
  position:absolute; left:0; bottom:0; width:1px; height:130px; transform-origin:bottom center;
  background:linear-gradient(to top, transparent 0 22%, var(--brass-bright) 100%); opacity:.8;
  transform:rotate(var(--a)) scaleY(0); animation:xp-ray 1.4s cubic-bezier(.2,.8,.2,1) forwards;
}

/* the inscription, set as it is cut: three lines, with the dividers' two
   legs passing down through them */
.xp-inscr{ position:relative; margin:30px auto 44px; padding:26px 0 6px; }
.xp-inscr p{
  position:relative; z-index:1; margin:0 0 14px; font-family:'Cinzel',serif; font-size:44px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brass-bright); opacity:0;
  animation:xp-rise 1.6s cubic-bezier(.2,.7,.25,1) forwards;
}
.xp-inscr p small{ font-size:.5em; letter-spacing:.2em; vertical-align:middle; }
.xp-inscr i{
  position:absolute; left:50%; top:0; width:1px; height:300px; background:var(--brass); opacity:.4;
  transform-origin:top center; transform:scaleY(0);
  animation:xp-legWL 2.8s cubic-bezier(.3,.7,.25,1) .5s forwards;
}
.xp-inscr i.r{ animation-name:xp-legWR; }
@keyframes xp-legWL{ 0%{ transform:rotate(0) scaleY(0); } 40%{ transform:rotate(0) scaleY(1); } 100%{ transform:rotate(58deg) scaleY(1.5); } }
@keyframes xp-legWR{ 0%{ transform:rotate(0) scaleY(0); } 40%{ transform:rotate(0) scaleY(1); } 100%{ transform:rotate(-58deg) scaleY(1.5); } }

/* the relief read from the crown down to the inscription */
.xp-photo.xp-panup img{ animation:xp-panup 13s cubic-bezier(.45,.05,.3,1) 1s both; }
@keyframes xp-panup{
  from{ transform:scale(1.45) translateY(13%); } to{ transform:scale(1.45) translateY(-13%); }
}
/* the push onto the engraving */
.xp-photo.xp-toWis img{ animation:xp-toWis 11s cubic-bezier(.45,.05,.25,1) 3s forwards; }
@keyframes xp-toWis{ from{ transform:scale(1); } to{ transform:scale(1.2); } }

/* a vertical journey: from the street door to the top of the same building */
.xp-vroute{ position:relative; width:420px; height:460px; }
.xp-vroute .ln{
  position:absolute; left:60px; top:24px; bottom:24px; width:1px; background:var(--brass);
  transform:scaleY(0); transform-origin:bottom center;
  animation:xp-routeY 4.2s cubic-bezier(.45,0,.2,1) 3.4s forwards;
}
.xp-vroute .pt{
  position:absolute; left:54px; width:13px; height:13px; border-radius:50%;
  border:1px solid var(--brass-bright); background:#0b0e12; opacity:0; animation:xp-fade .9s ease forwards;
}
.xp-vroute .pt.a{ bottom:18px; animation-delay:.8s; }
.xp-vroute .pt.b{ top:18px; animation-delay:7.4s; }
.xp-vroute .dot{
  position:absolute; left:56px; bottom:20px; width:9px; height:9px; border-radius:50%;
  background:var(--brass-bright); box-shadow:0 0 14px rgba(240,217,168,.7); opacity:0;
  animation:xp-climb 4.2s cubic-bezier(.45,0,.2,1) 3.4s forwards;
}
@keyframes xp-climb{ 0%{ bottom:20px; opacity:1; } 100%{ bottom:calc(100% - 29px); opacity:1; } }
.xp-vroute .lb{
  position:absolute; left:92px; font-family:'Cinzel',serif; font-size:13px; letter-spacing:.26em;
  text-transform:uppercase; color:#f0d9a8; opacity:0; animation:xp-fade 1.2s ease forwards; white-space:nowrap;
}
.xp-vroute .lb.a{ bottom:16px; animation-delay:.8s; }
.xp-vroute .lb.b{ top:16px; animation-delay:7.4s; }

.xp-canvas.portrait .xp-inscr p{ font-size:30px; letter-spacing:.1em; }
.xp-canvas.portrait .xp-vroute{ height:380px; }

@media (prefers-reduced-motion: reduce){
  .xp-photo.xp-panup img, .xp-photo.xp-toWis img{ animation:none !important; }
}

/* --------------------------------------------------------------------------
   24. George Mason Flower — line work
   -------------------------------------------------------------------------- */
/* a case in outline, turning over to show there is nothing on the back yet */
.xp-flipcase{ width:120px; height:160px; margin:0 auto 36px; perspective:900px; }
.xp-flipcase .in{
  position:relative; width:100%; height:100%; border:1px solid var(--brass-bright); border-radius:4px;
  border-top-width:5px; border-bottom-width:5px; border-top-style:double; border-bottom-style:double;
  animation:xp-flipcase 5.5s cubic-bezier(.62,.03,.26,1) .6s infinite;
}
.xp-flipcase .in i{
  position:absolute; inset:14px; border:1px solid var(--line); border-radius:2px;
  animation:xp-wait 2.75s ease-in-out infinite;
}
@keyframes xp-flipcase{ 0%,18%{ transform:rotateY(0); } 50%,68%{ transform:rotateY(180deg); } 100%{ transform:rotateY(360deg); } }

/* the two colours, as two lines */
.xp-duo{ width:620px; margin:0 auto 44px; }
.xp-duo i{
  display:block; height:3px; margin:0 auto 16px; transform:scaleX(0);
  animation:xp-routeline 2.2s cubic-bezier(.2,.8,.2,1) .4s forwards;
}
.xp-duo i.g{ background:#3f8a5c; }
.xp-duo i.y{ background:var(--brass-bright); animation-delay:1.1s; }

/* a photograph sitting over the sunburst */
.xp-photo.xp-onrays{ position:relative; z-index:1; }
/* the push onto the flower */
.xp-photo.xp-toFlower img{ animation:xp-toFlower 10s cubic-bezier(.45,.05,.25,1) 3s forwards; }
@keyframes xp-toFlower{ from{ transform:scale(1); } to{ transform:scale(1.55) translateY(-1%); } }

/* a single hand, going round */
.xp-clock{
  position:relative; width:110px; height:110px; margin:0 auto 36px; border:1px solid var(--brass);
  border-radius:50%; opacity:0; animation:xp-fade 1.4s ease .2s forwards;
}
.xp-clock i{
  position:absolute; left:50%; bottom:50%; width:1px; height:44px; background:var(--brass-bright);
  transform-origin:bottom center; animation:xp-hand 9s linear infinite;
}
@keyframes xp-hand{ to{ transform:rotate(360deg); } }

.xp-canvas.portrait .xp-duo{ width:520px; }
/* the building photograph is a small file; it is never shown larger than it can bear */
.xp-canvas.portrait .xpF-split .pane-art .xp-photo.frame.xp-small{ width:480px !important; height:320px !important; }

@media (prefers-reduced-motion: reduce){
  .xp-photo.xp-toFlower img, .xp-flipcase .in, .xp-clock i{ animation:none !important; }
}

/* --------------------------------------------------------------------------
   25. The Gibson Guitar Reverso — line work
   -------------------------------------------------------------------------- */
/* three case sizes in outline; the one he likes least steps back */
.xp-sizes{ display:flex; justify-content:center; align-items:flex-end; gap:54px; height:210px; margin:0 auto 34px; }
.xp-sizes .c{ opacity:0; animation:xp-rise 1.2s cubic-bezier(.2,.7,.25,1) forwards; }
.xp-sizes .c.no{ animation:xp-rise 1.2s cubic-bezier(.2,.7,.25,1) forwards, xp-stepback 1.6s ease forwards; }
@keyframes xp-stepback{ to{ opacity:.25; } }
.xp-sizes .c i{
  display:block; margin:0 auto 12px; border:1px solid var(--brass-bright); border-radius:4px;
  border-top:5px double var(--brass-bright); border-bottom:5px double var(--brass-bright);
}
.xp-sizes .c b{
  display:block; font-family:'Cinzel',serif; font-weight:400; font-size:13px; letter-spacing:.24em; color:#f0d9a8;
}

/* six strings: drawn, then struck */
.xp-strings{ width:100%; margin:0 auto 46px; }
.xp-strings span{
  display:block; height:17px; transform:scaleX(0);
  animation:xp-routeline 1.6s cubic-bezier(.2,.8,.2,1) forwards;
}
.xp-strings span i{
  display:block; position:relative; top:8px; background:linear-gradient(to right, transparent, var(--brass-bright) 12%, var(--brass-bright) 88%, transparent);
  animation:xp-pluck 1.1s ease-out, xp-pluck2 1.1s ease-out;
}
@keyframes xp-pluck{
  0%{ transform:translateY(0); filter:blur(0); } 8%{ transform:translateY(-5px); filter:blur(1.2px); }
  20%{ transform:translateY(4px); } 32%{ transform:translateY(-3px); } 46%{ transform:translateY(2.4px); filter:blur(.8px); }
  60%{ transform:translateY(-1.6px); } 76%{ transform:translateY(1px); } 100%{ transform:translateY(0); filter:blur(0); }
}
@keyframes xp-pluck2{
  0%{ transform:translateY(0); filter:blur(0); } 8%{ transform:translateY(5px); filter:blur(1.2px); }
  20%{ transform:translateY(-4px); } 32%{ transform:translateY(3px); } 46%{ transform:translateY(-2.4px); filter:blur(.8px); }
  60%{ transform:translateY(1.6px); } 76%{ transform:translateY(-1px); } 100%{ transform:translateY(0); filter:blur(0); }
}

/* one year, two guitars: a single point on a line, named from above and below */
.xp-year{ position:relative; width:760px; height:230px; margin:22px auto 26px; }
.xp-year .ln{
  position:absolute; left:0; right:0; top:114px; height:1px; background:var(--brass);
  transform:scaleX(0); animation:xp-routeline 2.4s cubic-bezier(.2,.8,.2,1) 1.2s forwards;
}
.xp-year .pt{
  position:absolute; left:50%; top:108px; width:13px; height:13px; margin-left:-7px; border-radius:50%;
  background:#c63a3a; box-shadow:0 0 16px rgba(198,58,58,.7); opacity:0; animation:xp-fade 1s ease 2.6s forwards;
}
.xp-year b{
  position:absolute; left:0; right:0; top:34px; text-align:center; font-family:'Cormorant Garamond',serif;
  font-weight:400; font-size:68px; line-height:1; color:var(--brass-bright); opacity:0; animation:xp-rise 1.4s ease 2.4s forwards;
}
.xp-year span{
  position:absolute; left:0; right:0; text-align:center; font-family:'Cinzel',serif; font-size:13px;
  letter-spacing:.26em; text-transform:uppercase; color:#f0d9a8; opacity:0; animation:xp-fade 1.2s ease forwards;
}
.xp-year .up{ top:0; animation-delay:3.2s; }
.xp-year .dn{ top:146px; animation-delay:4.2s; color:#e08a80; }

/* the push onto the guitar */
.xp-photo.xp-toGtr img{ animation:xp-toGtr 9s cubic-bezier(.45,.05,.25,1) 1.5s forwards; }
@keyframes xp-toGtr{ from{ transform:scale(1); } to{ transform:scale(1.6) translate(-4.7%, -.7%); } }

.xp-canvas.portrait .xp-year{ width:700px; }
.xp-canvas.portrait .xp-sizes{ gap:40px; }

@media (prefers-reduced-motion: reduce){
  .xp-photo.xp-toGtr img, .xp-strings span i{ animation:none !important; }
}

/* --------------------------------------------------------------------------
   26. A Portrait from the Family — line work
   -------------------------------------------------------------------------- */
/* four names and the three things that join them */
.xp-tree{ position:relative; width:760px; height:262px; margin:0 auto 34px; }
.xp-tree b{
  position:absolute; width:240px; text-align:center; font-family:'Cinzel',serif; font-weight:400;
  font-size:15px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass-bright);
  opacity:0; animation:xp-rise 1.3s cubic-bezier(.2,.7,.25,1) forwards;
}
.xp-tree b small{
  display:block; margin-top:7px; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:19px;
  letter-spacing:0; text-transform:none; color:#ddd6c7;
}
.xp-tree .k{ left:0; top:0; animation-delay:.5s; }
.xp-tree .l{ right:0; top:0; animation-delay:1.1s; }
.xp-tree .f{ left:0; bottom:0; animation-delay:7.4s; }
.xp-tree .j{ right:0; bottom:0; animation-delay:7.9s; }
.xp-tree i{ position:absolute; background:var(--brass); transform:scaleX(0); animation:xp-routeline 1.8s cubic-bezier(.2,.8,.2,1) forwards; }
.xp-tree .h1{ left:250px; right:250px; top:12px; height:1px; animation-delay:1.8s; }
.xp-tree .h2{ left:250px; right:250px; bottom:38px; height:1px; animation-delay:8.6s; }
.xp-tree .v1, .xp-tree .v2{ top:62px; height:118px; width:1px; transform:scaleY(0); transform-origin:top center;
  animation-name:xp-routeY; animation-delay:6.4s; }
.xp-tree .v1{ left:120px; } .xp-tree .v2{ right:120px; }
.xp-tree span{
  position:absolute; left:250px; right:250px; text-align:center; font-family:'Jost',sans-serif; font-size:12px;
  letter-spacing:.24em; text-transform:uppercase; color:#f0d9a8; opacity:0; animation:xp-fade 1.2s ease forwards;
}
.xp-tree .t1{ top:24px; animation-delay:2.6s; }
.xp-tree .t2{ bottom:14px; animation-delay:9.4s; }

/* the drawing, down to the line the artist wrote beneath it */
.xp-photo.xp-toInscr img{ animation:xp-toInscr 7s cubic-bezier(.45,.05,.25,1) 1.2s forwards; }
@keyframes xp-toInscr{ from{ transform:scale(1); } to{ transform:scale(2.1) translate(-8%, -25%); } }

/* a frame closing on the detail; everything outside it steps back */
.xp-pick{
  position:absolute; left:56%; top:15%; width:34%; height:58%; border:1px solid var(--brass-bright);
  box-shadow:0 0 0 1200px rgba(8,10,13,.62); opacity:0; transform:scale(1.5);
  animation:xp-pick 2.4s cubic-bezier(.2,.8,.2,1) 2.6s forwards;
}
@keyframes xp-pick{ to{ opacity:1; transform:scale(1); } }

/* three months, counted off */
.xp-months{ display:flex; justify-content:flex-end; gap:12px; margin:6px 0 26px; }
.xp-months i{
  display:block; width:110px; height:2px; background:var(--brass-bright); transform:scaleX(0); transform-origin:left center;
  animation:xp-routeline 1.1s ease forwards;
}
.xp-months i:nth-child(1){ animation-delay:6.4s; }
.xp-months i:nth-child(2){ animation-delay:7.5s; }
.xp-months i:nth-child(3){ animation-delay:8.6s; }

/* the wrist photographs are small files, so the turning watch is held small */
.xpF-split .pane-art .xp-swivel.xp-sw-small{ width:340px; height:470px; }
.xp-canvas.portrait .xpF-split .pane-art .xp-swivel.xp-sw-small{ width:430px; height:594px; }
.xp-canvas.portrait .xpF-split .pane-art .xp-photo.frame.xp-sk{ width:780px !important; height:650px !important; }
.xp-canvas.portrait .xpF-split .pane-art .xp-photo.frame.xp-small2{ width:340px !important; height:536px !important; }
.xp-canvas.portrait .xp-months{ justify-content:flex-start; }
.xp-canvas.portrait .xp-tree{ transform:scale(.98); }

@media (prefers-reduced-motion: reduce){
  .xp-photo.xp-toInscr img{ animation:none !important; }
}

/* --------------------------------------------------------------------------
   27. My Daughter's Reverso — line work
   -------------------------------------------------------------------------- */
/* a week: eight marks, the first and the last standing taller */
.xp-week{
  position:relative; display:flex; justify-content:space-between; align-items:flex-end;
  width:620px; height:132px; padding-bottom:50px; margin:0 auto 34px;
}
.xp-week i{
  display:block; width:1px; height:42px; background:var(--brass); transform:scaleY(0); transform-origin:bottom;
  animation:xp-routeY .7s cubic-bezier(.2,.8,.2,1) forwards;
}
.xp-week i.end{ width:2px; height:78px; background:var(--brass-bright); }
.xp-week span{
  position:absolute; bottom:0; font-family:'Cinzel',serif; font-size:13px; letter-spacing:.24em;
  text-transform:uppercase; color:#f0d9a8; white-space:nowrap; opacity:0; animation:xp-fade 1.2s ease forwards;
}
.xp-week .a{ left:0; transform:translateX(-22%); animation-delay:1.2s; }
.xp-week .b{ right:0; transform:translateX(22%); animation-delay:4.7s; }

/* the correspondence line, started sooner */
.xp-route.post.early .ln{ animation-delay:1.6s; }
.xp-route.post.early .pt.b, .xp-route.post.early .lb.b{ animation-delay:1.2s; }
.xp-route.post.early .pt.a, .xp-route.post.early .lb.a{ animation-delay:2.8s; }
.xp-route.post.early .dot{ animation-delay:2.4s; }

/* a handing-on: left to right, once */
.xp-route.ltr{ margin-top:0; }
.xp-route.ltr .ln{ transform-origin:left center; animation-delay:1.4s; animation-duration:4.6s; }
.xp-route.ltr .dot{ right:auto; left:-4px; animation:xp-sailR 4.6s cubic-bezier(.45,0,.2,1) 1.4s forwards; }
@keyframes xp-sailR{ 0%{ left:-4px; opacity:1; } 100%{ left:calc(100% - 5px); opacity:1; } }
.xp-route.ltr .pt.b, .xp-route.ltr .lb.b{ animation-delay:.6s; }
.xp-route.ltr .pt.a, .xp-route.ltr .lb.a{ animation-delay:5.8s; }

.xp-canvas.portrait .xp-week{ width:560px; }
.xp-canvas.portrait .xpF-split .pane-art .xp-photo.frame.xp-small3{ width:430px !important; height:573px !important; }

/* --------------------------------------------------------------------------
   28. My Son's Reverso — a timeline added to scene by scene
   Eight year-marks, 2017 to 2024. Each stage holds what earlier scenes drew
   and animates only what is new.
   -------------------------------------------------------------------------- */
.xp-tl{ position:relative; width:860px; height:150px; margin:0 auto 40px; }
.xp-tl .ax{ position:absolute; left:0; right:0; top:60px; height:1px; background:var(--line); }
.xp-tl .tk{ position:absolute; top:54px; width:1px; height:13px; background:var(--brass); opacity:.7; }
.xp-tl .pg, .xp-tl .pg2{ position:absolute; top:59px; height:3px; transform-origin:left center; }
.xp-tl .pg{ left:0; width:85.714%; background:var(--brass-bright); transform:scaleX(0); }
.xp-tl .pg2{ left:85.714%; width:14.286%; background:#e08a80; transform:scaleX(0); }
.xp-tl .y{
  position:absolute; top:0; transform:translateX(-50%); font-family:'Cormorant Garamond',serif; font-weight:400;
  font-size:30px; line-height:1; color:var(--brass-bright); opacity:0;
}
.xp-tl .d{
  position:absolute; top:54px; width:13px; height:13px; margin-left:-7px; border-radius:50%;
  border:1px solid var(--brass-bright); background:#0b0e12; opacity:0;
}
.xp-tl .n{
  position:absolute; top:86px; font-family:'Cinzel',serif; font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:#f0d9a8; white-space:nowrap; opacity:0;
}
.xp-tl .y17, .xp-tl .d17{ left:0; }          .xp-tl .n17{ left:-6px; }
.xp-tl .y23, .xp-tl .d23{ left:85.714%; }    .xp-tl .n23{ right:14.286%; margin-right:-6px; }
.xp-tl .y24, .xp-tl .d24{ left:100%; }       .xp-tl .n24{ right:-6px; top:116px; color:#e08a80; }
.xp-tl .d24{ border-color:#e08a80; }

/* stage 1 — the axis is drawn and 2017 is marked */
.xp-tl.s1 .ax{ transform:scaleX(0); transform-origin:left center; animation:xp-routeline 2s cubic-bezier(.2,.8,.2,1) .3s forwards; }
.xp-tl.s1 .tk{ opacity:0; animation:xp-tick .8s ease forwards; }
@keyframes xp-tick{ to{ opacity:.7; } }
.xp-tl.s1 .y17, .xp-tl.s1 .d17, .xp-tl.s1 .n17{ animation:xp-fade 1.2s ease 2.2s forwards; }
/* stage 2 — the years run on to 2023 */
.xp-tl.s2 .y17, .xp-tl.s2 .d17, .xp-tl.s2 .n17, .xp-tl.s3 .y17, .xp-tl.s3 .d17, .xp-tl.s3 .n17{ opacity:1; }
.xp-tl.s2 .pg{ animation:xp-routeline 3.2s cubic-bezier(.45,0,.2,1) .6s forwards; }
.xp-tl.s2 .y23, .xp-tl.s2 .d23, .xp-tl.s2 .n23{ animation:xp-fade 1.2s ease 3.6s forwards; }
/* stage 3 — and one year more */
.xp-tl.s3 .pg{ transform:scaleX(1); }
.xp-tl.s3 .y23, .xp-tl.s3 .d23, .xp-tl.s3 .n23{ opacity:1; }
.xp-tl.s3 .pg2{ animation:xp-routeline 1.8s cubic-bezier(.45,0,.2,1) .8s forwards; }
.xp-tl.s3 .y24, .xp-tl.s3 .d24, .xp-tl.s3 .n24{ animation:xp-fade 1.2s ease 2.4s forwards; }

/* the pair that might have been: one plate filled, one only outlined */
.xp-pairc{ display:flex; justify-content:center; gap:70px; margin:0 auto 36px; }
.xp-pairc .c{ opacity:0; animation:xp-rise 1.3s cubic-bezier(.2,.7,.25,1) .4s forwards; }
.xp-pairc .c.ghost{ animation-delay:1.3s; }
.xp-pairc .c i{
  display:block; width:112px; height:150px; margin:0 auto 14px; border:1px solid var(--brass-bright); border-radius:4px;
  background:linear-gradient(160deg, rgba(240,217,168,.22), rgba(240,217,168,.06));
}
.xp-pairc .c.ghost i{ border-style:dashed; background:none; animation:xp-wait 3s ease-in-out infinite; }
.xp-pairc .c b{
  display:block; font-family:'Cinzel',serif; font-weight:400; font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:#f0d9a8;
}
.xp-pairc .c.ghost b{ color:#b8b0a0; }

.xp-canvas.portrait .xp-tl{ width:680px; }
.xp-canvas.portrait .xp-pairc{ gap:44px; }

/* --------------------------------------------------------------------------
   29. The Aston Martin Reverso — line work
   -------------------------------------------------------------------------- */
/* two names and the sign between them */
.xp-x2{ display:flex; justify-content:center; align-items:center; gap:22px; margin:40px auto 30px; }
.xp-x2 b{
  font-family:'Cinzel',serif; font-weight:400; font-size:17px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--brass-bright); opacity:0; animation:xp-fade 1.4s ease 4.6s forwards;
}
.xp-x2 b:last-child{ animation-delay:5.2s; }
.xp-x2 i{ display:block; width:110px; height:1px; background:var(--brass); transform:scaleX(0); transform-origin:right center;
  animation:xp-routeline 1.6s cubic-bezier(.2,.8,.2,1) 3.8s forwards; }
.xp-x2 i.r{ transform-origin:left center; }
.xp-x2 em{ font-family:'Cormorant Garamond',serif; font-style:normal; font-size:34px; color:var(--ink); opacity:0;
  animation:xp-fade 1.2s ease 3.4s forwards; }

/* eight lines in two banks of four: a V8, the eighth in red */
.xp-v8{ position:relative; width:200px; height:74px; margin:0 auto 30px; }
.xp-v8 i{
  position:absolute; bottom:0; width:2px; height:66px; background:var(--brass-bright); transform-origin:bottom center;
  transform:rotate(var(--a)) scaleY(0); animation:xp-ray .7s cubic-bezier(.2,.8,.2,1) forwards;
}
.xp-v8 i.red{ background:#e2574c; box-shadow:0 0 12px rgba(226,87,76,.7); }

/* the push onto the 8 */
.xp-photo.xp-to8 img{ animation:xp-to8 6s cubic-bezier(.45,.05,.25,1) 3.4s forwards; }
@keyframes xp-to8{ from{ transform:scale(1); } to{ transform:scale(1.75) translate(12%, -4.5%); } }
.xp-photo.xp-toVan img{ animation:xp-toVan 9s cubic-bezier(.45,.05,.25,1) 1.5s forwards; }
@keyframes xp-toVan{ from{ transform:scale(1); } to{ transform:scale(1.5) translate(-4%, 1.5%); } }

/* speed, said quietly: five lines of different lengths */
.xp-speed{ width:560px; margin:0 auto 38px; }
.xp-speed i{
  display:block; height:1px; margin-bottom:11px; background:linear-gradient(to right, transparent, var(--brass-bright));
  transform:scaleX(0); transform-origin:left center; animation:xp-routeline 1.5s cubic-bezier(.2,.8,.2,1) forwards;
}
.xp-speed i:nth-child(1){ width:52%; margin-left:8%;  animation-delay:.2s; }
.xp-speed i:nth-child(2){ width:78%; margin-left:22%; animation-delay:.38s; }
.xp-speed i:nth-child(3){ width:100%;                 animation-delay:.3s; }
.xp-speed i:nth-child(4){ width:64%; margin-left:30%; animation-delay:.5s; }
.xp-speed i:nth-child(5){ width:44%; margin-left:14%; animation-delay:.62s; }

/* three hands, and one branch that goes nowhere */
.xp-chain{ position:relative; width:820px; height:176px; margin:0 auto 36px; }
.xp-chain .ax{ position:absolute; left:0; right:0; top:104px; height:1px; background:var(--line); }
.xp-chain .p1, .xp-chain .p2{ position:absolute; top:103px; height:3px; width:50%; background:var(--brass-bright);
  transform:scaleX(0); transform-origin:left center; }
.xp-chain .p1{ left:0;   animation:xp-routeline 2.4s cubic-bezier(.45,0,.2,1) 1.4s forwards; }
.xp-chain .p2{ left:50%; animation:xp-routeline 2.4s cubic-bezier(.45,0,.2,1) 10.4s forwards; }
.xp-chain .d{
  position:absolute; top:98px; width:13px; height:13px; margin-left:-7px; border-radius:50%;
  border:1px solid var(--brass-bright); background:#0b0e12; opacity:0; animation:xp-fade 1s ease forwards;
}
.xp-chain .d1{ left:0; animation-delay:.6s; } .xp-chain .d2{ left:50%; animation-delay:3.6s; }
.xp-chain .d3{ left:100%; animation-delay:12.6s; background:var(--brass-bright); }
.xp-chain .n{
  position:absolute; top:130px; font-family:'Cinzel',serif; font-size:13px; letter-spacing:.24em;
  text-transform:uppercase; color:#f0d9a8; white-space:nowrap; opacity:0; animation:xp-fade 1.2s ease forwards;
}
.xp-chain .n1{ left:-6px; animation-delay:.6s; }
.xp-chain .n2{ left:50%; transform:translateX(-50%); animation-delay:3.6s; }
.xp-chain .n3{ right:-6px; animation-delay:12.6s; color:var(--brass-bright); }
.xp-chain .br{
  position:absolute; left:50%; top:46px; height:52px; width:1px;
  background:repeating-linear-gradient(to top, var(--brass) 0 6px, transparent 6px 12px);
  transform:scaleY(0); transform-origin:bottom center; animation:xp-routeY 1.2s ease 5.0s forwards;
}
.xp-chain .wife{ position:absolute; left:0; right:0; top:0; text-align:center; }
.xp-chain .wife .xp-reject{ font-size:26px; font-style:italic; }

/* two circles that open */
.xp-eyes{ display:flex; justify-content:center; gap:48px; height:70px; align-items:center; margin:0 auto 30px; }
.xp-eyes i{
  display:block; width:40px; height:40px; border:1px solid var(--brass-bright); border-radius:50%; opacity:0;
  animation:xp-fade 1s ease .3s forwards, xp-widen 1.1s cubic-bezier(.3,1.6,.4,1) 5.4s forwards;
}
@keyframes xp-widen{ to{ transform:scale(1.5); } }

/* three straps as three lines */
.xp-straps{ width:560px; margin:0 auto 40px; }
.xp-straps > div{ opacity:0; animation:xp-rise 1.3s cubic-bezier(.2,.7,.25,1) forwards; margin-bottom:22px; }
.xp-straps i{ display:block; height:12px; border-radius:2px; margin-bottom:10px; }
.xp-straps .s1{ background:#15171a; border:1px solid var(--brass); background-image:radial-gradient(rgba(240,217,168,.28) 1px, transparent 1.4px); background-size:14px 12px; }
.xp-straps .s2{ background:repeating-linear-gradient(60deg, #c9ccd0 0 2px, #6f7478 2px 5px); }
.xp-straps .s3{ background:linear-gradient(to right, #c9523f, #d9a441, #3f8a5c, #3d6fa3); }
.xp-straps b{ display:block; font-family:'Cinzel',serif; font-weight:400; font-size:12px; letter-spacing:.24em;
  text-transform:uppercase; color:#f0d9a8; }

/* a ruled line carrying one phrase */
.xp-layer.one{ display:block; width:520px; text-align:center; padding:14px 0; }
.xp-layer.one span{ font-size:32px; color:var(--brass-bright); font-style:italic; }

.xp-canvas.portrait .xp-chain{ width:700px; }
.xp-canvas.portrait .xp-x2{ gap:12px; }
.xp-canvas.portrait .xp-x2 b{ font-size:14px; letter-spacing:.2em; }
.xp-canvas.portrait .xp-x2 i{ width:50px; }

@media (prefers-reduced-motion: reduce){
  .xp-photo.xp-to8 img, .xp-photo.xp-toVan img{ animation:none !important; }
}

/* --------------------------------------------------------------------------
   30. The Imperfect Engraving — line work
   -------------------------------------------------------------------------- */
/* these two archive shots show the whole watch smaller in the square than the
   others do, so the crop goes further in to bring the case to the same size */
.xp-shot.choc{ --zoom:205%; --shift:1%; }
/* the engraved side was shot brighter than the dial; pulled down so the cut reads */
.xp-shot.choc.xp-eng img{ filter:brightness(.84) contrast(1.16); }
.xp-shot.choc.xp-toChoc img{ animation:xp-toChoc 8s cubic-bezier(.45,.05,.25,1) 1.4s forwards; }
@keyframes xp-toChoc{
  from{ transform:translate(-50%,-50%) translateY(var(--shift)) scale(1); }
  to{   transform:translate(-50%,-50%) translateY(0%) scale(1.32); }
}

/* a line that sets off straight and then wanders */
.xp-wander{ width:600px; height:120px; display:block; margin:0 auto 30px; overflow:visible; }
.xp-wander path{
  fill:none; stroke:var(--brass-bright); stroke-width:1.2; stroke-linecap:round;
  stroke-dasharray:1300; stroke-dashoffset:1300; animation:xp-draw 6.5s cubic-bezier(.4,.1,.3,1) .4s forwards;
}

/* a circle that does not fit a rectangle, until it is made to */
.xp-fit{ position:relative; width:380px; height:190px; margin:0 auto 36px; }
.xp-fit i{ position:absolute; opacity:0; animation:xp-fade 1.2s ease forwards; }
.xp-fit .r{ left:236px; top:14px; width:118px; height:160px; border:1px dashed var(--brass); border-radius:4px; animation-delay:1.4s; }
.xp-fit .c{
  left:30px; top:20px; width:150px; height:150px; border:1px solid var(--brass-bright); border-radius:50%;
  animation:xp-fade 1.2s ease .4s forwards, xp-fit 2.6s cubic-bezier(.6,.05,.25,1) 9.6s forwards;
}
@keyframes xp-fit{ to{ left:236px; top:14px; width:118px; height:160px; border-radius:4px; } }

/* stippling: a field of dots with one patch left out */
.xp-stipple{
  position:relative; display:grid; grid-template-columns:repeat(16, 24px); justify-content:center;
  width:384px; margin:0 auto 40px;
}
.xp-stipple i{ display:block; width:24px; height:24px; position:relative; opacity:0; }
.xp-stipple i::before{
  content:''; position:absolute; left:10px; top:10px; width:4px; height:4px; border-radius:50%; background:var(--brass);
}
.xp-stipple em{
  position:absolute; left:240px; top:48px; width:72px; height:72px; border:1px dashed #e08a80; border-radius:3px; opacity:0;
}
.xp-stipple.s1 i{ animation:xp-fade .8s ease forwards; }
.xp-stipple.s1 i.gap{ animation:none; }
.xp-stipple.s1 em{ animation:xp-fade 1.2s ease 2.6s forwards, xp-wait 2.4s ease-in-out 3.8s infinite; }
.xp-stipple.s2 i{ opacity:1; }
.xp-stipple.s2 i.gap{ opacity:0; animation:xp-fade .7s ease forwards; }
.xp-stipple.s2 i.gap::before{ background:var(--brass-bright); box-shadow:0 0 8px rgba(240,217,168,.8); }
.xp-stipple.s2 em{ opacity:1; animation:xp-fadeaway 1.4s ease 6.4s forwards; }
@keyframes xp-fadeaway{ to{ opacity:0; } }

.xp-canvas.portrait .xp-wander{ width:560px; }
@media (prefers-reduced-motion: reduce){ .xp-shot.choc.xp-toChoc img{ animation:none !important; } }

/* --------------------------------------------------------------------------
   31. My Son's Reverso (@decowatches) — line work
   -------------------------------------------------------------------------- */
/* a caseback with the places for three initials and a date, and nothing in
   them yet */
.xp-promise{
  position:relative; width:138px; height:184px; margin:0 auto 36px; border:1px solid var(--brass-bright);
  border-top:5px double var(--brass-bright); border-bottom:5px double var(--brass-bright); border-radius:4px;
  opacity:0; animation:xp-fade 1.4s ease .3s forwards;
}
.xp-promise .ini, .xp-promise .dt{ position:absolute; left:0; right:0; display:flex; justify-content:center; align-items:flex-end; }
.xp-promise .ini{ top:58px; gap:10px; }
.xp-promise .ini i{ display:block; width:20px; height:2px; background:var(--brass-bright); animation:xp-wait 2.6s ease-in-out infinite; }
.xp-promise .ini i:nth-child(2){ animation-delay:.3s; } .xp-promise .ini i:nth-child(3){ animation-delay:.6s; }
.xp-promise .dt{ top:112px; gap:3px; }
.xp-promise .dt i{ display:block; width:7px; height:1px; background:var(--brass); animation:xp-wait 2.6s ease-in-out .9s infinite; }
.xp-promise .dt b{ display:block; width:2px; height:2px; border-radius:50%; background:var(--brass); margin:0 2px; }

/* three years, counted off */
.xp-years{ display:flex; justify-content:center; gap:16px; margin:0 auto 40px; }
.xp-years i{
  display:block; width:170px; height:2px; background:var(--brass-bright); transform:scaleX(0); transform-origin:left center;
  animation:xp-routeline 1s ease forwards;
}
.xp-years i:nth-child(1){ animation-delay:.5s; }
.xp-years i:nth-child(2){ animation-delay:1.5s; }
.xp-years i:nth-child(3){ animation-delay:2.5s; }
.xp-canvas.portrait .xp-years i{ width:150px; }

/* --------------------------------------------------------------------------
   32. A Reverso for a Milestone — line work
   -------------------------------------------------------------------------- */
/* the line every startup is drawn as: up, but never straight */
.xp-chart{ position:relative; width:760px; height:226px; margin:0 auto 30px; }
.xp-chart svg{ position:absolute; left:0; top:0; width:100%; height:180px; overflow:visible; }
.xp-chart path{
  fill:none; stroke:var(--brass-bright); stroke-width:1.4; stroke-linejoin:round; stroke-linecap:round;
  vector-effect:non-scaling-stroke; stroke-dasharray:1100; stroke-dashoffset:1100;
  animation:xp-draw 7s cubic-bezier(.4,.1,.3,1) .6s forwards;
}
.xp-chart span{
  position:absolute; top:200px; font-family:'Cinzel',serif; font-size:12px; letter-spacing:.24em;
  text-transform:uppercase; color:#f0d9a8; white-space:nowrap; opacity:0; animation:xp-fade 1.2s ease forwards;
}
.xp-chart .a{ left:0; animation-delay:.6s; } .xp-chart .b{ right:0; animation-delay:6.4s; }
.xp-chart .end{
  position:absolute; right:-3px; top:8px; width:11px; height:11px; border-radius:50%; background:var(--brass-bright);
  box-shadow:0 0 14px rgba(240,217,168,.7); opacity:0; animation:xp-fade 1s ease 6.2s forwards;
}

/* the edition: ten small cases, taken one after another */
.xp-alloc{ display:flex; justify-content:center; gap:14px; margin:34px auto; }
.xp-alloc i{
  display:block; width:30px; height:42px; border:1px solid var(--brass-bright); border-radius:3px;
  animation:xp-taken .5s ease forwards;
}
@keyframes xp-taken{ to{ opacity:.5; background:rgba(240,217,168,.14); border-style:dashed; } }
.xp-alloc.s2 i{ animation:none; opacity:.5; background:rgba(240,217,168,.14); border-style:dashed; }
.xp-alloc.s2 i.mine{
  opacity:0; border-style:solid; background:rgba(240,217,168,.32); box-shadow:0 0 22px rgba(240,217,168,.55);
  margin-left:16px; animation:xp-mine 1.6s cubic-bezier(.2,.8,.2,1) 1.4s forwards;
}
@keyframes xp-mine{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }

/* the push onto the second face */
.xp-photo.xp-toNon img{ animation:xp-toNon 10s cubic-bezier(.45,.05,.25,1) 1.5s forwards; }
@keyframes xp-toNon{ from{ transform:scale(1); } to{ transform:scale(1.5) translate(-6.5%, 0); } }

.xp-canvas.portrait .xp-chart{ width:700px; }
.xp-canvas.portrait .xp-alloc{ gap:9px; }
@media (prefers-reduced-motion: reduce){ .xp-photo.xp-toNon img{ animation:none !important; } }

/* --------------------------------------------------------------------------
   33. My Engraving — line work
   -------------------------------------------------------------------------- */
/* two reds: the bright one steps back, the burgundy stays */
.xp-reds{ width:300px; }
.xp-reds i{ display:block; height:3px; margin-bottom:10px; transform:scaleX(0); transform-origin:left center;
  animation:xp-routeline 1.4s cubic-bezier(.2,.8,.2,1) forwards; }
.xp-reds .br{ background:#e0463c; animation:xp-routeline 1.4s cubic-bezier(.2,.8,.2,1) 3.0s forwards, xp-stepback 1.4s ease 5.4s forwards; }
.xp-reds .bg{ background:#8f2a3c; animation-delay:3.6s; }

/* two requests for one pattern; the second is stopped, then let through */
.xp-block{ position:relative; width:760px; height:168px; margin:30px auto 34px; text-align:left; }
.xp-block .t{
  position:absolute; left:54px; font-family:'Cinzel',serif; font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:#f0d9a8; white-space:nowrap; opacity:0;
}
.xp-block .t1{ top:0; } .xp-block .t2{ top:74px; }
.xp-block .l1, .xp-block .l2, .xp-block .l2b{ position:absolute; height:2px; background:var(--brass-bright);
  transform:scaleX(0); transform-origin:left center; }
.xp-block .l1{ left:40px; right:0; top:34px; }
.xp-block .l2{ left:40px; width:calc((100% - 40px) * .62); top:108px; }
.xp-block .l2b{ left:calc(40px + (100% - 40px) * .62); right:0; top:108px; }
.xp-block .e1, .xp-block .e2{ position:absolute; right:-5px; width:11px; height:11px; border-radius:50%;
  background:var(--brass-bright); opacity:0; }
.xp-block .e1{ top:29px; } .xp-block .e2{ top:103px; }
.xp-block .stop{ position:absolute; left:calc(40px + (100% - 40px) * .62); top:92px; width:3px; height:34px;
  background:#e2574c; box-shadow:0 0 12px rgba(226,87,76,.7); opacity:0; }
.xp-block .join{ position:absolute; left:40px; top:34px; width:1px; height:76px; background:var(--brass-bright);
  transform:scaleY(0); transform-origin:top center; }
.xp-block .me{
  position:absolute; left:28px; top:138px; font-family:'Cinzel',serif; font-size:12px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--brass-bright); white-space:nowrap; opacity:0;
}
.xp-block.s1 .t1{ animation:xp-fade 1.2s ease 1.0s forwards; }
.xp-block.s1 .l1{ animation:xp-routeline 2s cubic-bezier(.45,0,.2,1) 1.4s forwards; }
.xp-block.s1 .e1{ animation:xp-fade .8s ease 3.2s forwards; }
.xp-block.s1 .t2{ animation:xp-fade 1.2s ease 6.4s forwards; }
.xp-block.s1 .l2{ animation:xp-routeline 1.6s cubic-bezier(.45,0,.2,1) 6.8s forwards; }
.xp-block.s1 .stop{ animation:xp-fade .5s ease 8.4s forwards; }
.xp-block.s2 .t1, .xp-block.s2 .t2, .xp-block.s2 .e1{ opacity:1; }
.xp-block.s2 .l1, .xp-block.s2 .l2{ transform:scaleX(1); }
.xp-block.s2 .stop{ opacity:1; animation:xp-fadeaway 1.2s ease 6.6s forwards; }
.xp-block.s2 .join{ animation:xp-routeY 1.4s cubic-bezier(.2,.8,.2,1) 2.4s forwards; }
.xp-block.s2 .me{ animation:xp-fade 1.2s ease 3.4s forwards; }
.xp-block.s2 .l2b{ animation:xp-routeline 1.6s cubic-bezier(.45,0,.2,1) 7.6s forwards; }
.xp-block.s2 .e2{ animation:xp-fade .8s ease 9.0s forwards; }

/* the pattern on two of the four, with places held for the other two */
.xp-four{ display:flex; justify-content:center; align-items:flex-end; gap:26px; margin:0 auto 30px; }
.xp-four .c{ opacity:0; animation:xp-rise 1.4s cubic-bezier(.2,.7,.25,1) forwards; }
.xp-four .xp-shot{ width:230px; height:304px; aspect-ratio:auto; }
.xp-four .c.g i{ display:block; width:96px; height:128px; margin-bottom:44px; border:1px dashed var(--brass); border-radius:4px; opacity:.6; }
.xp-four b{ display:block; margin-top:8px; font-family:'Cinzel',serif; font-weight:400; font-size:12px; letter-spacing:.24em;
  text-transform:uppercase; color:#f0d9a8; }

.xp-canvas.portrait .xp-block{ width:700px; }
.xp-canvas.portrait .xp-four{ gap:14px; }
.xp-canvas.portrait .xp-four .xp-shot{ width:220px; height:290px; }
.xp-canvas.portrait .xp-four .c.g i{ width:80px; height:106px; }

/* --------------------------------------------------------------------------
   34. The Watch I Designed, and the One I Bought — line work
   -------------------------------------------------------------------------- */
.xpF-title h1.xp-h1two{ font-size:66px; line-height:1.18; }
.xp-canvas.portrait .xpF-title h1.xp-h1two{ font-size:42px; }

/* a napkin: a square with one corner folded. Blank first; then two dials
   side by side, as he describes them — a diagram of the sentence */
.xp-napkin{ position:relative; width:230px; margin:0 auto 34px; transform:rotate(-3deg); }
.xp-napkin.big{ width:380px; margin-bottom:0; }
.xp-napkin svg{ display:block; width:100%; height:auto; overflow:visible; }
.xp-napkin svg *{ fill:none; stroke:var(--brass-bright); stroke-width:1; }
.xp-napkin.big svg *{ stroke-width:.7; }
.xp-napkin .sq{ stroke:var(--brass); stroke-dasharray:880; stroke-dashoffset:880; animation:xp-draw 3s cubic-bezier(.3,.7,.3,1) .3s forwards; }
.xp-napkin .fold{ stroke:var(--brass); stroke-dasharray:90; stroke-dashoffset:90; animation:xp-draw 1.2s ease 2.6s forwards; }
.xp-napkin .c1, .xp-napkin .c2, .xp-napkin .h1, .xp-napkin .h2{ opacity:0; }
.xp-napkin .la, .xp-napkin .lb, .xp-napkin .days{ display:none; }
.xp-napkin.draw .sq{ stroke-dashoffset:0; animation:none; }
.xp-napkin.draw .fold{ stroke-dashoffset:0; animation:none; }
.xp-napkin.draw .c1, .xp-napkin.draw .c2{ opacity:1; stroke-dasharray:280; stroke-dashoffset:280; }
.xp-napkin.draw .c2{ animation:xp-draw 2.2s cubic-bezier(.3,.7,.3,1) 1.4s forwards; }
.xp-napkin.draw .c1{ animation:xp-draw 2.2s cubic-bezier(.3,.7,.3,1) 4.0s forwards; }
.xp-napkin.draw .h1, .xp-napkin.draw .h2{ animation:xp-fade 1s ease forwards; }
.xp-napkin.draw .h2{ animation-delay:3.2s; } .xp-napkin.draw .h1{ animation-delay:5.8s; }
.xp-napkin.draw .la, .xp-napkin.draw .lb{
  display:block; position:absolute; top:74%; width:38%; text-align:center; font-family:'Cinzel',serif; font-size:12px;
  letter-spacing:.24em; text-transform:uppercase; color:#f0d9a8; opacity:0; animation:xp-fade 1.2s ease forwards;
}
.xp-napkin.draw .la{ left:16%; animation-delay:5.8s; } .xp-napkin.draw .lb{ left:46%; animation-delay:3.2s; }
.xp-napkin.draw .days{ display:flex; position:absolute; left:16%; width:38%; top:84%; justify-content:center; gap:7px; }
.xp-napkin .days i{ display:block; width:2px; height:13px; background:var(--brass-bright); opacity:0; animation:xp-fade .5s ease forwards; }

/* where the napkin went, and where the trail goes cold */
.xp-trail{ position:relative; width:820px; height:112px; margin:0 auto 36px; }
.xp-trail .ax{ position:absolute; left:0; width:80%; top:30px; height:1px; background:var(--line); }
.xp-trail .p1, .xp-trail .p2{ position:absolute; top:29px; height:3px; width:40%; background:var(--brass-bright);
  transform:scaleX(0); transform-origin:left center; }
.xp-trail .p1{ left:0;   animation:xp-routeline 2.2s cubic-bezier(.45,0,.2,1) 1.2s forwards; }
.xp-trail .p2{ left:40%; animation:xp-routeline 2.2s cubic-bezier(.45,0,.2,1) 7.6s forwards; }
.xp-trail .p3{ position:absolute; left:80%; width:20%; top:30px; height:1px;
  background:repeating-linear-gradient(to right, var(--brass) 0 8px, transparent 8px 16px);
  -webkit-mask-image:linear-gradient(to right, #000, transparent); mask-image:linear-gradient(to right, #000, transparent);
  transform:scaleX(0); transform-origin:left center; animation:xp-routeline 2s ease 10.0s forwards; }
.xp-trail .d{ position:absolute; top:24px; width:13px; height:13px; margin-left:-7px; border-radius:50%;
  border:1px solid var(--brass-bright); background:#0b0e12; opacity:0; animation:xp-fade 1s ease forwards; }
.xp-trail .d1{ left:0; animation-delay:.6s; } .xp-trail .d2{ left:40%; animation-delay:3.2s; } .xp-trail .d3{ left:80%; animation-delay:9.6s; }
.xp-trail .n{ position:absolute; top:56px; font-family:'Cinzel',serif; font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:#f0d9a8; white-space:nowrap; opacity:0; animation:xp-fade 1.2s ease forwards; }
.xp-trail .n1{ left:-6px; animation-delay:.6s; }
.xp-trail .n2{ left:40%; transform:translateX(-50%); animation-delay:3.2s; }
.xp-trail .n3{ left:80%; transform:translateX(-50%); animation-delay:9.6s; top:82px; }

/* a watch photographed on white, held as a print with its white pulled down */
.xp-photo.xp-print img{ filter:brightness(.9) contrast(1.03); }

/* a voice, recorded: bars that rise and fall */
.xp-wave{ display:flex; justify-content:center; align-items:center; gap:7px; height:70px; margin:0 auto 36px; }
.xp-wave i{ display:block; width:2px; height:64px; background:var(--brass-bright); transform:scaleY(.12);
  animation:xp-wavebar 1.3s ease-in-out infinite alternate; }
@keyframes xp-wavebar{ from{ transform:scaleY(.12); } to{ transform:scaleY(var(--s)); } }

.xp-canvas.portrait .xp-trail{ width:640px; }
.xp-canvas.portrait .xp-trail .n{ font-size:10px; letter-spacing:.14em; }
.xp-canvas.portrait .xp-napkin.big{ width:420px; }

/* --------------------------------------------------------------------------
   35. Number One of Five — line work
   -------------------------------------------------------------------------- */
/* a search field, and two words typed into it */
.xp-search{
  width:420px; margin:0 auto 36px; padding:14px 26px; border:1px solid var(--brass); border-radius:30px; text-align:left;
  font-family:'Jost',sans-serif; font-size:24px; letter-spacing:.06em; color:var(--ink); height:62px; box-sizing:border-box;
  opacity:0; animation:xp-fade 1.2s ease .3s forwards;
}
/* how small: a case in outline, and the movement inside it to scale-ish */
.xp-tiny{
  position:relative; width:132px; height:176px; margin:0 auto 22px; border:1px solid var(--brass);
  border-top:5px double var(--brass); border-bottom:5px double var(--brass); border-radius:4px;
  opacity:0; animation:xp-fade 1.4s ease .3s forwards;
}
.xp-tiny i{
  position:absolute; left:50%; top:50%; width:14px; height:38px; margin:-19px 0 0 -7px; border-radius:7px;
  border:1px solid var(--brass-bright); background:rgba(240,217,168,.25); box-shadow:0 0 18px rgba(240,217,168,.7);
  opacity:0; transform:scale(4); animation:xp-shrinkin 2.6s cubic-bezier(.3,.8,.3,1) 2.2s forwards;
}
@keyframes xp-shrinkin{ to{ opacity:1; transform:scale(1); } }

/* the push onto the movement */
.xp-photo.xp-to101 img{ animation:xp-to101 11s cubic-bezier(.45,.05,.25,1) 1.4s forwards; }
@keyframes xp-to101{ from{ transform:scale(1); } to{ transform:scale(2.3) translate(1.3%, -2.2%); } }

/* five, numbered; then the first one lit */
.xp-five{ display:flex; justify-content:center; gap:22px; margin:0 auto 38px; }
.xp-five i{
  display:grid; place-items:center; width:64px; height:88px; border:1px solid var(--brass); border-radius:4px;
  font-style:normal; opacity:0; animation:xp-rise 1.1s cubic-bezier(.2,.7,.25,1) forwards;
}
.xp-five i b{ font-family:'Cormorant Garamond',serif; font-weight:400; font-size:30px; color:var(--brass); }
.xp-five.s2 i{ opacity:.4; animation:none; }
.xp-five.s2 i.one{ animation:xp-lit 1.6s ease 4.4s forwards; }
@keyframes xp-lit{ to{ opacity:1; border-color:var(--brass-bright); background:rgba(240,217,168,.2);
  box-shadow:0 0 26px rgba(240,217,168,.55); transform:translateY(-8px); } }
.xp-five.s2 i.one b{ color:var(--brass-bright); }

.xp-canvas.portrait .xp-five{ gap:14px; }
@media (prefers-reduced-motion: reduce){ .xp-photo.xp-to101 img{ animation:none !important; } }

/* --------------------------------------------------------------------------
   36. The Watch Widow — line work
   -------------------------------------------------------------------------- */
/* two lives side by side: one line crowded with marks, one with none */
.xp-two{ width:780px; margin:0 auto 38px; }
.xp-two .r{ display:grid; grid-template-columns:110px 1fr; align-items:center; gap:20px; height:58px; }
.xp-two b{ font-family:'Cinzel',serif; font-weight:400; font-size:13px; letter-spacing:.3em; text-transform:uppercase;
  color:#f0d9a8; text-align:right; }
.xp-two .ln{ position:relative; display:block; height:1px; background:var(--brass); }
.xp-two .ln i{ position:absolute; top:-15px; width:1px; height:30px; background:var(--brass-bright); transform:scaleY(0);
  animation:xp-routeY .6s cubic-bezier(.2,.8,.2,1) forwards; }
.xp-two .ln i.hers{ display:none; }
.xp-two.s1 .ln{ transform:scaleX(0); transform-origin:left center; animation:xp-routeline 1.6s cubic-bezier(.2,.8,.2,1) .3s forwards; }
.xp-two.s2 .ln i{ transform:scaleY(1); animation:none; }
.xp-two.s2 .ln i.hers{
  display:block; width:3px; top:-20px; height:40px; box-shadow:0 0 16px rgba(240,217,168,.85); transform:scaleY(0);
  animation:xp-routeY 1.2s cubic-bezier(.2,.8,.2,1) 6.6s forwards;
}

/* the options, turned down one after another — and the one she accepted */
.xp-alloc.s3 i.mine{
  animation:xp-mine 1.6s cubic-bezier(.2,.8,.2,1) 9.4s both; border-style:solid; margin-left:16px;
  background:rgba(240,217,168,.32); box-shadow:0 0 22px rgba(240,217,168,.55);
}

/* straps: bands of colour, and then a buckle on each */
.xp-bands{ width:520px; margin:0 auto 38px; }
.xp-bands > div{ position:relative; height:26px; opacity:0; animation:xp-rise 1.1s cubic-bezier(.2,.7,.25,1) forwards; }
.xp-bands i{ display:block; position:absolute; left:0; right:44px; top:8px; height:10px; border-radius:2px; }
.xp-bands b{ position:absolute; right:14px; top:4px; width:16px; height:16px; border:1px solid var(--brass-bright); border-radius:3px;
  opacity:0; animation:xp-fade .8s ease forwards; }

.xp-canvas.portrait .xp-two{ width:720px; }
.xp-canvas.portrait .xp-two .r{ grid-template-columns:90px 1fr; }

/* --------------------------------------------------------------------------
   37. Linda's Second Reverso — line work
   -------------------------------------------------------------------------- */
/* two watches and the line between them; hers a little smaller */
.xp-four .xp-shot.xp-sm{ width:196px; height:259px; }
.xp-four .xp-link{ align-self:center; display:block; width:70px; height:1px; margin-bottom:30px; background:var(--brass-bright);
  transform:scaleX(0); animation:xp-routeline 1.6s cubic-bezier(.2,.8,.2,1) 2.8s forwards; }

/* a case with two faces: one plain, one with a row of stones above and below */
.xp-duetto{ width:124px; height:166px; margin:0 auto 36px; perspective:900px; }
.xp-duetto .in{ position:relative; width:100%; height:100%; transform-style:preserve-3d;
  animation:xp-flipcase 6s cubic-bezier(.62,.03,.26,1) .6s infinite; }
.xp-duetto .in i{ position:absolute; inset:0; border:1px solid var(--brass-bright); border-radius:4px; backface-visibility:hidden; }
.xp-duetto .in .f::before{ content:''; position:absolute; inset:16px; border:1px solid var(--line); border-radius:2px; }
.xp-duetto .in .b{ transform:rotateY(180deg);
  background:
    radial-gradient(circle, #f0d9a8 1.6px, transparent 2.2px) 4px 6px / 11.6px 10px repeat-x,
    radial-gradient(circle, #f0d9a8 1.6px, transparent 2.2px) 4px calc(100% - 6px) / 11.6px 10px repeat-x; }
.xp-duetto .in .b::before{ content:''; position:absolute; inset:22px 16px; border:1px solid var(--line); border-radius:2px; }

/* the rabbit hole: rings going down; one point at the bottom, one arriving at the rim */
.xp-hole{ position:relative; width:420px; height:190px; margin:0 auto 34px; }
.xp-hole i{ position:absolute; left:50%; border:1px solid var(--brass); border-radius:50%; opacity:0; animation:xp-fade 1.2s ease forwards; }
.xp-hole i:nth-child(1){ width:280px; height:96px;  margin-left:-140px; top:10px;  animation-delay:.3s; }
.xp-hole i:nth-child(2){ width:206px; height:70px;  margin-left:-103px; top:44px;  animation-delay:.6s; border-color:rgba(184,153,104,.7); }
.xp-hole i:nth-child(3){ width:136px; height:46px;  margin-left:-68px;  top:78px;  animation-delay:.9s; border-color:rgba(184,153,104,.5); }
.xp-hole i:nth-child(4){ width:70px;  height:24px;  margin-left:-35px;  top:112px; animation-delay:1.2s; border-color:rgba(184,153,104,.32); }
.xp-hole b{ position:absolute; width:9px; height:9px; border-radius:50%; background:var(--brass-bright); opacity:0; }
.xp-hole .m{ left:50%; margin-left:-5px; top:120px; opacity:0; animation:xp-fade 1.2s ease 1.8s forwards; filter:brightness(.75); }
.xp-hole .l{ left:0; top:52px; box-shadow:0 0 14px rgba(240,217,168,.8); animation:xp-toedge 5s cubic-bezier(.4,0,.2,1) 6.6s forwards; }
@keyframes xp-toedge{ 0%{ left:0; opacity:1; } 100%{ left:66px; opacity:1; } }
.xp-hole span{ position:absolute; font-family:'Cinzel',serif; font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:#f0d9a8; opacity:0; animation:xp-fade 1.2s ease forwards; }
.xp-hole .tm{ left:50%; transform:translateX(-50%); top:150px; animation-delay:1.8s; }
.xp-hole .tl{ left:-14px; top:26px; animation-delay:6.6s; }

.xp-canvas.portrait .xp-four .xp-link{ width:40px; }
@media (prefers-reduced-motion: reduce){ .xp-duetto .in{ animation:none !important; } }
.xp-canvas.portrait .xp-four .xp-shot.xp-sm{ width:188px; height:248px; }

/* --------------------------------------------------------------------------
   38. Number One — and the Piece of Lint — line work
   -------------------------------------------------------------------------- */
/* snow: points falling behind the words */
.xp-snow{ position:absolute; inset:0; overflow:hidden; }
.xp-snow i{ position:absolute; top:-2%; aspect-ratio:1; border-radius:50%; background:#e9e2d2;
  animation:xp-snow linear infinite; }
@keyframes xp-snow{ from{ transform:translate(0, -20px); } to{ transform:translate(26px, 104vh); } }
.xp-canvas .xp-snow i{ animation-name:xp-snow2; }
@keyframes xp-snow2{ from{ transform:translate(0, -20px); } to{ transform:translate(30px, 2200px); } }

/* fifty marks, the first of them lit */
.xp-fifty{ display:flex; justify-content:flex-end; align-items:flex-end; gap:5px; height:26px; }
.xp-fifty i{ display:block; width:1px; height:14px; background:var(--brass); opacity:0; animation:xp-tick .4s ease forwards; }
.xp-fifty i.one{ width:2px; height:26px; background:var(--brass-bright); box-shadow:0 0 10px rgba(240,217,168,.8);
  animation:xp-fade .6s ease 7.8s forwards; }

/* the party, turned down */
.xp-wave.xp-hush{ animation:xp-hush 2.4s ease 4.6s forwards; }
@keyframes xp-hush{ to{ opacity:.18; } }

/* the push to where he was looking, and a loupe ring on the place. Nothing
   is added to the photograph itself. */
.xp-lintshot .zw{ position:absolute; inset:0; animation:xp-toLint 6.5s cubic-bezier(.45,.05,.25,1) 2.6s forwards; }
.xp-lintshot .zw img{ width:100%; height:100%; display:block; }
@keyframes xp-toLint{ from{ transform:scale(1); } to{ transform:scale(1.7) translate(6%, -20%); } }
.xp-lintshot .ring{
  position:absolute; left:42%; top:86.5%; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%;
  border:1px solid #fff; box-shadow:0 0 0 1px rgba(8,10,13,.5), 0 0 16px rgba(255,255,255,.5); opacity:0;
  animation:xp-fade 1.2s ease 8.6s forwards, xp-ringpulse 2.2s ease-in-out 9.8s infinite;
}
@keyframes xp-ringpulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.18); } }

/* two journeys out and back, each for its own reason */
.xp-trips{ position:relative; width:760px; margin:0 auto 34px; padding-bottom:34px; }
.xp-trips .r{ display:grid; grid-template-columns:200px 1fr; align-items:center; gap:20px; height:44px; opacity:0;
  animation:xp-fade 1.2s ease forwards; }
.xp-trips .r1{ animation-delay:1.6s; } .xp-trips .r2{ animation-delay:9.0s; }
.xp-trips b{ font-family:'Cinzel',serif; font-weight:400; font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:#f0d9a8; text-align:right; }
.xp-trips .ln{ position:relative; display:block; height:1px;
  background:repeating-linear-gradient(to right, var(--brass) 0 10px, transparent 10px 20px); }
.xp-trips .ln i{ position:absolute; top:-4px; left:-4px; width:9px; height:9px; border-radius:50%; background:var(--brass-bright);
  box-shadow:0 0 14px rgba(240,217,168,.7); }
.xp-trips .r1 .ln i{ animation:xp-post 4.6s ease-in-out 2.2s both; }
.xp-trips .r2 .ln i{ animation:xp-outonly 2.4s ease-in-out 12.4s both; }
@keyframes xp-outonly{ from{ left:-4px; } to{ left:calc(100% - 5px); } }
.xp-trips .e{ position:absolute; bottom:0; font-family:'Cinzel',serif; font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:#b8b0a0; opacity:0; animation:xp-fade 1.2s ease 1.2s forwards; }
.xp-trips .e.a{ left:220px; } .xp-trips .e.b{ right:0; }

/* a loupe: a circle and its handle */
.xp-loupe{ position:relative; width:86px; height:108px; margin:0 auto 26px; opacity:0; animation:xp-fade 1.4s ease .2s forwards; }
.xp-loupe::before{ content:''; position:absolute; left:8px; top:0; width:66px; height:66px; border:1px solid var(--brass-bright); border-radius:50%; }
.xp-loupe::after{ content:''; position:absolute; left:63px; top:58px; width:1px; height:44px; background:var(--brass-bright);
  transform:rotate(-42deg); transform-origin:top center; }
.xp-loupe i{ position:absolute; left:39px; top:31px; width:4px; height:4px; border-radius:50%; background:#fff;
  animation:xp-wait 2.4s ease-in-out infinite; }

.xp-canvas.portrait .xp-trips{ width:700px; }
.xp-canvas.portrait .xp-trips .r{ grid-template-columns:170px 1fr; }
.xp-canvas.portrait .xp-trips .e.a{ left:190px; }
.xp-canvas.portrait .xp-fifty{ justify-content:flex-start; gap:4px; }
@media (prefers-reduced-motion: reduce){ .xp-lintshot .zw, .xp-snow i{ animation:none !important; } }

/* --------------------------------------------------------------------------
   39. The Scratch That Wasn't There — line work
   -------------------------------------------------------------------------- */
/* a scratch: one thin line, made in an instant */
.xp-scratch{ height:70px; margin:0 auto 30px; display:grid; place-items:center; }
.xp-scratch i{ display:block; width:300px; height:1px; background:linear-gradient(to right, transparent, #fff 12%, #fff 88%, transparent);
  transform:rotate(-17deg) scaleX(0); transform-origin:left center; animation:xp-slash .28s cubic-bezier(.3,0,.1,1) .7s forwards; }
@keyframes xp-slash{ to{ transform:rotate(-17deg) scaleX(1); } }

/* a pen rolling under a seat, and then the sound of it */
.xp-pen{ position:relative; width:560px; height:86px; margin:0 auto 34px; }
.xp-pen .seat{ position:absolute; right:0; top:22px; width:250px; height:34px; border:1px solid var(--brass); border-bottom:0;
  border-radius:8px 8px 0 0; opacity:0; animation:xp-fade 1.2s ease .3s forwards; }
.xp-pen .pen{ position:absolute; left:40px; top:66px; width:52px; height:2px; background:var(--brass-bright); opacity:0;
  animation:xp-roll 3.4s cubic-bezier(.3,.1,.4,1) 1.6s forwards; }
@keyframes xp-roll{ 0%{ opacity:1; transform:translateX(0) rotate(0); } 80%{ opacity:1; } 100%{ opacity:.25; transform:translateX(360px) rotate(1080deg); } }
.xp-pen .scr{ position:absolute; right:60px; top:48px; width:120px; height:1px; background:#fff; box-shadow:0 0 10px rgba(255,255,255,.7);
  transform:rotate(-14deg) scaleX(0); transform-origin:left center; animation:xp-slash2 .26s cubic-bezier(.3,0,.1,1) 7.6s forwards; }
@keyframes xp-slash2{ to{ transform:rotate(-14deg) scaleX(1); } }

/* the lower part of the case, a film over it carrying the mark — and the film
   coming away */
.xp-film{ position:relative; width:150px; height:150px; margin:0 auto 34px; border:1px solid var(--brass-bright); border-top:0;
  border-bottom:5px double var(--brass-bright); border-radius:0 0 5px 5px; opacity:0; animation:xp-fade 1.4s ease .3s forwards; }
.xp-film .fl{ position:absolute; left:10px; right:10px; bottom:14px; height:74px; border:1px dashed rgba(255,255,255,.35);
  background:linear-gradient(120deg, rgba(255,255,255,.10), rgba(255,255,255,.03) 60%, rgba(255,255,255,.12)); border-radius:3px;
  transform-origin:left bottom; animation:xp-peel 3.2s cubic-bezier(.4,0,.2,1) 7.4s forwards; }
.xp-film .fl i{ position:absolute; left:18px; top:40px; width:86px; height:1px; background:#fff; transform:rotate(-17deg); }
@keyframes xp-peel{ 0%{ transform:none; opacity:1; } 40%{ transform:translate(6px,-10px) rotate(-8deg); opacity:1; }
  100%{ transform:translate(110px,-90px) rotate(-38deg); opacity:0; } }

@media (prefers-reduced-motion: reduce){ .xp-film .fl, .xp-pen .pen{ animation:none !important; } }

/* --------------------------------------------------------------------------
   40. Linda Said I Had to Buy It — line work
   -------------------------------------------------------------------------- */
.xp-photo.xp-toRep img{ animation:xp-toRep 10s cubic-bezier(.45,.05,.25,1) 1s forwards; }
@keyframes xp-toRep{ from{ transform:scale(1); } to{ transform:scale(1.6) translate(0, -6%); } }

/* ten, numbered: two gone, most spoken for, and one still free */
.xp-ten{ display:flex; justify-content:center; gap:12px; margin:0 auto 38px; }
.xp-ten i{ display:grid; place-items:center; width:50px; height:68px; border:1px solid var(--brass); border-radius:4px;
  font-style:normal; opacity:0; }
.xp-ten i b{ font-family:'Cormorant Garamond',serif; font-weight:400; font-size:25px; color:var(--brass); }
.xp-ten i.sp{ animation:xp-fade 1s ease forwards, xp-spoken 1s ease forwards; }
.xp-ten i.gone{ animation:xp-fade 1s ease forwards, xp-gone 1s ease forwards; }
.xp-ten i.eight{ animation:xp-fade 1s ease forwards, xp-lit 1.6s ease 7.2s forwards; }
@keyframes xp-spoken{ to{ opacity:.42; border-style:dashed; } }
@keyframes xp-gone{ to{ opacity:.16; border-style:dashed; } }

/* promised and delivered: two lengths of time */
.xp-bars2{ width:720px; margin:0 auto 38px; text-align:left; }
.xp-bars2 > div{ margin-bottom:22px; }
.xp-bars2 b{ display:block; margin-bottom:10px; font-family:'Cinzel',serif; font-weight:400; font-size:12px; letter-spacing:.24em;
  text-transform:uppercase; color:#f0d9a8; opacity:0; animation:xp-fade 1.2s ease .4s forwards; }
.xp-bars2 > div:nth-child(2) b{ animation-delay:2.6s; color:var(--brass-bright); }
.xp-bars2 i{ display:block; height:3px; transform:scaleX(0); transform-origin:left center; }
.xp-bars2 .long{ width:100%; background:repeating-linear-gradient(to right, var(--brass) 0 10px, transparent 10px 18px);
  animation:xp-routeline 2s cubic-bezier(.2,.8,.2,1) .6s forwards; }
.xp-bars2 .short{ width:16.667%; background:var(--brass-bright); box-shadow:0 0 12px rgba(240,217,168,.6);
  animation:xp-routeline .8s cubic-bezier(.2,.8,.2,1) 2.8s forwards; }

/* the way a repeater counts: long strikes, double strikes, short strikes */
.xp-chime{ width:560px; margin:34px auto; text-align:left; }
.xp-chime > div{ display:grid; grid-template-columns:190px 1fr; align-items:center; height:44px; }
.xp-chime b{ font-family:'Cinzel',serif; font-weight:400; font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  color:#f0d9a8; text-align:right; padding-right:26px; opacity:0; animation:xp-fade 1.2s ease 2.4s forwards; }
.xp-chime span{ display:flex; align-items:center; gap:16px; }
.xp-chime i{ display:block; width:2px; height:26px; background:var(--brass-bright); opacity:0;
  animation:xp-struck 1.1s ease-out forwards; }
.xp-chime i.sm{ height:13px; width:1px; }
.xp-chime i.dbl{ width:8px; background:none; border-left:2px solid var(--brass-bright); border-right:2px solid var(--brass-bright); box-sizing:border-box; }
@keyframes xp-struck{ 0%{ opacity:0; transform:scaleY(1.9); filter:drop-shadow(0 0 10px rgba(240,217,168,1)); }
  30%{ opacity:1; } 100%{ opacity:1; transform:scaleY(1); filter:none; } }

.xp-canvas.portrait .xp-ten{ gap:8px; }
.xp-canvas.portrait .xp-ten i{ width:46px; height:62px; }
.xp-canvas.portrait .xp-bars2{ width:680px; }
@media (prefers-reduced-motion: reduce){ .xp-photo.xp-toRep img{ animation:none !important; } }

/* --------------------------------------------------------------------------
   41. The Diplomat's Reverso — line work
   -------------------------------------------------------------------------- */
/* what a reverse usually carries, named one at a time */
.xp-kinds .xp-w{ color:#ddd6c7; }
.xp-kinds .xp-w + .xp-w::before{ content:'\00b7'; margin:0 .5em; color:var(--brass); }

/* the hand, then the case in it */
.xp-photo.xp-toHand img{ animation:xp-toHand 9s cubic-bezier(.45,.05,.25,1) 1.2s forwards; }
@keyframes xp-toHand{ from{ transform:scale(1); } to{ transform:scale(1.55) translate(1%, -2%); } }
/* the signature first, and then the date */
.xp-photo.xp-toSign img{ animation:xp-toSign 10.5s cubic-bezier(.45,.05,.25,1) .4s both; }
@keyframes xp-toSign{
  0%{ transform:scale(1.08); }
  30%,42%{ transform:scale(1.85) translate(7%, 15%); }
  68%,100%{ transform:scale(2.5) translate(-21%, 7%); }
}
/* the date as engraved, and as it reads */
.xp-dx{ margin:6px 0 30px; }
.xp-dx b{ display:block; font-family:'Cinzel',serif; font-weight:400; font-size:62px; letter-spacing:.08em; line-height:1.1;
  color:var(--brass-bright); opacity:0; animation:xp-rise 1.4s cubic-bezier(.2,.7,.25,1) forwards; }
.xp-dx i{ display:block; width:210px; height:1px; margin:16px 0 14px auto; background:var(--brass);
  transform:scaleX(0); transform-origin:right center; animation:xp-routeline 1.2s ease forwards; }
.xp-dx span{ display:block; font-family:'Jost',sans-serif; font-size:15px; letter-spacing:.3em; text-transform:uppercase;
  color:#f0d9a8; opacity:0; animation:xp-fade 1.2s ease forwards; }

/* eleven years, one stroke each */
.xp-week.xp-eleven{ margin-top:30px; margin-bottom:60px; }

/* four countries on one line; and, re-used, a watch passed from hand to hand */
.xp-entente{ position:relative; display:flex; justify-content:space-between; width:820px; margin:34px auto 30px; padding-top:26px; }
.xp-entente > i{ position:absolute; left:40px; right:40px; top:5px; height:1px; background:var(--brass);
  transform:scaleX(0); transform-origin:left center; animation:xp-routeline 2.4s cubic-bezier(.3,.6,.2,1) 7.4s forwards; }
.xp-entente span{ position:relative; flex:1 1 0; text-align:center; font-family:'Cinzel',serif; font-size:13px; letter-spacing:.24em;
  text-transform:uppercase; color:#f0d9a8; opacity:0; animation:xp-fade 1.2s ease forwards; }
.xp-entente span u{ position:absolute; left:50%; top:-26px; width:11px; height:11px; margin-left:-6px; box-sizing:border-box;
  border:1px solid var(--brass-bright); border-radius:50%; background:#0b0e12; }
.xp-entente.xp-pass{ width:1100px; margin:44px auto 46px; }
.xp-entente.xp-pass > i{ left:110px; right:110px; animation-duration:3.6s; animation-delay:2.6s;
  background:repeating-linear-gradient(to right, var(--brass) 0 7px, transparent 7px 13px); }
.xp-entente.xp-pass span{ font-family:'Cormorant Garamond',serif; font-size:22px; letter-spacing:0; text-transform:none; line-height:1.25;
  color:var(--ink); padding:0 14px; }
.xp-entente.xp-pass span.me{ color:var(--brass-bright); font-style:italic; }
.xp-entente.xp-pass span.me u{ background:var(--brass-bright); box-shadow:0 0 14px rgba(240,217,168,.7); }

/* the front page: whole, then its date, then the column */
.xp-photo.xp-paper img{ animation:xp-paper 13.4s cubic-bezier(.45,.05,.25,1) .5s both; filter:contrast(1.06); }
@keyframes xp-paper{
  0%,12%{ transform:scale(1); }
  30%,44%{ transform:scale(2.4) translate(-29%, 29%); }
  64%,100%{ transform:scale(2.6) translate(30%, -24%); }
}

/* a forgotten name, and then the name */
.xp-some{ position:relative; height:96px; margin:8px auto 30px; }
.xp-some span{ position:absolute; left:0; right:0; top:0; line-height:80px; opacity:0; }
.xp-some .a{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:54px; color:#9a958a;
  animation:xp-fade 1.2s ease 2.8s forwards, xp-fadeout 1s ease 4.6s forwards; }
.xp-some .b{ font-family:'Cinzel',serif; font-size:50px; letter-spacing:.1em; color:var(--brass-bright);
  animation:xp-rise 1.6s cubic-bezier(.2,.7,.25,1) 5.2s forwards; }
.xp-some i{ position:absolute; left:50%; bottom:0; width:420px; height:1px; margin-left:-210px; background:var(--brass);
  transform:scaleX(0); animation:xp-routeline 1.6s ease 5.4s forwards; }

/* the back of the watch, kept small over the last words */
.xpF-end .xp-photo.xp-keepP{ width:176px; height:235px; margin:0 auto 30px; opacity:0; animation:xp-fade 1.6s ease .2s forwards; }

.xp-canvas.portrait .xpF-split .pane-art .xp-photo.frame.xp-paper{ width:540px !important; height:774px !important; }
.xp-canvas.portrait .xp-dx b{ font-size:54px; }
.xp-canvas.portrait .xp-dx i{ margin-left:0; transform-origin:left center; }
.xp-canvas.portrait .xp-entente{ width:780px; }
.xp-canvas.portrait .xp-entente span{ font-size:11px; letter-spacing:.16em; }
.xp-canvas.portrait .xp-entente.xp-pass{ width:820px; }
.xp-canvas.portrait .xp-entente.xp-pass > i{ left:82px; right:82px; }
.xp-canvas.portrait .xp-entente.xp-pass span{ font-size:19px; letter-spacing:0; padding:0 8px; }
.xp-canvas.portrait .xp-some .a{ font-size:46px; }
.xp-canvas.portrait .xp-some .b{ font-size:38px; }
.xp-canvas.portrait .xpF-end .xp-photo.xp-keepP{ width:220px; height:293px; }
@media (prefers-reduced-motion: reduce){
  .xp-photo.xp-toHand img, .xp-photo.xp-toSign img, .xp-photo.xp-paper img{ animation:none !important; }
}

/* --------------------------------------------------------------------------
   42. The Reverso That Started It All — line work
   -------------------------------------------------------------------------- */
/* variety: no two strokes the same height */
.xp-vary{ display:flex; justify-content:center; align-items:flex-end; gap:13px; height:80px; margin:0 auto 38px; }
.xp-vary i{ display:block; width:1px; background:var(--brass); transform:scaleY(0); transform-origin:bottom;
  animation:xp-routeY .9s cubic-bezier(.2,.8,.2,1) forwards; }
.xp-vary i:nth-child(4n+1){ background:var(--brass-bright); }

/* the year, set large and quiet */
.xp-bigyear{ font-family:'Cinzel',serif; font-size:84px; letter-spacing:.14em; line-height:1; color:var(--brass-bright);
  opacity:0; animation:xp-rise 1.6s cubic-bezier(.2,.7,.25,1) .2s forwards; }
.xp-entente.xp-pass.xp-solid{ width:900px; }
.xp-entente.xp-pass.xp-solid > i{ left:150px; right:150px; background:var(--brass); animation-duration:3.6s; animation-delay:4.2s; }

/* a city's lights going down, and one that stays */
.xp-lights{ display:grid; grid-template-columns:repeat(13, 10px); gap:20px 26px; justify-content:center; margin:0 auto 44px; }
.xp-lights i{ display:block; width:10px; height:10px; border-radius:50%; background:var(--brass); opacity:.85;
  animation:xp-lightout 1.6s ease forwards; }
.xp-lights i.one{ background:#fff; box-shadow:0 0 16px rgba(240,217,168,.9); animation:xp-wait 2.6s ease-in-out 4.6s infinite; opacity:1; }
@keyframes xp-lightout{ to{ opacity:.12; } }

/* the illustration: from the building down to the three of them */
.xp-photo.xp-toBrion img{ animation:xp-toBrion 10s cubic-bezier(.45,.05,.25,1) 1s both; }
@keyframes xp-toBrion{ from{ transform:scale(1.02); } to{ transform:scale(1.55) translate(0, -6%); } }
.xp-photo.xp-toUs img{ animation:xp-toUs 11s cubic-bezier(.45,.05,.25,1) 1s both; }
@keyframes xp-toUs{ from{ transform:scale(1.02); } to{ transform:scale(1.4) translate(-2%, -6%); } }
.xp-plate-empty.xp-waitR{ margin:22px 0 0 auto; width:84px; height:112px; }

/* shut doors, and one seeing a single client */
.xp-doors{ display:flex; justify-content:center; gap:20px; margin:0 auto 40px; }
.xp-doors i{ display:block; width:44px; height:70px; border:1px dashed var(--brass); opacity:0; animation:xp-doorshut 1.2s ease forwards; }
.xp-doors i.open{ border-style:solid; border-color:var(--brass-bright); animation:xp-fade 1.2s ease forwards;
  background:linear-gradient(to top, rgba(240,217,168,.28), transparent 70%); }
@keyframes xp-doorshut{ to{ opacity:.34; } }

/* two boutiques, and one dot that goes out and comes back */
.xp-stops{ position:relative; width:640px; height:74px; margin:34px auto 36px; opacity:0; animation:xp-fade 1.4s ease forwards; }
.xp-stops .ln{ position:absolute; left:0; right:0; top:10px; height:1px; background:var(--brass); }
.xp-stops span{ position:absolute; top:34px; font-family:'Cinzel',serif; font-size:13px; letter-spacing:.24em; text-transform:uppercase;
  color:#f0d9a8; white-space:nowrap; }
.xp-stops span u{ position:absolute; top:-29px; width:11px; height:11px; box-sizing:border-box; border:1px solid var(--brass-bright);
  border-radius:50%; background:#0b0e12; }
.xp-stops .a{ left:0; transform:translateX(-50%); }   .xp-stops .a u{ left:50%; margin-left:-5px; }
.xp-stops .b{ right:0; transform:translateX(50%); }   .xp-stops .b u{ left:50%; margin-left:-6px; }
.xp-stops .dot{ position:absolute; top:5px; left:0; width:11px; height:11px; margin-left:-5px; border-radius:50%; background:#fff;
  box-shadow:0 0 14px rgba(240,217,168,.9); z-index:1; }
.xp-stops.wait{ animation-delay:6.6s; }
.xp-stops.wait .ln{ background:repeating-linear-gradient(to right, var(--brass) 0 7px, transparent 7px 13px); }
.xp-stops.go{ animation-delay:1.6s; }
.xp-stops.go .dot{ animation:xp-stopgo 2.6s cubic-bezier(.5,0,.3,1) 2.4s forwards; }
.xp-stops.back{ animation-delay:6.0s; }
.xp-stops.back .dot{ left:100%; animation:xp-stopback 2.6s cubic-bezier(.5,0,.3,1) 7.2s forwards; }
@keyframes xp-stopgo{ to{ left:100%; } }
@keyframes xp-stopback{ to{ left:0; } }

/* a message, typed */
.xp-msg{ display:inline-block; margin:6px auto 4px; padding:18px 34px; border:1px solid var(--brass); border-radius:26px 26px 26px 6px;
  opacity:0; animation:xp-fade 1s ease 3.4s forwards; }
.xp-msg p{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:40px; line-height:1.2; color:var(--ink); }
.xp-msg p span{ display:inline-block; opacity:0; animation:xp-fade .12s linear forwards; }

/* the first Reverso, and the ones that followed */
.xp-more{ display:flex; justify-content:center; gap:18px; margin:0 auto 40px; }
.xp-more i{ display:block; width:34px; height:52px; border:1px solid var(--brass); border-radius:3px; opacity:0;
  animation:xp-fade 1s ease forwards; }
.xp-more i.first{ border-color:var(--brass-bright); background:rgba(240,217,168,.22); box-shadow:0 0 18px rgba(240,217,168,.45); }

.xp-canvas.portrait .xpF-split .pane-art .xp-photo.frame.xp-sq{ width:540px !important; height:540px !important; }
.xp-canvas.portrait .xp-vary{ gap:10px; }
.xp-canvas.portrait .xp-entente.xp-pass.xp-solid{ width:800px; }
.xp-canvas.portrait .xp-entente.xp-pass.xp-solid > i{ left:133px; right:133px; }
.xp-canvas.portrait .xp-plate-empty.xp-waitR{ margin-left:0; }
.xp-canvas.portrait .xp-doors{ gap:14px; }
.xp-canvas.portrait .xp-stops{ width:480px; }
.xp-canvas.portrait .xp-msg p{ font-size:32px; }
.xp-canvas.portrait .xp-more{ gap:14px; }
@media (prefers-reduced-motion: reduce){
  .xp-photo.xp-toBrion img, .xp-photo.xp-toUs img, .xp-stops .dot{ animation:none !important; }
}

/* --------------------------------------------------------------------------
   43. The Most Beautiful Watch Ever Made — line work
   -------------------------------------------------------------------------- */
/* the same field of lights as the story before, coming back up */
.xp-lights.up i{ opacity:.12; animation:xp-lighton 1.8s ease forwards; }
.xp-lights.up i.one{ opacity:1; animation:none; }
@keyframes xp-lighton{ to{ opacity:.9; } }

/* sound, made visible */
.xp-sound{ display:flex; justify-content:center; align-items:center; gap:9px; height:84px; margin:0 auto 30px; }
.xp-sound i{ display:block; width:2px; background:var(--brass-bright); border-radius:1px; transform:scaleY(.25);
  animation:xp-soundwave 1.3s ease-in-out infinite alternate; }
.xp-sound i:nth-child(3n){ background:var(--brass); }
@keyframes xp-soundwave{ from{ transform:scaleY(.2); opacity:.5; } to{ transform:scaleY(1); opacity:1; } }

.xp-photo.xp-toBoat img{ animation:xp-toBoat 11s cubic-bezier(.45,.05,.25,1) 1s both; }
@keyframes xp-toBoat{ from{ transform:scale(1.02); } to{ transform:scale(1.28) translate(0, -7%); } }
.xp-photo.xp-toLA img{ animation:xp-toLA 10s cubic-bezier(.45,.05,.25,1) 1.4s both; }
@keyframes xp-toLA{ from{ transform:scale(1.02); } to{ transform:scale(1.75) translate(-8%, -5%); } }

/* a table of new watches, and the one the eye keeps returning to */
.xp-pull{ position:relative; display:flex; justify-content:center; gap:22px; width:max-content; margin:0 auto 44px; padding-bottom:22px; }
.xp-pull i{ display:block; width:36px; height:54px; border:1px solid var(--brass); border-radius:3px; opacity:0; animation:xp-doorshut 1s ease forwards; }
.xp-pull i.it{ animation:xp-doorshut 1s ease forwards, xp-lit 1.4s ease 7.6s forwards; }
.xp-pull b{ position:absolute; bottom:0; left:0; width:36px; height:2px; background:var(--brass-bright);
  box-shadow:0 0 12px rgba(240,217,168,.8); opacity:0; animation:xp-pullback 6.4s cubic-bezier(.5,0,.3,1) 1.6s forwards; }
@keyframes xp-pullback{
  0%{ opacity:0; transform:translateX(232px); } 8%{ opacity:1; transform:translateX(232px); }
  24%{ transform:translateX(58px); } 40%{ transform:translateX(232px); }
  56%{ transform:translateX(348px); } 72%{ transform:translateX(232px); }
  84%{ transform:translateX(116px); } 100%{ opacity:1; transform:translateX(232px); }
}

/* two lengths: what we usually spent, and this */
.xp-price{ width:640px; margin:0 auto 38px; text-align:left; }
.xp-price > div{ margin-bottom:20px; }
.xp-price b{ display:block; margin-bottom:10px; font-family:'Cinzel',serif; font-weight:400; font-size:12px; letter-spacing:.24em;
  text-transform:uppercase; color:#f0d9a8; opacity:0; animation:xp-fade 1.2s ease .3s forwards; }
.xp-price > div:nth-child(2) b{ animation-delay:1.6s; color:var(--brass-bright); }
.xp-price i{ display:block; height:3px; transform:scaleX(0); transform-origin:left center; }
.xp-price .s{ width:30%; background:var(--brass); animation:xp-routeline 1s cubic-bezier(.2,.8,.2,1) .5s forwards; }
.xp-price .l{ width:100%; background:var(--brass-bright); box-shadow:0 0 12px rgba(240,217,168,.6);
  animation:xp-routeline 2.4s cubic-bezier(.2,.8,.2,1) 1.8s forwards; }

/* two watches side by side, and the number they share */
.xp-twin{ display:flex; justify-content:center; align-items:flex-start; gap:70px; margin:0 auto 34px; }
.xp-twin figure{ margin:0; width:230px; opacity:0; animation:xp-rise 1.4s cubic-bezier(.2,.7,.25,1) forwards; }
.xp-twin figure .xp-shot{ width:230px; height:304px; aspect-ratio:auto; }
.xp-twin figure .xp-photo.xp-plate{ width:206px; height:274px; margin:15px auto; }
.xp-twin figcaption{ margin-top:14px; font-family:'Cormorant Garamond',serif; font-size:21px; line-height:1.3; color:var(--ink); text-align:center; }
.xp-twin figcaption b{ display:block; font-family:'Cinzel',serif; font-weight:400; font-size:12px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--brass-bright); margin-bottom:4px; }
.xp-twin figcaption em{ display:block; margin-top:8px; font-style:normal; font-family:'Cinzel',serif; font-size:22px; letter-spacing:.14em;
  color:var(--brass-bright); opacity:0; animation:xp-rise 1.2s cubic-bezier(.2,.7,.25,1) forwards; }
.xp-twin .eq{ align-self:center; width:34px; height:9px; margin-top:150px; border-top:1px solid var(--brass-bright); border-bottom:1px solid var(--brass-bright);
  opacity:0; animation:xp-fade 1s ease forwards; }

.xp-entente.xp-pass.xp-solid.xp-fam > i{ animation-delay:.6s; animation-duration:3.4s; }

/* a question and an answer */
.xp-talk{ display:flex; flex-direction:column; gap:16px; width:820px; margin:10px auto 14px; }
.xp-talk .xp-msg{ align-self:flex-start; margin:0; max-width:620px; text-align:left; }
.xp-talk .xp-msg p{ font-size:31px; }
.xp-talk .xp-msg.r{ align-self:flex-end; border-color:var(--brass-bright); border-radius:26px 26px 6px 26px; }
.xp-talk .xp-msg em{ color:var(--brass-bright); }

.xp-canvas.portrait .xp-sound{ gap:7px; }
.xp-canvas.portrait .xp-pull{ gap:16px; }
.xp-canvas.portrait .xp-pull b{ animation-name:xp-pullbackP; }
@keyframes xp-pullbackP{
  0%{ opacity:0; transform:translateX(208px); } 8%{ opacity:1; transform:translateX(208px); }
  24%{ transform:translateX(52px); } 40%{ transform:translateX(208px); }
  56%{ transform:translateX(312px); } 72%{ transform:translateX(208px); }
  84%{ transform:translateX(104px); } 100%{ opacity:1; transform:translateX(208px); }
}
.xp-canvas.portrait .xp-price{ width:620px; }
.xp-canvas.portrait .xp-twin{ gap:40px; }
.xp-canvas.portrait .xp-talk{ width:780px; }
.xp-canvas.portrait .xp-talk .xp-msg p{ font-size:28px; }
@media (prefers-reduced-motion: reduce){
  .xp-photo.xp-toBoat img, .xp-photo.xp-toLA img, .xp-sound i, .xp-pull b{ animation:none !important; }
}

/* --------------------------------------------------------------------------
   44. The Call Before the Appointment — line work
   -------------------------------------------------------------------------- */
/* six complications, wanted all at once, and then the choosing */
.xp-six{ display:flex; justify-content:center; gap:22px; margin:0 auto 36px; }
.xp-six i{ display:block; width:44px; height:66px; border:1px solid var(--brass-bright); border-radius:3px; background:rgba(240,217,168,.14);
  opacity:0; animation:xp-fade 1s ease forwards, xp-sixdim 1.2s ease forwards; }
@keyframes xp-sixdim{ to{ opacity:.26; border-style:dashed; background:transparent; } }

/* gold and steel, and the one that suits the watch */
.xp-gs{ display:flex; justify-content:center; gap:54px; margin:0 auto 36px; }
.xp-gs div{ text-align:center; opacity:0; animation:xp-fade 1.2s ease .3s forwards; }
.xp-gs i{ display:block; width:58px; height:84px; margin:0 auto 12px; border-radius:3px; border:1px solid var(--brass); }
.xp-gs b{ font-family:'Cinzel',serif; font-weight:400; font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:#f0d9a8; }
.xp-gs .g{ animation:xp-fade 1.2s ease .3s forwards, xp-sixdim 1.4s ease 5.6s forwards; }
.xp-gs .g i{ background:rgba(201,163,94,.3); }
.xp-gs .s i{ border-color:#cfd6dc; animation:xp-steel 1.6s ease 5.8s forwards; }
.xp-gs .s b{ color:#dfe5ea; }
@keyframes xp-steel{ to{ background:rgba(207,214,220,.22); box-shadow:0 0 22px rgba(207,214,220,.5); } }

/* a year's allocation, going while the phone rings; one held */
.xp-slots{ display:flex; justify-content:center; gap:14px; margin:0 auto 32px; }
.xp-slots i{ display:block; width:34px; height:50px; border:1px solid var(--brass); border-radius:3px; opacity:0;
  animation:xp-fade .8s ease forwards, xp-sixdim .7s ease forwards; }
.xp-slots i.ours{ animation:xp-fade .8s ease forwards, xp-lit 1.2s ease forwards; }
/* the same two hours, running out */
.xp-week.xp-eleven.xp-hours{ margin-top:26px; margin-bottom:0; height:86px; padding-bottom:0; opacity:.9; }

/* prices climbing, and where this one sat */
.xp-climb{ display:flex; justify-content:center; align-items:flex-end; gap:16px; height:116px; margin:0 auto 34px; }
.xp-climb i{ display:block; width:14px; background:var(--brass); opacity:.55; transform:scaleY(0); transform-origin:bottom;
  animation:xp-routeY 1s cubic-bezier(.2,.8,.2,1) forwards; }
.xp-climb i.this{ height:40px; margin-left:26px; opacity:1; background:#dfe5ea; box-shadow:0 0 16px rgba(207,214,220,.6); }

/* a chronograph, the way a child meets it: start, stop, back to zero */
.xp-chrono{ position:relative; width:150px; height:150px; margin:0 auto 16px; opacity:0; animation:xp-fade 1.2s ease .2s forwards; }
.xp-chrono .ring{ position:absolute; inset:0; border:1px solid var(--brass-bright); border-radius:50%;
  background:repeating-conic-gradient(from -0.6deg, var(--brass) 0 1.2deg, transparent 1.2deg 30deg);
  -webkit-mask-image:radial-gradient(circle, transparent 0 62px, #000 63px); mask-image:radial-gradient(circle, transparent 0 62px, #000 63px); }
.xp-chrono .hand{ position:absolute; left:74px; top:14px; width:2px; height:61px; background:#fff; transform-origin:bottom center;
  box-shadow:0 0 10px rgba(240,217,168,.8); animation:xp-chrono 10s linear 1.4s both; }
.xp-chrono .pin{ position:absolute; left:70px; top:70px; width:10px; height:10px; border-radius:50%; background:var(--brass-bright); }
.xp-chrono .p1, .xp-chrono .p2{ position:absolute; right:-16px; width:12px; height:5px; background:var(--brass); border-radius:1px; }
.xp-chrono .p1{ top:38px; transform:rotate(-30deg); animation:xp-push .5s ease 2.2s, xp-push .5s ease 5.8s; }
.xp-chrono .p2{ bottom:38px; transform:rotate(30deg); animation:xp-push2 .5s ease 8.4s; }
@keyframes xp-push{ 50%{ transform:rotate(-30deg) translateX(-6px); background:#fff; } }
@keyframes xp-push2{ 50%{ transform:rotate(30deg) translateX(-6px); background:#fff; } }
@keyframes xp-chrono{
  0%,10%{ transform:rotate(0deg); } 46%,70%{ transform:rotate(216deg); } 74%,100%{ transform:rotate(360deg); }
}
.xp-steps{ display:flex; justify-content:center; gap:44px; margin:0 auto 30px; }
.xp-steps b{ font-family:'Cinzel',serif; font-weight:400; font-size:13px; letter-spacing:.3em; text-transform:uppercase; color:var(--brass-bright);
  opacity:.18; animation:xp-stepon .8s ease forwards; }
@keyframes xp-stepon{ to{ opacity:1; } }

.xp-canvas.portrait .xp-six{ gap:16px; }
.xp-canvas.portrait .xp-slots{ gap:10px; }
.xp-canvas.portrait .xp-climb{ gap:13px; }
@media (prefers-reduced-motion: reduce){ .xp-chrono .hand{ animation:none !important; } }

/* --------------------------------------------------------------------------
   45. Our First Watches and Wonders — line work
   -------------------------------------------------------------------------- */
/* a week of the fair, and its first day */
.xp-days{ position:relative; display:flex; justify-content:center; gap:16px; width:max-content; margin:0 auto 44px; padding-bottom:30px; }
.xp-days i{ display:block; width:52px; height:52px; border:1px solid var(--brass); border-radius:3px; opacity:0; animation:xp-doorshut 1s ease forwards; }
.xp-days i.open{ border-color:var(--brass-bright); background:rgba(240,217,168,.22); box-shadow:0 0 20px rgba(240,217,168,.45);
  animation:xp-fade 1s ease forwards; }
.xp-days span{ position:absolute; left:0; bottom:0; font-family:'Cinzel',serif; font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--brass-bright); white-space:nowrap; opacity:0; animation:xp-fade 1.2s ease 1.8s forwards; }

.xp-photo.xp-toFair img{ animation:xp-toFair 10s cubic-bezier(.45,.05,.25,1) 1s both; }
@keyframes xp-toFair{ from{ transform:scale(1.02); } to{ transform:scale(1.3) translate(2%, -3%); } }
.xp-photo.xp-toChoose img{ animation:xp-toChoose 11s cubic-bezier(.45,.05,.25,1) 1.4s both; }
@keyframes xp-toChoose{ from{ transform:scale(1.02); } to{ transform:scale(1.5) translate(3%, -14%); } }
/* from the name over the door, out to the three of them under it */
.xp-photo.xp-toManu img{ animation:xp-toManu 9s cubic-bezier(.45,.05,.25,1) .6s both; }
@keyframes xp-toManu{ from{ transform:scale(1.5) translate(-3%, 16%); } to{ transform:scale(1.02); } }

/* two metals, neither settling */
.xp-gs.xp-both .g{ animation:xp-fade 1.2s ease .3s forwards, xp-altA 3.4s ease-in-out 2s infinite; }
.xp-gs.xp-both .s{ animation:xp-fade 1.2s ease .3s forwards, xp-altB 3.4s ease-in-out 2s infinite; }
.xp-gs.xp-both .g i{ border-color:#e3b9a4; background:rgba(227,185,164,.26); }
.xp-gs.xp-both .g b{ color:#edcfc0; }
.xp-gs.xp-both .s i{ animation:none; background:rgba(120,160,214,.24); border-color:#a9c3e6; }
@keyframes xp-altA{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
@keyframes xp-altB{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }

/* the committee, and its youngest member */
.xp-votes{ margin:6px 0 30px auto; width:max-content; }
.xp-votes div{ display:grid; grid-template-columns:110px auto; gap:22px; align-items:baseline; padding:9px 0; border-top:1px solid var(--line);
  text-align:left; opacity:0; animation:xp-rise 1.2s cubic-bezier(.2,.7,.25,1) forwards; }
.xp-votes b{ font-family:'Cinzel',serif; font-weight:400; font-size:13px; letter-spacing:.3em; text-transform:uppercase; color:#f0d9a8; }
.xp-votes span{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:27px; color:#9a958a; }
.xp-votes .yes b{ color:#a9c3e6; }
.xp-votes .yes span{ font-style:normal; font-size:36px; color:#bcd3f2; }

/* one hair's width, drawn slowly */
.xp-hair{ position:relative; width:720px; height:40px; margin:6px auto 12px; }
.xp-hair i{ position:absolute; left:0; top:20px; width:100%; height:1px; background:var(--brass-bright); opacity:.7;
  transform:scaleX(0) scaleY(.5); transform-origin:left center; animation:xp-hairline 8s cubic-bezier(.3,.1,.3,1) 3.4s forwards; }
.xp-hair b{ position:absolute; left:0; top:18px; width:5px; height:5px; margin-left:-2px; border-radius:50%; background:#fff;
  box-shadow:0 0 10px rgba(240,217,168,.9); opacity:0; animation:xp-hairtip 8s cubic-bezier(.3,.1,.3,1) 3.4s forwards; }
@keyframes xp-hairline{ to{ transform:scaleX(1) scaleY(.5); } }
@keyframes xp-hairtip{ 0%{ left:0; opacity:1; } 96%{ opacity:1; } 100%{ left:100%; opacity:0; } }

/* twenty-four points, going round */
.xp-world{ position:relative; width:200px; height:200px; margin:0 auto 26px; }
.xp-world .r{ position:absolute; inset:0; animation:xp-turn 80s linear infinite; }
.xp-world .r i{ position:absolute; left:97px; top:97px; width:6px; height:6px; border-radius:50%; background:#a9c3e6; opacity:0;
  animation:xp-fade .8s ease forwards; }
.xp-world .r i:nth-child(6n+1){ background:#fff; box-shadow:0 0 10px rgba(169,195,230,.9); }
.xp-world b{ position:absolute; inset:0; display:grid; place-items:center; font-family:'Cinzel',serif; font-weight:400; font-size:44px;
  letter-spacing:.06em; color:var(--brass-bright); opacity:0; animation:xp-fade 1.4s ease 3.2s forwards; }
@keyframes xp-turn{ to{ transform:rotate(360deg); } }

.xp-canvas.portrait .xp-days{ gap:12px; }
.xp-canvas.portrait .xp-votes{ margin-left:0; }
.xp-canvas.portrait .xp-hair{ width:640px; }
@media (prefers-reduced-motion: reduce){
  .xp-photo.xp-toFair img, .xp-photo.xp-toChoose img, .xp-photo.xp-toManu img, .xp-world .r{ animation:none !important; }
}

/* --------------------------------------------------------------------------
   46. Our Istanbul, the shorter cut — line work
   -------------------------------------------------------------------------- */
.xp-plate-empty.xp-waitL{ margin:22px 0 0 0; width:84px; height:112px; }
/* two countries, one city */
.xp-meet{ position:relative; width:420px; height:112px; margin:0 0 30px; }
.xp-meet span, .xp-meet b{ position:absolute; font-family:'Cinzel',serif; font-weight:400; font-size:13px; letter-spacing:.26em; text-transform:uppercase;
  color:#f0d9a8; opacity:0; animation:xp-fade 1.2s ease .4s forwards; }
.xp-meet .a{ left:0; top:0; } .xp-meet .b{ right:0; top:0; }
.xp-meet b{ left:0; right:0; bottom:0; text-align:center; color:var(--brass-bright); animation-delay:3.4s; }
.xp-meet i{ position:absolute; top:28px; height:1px; width:216px; background:var(--brass);
  animation:xp-meetline 2.2s cubic-bezier(.3,.6,.2,1) 1.2s forwards; }
.xp-meet .la{ left:6px; transform-origin:left center; --r:14deg; transform:rotate(14deg) scaleX(0); }
.xp-meet .lb{ right:6px; transform-origin:right center; --r:-14deg; transform:rotate(-14deg) scaleX(0); }
@keyframes xp-meetline{ to{ transform:rotate(var(--r)) scaleX(1); } }
.xp-meet u{ position:absolute; left:50%; top:74px; width:11px; height:11px; margin-left:-6px; border-radius:50%; background:var(--brass-bright);
  box-shadow:0 0 14px rgba(240,217,168,.8); opacity:0; animation:xp-fade .8s ease 3.2s forwards; }
/* three designs, and the one that was ours */
.xp-slots.xp-three{ gap:26px; margin-bottom:26px; }
.xp-slots.xp-three i{ width:52px; height:78px; }
.xp-canvas.portrait .xp-meet{ margin-left:auto; margin-right:auto; }
/* the window picture, held whole: the picture gets the wider half */
.xpF-split.xp-winsplit{ grid-template-columns:660px 1fr; padding:0 90px; }
.xp-photo.xp-toWin img{ animation:xp-toWin 14s cubic-bezier(.45,.05,.25,1) 1s both; }
@keyframes xp-toWin{ from{ transform:scale(1.02); } to{ transform:scale(1.1); } }
.xp-canvas.portrait .xpF-split.xp-winsplit{ grid-template-columns:1fr; padding:0 60px; }
@media (prefers-reduced-motion: reduce){ .xp-photo.xp-toWin img{ animation:none !important; } }

/* --------------------------------------------------------------------------
   47. A Tribute in Detail and Colour — line work
   Yellow appears only where the story speaks of it: a word, and one line
   that drains to steel and later fills again.
   -------------------------------------------------------------------------- */
.xpF-title h1.xp-h1long.xp-h1xl{ font-size:72px; }
.xp-canvas.portrait .xpF-title h1.xp-h1long.xp-h1xl{ font-size:40px; }
.xp-say em.xp-yel{ color:#f2cb3d; }
/* the watch on the drawing, then a slow push up to the drawn violinist */
.xp-photo.xp-toDraw img{ object-position:50% 0; animation:xp-toDraw 10s cubic-bezier(.45,.05,.25,1) 3.4s both; }
@keyframes xp-toDraw{ from{ transform:scale(1); } to{ transform:scale(1.5) translate(-11%, 14%); } }
/* the same picture, read the other way: down the strap */
.xp-photo.xp-toStrap img{ object-position:50% 100%; animation:xp-toStrap 10s cubic-bezier(.45,.05,.25,1) 1.4s both; }
@keyframes xp-toStrap{ from{ transform:scale(1); } to{ transform:scale(1.42) translate(-9%, -11%); } }
/* onto the engraved figure */
.xp-photo.xp-toVln img{ animation:xp-toVln 9s cubic-bezier(.45,.05,.25,1) 1.6s both; }
@keyframes xp-toVln{ from{ transform:scale(1); } to{ transform:scale(1.55) translate(7%, -5%); } }
/* one line of colour: it leaves, and it comes back */
.xp-swatch{ position:relative; width:420px; height:3px; margin:0 auto 44px; background:#5d656e; }
.xp-swatch i{
  position:absolute; inset:0; background:#f2cb3d; box-shadow:0 0 16px rgba(242,203,61,.55);
  transform-origin:right center; animation:xp-swdrain 3.2s cubic-bezier(.5,0,.3,1) 3.2s forwards;
}
@keyframes xp-swdrain{ to{ transform:scaleX(0); } }
.xp-swatch.back{ width:360px; margin-bottom:26px; }
.xp-swatch.back i{ transform:scaleX(0); transform-origin:left center; animation:xp-routeline 2.6s cubic-bezier(.3,.7,.2,1) 5.2s forwards; }
.xp-canvas.portrait .xp-swatch{ width:380px; }
@media (prefers-reduced-motion: reduce){
  .xp-photo.xp-toDraw img, .xp-photo.xp-toStrap img, .xp-photo.xp-toVln img{ animation:none !important; }
}

/* --------------------------------------------------------------------------
   48. The Dragon — line work
   -------------------------------------------------------------------------- */
/* a row of small gifts, and the one that came back */
.xp-marks .xp-inret{
  display:block; width:34px; height:46px; margin-left:22px; border:1px solid var(--brass-bright); border-radius:3px;
  box-shadow:0 0 18px rgba(240,217,168,.35); opacity:0; animation:xp-fade 1.4s ease 4.6s forwards;
}
/* the working drawings, laid out in the order they were made; the earlier
   ones step back when the last arrives */
.xp-sheets{ display:flex; justify-content:center; align-items:center; gap:36px; margin:0 auto 30px; }
.xp-sheets .xp-photo{ width:236px; height:338px; flex:0 0 auto; opacity:0; }
.xp-sheets .xp-photo.was{ animation:xp-rise 1.4s cubic-bezier(.2,.7,.25,1) forwards, xp-sheetdim 1.6s ease forwards; }
.xp-sheets .xp-photo.xp-is{ animation:xp-rise 1.4s cubic-bezier(.2,.7,.25,1) forwards; border-color:var(--brass-bright); }
@keyframes xp-sheetdim{ to{ opacity:.38; } }
.xp-canvas.portrait .xp-sheets{ gap:22px; }
.xp-canvas.portrait .xp-sheets .xp-photo{ width:250px; height:358px; }
/* the eight, traced over the sketch */
.xp-eight{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.xp-eight path{
  fill:none; stroke:#b07a1a; stroke-width:1.3; stroke-linecap:round;
  stroke-dasharray:100; stroke-dashoffset:100; opacity:.9;
  animation:xp-draw 4.6s cubic-bezier(.45,0,.2,1) 1.8s forwards;
}
.xp-canvas.portrait .xpF-split .pane-art .xp-photo.frame.xp-sk8{ width:440px !important; height:630px !important; }
/* slow pushes: the Reverso remembered, the bench, the gold, the wrist */
.xp-photo.xp-toJlc img{ animation:xp-toJlc 11s cubic-bezier(.45,.05,.25,1) .4s both; }
@keyframes xp-toJlc{ from{ transform:scale(1.02); } to{ transform:scale(1.16); } }
.xp-photo.xp-toBench img{ animation:xp-toBench 9s cubic-bezier(.45,.05,.25,1) 1.4s both; }
@keyframes xp-toBench{ from{ transform:scale(1); } to{ transform:scale(1.6) translate(-1%, 2%); } }
.xp-photo.xp-toMacro img{ animation:xp-toMacro 9.5s cubic-bezier(.45,.05,.25,1) .8s both; }
@keyframes xp-toMacro{ from{ transform:scale(1); } to{ transform:scale(1.5) translate(6%, 9%); } }
.xp-photo.xp-toWrist img{ animation:xp-toWrist 10s cubic-bezier(.45,.05,.25,1) 3.6s both; }
@keyframes xp-toWrist{ from{ transform:scale(1); } to{ transform:scale(1.5) translate(-2%, -3%); } }
/* the studio picture is a square with the case at its centre */
.xp-shot.xp-smd{ --zoom:188%; --shift:0%; }
.xp-canvas.portrait .xpF-split .pane-art .xp-photo.frame.xp-toBench{ width:440px !important; height:677px !important; }
@media (prefers-reduced-motion: reduce){
  .xp-photo.xp-toJlc img, .xp-photo.xp-toBench img, .xp-photo.xp-toMacro img, .xp-photo.xp-toWrist img{ animation:none !important; }
  .xp-eight path{ stroke-dashoffset:0; }
}

/* --------------------------------------------------------------------------
   49. Robin Tong Lin Wong: the Geographic and the Or Deco — line work
   -------------------------------------------------------------------------- */
/* a shortlist: outlined cases with their names; the chosen one lights, the
   others step back; a watch still wished for keeps breathing */
.xp-shortlist{ display:flex; justify-content:center; gap:70px; margin:12px auto 34px; }
.xp-shortlist figure{ margin:0; width:190px; opacity:0; animation:xp-rise 1.2s cubic-bezier(.2,.7,.25,1) var(--d) forwards; }
.xp-shortlist figure.off{ animation:xp-rise 1.2s cubic-bezier(.2,.7,.25,1) var(--d) forwards, xp-sheetdim 1.4s ease var(--dd) forwards; }
.xp-shortlist i{ display:block; width:76px; height:108px; margin:0 auto 18px; border:1px solid var(--brass); border-radius:5px; position:relative; }
.xp-shortlist i::after{ content:''; position:absolute; inset:9px; border:1px solid var(--line); border-radius:2px; }
.xp-shortlist figure.on i{ animation:xp-pickon 1.4s ease var(--dd) forwards; }
@keyframes xp-pickon{ to{ border-color:var(--brass-bright); box-shadow:0 0 26px rgba(240,217,168,.42); } }
.xp-shortlist figure.wish i::after{ animation:xp-wait 3.2s ease-in-out infinite; }
.xp-shortlist span{ display:block; font-family:'Cinzel',serif; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:#f0d9a8; }
.xp-canvas.portrait .xp-shortlist{ gap:34px; }
.xp-canvas.portrait .xp-shortlist figure{ width:200px; }
/* pushes: onto the world map, onto the dial, along the mesh */
.xp-photo.xp-toMap img{ animation:xp-toMap 10s cubic-bezier(.45,.05,.25,1) 1.6s both; }
@keyframes xp-toMap{ from{ transform:scale(1); } to{ transform:scale(1.75) translate(3%, 4%); } }
.xp-photo.xp-toOD img{ animation:xp-toOD 12s cubic-bezier(.45,.05,.25,1) 1.4s both; }
@keyframes xp-toOD{ from{ transform:scale(1); } to{ transform:scale(1.35) translate(-3%, 3%); } }
.xp-photo.xp-toMesh img{ animation:xp-toMesh 11s cubic-bezier(.45,.05,.25,1) 1.6s both; }
@keyframes xp-toMesh{ from{ transform:scale(1); } to{ transform:scale(1.5) translate(2%, -9%); } }
/* waiting for a delivery: the same crossing, taken slowly */
.xp-route.ltr.xp-slowR .ln{ animation-duration:5.4s; animation-delay:1.4s; }
.xp-route.ltr.xp-slowR .dot{ animation-duration:5.4s; animation-delay:1.4s; }
.xp-route.ltr.xp-slowR .pt.a, .xp-route.ltr.xp-slowR .lb.a{ animation-delay:6.6s; }
@media (prefers-reduced-motion: reduce){
  .xp-photo.xp-toMap img, .xp-photo.xp-toOD img, .xp-photo.xp-toMesh img, .xp-shortlist figure.wish i::after{ animation:none !important; }
}

/* --------------------------------------------------------------------------
   50. The one-minute reel (The Reverso I Couldn't Forget)
   Rendered at 1080x1920 only. Words arrive one by one; the accent is the
   Or Deco's own pink gold. Everything sits between the platform's top and
   bottom controls.
   -------------------------------------------------------------------------- */
.xp-rl{ margin:0 0 10px; font-family:'Cormorant Garamond',serif; font-size:66px; line-height:1.1;
  color:#f6f1e8; text-shadow:0 2px 26px rgba(0,0,0,.65); text-wrap:balance; }
.xp-rl .w{ display:inline-block; opacity:0; transform:translateY(30px); filter:blur(8px);
  animation:xp-rlw .75s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes xp-rlw{ to{ opacity:1; transform:none; filter:blur(0); } }
.xp-rl .w.rose{ color:#eaa983; font-style:italic; }
.xp-rl.big{ font-size:132px; line-height:1.02; margin:6px 0 14px; }
.xp-rl.big .w{ animation-name:xp-rlbig; animation-duration:.9s; }
@keyframes xp-rlbig{ 0%{ opacity:0; transform:scale(.82); filter:blur(10px); } 60%{ opacity:1; transform:scale(1.04); filter:blur(0); } 100%{ opacity:1; transform:none; filter:blur(0); } }
.xp-rl.big.xp-rl-big2{ font-size:92px; }
.xp-rl.mid{ font-size:76px; }
.xp-rl.sm{ font-size:42px; line-height:1.3; color:#ece4d6; margin-top:18px; }
.xp-rl.caps{ font-family:'Jost',sans-serif; font-size:32px; letter-spacing:.34em; text-transform:uppercase;
  color:#f0d9a8; margin-bottom:22px; }
/* photographs fill the frame; the words sit in the middle third */
.xp-canvas.portrait .xpF-full.xp-rl-full .xp-over{ bottom:350px; padding:0 110px; }
.xp-canvas.portrait .xpF-full.xp-rl-full .xp-over > *{ margin-bottom:10px; }
.xp-canvas.portrait .xp-rl-scrim{
  background:linear-gradient(to bottom, rgba(8,10,13,.06) 0%, rgba(8,10,13,.1) 36%, rgba(8,10,13,.62) 47%,
             rgba(8,10,13,.9) 57%, rgba(8,10,13,.94) 80%, rgba(8,10,13,.9) 100%);
}
.xp-photo.bleed.xp-rl-flat img{ animation:xp-rlflat 9s cubic-bezier(.45,.05,.25,1) both; }
@keyframes xp-rlflat{ from{ transform:scale(1.04); } to{ transform:scale(1.22) translate(-2%, 4%); } }
.xp-photo.bleed.xp-rl-mesh img{ animation:xp-rlmesh 11s cubic-bezier(.45,.05,.25,1) both; }
@keyframes xp-rlmesh{ from{ transform:scale(1.05); } to{ transform:scale(1.35) translate(2%, -5%); } }
/* text-only scenes: centred, larger outlines */
.xp-rl-mid .xp-col > *{ margin-bottom:14px; }
.xp-rl-mid .xp-shortlist{ margin:46px auto 46px; gap:90px; }
.xp-rl-mid .xp-shortlist i{ width:120px; height:170px; }
.xp-rl-mid .xp-shortlist span{ font-size:18px; }
.xp-rl-mid .xp-shortlist figure{ width:260px; }
/* the wait, drawn as a crossing */
.xp-route.ltr.xp-rl-route{ width:680px; margin:70px auto 80px; }
.xp-route.ltr.xp-rl-route .ln, .xp-route.ltr.xp-rl-route .dot{ animation-duration:4s; animation-delay:.9s; }
.xp-route.ltr.xp-rl-route .pt.b, .xp-route.ltr.xp-rl-route .lb.b{ animation-delay:.6s; }
.xp-route.ltr.xp-rl-route .pt.a, .xp-route.ltr.xp-rl-route .lb.a{ animation-delay:4.7s; }
.xp-route.xp-rl-route .lb{ font-size:20px; top:74px; }
/* the end card */
.xp-rl-end .crest{ display:block; width:230px; margin:0 auto 34px; opacity:0; animation:xp-fade 1.2s ease .2s forwards; }
.xp-rl-end .brand{ font-family:'Cinzel',serif; font-size:46px; letter-spacing:.2em; text-transform:uppercase; color:#ece4d6;
  opacity:0; animation:xp-rise 1.2s cubic-bezier(.2,.7,.25,1) .6s forwards; }
.xp-rl-end .brand b{ font-weight:400; color:#eaa983; }
.xp-rl-end .url{ margin-top:40px; font-family:'Jost',sans-serif; font-size:34px; letter-spacing:.16em; color:#f0d9a8;
  opacity:0; animation:xp-fade 1.2s ease 1.2s forwards; }
.xp-rl-end .xp-rl.sm{ max-width:640px; margin-left:auto; margin-right:auto; }

/* the reel template (public/reverso-reels.js): a picture above the words,
   text-only beats, and the slow movements that keep a held picture alive */
.xp-rl-mid .xp-col{ width:690px; position:relative; z-index:1; animation:xp-rldrift 11s ease-in-out both; }
@keyframes xp-rldrift{ from{ transform:translateY(14px); } to{ transform:translateY(-16px); } }
.xp-rl-bg{ position:absolute; inset:-60px; overflow:hidden; }
.xp-rl-bg img{ width:100%; height:100%; object-fit:cover; filter:blur(24px) brightness(.3) saturate(.85);
  animation:xp-rlbg 11s ease-in-out both; }
@keyframes xp-rlbg{ from{ transform:scale(1.06); } to{ transform:scale(1.24) translate(-2%, -2%); } }
.xp-rl-rule{ display:block; width:180px; height:1px; margin:0 auto 46px; background:var(--rl, #eaa983);
  transform:scaleX(0); animation:xp-routeline 1.4s cubic-bezier(.2,.8,.2,1) .2s forwards; }
.xp-rl-top{ display:flex; flex-direction:column; align-items:center; }
.xp-rl-top .art{ position:absolute; left:0; right:0; top:165px; height:700px; display:grid; place-items:center; }
.xp-rl-top .txt{ position:absolute; left:0; right:0; bottom:350px; padding:0 110px; text-align:center; }
.xp-rl-top .xp-photo.xp-rl-pic.frame{ width:510px; height:680px; }
.xp-rl-top .xp-photo.xp-rl-pic.wide{ width:680px; height:480px; }
.xp-rl-top .xp-photo.xp-rl-pic.sq{ width:620px; height:620px; }
.xp-rl-top .xp-shot.xp-rl-shot{ width:540px; height:713px; }
.xp-rl-top .xp-swivel.xp-rl-sw{ width:510px; height:674px; }
.xp-rl-top.plate .xp-swivel.xp-rl-sw .xp-photo.xp-plate{ width:100%; height:100%; }
.xp-photo.xp-rl-slow img{ animation:xp-rlslow 11s ease-out both; }
@keyframes xp-rlslow{ from{ transform:scale(1.02); } to{ transform:scale(1.12); } }
.xp-photo.bleed.xp-rl-push img{ animation:xp-rlpush 11s ease-out both; }
@keyframes xp-rlpush{ from{ transform:scale(1.04); } to{ transform:scale(1.16); } }
.xp-photo.bleed.xp-rl-push.xp-rl-in img{ animation-name:xp-rlin; }
@keyframes xp-rlin{ from{ transform:scale(1.1); } to{ transform:scale(1.42) translate(0, 3%); } }
.xp-photo.bleed.xp-rl-push.xp-rl-up img{ object-position:50% 0; animation-name:xp-rlup; }
@keyframes xp-rlup{ from{ transform:scale(1.06); } to{ transform:scale(1.3) translate(0, 6%); } }
.xp-photo.bleed.xp-rl-push.xp-rl-down img{ object-position:50% 100%; animation-name:xp-rldown; }
@keyframes xp-rldown{ from{ transform:scale(1.06); } to{ transform:scale(1.3) translate(0, -6%); } }
/* a reel may carry its own accent: the yellow of a dress */
.xp-rl-yellow .xp-rl .w.rose, .xp-rl-yellow .xp-rl-end .brand b{ color:#f2cb3d; }
.xp-rl-yellow .xp-rl-rule{ --rl:#f2cb3d; }

/* The rebuilt reels (from The Most Beautiful Watch Ever Made on): quicker
   cuts, a line that leads into the next scene, and the experiences' own
   animations enlarged for a phone. */
.xp-overlay.xp-rl-snap .xp-frame{ transition:opacity .22s ease, transform .7s cubic-bezier(.2,.8,.2,1); transform:scale(1.035); }
.xp-overlay.xp-rl-snap .xp-frame.on{ transform:none; }
.xp-overlay.xp-rl-snap .xp-frame.out{ transition:opacity .18s ease; }
.xp-rl.tease{ font-family:'Jost',sans-serif; font-weight:500; font-size:36px; letter-spacing:.2em; text-transform:uppercase; color:#f4b892;
  margin-top:30px; opacity:0; animation:xp-rltease .8s cubic-bezier(.2,.8,.2,1) forwards; text-shadow:0 0 18px rgba(234,169,131,.35); }
.xp-rl.tease::after{ content:''; display:inline-block; width:46px; height:2px; margin-left:16px; vertical-align:middle;
  background:#eaa983; animation:xp-rlarrow 1s ease-in-out infinite alternate; }
@keyframes xp-rltease{ from{ opacity:0; transform:translateX(-24px); } to{ opacity:1; transform:none; } }
@keyframes xp-rlarrow{ from{ transform:scaleX(.4); transform-origin:left; } to{ transform:scaleX(1); transform-origin:left; } }
.xp-rl-z{ zoom:1.45; }
.xp-rl-mid .xp-col > .xp-rl-z{ margin-bottom:24px; }
.xp-canvas.portrait .xp-rl-mid .xp-say.sm.xp-rl-kinds{ font-size:34px; margin-top:16px; text-wrap:balance; }
.xp-rl-top .xp-photo.xp-rl-pic.xp-rl-hookpic{ width:450px; height:600px; }
.xp-rl-top .xp-photo.xp-rl-hookpic img{ animation:xp-rlhook 4.2s cubic-bezier(.2,.8,.2,1) both; }
@keyframes xp-rlhook{ from{ transform:scale(1.25); } to{ transform:scale(1.02); } }
.xp-rl-top .xp-photo.xp-rl-pic.xp-rl-boat{ width:800px; height:600px; }
.xp-photo.xp-rl-boat img{ animation:xp-rlboat 4.6s ease-out both; }
@keyframes xp-rlboat{ from{ transform:scale(1.15); } to{ transform:scale(1.02); } }
.xp-rl-mid .xp-sound.xp-rl-z{ zoom:2; }
.xp-rl-mid .xp-pull.xp-rl-z{ zoom:1.9; }
.xp-pull.xp-rl-pullfast b{ animation-duration:2.6s; animation-delay:.3s; }
.xp-canvas.portrait .xp-rl-mid .xp-price.xp-rl-pricefast{ zoom:1.1; width:600px; }
.xp-price.xp-rl-pricefast b{ animation-delay:.1s; font-size:28px; letter-spacing:.14em; }
.xp-price.xp-rl-pricefast > div:nth-child(2) b{ animation-delay:.5s; }
.xp-price.xp-rl-pricefast .s{ animation-delay:.2s; animation-duration:.7s; }
.xp-price.xp-rl-pricefast .l{ animation-delay:.6s; animation-duration:1.3s; }
.xp-twin.xp-rl-twin{ zoom:1.2; gap:34px; margin-bottom:20px; align-items:flex-end; }
.xp-rl-breathe{ animation:xp-rlbreathe 6s ease-in-out both; }
@keyframes xp-rlbreathe{ from{ transform:scale(.96); } to{ transform:scale(1.03); } }
.xp-rl-top .art.xp-rl-breathe{ top:150px; height:600px; }
.xp-rl-top .art.xp-rl-breathe .xp-swivel.xp-rl-sw{ width:420px; height:555px; }
.xp-twin.xp-rl-twin figcaption{ font-size:28px; }
.xp-twin.xp-rl-twin figcaption b{ font-size:26px; color:#f0d9a8; margin-bottom:4px; }
.xp-twin.xp-rl-twin figcaption em{ font-size:28px; }
.xp-canvas.portrait .xp-rl-mid .xp-col{ width:680px; }
.xp-canvas.portrait .xp-rl-mid .xp-week.xp-rl-z{ zoom:1.1; width:560px; }
.xp-week .xp-rl-yr{ font-size:30px; letter-spacing:.1em; }
.xp-canvas.portrait .xp-talk.xp-rl-talk .xp-msg p{ text-wrap:balance; }
.xp-canvas.portrait .xp-talk.xp-rl-talk{ width:680px; margin-bottom:26px; }
.xp-canvas.portrait .xp-talk.xp-rl-talk .xp-msg p{ font-size:40px; }
.xp-canvas.portrait .xp-talk.xp-rl-talk .xp-msg{ max-width:640px; }
.xp-plate-empty.xp-rl-wait{ width:90px; height:120px; margin:6px auto 22px; }

/* The Reverso That Started It All, reel */
.xp-rl-top .xp-shot.xp-rl-shot.xp-rl-hookshot{ width:470px; height:620px; }
.xp-rl-top .xp-photo.xp-rl-pic.xp-rl-vac{ width:520px; height:520px; }
.xp-canvas.portrait .xp-rl-mid .xp-bigyear.xp-rl-year{ font-size:130px; margin-bottom:10px; }
.xp-canvas.portrait .xp-rl-mid .xp-entente.xp-rl-ent{ width:680px; margin:40px auto 40px; }
.xp-canvas.portrait .xp-rl-mid .xp-entente.xp-rl-ent > i{ left:100px; right:100px; }
.xp-canvas.portrait .xp-rl-mid .xp-entente.xp-rl-ent span{ font-size:35px; padding:0 4px; }
.xp-stops.xp-rl-stops{ width:430px; height:140px; margin:20px auto 50px; }
.xp-stops.xp-rl-stops span{ font-size:31px; letter-spacing:.06em; white-space:normal; text-align:center; line-height:1.25; top:40px; }
.xp-stops.xp-rl-stops.wait .ln{ background:repeating-linear-gradient(to right, var(--brass) 0 9px, transparent 9px 16px); }
.xp-stops.xp-rl-stops.go .dot{ animation:xp-stopgo 1.8s cubic-bezier(.5,0,.3,1) .4s forwards; }
.xp-stops.xp-rl-stops.back .dot{ left:100%; animation:xp-stopback 1.6s cubic-bezier(.5,0,.3,1) 1.8s forwards; }
.xp-msg.xp-rl-msg{ margin:20px auto 40px; padding:20px 32px; }
.xp-canvas.portrait .xp-msg.xp-rl-msg p{ font-size:44px; }
.xp-rl-mid .xp-more.xp-rl-z{ zoom:1.7; }

/* Our Istanbul, reel */
.xp-rl-top .xp-photo.xp-rl-pic.xp-rl-tall{ width:390px; height:655px; }
.xp-photo.xp-rl-hookin img{ animation:xp-rlhook 4.2s cubic-bezier(.2,.8,.2,1) both; }
.xp-photo.xp-rl-read img{ animation:xp-rlread 6.5s cubic-bezier(.45,.05,.25,1) both; }
@keyframes xp-rlread{ 0%{ transform:scale(1.5) translate(0, -16%); } 45%{ transform:scale(1.5) translate(0, 4%); } 100%{ transform:scale(1.04); } }
.xp-rl-strikes{ line-height:1.9; margin:10px 0 30px; text-wrap:balance; }
.xp-canvas.portrait .xp-reject.xp-rl-reject{ font-size:50px; margin:0 14px; }
.xp-meet.xp-rl-meet{ zoom:1.25; width:440px; margin:10px auto 34px; }
.xp-meet.xp-rl-meet span, .xp-meet.xp-rl-meet b{ font-size:29px; letter-spacing:.14em; animation-delay:.1s; }
.xp-meet.xp-rl-meet b{ font-size:28px; animation-delay:1.3s; }
.xp-meet.xp-rl-meet i{ animation-duration:1s; animation-delay:.3s; }
.xp-meet.xp-rl-meet u{ animation-delay:1.2s; top:70px; }
.xp-meet.xp-rl-meet b{ bottom:-14px; }
.xp-rl-mid .xp-slots.xp-rl-slots{ zoom:2.2; margin:20px auto 20px; }
.xp-rl-top .art.xp-rl-artbig{ top:95px; height:760px; }
.xp-rl-top .xp-photo.xp-rl-pic.xp-rl-big3{ width:452px; height:740px; }

/* The Call Before the Appointment, reel */
.xp-rl-mid .xp-six.xp-rl-z{ zoom:1.6; margin-top:20px; }
.xp-gs.xp-rl-gs{ zoom:1.7; gap:70px; margin:0 auto 30px; }
.xp-gs.xp-rl-gs b{ font-size:18px; letter-spacing:.2em; }
.xp-gs.xp-rl-gs .g{ animation:xp-fade .6s ease .1s forwards, xp-rlgolddim 1s ease 1.2s forwards; }
@keyframes xp-rlgolddim{ to{ opacity:.5; } }
.xp-gs.xp-rl-gs .s i{ animation:xp-steel 1.2s ease 1.3s forwards; }
.xp-rl-mid .xp-slots.xp-rl-alloc{ zoom:1.6; gap:12px; margin:10px auto 30px; }
.xp-rl-mid .xp-slots.xp-rl-alloc i{ border-color:var(--brass-bright); }
.xp-rl-mid .xp-climb.xp-rl-z{ zoom:1.7; margin-bottom:26px; }
.xp-chrono.xp-rl-chrono{ zoom:2.1; margin:0 auto 14px; animation-delay:0s; }
.xp-chrono.xp-rl-chrono .hand{ animation-duration:4.6s; animation-delay:.3s; }
.xp-chrono.xp-rl-chrono .p1{ animation:xp-push .4s ease .65s, xp-push .4s ease 2.1s; }
.xp-chrono.xp-rl-chrono .p2{ animation:xp-push2 .4s ease 3.2s; }
.xp-steps.xp-rl-steps{ gap:40px; margin:6px auto 30px; }
.xp-steps.xp-rl-steps b{ font-size:30px; letter-spacing:.14em; }
.xp-rl-top .xp-swivel.xp-rl-sw.waver .xp-swivel-in{ animation-duration:3.6s; }

/* Our First Watches and Wonders, reel */
.xp-days.xp-rl-days{ zoom:1.5; margin:16px auto 34px; }
.xp-days.xp-rl-days span{ font-size:18px; letter-spacing:.16em; animation-delay:.6s; }
.xp-some.xp-rl-some{ height:120px; margin:6px auto 20px; }
.xp-canvas.portrait .xp-some.xp-rl-some .a{ font-size:80px; animation:xp-fade .5s ease .2s forwards, xp-fadeout .5s ease 1.3s forwards; }
.xp-canvas.portrait .xp-some.xp-rl-some .b{ font-size:76px; animation:xp-rise .8s cubic-bezier(.2,.7,.25,1) 1.7s forwards; }
.xp-some.xp-rl-some i{ width:360px; margin-left:-180px; animation:xp-routeline 1s ease 1.8s forwards; }
.xp-gs.xp-both.xp-rl-gs2{ zoom:1.7; gap:70px; margin:0 auto 30px; }
.xp-gs.xp-both.xp-rl-gs2 b{ font-size:18px; letter-spacing:.16em; }
.xp-gs.xp-both.xp-rl-gs2 .g{ animation:xp-fade .6s ease .1s forwards, xp-altA 2s ease-in-out .8s infinite; }
.xp-gs.xp-both.xp-rl-gs2 .s{ animation:xp-fade .6s ease .1s forwards, xp-altB 2s ease-in-out .8s infinite; }
.xp-canvas.portrait .xp-votes.xp-rl-votes{ margin:0 auto 34px; }
.xp-votes.xp-rl-votes div{ grid-template-columns:170px auto; }
.xp-votes.xp-rl-votes b{ font-size:28px; letter-spacing:.16em; }
.xp-votes.xp-rl-votes span{ font-size:46px; }
.xp-votes.xp-rl-votes .yes span{ font-size:58px; }
.xp-hair.xp-rl-hair{ width:560px; margin:4px auto 6px; }
.xp-hair.xp-rl-hair i, .xp-hair.xp-rl-hair b{ animation-duration:2.6s; animation-delay:.6s; }
.xp-world.xp-rl-world{ zoom:1.8; margin:0 auto 22px; }
.xp-world.xp-rl-world .r{ animation-duration:20s; }
.xp-world.xp-rl-world b{ animation-delay:1.1s; }


/* Mitch & Linda Katz, reels: their experiences' line work, enlarged and
   quickened for a phone */
.xp-shot.xp-rl-shotin img{ animation:xp-rlshotin 4.4s cubic-bezier(.2,.8,.2,1) both; }
@keyframes xp-rlshotin{ from{ transform:translate(-50%,-50%) translateY(var(--shift)) scale(1.28); } to{ transform:translate(-50%,-50%) translateY(var(--shift)) scale(1.02); } }
.xp-shot.xp-rl-shotslow img{ animation:xp-rlshotslow 7s ease-out both; }
@keyframes xp-rlshotslow{ from{ transform:translate(-50%,-50%) translateY(var(--shift)) scale(1); } to{ transform:translate(-50%,-50%) translateY(var(--shift)) scale(1.12); } }
.xp-shot.choc.xp-toChoc.xp-rl-tochoc img{ animation-duration:4.5s; animation-delay:.2s; }
.xp-rl-top .xp-photo.xp-rl-hookpic.xp-rl-torep img{ animation:xp-toRep 4.5s cubic-bezier(.45,.05,.25,1) .1s both; }
.xp-rl-top .xp-photo.xp-rl-hookpic.xp-rl-to101 img{ animation:xp-to101 4.8s cubic-bezier(.45,.05,.25,1) .1s both; }
/* Goodbye, Wave */
.xp-rl-trio{ display:flex; justify-content:center; gap:22px; margin:10px auto 30px; }
.xp-rl-trio figure{ margin:0; opacity:0; animation:xp-rise .7s cubic-bezier(.2,.7,.25,1) forwards; }
.xp-rl-trio .xp-swivel{ width:205px; height:270px; }
.xp-rl-trio .xp-swivel-in{ transition-duration:1s; }
.xp-rl-trio figcaption{ margin-top:10px; font-family:'Jost',sans-serif; font-size:25px; letter-spacing:.14em; text-transform:uppercase; color:#f0d9a8; }
.xp-rl-flood{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(5, 1fr); grid-auto-rows:178px; overflow:hidden; }
.xp-rl-flood i{ display:block; overflow:hidden; opacity:0; animation:xp-rltile .5s ease forwards; }
.xp-rl-flood img{ width:100%; height:100%; object-fit:cover; display:block; }
@keyframes xp-rltile{ from{ opacity:0; transform:scale(1.3); } to{ opacity:.6; transform:none; } }
.xp-rl-flood::after{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse 72% 40% at 50% 50%, rgba(8,10,13,.94) 0 55%, rgba(8,10,13,.4) 100%); }
.xp-rl.sm.xp-rl-later{ opacity:0; animation:xp-fade .8s ease forwards; }
.xp-verdict.xp-rl-verdict{ font-size:240px; animation-duration:1.4s; margin-bottom:10px; }
.xp-run.xp-rl-run{ zoom:1.8; margin:40px auto 40px; }
/* the two lines, Mitch's and Linda's */
.xp-canvas.portrait .xp-two.xp-rl-two{ width:480px; zoom:1.4; margin:0 auto 30px; }
.xp-canvas.portrait .xp-two.xp-rl-two .r{ grid-template-columns:110px 1fr; gap:16px; height:56px; }
.xp-two.xp-rl-two b{ font-size:21px; letter-spacing:.14em; }
.xp-two.xp-rl-two.s1 .ln{ animation-duration:.9s; animation-delay:.1s; }
.xp-two.xp-rl-two.s2 .ln i.hers{ animation-delay:.6s; }
.xp-wave.xp-rl-voice{ zoom:1.7; margin:0 auto 26px; }
.xp-wave.xp-rl-voice.xp-rl-hush{ animation:xp-hush 1.4s ease 1.2s forwards; }
/* Linda Said I Had to Buy It */
.xp-ten.xp-rl-ten{ zoom:1.25; margin:0 auto 30px; }
.xp-canvas.portrait .xp-bars2.xp-rl-bars2{ width:460px; zoom:1.45; margin:0 auto 20px; }
.xp-bars2.xp-rl-bars2 b{ font-size:19px; letter-spacing:.1em; animation-delay:.1s; }
.xp-bars2.xp-rl-bars2 > div:nth-child(2) b{ animation-delay:1.1s; }
.xp-bars2.xp-rl-bars2 i{ height:6px; }
.xp-bars2.xp-rl-bars2 .long{ animation-duration:1.1s; animation-delay:.3s; }
.xp-bars2.xp-rl-bars2 .short{ animation-delay:1.3s; }
.xp-chime.xp-rl-chime{ width:460px; zoom:1.45; margin:20px auto 14px; }
.xp-chime.xp-rl-chime > div{ grid-template-columns:170px 1fr; height:52px; }
.xp-chime.xp-rl-chime b{ font-size:19px; letter-spacing:.12em; padding-right:20px; animation-delay:.2s; }
.xp-chime.xp-rl-chime span{ gap:16px; }
.xp-chime.xp-rl-chime i{ width:3px; height:34px; }
.xp-chime.xp-rl-chime i.sm{ width:2px; height:18px; }
.xp-chime.xp-rl-chime i.dbl{ width:14px; }
/* The Scratch That Wasn't There */
.xp-scratch.xp-rl-scratch{ height:40px; margin:0 auto 10px; }
.xp-scratch.xp-rl-scratch i{ width:360px; height:2px; animation-delay:.2s; }
.xp-scratch.xp-rl-scratch.big{ height:200px; }
.xp-scratch.xp-rl-scratch.big i{ width:560px; height:3px; }
.xp-pen.xp-rl-pen{ width:460px; zoom:1.4; margin:0 auto 30px; }
.xp-rl-pen .seat{ animation-delay:0s; }
.xp-rl-pen .pen{ left:20px; animation-delay:.2s; animation-duration:1.6s; }
.xp-rl-pen .scr{ animation-delay:2.2s; height:2px; }
.xp-film.xp-rl-film{ zoom:1.9; margin:0 auto 30px; }
.xp-film.xp-rl-film .fl{ animation-delay:1.4s; animation-duration:2.2s; }
.xp-canvas.portrait .xp-layer.xp-rl-layer{ width:680px; grid-template-columns:200px 1fr; gap:24px; padding:26px 0; }
.xp-canvas.portrait .xp-layer.xp-rl-layer b{ font-size:25px; letter-spacing:.14em; }
.xp-canvas.portrait .xp-layer.xp-rl-layer span{ font-size:46px; line-height:1.2; }
/* Number One — and the Piece of Lint */
.xp-rl-top .xp-photo.xp-rl-lint{ width:450px; height:600px; position:relative; overflow:hidden; }
.xp-rl-lint .zw{ animation:xp-toLint 3.6s cubic-bezier(.45,.05,.25,1) .3s forwards; }
.xp-rl-lint .ring{ width:60px; height:60px; margin:-30px 0 0 -30px; border-width:2px;
  animation:xp-fade .6s ease 2.4s forwards, xp-ringpulse 1.6s ease-in-out 3s infinite; }
.xp-rl-lint.hook .zw{ animation:xp-toLint 2.4s cubic-bezier(.45,.05,.25,1) .1s forwards; }
.xp-rl-lint.hook .ring{ animation-delay:1.6s, 2.2s; }
.xp-canvas.portrait .xp-fifty.xp-rl-fifty{ justify-content:center; gap:7px; height:70px; margin:20px auto 40px; }
.xp-fifty.xp-rl-fifty i{ width:3px; height:36px; }
.xp-fifty.xp-rl-fifty i.one{ width:6px; height:70px; animation:xp-fade .5s ease 1.9s forwards; }
.xp-canvas.portrait .xp-trips.xp-rl-trips{ width:680px; margin:0 auto 30px; padding-bottom:50px; }
.xp-canvas.portrait .xp-trips.xp-rl-trips .r{ grid-template-columns:210px 1fr; height:70px; }
.xp-trips.xp-rl-trips b{ font-size:24px; letter-spacing:.1em; }
.xp-trips.xp-rl-trips .e{ font-size:22px; letter-spacing:.1em; animation-delay:.1s; }
.xp-canvas.portrait .xp-trips.xp-rl-trips .e.a{ left:230px; }
.xp-trips.xp-rl-trips .r1{ animation-delay:.1s; }
.xp-trips.xp-rl-trips .r2{ animation-delay:1.8s; }
.xp-trips.xp-rl-trips .ln i{ width:14px; height:14px; top:-7px; }
.xp-trips.xp-rl-trips .r1 .ln i{ animation:xp-post 1.8s ease-in-out .3s both; }
.xp-trips.xp-rl-trips .r2 .ln i{ animation:xp-outonly 1.4s ease-in-out 2.2s both; }
.xp-loupe.xp-rl-loupe{ zoom:2.2; margin:0 auto 20px; }
/* Linda's Second Reverso */
.xp-pairc.xp-rl-pairc{ zoom:1.6; gap:60px; margin:0 auto 26px; }
.xp-rl-pairc .c{ animation-delay:.1s; }
.xp-rl-pairc .c.ghost{ animation-delay:.9s; }
.xp-rl-pairc .c b{ font-size:17px; }
.xp-four.xp-rl-four{ zoom:1.12; }
.xp-canvas.portrait .xp-four.xp-rl-four .xp-shot{ width:270px; height:356px; }
.xp-canvas.portrait .xp-four.xp-rl-four .xp-shot.xp-sm{ width:230px; height:303px; }
.xp-canvas.portrait .xp-four.xp-rl-four .xp-link{ width:60px; animation-delay:1s; }
.xp-four.xp-rl-four b, .xp-four.xp-rl-four4 b{ font-size:24px; letter-spacing:.14em; }
.xp-four.xp-rl-four .c, .xp-four.xp-rl-four4 .c{ animation-duration:.8s; }
.xp-duetto.xp-rl-duetto{ zoom:2.3; margin:0 auto 20px; }
.xp-rl-duetto .in{ animation-duration:3.4s; animation-delay:.2s; }
.xp-hole.xp-rl-hole{ zoom:1.5; margin:0 auto 20px; }
.xp-rl-hole i{ animation-duration:.6s; }
.xp-rl-hole .m{ animation-delay:.6s; }
.xp-rl-hole .l{ animation:xp-toedge 2.6s cubic-bezier(.4,0,.2,1) 1.6s forwards; }
.xp-rl-hole span{ font-size:20px; letter-spacing:.1em; }
.xp-rl-hole .tm{ animation-delay:.6s; }
.xp-rl-hole .tl{ animation-delay:1.6s; }
/* The Watch Widow */
.xp-alloc.xp-rl-allocs{ zoom:1.5; margin:10px auto 30px; }
.xp-alloc.s3.xp-rl-allocs i.mine{ animation-delay:2.2s; }
.xp-bands.xp-rl-bands{ zoom:1.25; margin:0 auto 30px; }
.xp-rl-bands > div{ height:40px; }
.xp-rl-bands i{ height:16px; top:12px; }
.xp-rl-bands b{ width:24px; height:24px; top:8px; }
/* Number One of Five */
.xp-search.xp-rl-search{ zoom:1.5; width:420px; font-size:26px; }
.xp-search.xp-rl-search span{ display:inline-block; opacity:0; animation:xp-fade .12s linear forwards; }
.xp-tiny.xp-rl-tiny{ zoom:2; margin:0 auto 20px; animation-delay:0s; }
.xp-rl-tiny i{ animation-delay:.5s; animation-duration:1.8s; }
.xp-five.xp-rl-five{ zoom:1.7; margin:0 auto 26px; }
.xp-five.s2.xp-rl-five i.one{ animation-delay:1.2s; }
.xp-route.ltr.xp-rl-route.xp-rl-routefast .ln, .xp-route.ltr.xp-rl-route.xp-rl-routefast .dot{ animation-duration:1.8s; animation-delay:.5s; }
.xp-route.ltr.xp-rl-route.xp-rl-routefast .pt.b, .xp-route.ltr.xp-rl-route.xp-rl-routefast .lb.b{ animation-delay:.2s; }
.xp-route.ltr.xp-rl-route.xp-rl-routefast .pt.a, .xp-route.ltr.xp-rl-route.xp-rl-routefast .lb.a{ animation-delay:2.2s; }
.xp-route.xp-rl-route.xp-rl-routefast .lb{ font-size:26px; letter-spacing:.1em; }
/* The Watch I Designed, and the One I Bought */
.xp-napkin.xp-rl-napkin.blank{ zoom:1.7; margin:0 auto 26px; }
.xp-canvas.portrait .xp-napkin.xp-rl-napkin.big{ width:440px; margin:0 auto 34px; }
.xp-rl-napkin.blank .sq{ animation-duration:1.4s; animation-delay:.1s; }
.xp-rl-napkin.blank .fold{ animation-duration:.6s; animation-delay:1.2s; }
.xp-rl-napkin.draw .c2{ animation-duration:1.1s; animation-delay:.2s; }
.xp-rl-napkin.draw .c1{ animation-duration:1.1s; animation-delay:1.3s; }
.xp-rl-napkin.draw .h2, .xp-rl-napkin.draw .lb{ animation-delay:1.2s; }
.xp-rl-napkin.draw .h1, .xp-rl-napkin.draw .la{ animation-delay:2.3s; }
.xp-rl-napkin.draw .la, .xp-rl-napkin.draw .lb{ font-size:24px; letter-spacing:.1em; }
.xp-rl-napkin .days i{ width:3px; height:20px; }
.xp-canvas.portrait .xp-trail.xp-rl-trail{ width:640px; height:140px; margin:10px auto 30px; }
.xp-canvas.portrait .xp-trail.xp-rl-trail .n{ font-size:24px; letter-spacing:.1em; }
.xp-rl-trail .p1{ animation-duration:1s; animation-delay:.2s; }
.xp-rl-trail .p2{ animation-duration:1s; animation-delay:1.4s; }
.xp-rl-trail .p3{ animation-duration:1s; animation-delay:2.6s; }
.xp-rl-trail .d1, .xp-rl-trail .n1{ animation-delay:.1s; }
.xp-rl-trail .d2, .xp-rl-trail .n2{ animation-delay:1.3s; }
.xp-rl-trail .d3, .xp-rl-trail .n3{ animation-delay:2.5s; }
.xp-rl-trail .n3{ top:90px; }
.xp-rl-trail .d{ width:18px; height:18px; margin-left:-9px; top:22px; }
/* My Engraving */
.xp-reds.xp-rl-reds{ width:360px; margin:6px auto 26px; }
.xp-rl-reds i{ height:6px; margin-bottom:12px; }
.xp-reds.xp-rl-reds .br{ animation:xp-routeline .8s cubic-bezier(.2,.8,.2,1) .2s forwards, xp-stepback .8s ease 1.4s forwards; }
.xp-reds.xp-rl-reds .bg{ animation-delay:.5s; }
.xp-canvas.portrait .xp-block.xp-rl-block{ width:680px; height:220px; margin:20px auto 20px; }
.xp-rl-block .t, .xp-rl-block .me{ font-size:22px; letter-spacing:.1em; }
.xp-rl-block .l1{ top:44px; } .xp-rl-block .e1{ top:39px; }
.xp-rl-block .t2{ top:96px; }
.xp-rl-block .l2, .xp-rl-block .l2b{ top:140px; } .xp-rl-block .e2{ top:135px; }
.xp-rl-block .stop{ top:120px; height:42px; }
.xp-rl-block .join{ top:44px; height:96px; }
.xp-rl-block .me{ top:172px; }
.xp-block.s1.xp-rl-block .t1{ animation:xp-fade .6s ease .4s forwards; }
.xp-block.s1.xp-rl-block .l1{ animation:xp-routeline 1s cubic-bezier(.45,0,.2,1) .5s forwards; }
.xp-block.s1.xp-rl-block .e1{ animation:xp-fade .4s ease 1.5s forwards; }
.xp-block.s1.xp-rl-block .t2{ animation:xp-fade .6s ease 1.6s forwards; }
.xp-block.s1.xp-rl-block .l2{ animation:xp-routeline .9s cubic-bezier(.45,0,.2,1) 1.8s forwards; }
.xp-block.s1.xp-rl-block .stop{ animation:xp-fade .3s ease 2.7s forwards; }
.xp-block.s2.xp-rl-block .join{ animation:xp-routeY .8s cubic-bezier(.2,.8,.2,1) .2s forwards; }
.xp-block.s2.xp-rl-block .me{ animation:xp-fade .6s ease .8s forwards; }
.xp-block.s2.xp-rl-block .stop{ animation:xp-fadeaway .8s ease 2.4s forwards; }
.xp-block.s2.xp-rl-block .l2b{ animation:xp-routeline 1s cubic-bezier(.45,0,.2,1) 2.8s forwards; }
.xp-block.s2.xp-rl-block .e2{ animation:xp-fade .4s ease 3.7s forwards; }
.xp-canvas.portrait .xp-wander.xp-rl-wander{ width:620px; margin:0 auto 30px; }
.xp-rl-wander path{ animation-duration:2.4s; animation-delay:.1s; stroke-width:2.4; }
/* The Imperfect Engraving */
.xp-flipcase.xp-rl-flipcase{ zoom:2.2; margin:0 auto 24px; }
.xp-rl-flipcase .in{ animation-duration:3s; animation-delay:.1s; }
.xp-rl-haloes i{ left:-300px; top:-300px; width:600px; height:600px; animation-duration:4.5s; }
.xp-fit.xp-rl-fit{ zoom:1.6; margin:0 auto 26px; }
.xp-rl-fit .r{ animation-delay:.3s; }
.xp-rl-fit .c{ animation:xp-fade .6s ease .1s forwards, xp-fit 1.4s cubic-bezier(.6,.05,.25,1) 2.2s forwards; }
.xp-stipple.xp-rl-stipple{ zoom:1.6; margin:0 auto 26px; }
.xp-stipple.s1.xp-rl-stipple i{ animation-duration:.4s; }
.xp-stipple.s1.xp-rl-stipple i.gap{ animation:none; }
.xp-stipple.s1.xp-rl-stipple em{ border-width:2px; animation:xp-fade .6s ease 1s forwards, xp-wait 1.6s ease-in-out 1.6s infinite; }
.xp-stipple.s2.xp-rl-stipple em{ animation:xp-fadeaway .8s ease 2s forwards; }

.xp-canvas.portrait .xp-four.xp-rl-four4 .xp-shot{ width:300px; height:396px; }
.xp-canvas.portrait .xp-four.xp-rl-four4 .c.g i{ width:70px; height:94px; }
.xp-canvas.portrait .xp-four.xp-rl-four4{ gap:12px; }

/* a photograph shot on white, its edges let go into the dark */
.xp-photo.xp-rl-feather{ border:0; box-shadow:none; background:transparent;
  -webkit-mask-image:radial-gradient(ellipse 54% 54% at 50% 48%, #000 0 64%, transparent 100%);
          mask-image:radial-gradient(ellipse 54% 54% at 50% 48%, #000 0 64%, transparent 100%); }

/* The Reverso of Belief, reel */
.xp-photo.bleed.xp-rl-rbpull img{ object-position:50% 50%; transform-origin:45% 30%; animation:xp-rlrbpull 4.4s cubic-bezier(.3,.6,.2,1) both; }
@keyframes xp-rlrbpull{ from{ transform:scale(2.1); } to{ transform:scale(1.3); } }
.xp-photo.bleed.xp-rl-rbdrift img{ transform-origin:50% 72%; animation:xp-rlrbdrift 6s ease-out both; }
@keyframes xp-rlrbdrift{ from{ transform:scale(1.26); } to{ transform:scale(1.38); } }
.xp-rings.xp-rl-rings{ zoom:2.4; margin:0 auto 26px; }
.xp-rings.xp-rl-rings circle{ animation-duration:1.3s; animation-delay:.1s; }
.xp-rings.xp-rl-rings circle + circle{ animation-delay:.6s; }
.xp-canvas.portrait .xp-route.xp-rl-sail{ width:600px; height:150px; margin:50px auto 40px; }
.xp-route.xp-rl-sail .ln, .xp-route.xp-rl-sail .dot{ animation-duration:1.4s; animation-delay:.3s; }
.xp-route.xp-rl-sail .ln{ height:2px; }
.xp-route.xp-rl-sail .pt{ width:18px; height:18px; top:36px; }
.xp-route.xp-rl-sail .pt.a, .xp-route.xp-rl-sail .lb.a, .xp-route.xp-rl-sail .yr{ animation-delay:.1s; }
.xp-route.xp-rl-sail .pt.b, .xp-route.xp-rl-sail .lb.b{ animation-delay:1.6s; }
.xp-route.xp-rl-sail .lb{ font-size:31px; letter-spacing:.14em; top:74px; }
.xp-route.xp-rl-sail .yr{ font-size:64px; top:-62px; }
.xp-rl-saintwrap{ position:relative; width:360px; height:360px; margin:10px auto 64px; }
.xp-rl-saintwrap .xp-haloes{ z-index:0; }
.xp-rl-rbhalo i{ left:-180px; top:-180px; width:360px; height:360px; animation-name:xp-rlrbring; animation-duration:4.5s; animation-timing-function:ease-out; }
@keyframes xp-rlrbring{ 0%{ transform:scale(.9); opacity:0; } 20%{ opacity:.4; } 100%{ transform:scale(1.7); opacity:0; } }
.xp-rl-saint{ position:relative; z-index:1; width:360px; height:360px; border-radius:50%; overflow:hidden;
  box-shadow:0 0 0 1px rgba(240,217,168,.5), 0 20px 60px rgba(0,0,0,.6); opacity:0; animation:xp-rlsaint 1s cubic-bezier(.2,.8,.2,1) .05s forwards; }
@keyframes xp-rlsaint{ from{ opacity:0; transform:scale(.85); } to{ opacity:1; transform:none; } }
.xp-rl-saint img{ position:absolute; width:1150px; height:auto; left:-356px; top:-283px; max-width:none;
  animation:xp-rlsaintz 5.5s ease-out both; transform-origin:536px 463px; }
@keyframes xp-rlsaintz{ from{ transform:scale(1); } to{ transform:scale(1.12); } }
.xp-plate-empty.xp-rl-imagine{ zoom:2.1; margin:0 auto 30px; animation-delay:0s; animation-duration:.8s; }
.xp-rl-imagine b{ position:absolute; left:50%; top:30px; width:40px; height:40px; margin-left:-20px; border:1px dashed var(--brass-bright);
  border-radius:50%; opacity:0; animation:xp-fade .8s ease 1.2s forwards; }
.xp-rl-imagine u{ position:absolute; left:50%; top:62px; width:64px; height:62px; margin-left:-32px; border:1px dashed var(--brass-bright);
  border-bottom:0; border-radius:32px 32px 0 0; opacity:0; animation:xp-fade .8s ease 1.6s forwards; }
.xp-canvas.portrait .xp-route.post.xp-rl-letter{ width:560px; height:120px; margin:20px auto 34px; }
.xp-route.post.xp-rl-letter .ln{ height:2px; animation-delay:.2s; animation-duration:.9s; }
.xp-route.post.xp-rl-letter .pt.a, .xp-route.post.xp-rl-letter .lb.a, .xp-route.post.xp-rl-letter .pt.b, .xp-route.post.xp-rl-letter .lb.b{ animation-delay:.2s; }
.xp-route.post.xp-rl-letter .dot{ width:14px; height:14px; top:38px; animation:xp-post 2.4s ease-in-out 1s infinite; }
.xp-route.post.xp-rl-letter .pt{ width:18px; height:18px; top:36px; }
.xp-route.post.xp-rl-letter .lb{ font-size:28px; letter-spacing:.12em; top:72px; }
.xp-rl-top .xp-photo.xp-rl-hookpic.xp-rl-rbread img{ transform-origin:50% 30%; animation:xp-rlrbread 6.2s cubic-bezier(.45,.05,.25,1) both; }
@keyframes xp-rlrbread{ 0%{ transform:scale(1.9) translateY(4%); } 30%{ transform:scale(1.9) translateY(4%); } 100%{ transform:scale(1.32) translateY(-4%); } }
.xp-rl-rbrays{ width:420px; height:555px; }
.xp-rl-rbrays .xp-swivel.xp-rl-sw{ width:100%; height:100%; }
.xp-rl-rbrays .xp-swivel .xp-photo.xp-plate{ width:100%; height:100%; }
.xp-canvas.portrait .xp-rl-rbrays .xp-rays i{ height:400px; }
.xp-rl-rbrays .xp-swivel .xp-photo.xp-plate img{ transform:scale(1.16); transform-origin:50% 62%; }
.xp-rl-mid .xp-col > .xp-rl-saintwrap{ margin:10px auto 70px; }
.xp-rl-mid .xp-col > .xp-rl.caps.xp-rl-sig2{ margin:8px 0 0; }
/* a bright full-screen photograph lets go into the dark before the cut */
.xp-rl-dusk{ position:absolute; inset:0; z-index:5; background:#0b0e12; opacity:0; pointer-events:none; animation:xp-fade .45s ease forwards; }

/* Wisdom (Taylor Wos), reel */
.xp-compass.xp-rl-compass{ zoom:2; margin:0 auto 20px; }
.xp-rl-compass::before{ animation-delay:0s; }
.xp-rl-compass i{ animation-duration:1.7s; animation-delay:.1s; }
.xp-tower.xp-rl-tower{ zoom:1.7; margin:0 auto 24px; }
.xp-rl-tower i{ width:3px; animation-duration:.8s; }
.xp-rl-top .xp-photo.xp-rl-hookpic.xp-rl-twpan img{ animation:xp-rltwpan 5.6s cubic-bezier(.45,.05,.3,1) both; }
@keyframes xp-rltwpan{ from{ transform:scale(1.5) translateY(14%); } to{ transform:scale(1.5) translateY(-7%); } }
.xp-rl-top .xp-photo.xp-rl-hookpic.xp-rl-twmacro img{ animation:xp-rltwmacro 5.6s cubic-bezier(.45,.05,.25,1) both; }
@keyframes xp-rltwmacro{ from{ transform:scale(1.02); } to{ transform:scale(1.28); } }
.xp-fan.xp-rl-fan{ zoom:2.2; margin:20px auto 10px; }
.xp-rl-fan i{ animation-duration:.9s; }
.xp-inscr.xp-rl-inscr{ margin:20px auto 30px; }
.xp-canvas.portrait .xp-inscr.xp-rl-inscr p{ font-size:46px; letter-spacing:.08em; animation-duration:.9s; }
.xp-rl-inscr i{ animation-duration:1.6s; animation-delay:.2s; height:240px; }
.xp-canvas.portrait .xp-vroute.xp-rl-vroute{ width:600px; height:360px; margin:0 auto 30px; }
.xp-rl-vroute .ln{ left:40px; width:2px; animation-duration:1.6s; animation-delay:.5s; }
.xp-rl-vroute .pt{ left:32px; width:18px; height:18px; }
.xp-rl-vroute .pt.a, .xp-rl-vroute .lb.a{ animation-delay:.1s; }
.xp-rl-vroute .pt.b, .xp-rl-vroute .lb.b{ animation-delay:2.0s; }
.xp-rl-vroute .dot{ left:35px; width:14px; height:14px; animation-duration:1.6s; animation-delay:.5s; }
.xp-rl-vroute .lb{ left:84px; font-size:27px; letter-spacing:.12em; }
.xp-rl.mid.xp-rl-nyt{ font-size:70px; white-space:nowrap; }
.xp-rl-top .art.xp-rl-artup{ top:100px; height:580px; }
.xp-rl-top .art.xp-rl-artup .xp-photo.xp-rl-pic.xp-rl-hookpic{ width:405px; height:540px; }

/* The Dragon (SM), reel */
.xp-marks.xp-rl-marks{ zoom:1.7; margin:20px auto 30px; }
.xp-rl-marks .xp-inret{ animation-delay:1.2s; }
.xp-plate-empty.xp-rl-blank{ zoom:1.6; margin:0 auto 24px; animation-delay:0s; animation-duration:.6s; }
.xp-rl.caps.xp-rl-credit{ font-size:26px; letter-spacing:.16em; }
.xp-canvas.portrait .xp-sheets.xp-rl-sheets{ gap:18px; margin:0 auto 30px; }
.xp-canvas.portrait .xp-sheets.xp-rl-sheets .xp-photo{ width:205px; height:294px; }
.xp-rl-sheets .xp-photo.was{ animation-duration:.7s, 1s; }
.xp-rl-sheets .xp-photo.xp-is{ animation-duration:.7s; }
.xp-rl-top .xp-photo.xp-rl-pic.xp-rl-sk8{ width:405px; height:580px; }
.xp-rl-eight path{ stroke-width:1.8; animation-duration:2.6s; animation-delay:.6s; }
.xp-rl-top .xp-photo.xp-rl-hookpic.xp-rl-bench img{ animation:xp-toBench 4.6s cubic-bezier(.45,.05,.25,1) .1s both; }
.xp-photo.xp-rl-macro img{ animation:xp-toMacro 5.2s cubic-bezier(.45,.05,.25,1) .1s both; }
.xp-rl-inscr i{ opacity:.22; }
.xp-rl-mid .xp-col > .xp-rl.caps.xp-rl-sigsp, .xp-rl-top .xp-rl.caps.xp-rl-sigsp{ margin-top:30px; }
.xp-rl-mid .xp-col > .xp-sheets.xp-rl-sheets{ margin:0 auto 44px; }

/* The Gibson Guitar Reverso, reel */
.xp-sizes.xp-rl-sizes{ zoom:1.45; gap:40px; margin:0 auto 24px; }
.xp-rl-sizes .c{ animation-duration:.8s; }
.xp-rl-sizes .c.no{ animation-duration:.8s, 1s; }
.xp-rl-sizes .c b{ font-size:20px; letter-spacing:.1em; }
.xp-rl-mid .xp-col > .xp-strings.xp-rl-strings{ width:620px; margin:0 auto 40px; }
.xp-rl-strings span{ height:30px; animation-duration:.9s; }
.xp-rl-strings span i{ top:14px; }
.xp-canvas.portrait .xp-year.xp-rl-year64{ width:640px; height:300px; margin:10px auto 30px; }
.xp-rl-year64 .ln{ top:150px; height:2px; animation-duration:1.2s; animation-delay:.3s; }
.xp-rl-year64 .pt{ top:142px; width:18px; height:18px; margin-left:-9px; animation-delay:1s; }
.xp-rl-year64 b{ top:30px; font-size:116px; animation-delay:.5s; animation-duration:.9s; }
.xp-rl-year64 span{ font-size:26px; letter-spacing:.1em; }
.xp-rl-year64 .up{ top:-14px; animation-delay:.9s; }
.xp-rl-year64 .dn{ top:190px; animation-delay:1.5s; }
.xp-rl-top .xp-photo.xp-rl-hookpic.xp-rl-gbinit img{ transform-origin:73% 67%; animation:xp-rlgbinit 4.6s cubic-bezier(.45,.05,.25,1) both; }
@keyframes xp-rlgbinit{ from{ transform:scale(1.05); } to{ transform:scale(2.4); } }
.xp-rl-top .xp-photo.xp-rl-hookpic.xp-rl-gbbody img{ transform-origin:53% 48%; animation:xp-rlgbbody 5.2s cubic-bezier(.45,.05,.25,1) both; }
@keyframes xp-rlgbbody{ from{ transform:scale(1.7); } to{ transform:scale(1.15); } }
.xp-canvas.portrait .xp-route.ltr.xp-rl-route.xp-rl-route600{ width:600px; }
.xp-rl-bg.xp-rl-bgsoft img{ filter:blur(22px) brightness(.25) saturate(.85); }
/* 1964, raised above its line and arriving at once */
.xp-canvas.portrait .xp-year.xp-rl-year64{ height:320px; }
.xp-rl-year64 b{ top:10px; font-size:156px; animation-delay:.15s; }
.xp-rl-year64 .ln{ top:200px; animation-delay:.1s; animation-duration:1s; }
.xp-rl-year64 .pt{ top:192px; animation-delay:.8s; }
.xp-rl-year64 .up{ top:-30px; animation-delay:.4s; }
.xp-rl-year64 .dn{ top:236px; animation-delay:.9s; }

/* --------------------------------------------------------------------------
   51. My Reverso Story — the crest, explained
   -------------------------------------------------------------------------- */
/* the crest through a camera that travels from figure to figure; its edges
   are let go into the stage, so the crest's black never shows as a box */
.xp-cam{ position:relative; width:480px; height:600px; overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 11%, #000 89%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to right, transparent 0, #000 11%, #000 89%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-composite:intersect; }
.xp-cam .layer{ position:absolute; inset:0; transform-origin:0 0; transform:var(--b);
  animation:xp-cam 3.2s cubic-bezier(.6,.05,.25,1) .3s both; }
@keyframes xp-cam{ from{ transform:var(--a); } to{ transform:var(--b); } }
.xp-cam .layer > img{ display:block; width:100%; height:100%; animation:xp-camdrift 12s ease-in-out 3.4s both; transform-origin:50% 50%; }
@keyframes xp-camdrift{ from{ transform:scale(1); } to{ transform:scale(1.035); } }
.xp-cam.xp-cam-in .layer > img{ opacity:0; animation:xp-fade 1.8s ease .5s forwards; }
.xp-canvas.portrait .xp-cam{ width:560px; height:700px; }
/* the shield, traced in gold */
.xp-shieldline{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.xp-shieldline path{ fill:none; stroke:#fff3d8; stroke-width:7; stroke-linejoin:round;
  stroke-dasharray:100; stroke-dashoffset:100; filter:drop-shadow(0 0 4px rgba(255,236,190,1)) drop-shadow(0 0 12px rgba(240,200,140,.8));
  animation:xp-draw 2.6s cubic-bezier(.45,0,.2,1) var(--d, 0s) forwards, xp-fadeaway 1.4s ease calc(var(--d, 0s) + 4.4s) forwards; }
/* the archive's name in the crest's own kind of letter */
.xp-mrs-name{ font-family:'Poiret One',cursive; font-size:58px; letter-spacing:.04em; color:var(--brass-bright); margin:0 0 30px; }
.xp-mrs-name span{ display:inline-block; opacity:0; animation:xp-rise .9s cubic-bezier(.2,.7,.25,1) forwards; }
.xp-canvas.portrait .xp-mrs-name{ font-size:56px; }
/* a case turning over, larger than the stories use it */
.xp-flipcase.xp-mrs-flip{ zoom:1.9; margin-bottom:24px; }
.xp-mrs-words .xp-w{ color:var(--brass-bright); font-style:italic; }
/* the glass that breaks, and the case that turns to protect it */
.xp-mrs-case{ width:120px; height:160px; margin:6px 0 30px; perspective:800px; opacity:0; animation:xp-fade .8s ease 3.0s forwards; }
.xp-mrs-case .in{ position:relative; width:100%; height:100%; transform-style:preserve-3d; animation:xp-mrsturn 1.4s cubic-bezier(.62,.03,.26,1) 4.8s both; }
@keyframes xp-mrsturn{ from{ transform:rotateY(0); } to{ transform:rotateY(180deg); } }
.xp-mrs-case .f, .xp-mrs-case .b{ position:absolute; inset:0; border:1px solid var(--brass-bright); border-radius:4px; backface-visibility:hidden;
  border-top:5px double var(--brass-bright); border-bottom:5px double var(--brass-bright); }
.xp-mrs-case .f::before{ content:''; position:absolute; inset:12px; border:1px solid var(--line); border-radius:2px;
  background:linear-gradient(140deg, rgba(255,255,255,.08), rgba(255,255,255,0) 60%); }
.xp-mrs-case .crack{ position:absolute; inset:12px; width:calc(100% - 24px); height:calc(100% - 24px); overflow:visible; }
.xp-mrs-case .crack path{ fill:none; stroke:#fff; stroke-width:2.2; stroke-linejoin:miter; stroke-dasharray:100; stroke-dashoffset:100;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.9)); animation:xp-draw .3s cubic-bezier(.3,0,.1,1) 3.9s forwards; }
.xp-mrs-case .b{ transform:rotateY(180deg); background:linear-gradient(160deg, rgba(240,217,168,.18), rgba(240,217,168,.04)); }
.xp-mrs-case .b i{ position:absolute; inset:14px; border:1px solid rgba(240,217,168,.5); border-radius:2px; }
.xp-canvas.portrait .xp-mrs-case{ margin:4px 0 24px; }
/* the loupe: a lens passing over the loupe, magnifying the crest itself */
.xp-cam-loupe .mag{ position:absolute; inset:0; opacity:0;
  clip-path:ellipse(8% 6.4% at 24% 50%);
  animation:xp-fade .6s ease 3.4s forwards, xp-magpath 5.4s ease-in-out 3.4s both; }
.xp-cam-loupe .mag img{ display:block; width:100%; height:100%; transform:scale(1.9); transform-origin:24% 50%;
  animation:xp-magorigin 5.4s ease-in-out 3.4s both; }
@keyframes xp-magpath{ 0%{ clip-path:ellipse(8% 6.4% at 24% 52.5%); } 50%{ clip-path:ellipse(8% 6.4% at 40% 54%); } 100%{ clip-path:ellipse(8% 6.4% at 29% 53.5%); } }
@keyframes xp-magorigin{ 0%{ transform-origin:24% 52.5%; } 50%{ transform-origin:40% 54%; } 100%{ transform-origin:29% 53.5%; } }
.xp-cam-loupe .lens{ position:absolute; width:16%; height:12.8%; transform:translate(-50%,-50%); left:24%; top:52.5%; border-radius:50%;
  border:1.5px solid var(--brass-bright); box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 0 12px rgba(240,217,168,.75), inset 0 0 10px rgba(240,217,168,.35); opacity:0;
  animation:xp-fade .6s ease 3.4s forwards, xp-lenspath 5.4s ease-in-out 3.4s both; }
@keyframes xp-lenspath{ 0%{ left:24%; top:52.5%; } 50%{ left:40%; top:54%; } 100%{ left:29%; top:53.5%; } }
/* a line of writing, made as it is read */
.xp-mrs-ink{ display:block; width:320px; height:96px; margin:0 0 24px; overflow:visible; }
.xp-mrs-ink path{ fill:none; stroke:var(--brass-bright); stroke-width:1.6; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100;
  animation:xp-draw 3s cubic-bezier(.4,.1,.3,1) 1.8s forwards; }
/* the stepped crown, then the three lines under it */
.xp-mrs-deco{ display:block; width:320px; height:139px; margin:0 0 24px; overflow:visible; }
.xp-mrs-deco path{ fill:none; stroke:var(--brass-bright); stroke-width:1.4; stroke-dasharray:100; stroke-dashoffset:100;
  animation:xp-draw 1.8s cubic-bezier(.4,.1,.3,1) 2.2s forwards; }
.xp-mrs-deco .g{ stroke:var(--brass); animation-duration:1s; }
.xp-mrs-deco .g1{ animation-delay:3.4s; } .xp-mrs-deco .g2{ animation-delay:3.6s; } .xp-mrs-deco .g3{ animation-delay:3.8s; }
/* the Art Deco scene: up to the crown, then down to the letters */
.xp-cam.xp-cam-deco .layer{ animation:xp-cam 3.2s cubic-bezier(.6,.05,.25,1) .3s both, xp-camdown 3.4s cubic-bezier(.6,.05,.25,1) 6.4s forwards; }
@keyframes xp-camdown{ to{ transform:translate(3.5%,-26.2%) scale(.93); } }
/* the crest again, small, above the last words */
.xp-mrs-keep{ display:block; width:220px; height:auto; margin:0 auto 30px; opacity:0; animation:xp-fade 1.6s ease .2s forwards; }
@media (prefers-reduced-motion: reduce){
  .xp-cam .layer, .xp-cam .layer > img, .xp-cam-loupe .mag, .xp-cam-loupe .mag img, .xp-cam-loupe .lens{ animation:none !important; }
  .xp-shieldline path, .xp-mrs-ink path, .xp-mrs-deco path{ stroke-dashoffset:0; animation:none !important; }
}

/* the two sides, drawn: a dial on the front, an engraving on the back */
.xp-mrs-two{ width:150px; height:200px; margin:0 auto 40px; perspective:900px; }
.xp-mrs-two .in{ position:relative; width:100%; height:100%; transform-style:preserve-3d; animation:xp-flipcase 5.5s cubic-bezier(.62,.03,.26,1) .8s infinite; }
.xp-mrs-two .f, .xp-mrs-two .b{ position:absolute; inset:0; border:1px solid var(--brass-bright); border-radius:5px; backface-visibility:hidden;
  border-top:6px double var(--brass-bright); border-bottom:6px double var(--brass-bright); }
.xp-mrs-two .f::before{ content:''; position:absolute; inset:16px; border:1px solid var(--line); border-radius:2px; }
.xp-mrs-two .f i{ position:absolute; left:50%; top:50%; width:2px; background:var(--brass-bright); transform-origin:50% 100%; }
.xp-mrs-two .f .h1{ height:36px; margin:-36px 0 0 -1px; transform:rotate(-38deg); }
.xp-mrs-two .f .h2{ height:52px; margin:-52px 0 0 -1px; transform:rotate(64deg); }
.xp-mrs-two .b{ transform:rotateY(180deg); background:linear-gradient(160deg, rgba(240,217,168,.16), rgba(240,217,168,.03)); }
.xp-mrs-two .b svg{ position:absolute; inset:14px; width:calc(100% - 28px); height:calc(100% - 28px); }
.xp-mrs-two .b path{ fill:none; stroke:var(--brass-bright); stroke-width:1.6; stroke-linecap:round; }
/* the crest experience's type, larger than the stories use, so every word
   (the dates, the address, the independence line) reads on a phone */
.xp-mrs .xp-cap{ font-size:15px; letter-spacing:.24em; }
.xp-mrs .xp-say{ font-size:34px; }
.xp-mrs .xp-say.sm{ font-size:28px; }
.xp-mrs .xp-say.lg{ font-size:50px; }
.xpF-end.xp-mrs .sig{ font-size:22px; letter-spacing:.24em; }
.xpF-end.xp-mrs .hint{ font-size:18px; letter-spacing:.12em; }
.xp-mrs .xp-layer{ padding:16px 0; }
.xp-mrs .xp-layer b{ font-size:16px; }
.xp-mrs .xp-layer span{ font-size:30px; }
.xp-canvas.portrait .xp-mrs .xp-cap{ font-size:24px; letter-spacing:.16em; }
.xp-canvas.portrait .xp-mrs .xp-say{ font-size:40px; }
.xp-canvas.portrait .xp-mrs .xp-say.sm{ font-size:34px; color:#e6dfd1; }
.xp-canvas.portrait .xp-mrs .xp-say.lg{ font-size:52px; }
.xp-canvas.portrait .xpF-end.xp-mrs .sig{ font-size:30px; }
.xp-canvas.portrait .xpF-end.xp-mrs .hint{ font-size:26px; line-height:1.4; padding:0 60px; }
.xp-canvas.portrait .xp-mrs .xp-layer{ width:760px; grid-template-columns:210px 1fr; padding:14px 0; }
.xp-canvas.portrait .xp-mrs .xp-layer b{ font-size:22px; letter-spacing:.14em; }
.xp-canvas.portrait .xp-mrs .xp-layer span{ font-size:36px; }
.xp-canvas.portrait .xp-mrs-case{ zoom:1.5; }
.xp-canvas.portrait .xp-mrs-two{ zoom:1.3; }
.xp-canvas.portrait .xp-mrs-keep{ width:300px; }
.xp-canvas.portrait .xp-mrs-ink, .xp-canvas.portrait .xp-mrs-deco{ width:420px; height:auto; }

/* the site's two sides: a case that turns from the stories to the reference */
.xp-mrs-site{ width:330px; height:440px; perspective:1400px; }
.xp-mrs-site .in{ position:relative; width:100%; height:100%; transform-style:preserve-3d; animation:xp-mrsturn 1.6s cubic-bezier(.62,.03,.26,1) 4.6s both; }
.xp-mrs-site .f, .xp-mrs-site .b{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  border:1px solid var(--brass-bright); border-radius:6px; border-top:8px double var(--brass-bright); border-bottom:8px double var(--brass-bright);
  backface-visibility:hidden; background:linear-gradient(160deg, rgba(240,217,168,.10), rgba(240,217,168,.02)); opacity:0; animation:xp-fade 1s ease .2s forwards; }
.xp-mrs-site .f::before, .xp-mrs-site .b::before{ content:''; position:absolute; inset:18px; border:1px solid var(--line); border-radius:3px; pointer-events:none; }
.xp-mrs-site .b{ transform:rotateY(180deg); gap:14px; }
.xp-mrs-site b{ font-family:'Poiret One',cursive; font-weight:400; font-size:44px; color:var(--brass-bright); }
.xp-mrs-site .b b{ margin-bottom:14px; }
.xp-mrs-site span{ font-family:'Cinzel',serif; font-size:14px; letter-spacing:.24em; text-transform:uppercase; color:#f0d9a8; }
.xp-mrs-site .b span{ margin-top:14px; }
.xp-mrs-site svg{ width:210px; height:42px; overflow:visible; }
.xp-mrs-site svg path{ fill:none; stroke:var(--brass-bright); stroke-width:1.6; stroke-linecap:round; }
.xp-mrs-site .b i{ display:block; width:190px; height:1px; background:var(--brass); }
.xp-mrs-site .b i:nth-of-type(2){ width:150px; } .xp-mrs-site .b i:nth-of-type(3){ width:170px; } .xp-mrs-site .b i:nth-of-type(4){ width:120px; }
.xp-mrs-kinds{ line-height:1.7; }
.xp-mrs-kinds .xp-w{ color:#f0d9a8; white-space:nowrap; }
.xp-canvas.portrait .xp-mrs-site{ width:380px; height:506px; }
.xp-canvas.portrait .xp-mrs-site b{ font-size:50px; }
.xp-canvas.portrait .xp-mrs-site span{ font-size:23px; letter-spacing:.06em; }
.xp-mrs-kinds .xp-w + .xp-w::before{ content:none; }
.xp-mrs-kinds .xp-w{ margin-right:.3em; }
.xp-mrs .xp-say{ text-wrap:balance; }

/* My Reverso Story, reel: the crest experience quickened for a phone */
.xp-rl-top .xp-cam.xp-rl-cam{ width:520px; height:650px; }
.xp-cam.xp-rl-cam .layer{ animation-duration:1.7s; animation-delay:.05s; }
.xp-cam.xp-rl-cam .layer > img{ animation-delay:1.8s; animation-duration:5s; }
.xp-cam.xp-rl-cam.xp-rl-camhook .layer{ animation:xp-cam 3.6s cubic-bezier(.3,.6,.2,1) both; }
.xp-rl-cam .xp-shieldline path{ animation-duration:1.8s, .8s; animation-delay:var(--d), calc(var(--d) + 3.6s); }
.xp-cam-loupe.xp-rl-lens .mag{ animation:xp-fade .4s ease 1.6s forwards, xp-magpath 2.8s ease-in-out 1.6s both; }
.xp-cam-loupe.xp-rl-lens .mag img{ animation:xp-magorigin 2.8s ease-in-out 1.6s both; }
.xp-cam-loupe.xp-rl-lens .lens{ animation:xp-fade .4s ease 1.6s forwards, xp-lenspath 2.8s ease-in-out 1.6s both; }
.xp-cam.xp-cam-deco.xp-rl-deco .layer{ animation:xp-cam 1.6s cubic-bezier(.6,.05,.25,1) .05s both, xp-camdown 1.8s cubic-bezier(.6,.05,.25,1) 2.4s forwards; }
.xp-rl-mid .xp-col > .xp-mrs-site.xp-rl-site{ width:380px; height:506px; margin:0 auto 40px; }
.xp-mrs-site.xp-rl-site .in{ animation-delay:2.0s; animation-duration:1.1s; }
.xp-mrs-site.xp-rl-site .f, .xp-mrs-site.xp-rl-site .b{ animation-delay:0s; animation-duration:.5s; }
.xp-mrs-site.xp-rl-site b{ font-size:52px; }
.xp-mrs-site.xp-rl-site span{ font-size:24px; letter-spacing:.08em; }
.xp-rl-mid .xp-col > .xp-mrs-case.xp-rl-mrscase{ zoom:2.4; margin:0 auto 24px; animation-delay:.1s; }
.xp-rl-mrscase .crack path{ animation-delay:.5s; }
.xp-rl-mrscase .in{ animation-delay:1.1s; animation-duration:1.1s; }
.xp-mrs-ink.xp-rl-ink{ width:420px; height:126px; margin:0 auto 10px; }
.xp-mrs-ink.xp-rl-ink path{ animation-delay:.3s; animation-duration:2.2s; stroke-width:2; }
.xp-rl.sm.xp-rl-six{ font-size:40px; line-height:1.5; color:#f0d9a8; margin-bottom:30px; }
.xp-rl.sm.xp-rl-six .xp-w{ white-space:nowrap; }
.xp-rl-top .xp-mrs-keep.xp-rl-keep{ width:460px; margin:0 auto; animation-duration:1s; animation-delay:0s; }
.xp-rl.sm.xp-rl-indep{ font-size:32px; margin-top:26px; }
.xp-rl-top .xp-mrs-keep.xp-rl-keep{ animation:xp-fade 1s ease forwards, xp-rlkeep 5.6s ease-out both; }
@keyframes xp-rlkeep{ from{ transform:scale(.94); } to{ transform:scale(1.06); } }
.xp-rl-mid .xp-col > .xp-mrs-keep.xp-rl-keep6{ width:240px; margin:0 auto 34px; animation:xp-fade .8s ease forwards, xp-rlkeep 4.6s ease-out both; }

/* My Son's Reverso (@decowatches), reel */
.xp-rl-mid .xp-col > .xp-promise.xp-rl-promise{ zoom:2.2; margin:0 auto 30px; animation-delay:0s; animation-duration:.8s; }
.xp-rl-mid .xp-col > .xp-years.xp-rl-years{ margin:20px auto 50px; gap:20px; }
.xp-rl-years i{ width:180px !important; height:4px; animation-duration:.5s !important; }
.xp-rl-years i:nth-child(1){ animation-delay:.2s !important; }
.xp-rl-years i:nth-child(2){ animation-delay:.7s !important; }
.xp-rl-years i:nth-child(3){ animation-delay:1.2s !important; }
.xp-rl-top .xp-photo.xp-rl-hookpic.xp-rl-dsdate img{ transform-origin:55% 60%; animation:xp-rldsdate 4.6s cubic-bezier(.45,.05,.25,1) both; }
@keyframes xp-rldsdate{ from{ transform:scale(1.1); } to{ transform:scale(1.55); } }
.xp-rl-years i{ background:#f3d9a6 !important; box-shadow:0 0 10px rgba(240,217,168,.6); }
.xp-rl-years i:nth-child(1){ animation-delay:.1s !important; } .xp-rl-years i:nth-child(2){ animation-delay:.35s !important; } .xp-rl-years i:nth-child(3){ animation-delay:.6s !important; }
.xp-rl-top .xp-photo.xp-rl-hookpic.xp-rl-dsini img{ transform-origin:56% 42%; animation:xp-rldsini 5.4s ease-out both; }
@keyframes xp-rldsini{ from{ transform:scale(1.35); } to{ transform:scale(1.6); } }

/* My Son's Reverso (Farhan Hussain), reel: the experience's timeline, larger and quicker */
.xp-canvas.portrait .xp-tl.xp-rl-tl{ width:560px; height:200px; margin:10px auto 50px; }
.xp-rl-tl .ax{ top:78px; height:2px; } .xp-rl-tl .tk{ top:71px; height:16px; }
.xp-rl-tl .pg, .xp-rl-tl .pg2{ top:77px; height:4px; }
.xp-rl-tl .y{ font-size:38px; } .xp-rl-tl .d{ top:70px; width:18px; height:18px; margin-left:-9px; }
.xp-rl-tl .n{ top:110px; font-size:24px; letter-spacing:.1em; } .xp-rl-tl .n24{ top:152px; }
.xp-tl.s1.xp-rl-tl .ax{ animation-duration:1s; animation-delay:.1s; }
.xp-tl.s1.xp-rl-tl .y17, .xp-tl.s1.xp-rl-tl .d17, .xp-tl.s1.xp-rl-tl .n17{ animation-duration:.6s; animation-delay:.6s; }
.xp-tl.s2.xp-rl-tl .pg{ animation-duration:1.3s; animation-delay:.2s; }
.xp-tl.s2.xp-rl-tl .y23, .xp-tl.s2.xp-rl-tl .d23, .xp-tl.s2.xp-rl-tl .n23{ animation-duration:.6s; animation-delay:1.3s; }
.xp-tl.s3.xp-rl-tl .pg2{ animation-duration:.8s; animation-delay:.2s; }
.xp-tl.s3.xp-rl-tl .y24, .xp-tl.s3.xp-rl-tl .d24, .xp-tl.s3.xp-rl-tl .n24{ animation-duration:.6s; animation-delay:.9s; }
.xp-rl-pairc.xp-rl-pair2 .c b{ font-size:16px; }
/* a held framed picture keeps moving to the end of its scene */
.xp-rl-top .xp-photo.xp-rl-hookpic.xp-rl-slow img{ animation:xp-rlhpslow 6.5s ease-out both; }
@keyframes xp-rlhpslow{ from{ transform:scale(1.02); } to{ transform:scale(1.16); } }

/* The Reverso That Won Me Over (Robin), reel */
.xp-rl-mid .xp-col > .xp-rl-rwlist{ margin:10px auto 50px; }
.xp-rl-mid .xp-rl-rwlist .xp-shortlist{ margin:0 auto; gap:50px; }
.xp-rl-rwlist .xp-shortlist figure{ width:190px; }
.xp-rl-rwlist .xp-shortlist span{ font-size:24px; letter-spacing:.08em; line-height:1.3; }
.xp-rl-rwlist .xp-shortlist i{ width:130px; height:184px; }
.xp-rl-rwlist .xp-shortlist figure, .xp-rl-rwlist .xp-shortlist figure.off{ animation-duration:.7s, .8s; }
.xp-rl-rwlist .xp-shortlist figure.on i{ animation-duration:.8s; }
.xp-rl-top .xp-photo.xp-rl-hookpic.xp-rl-rwmap img{ transform-origin:50% 44%; animation:xp-rlrwmap 6s cubic-bezier(.45,.05,.25,1) both; }
@keyframes xp-rlrwmap{ from{ transform:scale(1.05); } to{ transform:scale(1.7); } }

/* My Daughter's Reverso (Farhan), reel */
.xp-week.xp-rl-week2 .a, .xp-week.xp-rl-week2 .b{ transform:none; letter-spacing:.05em; }
.xp-route.post.xp-rl-letter.xp-rl-oneway .dot{ animation:xp-sailR 1.6s cubic-bezier(.45,0,.2,1) 1s forwards; }
.xp-rl-top .xp-photo.xp-rl-hookpic.xp-rl-fdname img{ transform-origin:62% 46%; animation:xp-rlfdname 5.6s ease-out both; }
@keyframes xp-rlfdname{ from{ transform:scale(1.45); } to{ transform:scale(1.7); } }

/* A Reverso for a Milestone (Robin), reel */
.xp-rl-mid .xp-col > .xp-chart.xp-rl-chart{ width:640px; height:250px; margin:0 auto 46px; }
.xp-chart.xp-rl-chart path{ stroke-width:2.2; animation-duration:2.6s; animation-delay:.2s; }
.xp-chart.xp-rl-chart span{ font-size:24px; letter-spacing:.08em; top:198px; }
.xp-chart.xp-rl-chart .a{ animation-delay:.2s; } .xp-chart.xp-rl-chart .b{ animation-delay:2.4s; }
.xp-chart.xp-rl-chart .end{ animation-delay:2.5s; width:16px; height:16px; right:-6px; top:4px; }
.xp-rl-mid .xp-col > .xp-alloc.xp-rl-rnalloc{ margin:0 auto 54px; }
.xp-alloc.s2.xp-rl-rnalloc{ zoom:1.35; }
.xp-alloc.s2.xp-rl-rnalloc i.mine{ animation-duration:1s; animation-delay:.5s; }
.xp-rl-top .xp-photo.xp-rl-hookpic.xp-rl-rnhook img{ transform-origin:56% 50%; animation:xp-rlrnhook 5.2s cubic-bezier(.2,.8,.25,1) both; }
@keyframes xp-rlrnhook{ from{ transform:scale(1.06); } to{ transform:scale(1.28); } }
.xp-rl-top .xp-photo.xp-rl-hookpic.xp-rl-rndisc img{ transform-origin:56% 52%; animation:xp-rlrndisc 6s cubic-bezier(.45,.05,.25,1) both; }
@keyframes xp-rlrndisc{ from{ transform:scale(1.6); } to{ transform:scale(2.2); } }
/* the Geographic's own dial, not the printed Reverso it lies on */
.xp-photo.xp-rl-rgcrop img{ transform-origin:46% 44%; transform:scale(2.1); }
.xp-rl-rwlist .xp-shortlist figure.off{ animation-name:xp-rise, xp-rlsheetdim; }
@keyframes xp-rlsheetdim{ to{ opacity:.62; } }
.xp-rl-top .xp-photo.xp-rl-hookpic.xp-rl-rgclose img{ transform-origin:46% 44%; animation:xp-rlrgclose 6s ease-out both; }
@keyframes xp-rlrgclose{ from{ transform:scale(2.0); } to{ transform:scale(2.3); } }

/* A Tribute in Detail and Colour (Haoming Wang), reel */
.xp-rl-top .xp-photo.xp-rl-hookpic.xp-rl-hwhook img{ transform-origin:38% 38%; animation:xp-rlhwhook 5.2s cubic-bezier(.2,.8,.25,1) both; }
@keyframes xp-rlhwhook{ from{ transform:scale(1.15); } to{ transform:scale(1.55); } }
.xp-rl-top .xp-photo.xp-rl-hookpic.xp-rl-hwdraw img{ transform-origin:84% 16%; animation:xp-rlhwdraw 6.2s cubic-bezier(.45,.05,.25,1) both; }
@keyframes xp-rlhwdraw{ from{ transform:scale(2.15); } to{ transform:scale(1.9); } }
.xp-rl-top .xp-photo.xp-rl-hookpic.xp-rl-hwvln img{ object-position:40% 50%; transform-origin:40% 50%; animation:xp-rlhwvln 5.8s cubic-bezier(.45,.05,.25,1) both; }
@keyframes xp-rlhwvln{ from{ transform:scale(1.05); } to{ transform:scale(1.3); } }
.xp-rl-top .xp-photo.xp-rl-hookpic.xp-rl-hwstrap img{ transform-origin:60% 80%; animation:xp-rlhwstrap 5.8s cubic-bezier(.45,.05,.25,1) both; }
@keyframes xp-rlhwstrap{ from{ transform:scale(1.3); } to{ transform:scale(1.6) translate(-3%, -4%); } }
.xp-rl-mid .xp-col > .xp-swatch.xp-rl-swatch{ width:560px; height:8px; margin:0 auto 70px; border-radius:4px; }
.xp-swatch.xp-rl-swatch i{ border-radius:4px; }
.xp-swatch.xp-rl-swglow i{ transform-origin:left center; animation:xp-routeline 1.2s cubic-bezier(.3,.7,.2,1) .1s both, xp-rlswglow 2.4s ease-in-out 1.3s infinite; }
@keyframes xp-rlswglow{ 0%,100%{ box-shadow:0 0 16px rgba(242,203,61,.5); } 50%{ box-shadow:0 0 38px rgba(242,203,61,.9); } }
.xp-swatch.xp-rl-swdrain i{ animation-duration:1.6s; animation-delay:1.3s; }
.xp-rl-mid .xp-col > .xp-layer.xp-rl-layer.xp-rl-layert{ padding:20px 0; }
.xp-rl-mid .xp-col > .xp-rl.xp-rl-hwend{ margin-top:44px; }

/* My Baby (Randy Kamin), reel */
.xp-rl-top .xp-shot.xp-rl-shot.xp-rl-rkhook img{ animation:xp-rlrkhook 5.2s cubic-bezier(.2,.8,.25,1) both; }
@keyframes xp-rlrkhook{ from{ transform:translate(-50%,-50%) translateY(var(--shift)) scale(1); } to{ transform:translate(-50%,-50%) translateY(var(--shift)) scale(1.18); } }
.xp-rl-top .xp-shot.xp-rl-shot.xp-rl-rkk img{ animation:xp-rlrkk 5.8s cubic-bezier(.45,.05,.25,1) both; }
@keyframes xp-rlrkk{ from{ transform:translate(-50%,-50%) translateY(var(--shift)) scale(1.45); } to{ transform:translate(-50%,-50%) translateY(var(--shift)) scale(1.8); } }
.xp-rl-mid .xp-col > .xp-count.xp-rl-count{ height:200px; line-height:200px; font-size:170px; margin:10px auto 10px; }
.xp-count.xp-rl-count .reel b{ height:200px; }
.xp-rl-mid .xp-col > .xp-marks.xp-rl-marks.xp-rl-rkone{ margin:0 auto 50px; }
.xp-marks.xp-rl-rkone i{ animation-delay:var(--d); }
.xp-marks.xp-rl-rkone i:not(.first){ animation:xp-tally .3s ease-out var(--d) forwards, xp-rlrkfade 1.2s ease calc(var(--d) + 1.2s) forwards; }
@keyframes xp-rlrkfade{ to{ opacity:.1; } }
.xp-marks.xp-rl-rkone i.first{ box-shadow:0 0 12px rgba(240,217,168,.8); }
.xp-plate-empty.xp-rl-blank.xp-rl-rkwill{ margin:0 auto 40px; }
.xp-rl.big.xp-rl-big2.xp-rl-hwfully{ font-size:86px; }

/* George Mason Flower, reel */
.xp-rl-top .xp-photo.xp-rl-hookpic.xp-rl-gmhook img{ transform-origin:52% 50%; animation:xp-rlgmhook 5.2s cubic-bezier(.2,.8,.25,1) both; }
@keyframes xp-rlgmhook{ from{ transform:scale(1.5); } to{ transform:scale(1.15); } }
.xp-rl-top .xp-photo.xp-rl-hookpic.xp-rl-gmclose img{ transform-origin:52% 50%; animation:xp-rlgmclose 6s cubic-bezier(.45,.05,.25,1) both; }
@keyframes xp-rlgmclose{ from{ transform:scale(1.35); } to{ transform:scale(1.8); } }
.xp-rl-mid .xp-col > .xp-duo.xp-rl-duo{ width:560px; margin:0 auto 50px; }
.xp-duo.xp-rl-duo i{ height:7px; border-radius:4px; margin-bottom:22px; animation-duration:1.1s; animation-delay:.1s; }
.xp-duo.xp-rl-duo i.g{ background:#4fa56f; }
.xp-duo.xp-rl-duo i.y{ animation-delay:.45s; }
.xp-rl-mid .xp-col > .xp-clock.xp-rl-clock{ zoom:1.8; margin:0 auto 30px; animation-duration:.6s; animation-delay:0s; }
.xp-clock.xp-rl-clock i{ animation-duration:4s; }
.xp-rl-top .xp-rl-strikes{ margin:0 0 10px; }
/* Randy: the counter counts the nineteen bought since the first */
.xp-count.xp-rl-count19 .reel{ animation-name:xp-rlcount19; animation-timing-function:steps(18, end); }
@keyframes xp-rlcount19{ to{ transform:translateY(-94.737%); } }
.xp-rl-top .xp-shot.xp-rl-shot.xp-rl-rkpull img{ animation:xp-rlrkpull 6s ease-out both; }
@keyframes xp-rlrkpull{ from{ transform:translate(-50%,-50%) translateY(var(--shift)) scale(1.1); } to{ transform:translate(-50%,-50%) translateY(var(--shift)) scale(1); } }

/* A Portrait from the Family (Paul Stewart), reel */
.xp-rl-top .xp-photo.xp-rl-hookpic.xp-rl-pshook img{ transform-origin:50% 33%; animation:xp-rlpshook 5.2s cubic-bezier(.2,.8,.25,1) both; }
@keyframes xp-rlpshook{ from{ transform:scale(1.55); } to{ transform:scale(1.25); } }
.xp-rl-top .xp-photo.xp-rl-pic.wide.xp-rl-psinscr img{ object-position:50% 100%; transform-origin:52% 87%; animation:xp-rlpsinscr 5.8s cubic-bezier(.45,.05,.25,1) both; }
@keyframes xp-rlpsinscr{ 0%{ transform:scale(1.15); } 100%{ transform:scale(2.3); } }
.xp-rl-top .xp-photo.xp-rl-pic.wide.xp-rl-pspick .xp-pick{ animation-delay:.7s; animation-duration:1.6s; }
.xp-rl-mid .xp-col > .xp-tree.xp-rl-tree{ width:680px; height:330px; margin:0 auto 40px; }
.xp-tree.xp-rl-tree b{ width:250px; font-size:24px; letter-spacing:.12em; animation-duration:.8s; }
.xp-tree.xp-rl-tree b small{ font-size:26px; margin-top:6px; }
.xp-tree.xp-rl-tree .k{ animation-delay:.1s; } .xp-tree.xp-rl-tree .l{ animation-delay:.4s; }
.xp-tree.xp-rl-tree .f{ animation-delay:1.6s; } .xp-tree.xp-rl-tree .j{ animation-delay:1.8s; }
.xp-tree.xp-rl-tree i{ animation-duration:.8s; }
.xp-tree.xp-rl-tree .h1{ left:256px; right:256px; top:16px; height:2px; animation-delay:.7s; }
.xp-tree.xp-rl-tree .h2{ left:256px; right:256px; bottom:50px; height:2px; animation-delay:2.1s; }
.xp-tree.xp-rl-tree .v1, .xp-tree.xp-rl-tree .v2{ top:128px; height:104px; width:2px; animation-delay:1.2s; }
.xp-tree.xp-rl-tree .v1{ left:124px; } .xp-tree.xp-rl-tree .v2{ right:124px; }
.xp-tree.xp-rl-tree span{ left:256px; right:256px; font-size:20px; letter-spacing:.14em; }
.xp-tree.xp-rl-tree .t1{ top:30px; animation-delay:.9s; } .xp-tree.xp-rl-tree .t2{ bottom:16px; animation-delay:2.3s; }
.xp-months.xp-rl-months{ justify-content:center; gap:18px; margin:18px auto 22px; }
.xp-months.xp-rl-months i{ width:150px; height:4px; animation-duration:.5s; }
.xp-months.xp-rl-months i:nth-child(1){ animation-delay:.9s; } .xp-months.xp-rl-months i:nth-child(2){ animation-delay:1.2s; } .xp-months.xp-rl-months i:nth-child(3){ animation-delay:1.5s; }
.xp-rl-top .xp-photo.xp-rl-pic.xp-rl-hookpic.xp-rl-psmock{ width:380px; height:600px; }
.xp-rl-top .xp-shot.xp-rl-shot.xp-rl-hookshot.xp-rl-rksmall{ width:380px; height:500px; }
.xp-rl-top .art.xp-rl-artup .xp-shot.xp-rl-shot.xp-rl-hookshot.xp-rl-rksmall{ width:380px; height:500px; }

/* The Aston Martin Reverso (Rashawn Smith), reel */
.xp-rl-top .xp-photo.xp-rl-hookpic.xp-rl-rshook img{ transform-origin:47% 46%; animation:xp-rlrshook 5.2s cubic-bezier(.2,.8,.25,1) both; }
@keyframes xp-rlrshook{ from{ transform:scale(1.7); } to{ transform:scale(1.3); } }
.xp-rl-top .xp-photo.xp-rl-hookpic.xp-rl-rs8 img{ transform-origin:37% 56%; animation:xp-rlrs8 5.8s cubic-bezier(.45,.05,.25,1) both; }
@keyframes xp-rlrs8{ from{ transform:scale(1.1); } to{ transform:scale(2.1); } }
.xp-rl-mid .xp-col > .xp-x2.xp-rl-x2{ gap:14px; margin:0 auto 30px; }
.xp-x2.xp-rl-x2 b{ font-size:25px; letter-spacing:.1em; animation-duration:.6s; animation-delay:.4s; }
.xp-x2.xp-rl-x2 b:last-child{ animation-delay:.7s; }
.xp-x2.xp-rl-x2 i{ width:60px; height:2px; animation-duration:.6s; animation-delay:.2s; }
.xp-x2.xp-rl-x2 em{ font-size:44px; animation-duration:.5s; animation-delay:.1s; }
.xp-rl-mid .xp-col > .xp-v8.xp-rl-v8{ zoom:1.6; margin:0 auto 26px; }
.xp-rl-mid .xp-col > .xp-speed.xp-rl-speed{ width:600px; margin:0 auto 46px; }
.xp-speed.xp-rl-speed i{ height:3px; margin-bottom:16px; animation-duration:.9s; }
.xp-rl-mid .xp-col > .xp-chain.xp-rl-chain{ width:640px; height:200px; margin:0 auto 40px; }
.xp-chain.xp-rl-chain .p1, .xp-chain.xp-rl-chain .p2{ height:4px; animation-duration:.9s; }
.xp-chain.xp-rl-chain .p1{ animation-delay:.4s; } .xp-chain.xp-rl-chain .p2{ animation-delay:2.3s; }
.xp-chain.xp-rl-chain .d{ width:18px; height:18px; margin-left:-9px; top:96px; animation-duration:.5s; }
.xp-chain.xp-rl-chain .d1{ animation-delay:.1s; } .xp-chain.xp-rl-chain .d2{ animation-delay:1.1s; } .xp-chain.xp-rl-chain .d3{ animation-delay:3.1s; }
.xp-chain.xp-rl-chain .n{ top:132px; font-size:22px; letter-spacing:.08em; white-space:normal; width:180px; line-height:1.25; animation-duration:.5s; }
.xp-chain.xp-rl-chain .n1{ left:-9px; animation-delay:.1s; }
.xp-chain.xp-rl-chain .n2{ text-align:center; animation-delay:1.1s; }
.xp-chain.xp-rl-chain .n3{ left:auto; right:-9px; text-align:right; animation-delay:3.1s; }
.xp-chain.xp-rl-chain .br{ top:40px; height:56px; width:2px; animation-duration:.6s; animation-delay:1.4s; }
.xp-chain.xp-rl-chain .wife{ top:-8px; }
.xp-chain.xp-rl-chain .wife .xp-reject.xp-rl-reject{ font-size:36px; }
.xp-rl-mid .xp-col > .xp-eyes.xp-rl-eyes{ zoom:1.7; margin:0 auto 30px; }
.xp-eyes.xp-rl-eyes i{ animation-duration:.5s, .8s; animation-delay:.1s, 1.2s; }
.xp-rl-mid .xp-col > .xp-straps.xp-rl-straps{ width:560px; margin:0 auto 40px; }
.xp-straps.xp-rl-straps > div{ animation-duration:.7s; margin-bottom:28px; }
.xp-straps.xp-rl-straps i{ height:22px; border-radius:4px; margin-bottom:12px; }
.xp-straps.xp-rl-straps b{ font-size:24px; letter-spacing:.1em; }
.xp-rl-mid .xp-col > .xp-layer.one.xp-rl-one{ width:600px; padding:18px 0; animation-duration:.7s; }
.xp-layer.one.xp-rl-one span{ font-size:46px; }
/* Paul: the detail scene keeps moving; months centred; tree captions larger */
.xp-rl-psdrift{ transform-origin:73% 42%; animation:xp-rlpsdrift 6.2s cubic-bezier(.45,.05,.25,1) both; }
@keyframes xp-rlpsdrift{ from{ transform:scale(1); } to{ transform:scale(1.14); } }
.xp-canvas.portrait .xp-months.xp-rl-months{ justify-content:center; }
.xp-tree.xp-rl-tree b small{ font-size:30px; }
.xp-x2.xp-rl-x2 b{ font-size:30px; letter-spacing:.06em; }
.xp-x2.xp-rl-x2 i{ width:44px; }

/* The Diplomat's Reverso (Sarp Vahabi), reel */
.xp-rl-top .xp-photo.xp-rl-hookpic.xp-rl-svhook img{ transform-origin:44% 40%; animation:xp-rlsvhook 5.2s cubic-bezier(.2,.8,.25,1) both; }
@keyframes xp-rlsvhook{ from{ transform:scale(1.2); } to{ transform:scale(2.05); } }
.xp-rl.xp-rl-svdate{ font-family:'Cinzel',serif; font-size:96px; letter-spacing:.06em; margin:6px 0 14px; }
.xp-rl.xp-rl-svdate .w.rose{ font-style:normal; }
.xp-rl-mid .xp-col > .xp-some.xp-rl-svsome{ height:120px; margin:10px auto 34px; }
.xp-some.xp-rl-svsome span{ line-height:100px; }
.xp-canvas.portrait .xp-some.xp-rl-svsome .a{ font-size:72px; animation-delay:.8s, 1.9s; animation-duration:.6s, .5s; }
.xp-canvas.portrait .xp-some.xp-rl-svsome .b{ font-size:50px; letter-spacing:.05em; white-space:nowrap; animation-delay:2.1s; animation-duration:.8s; }
.xp-some.xp-rl-svsome i{ width:480px; margin-left:-240px; height:2px; animation-delay:2.2s; animation-duration:.8s; }
.xp-rl-mid .xp-col > .xp-dx.xp-rl-dx{ text-align:center; margin:0 auto 40px; }
.xp-dx.xp-rl-dx b{ font-size:96px; animation-duration:.8s; }
.xp-dx.xp-rl-dx i{ width:300px; height:2px; margin:20px auto 18px; transform-origin:center; animation-duration:.6s; }
.xp-dx.xp-rl-dx span{ font-size:30px; letter-spacing:.14em; animation-duration:.6s; }
.xp-rl-top .xp-photo.xp-rl-hookpic.xp-rl-svpaper img{ animation:xp-rlsvpaper 6.2s cubic-bezier(.45,.05,.25,1) both; filter:contrast(1.06); }
@keyframes xp-rlsvpaper{ 0%,12%{ transform:scale(1); } 30%,44%{ transform:scale(2.4) translate(-29%, 29%); } 66%,100%{ transform:scale(2.4) translate(29%, -11%); } }
.xp-rl-mid .xp-col > .xp-entente.xp-pass.xp-rl-pass{ width:700px; margin:50px auto 40px; }
.xp-canvas.portrait .xp-entente.xp-pass.xp-rl-pass > i{ left:70px; right:70px; height:2px; animation-duration:1.8s; animation-delay:.8s; }
.xp-canvas.portrait .xp-entente.xp-pass.xp-rl-pass span{ font-size:26px; padding:0 5px; animation-duration:.5s; }
.xp-entente.xp-pass.xp-rl-pass span u{ width:16px; height:16px; margin-left:-8px; top:-30px; }
.xp-rl-top .xp-photo.xp-rl-hookpic.xp-rl-svsign img{ transform-origin:50% 45%; animation:xp-rlsvsign 5.2s ease-out both; }
@keyframes xp-rlsvsign{ from{ transform:scale(1.6); } to{ transform:scale(1.85); } }
/* Sarp: one-line name; the date at reel size in the portrait canvas */
.xp-canvas.portrait .xp-dx.xp-rl-dx b{ font-size:96px; }
.xp-canvas.portrait .xp-dx.xp-rl-dx i{ margin:20px auto 18px; transform-origin:center; }

/* --------------------------------------------------------------------------
   52. The Little Reverso from Japan — line work
   A wrist and three cases tried against it, the reference number, the watch
   left behind, six months counted off, and the colours of a strap.
   -------------------------------------------------------------------------- */
.xp-bdfit{ display:block; width:520px; height:200px; margin:0 auto 30px; overflow:visible; }
.xp-bdfit .band{
  stroke:var(--brass); stroke-width:1; stroke-dasharray:520; stroke-dashoffset:520;
  animation:xp-draw 1.6s cubic-bezier(.3,.7,.3,1) .2s forwards;
}
.xp-bdfit .c{ fill:none; stroke:#f0d9a8; stroke-width:1.2; opacity:0; }
.xp-bdfit .c1{ animation:xp-bdtry 1.5s ease 1.6s forwards; }
.xp-bdfit .c2{ animation:xp-bdtry 1.5s ease 3.1s forwards; }
.xp-bdfit .c3{ stroke:var(--brass-bright); filter:drop-shadow(0 0 6px rgba(240,217,168,.5)); animation:xp-fade 1.2s ease 4.6s forwards; }
@keyframes xp-bdtry{ 0%{ opacity:0; } 30%,70%{ opacity:.85; } 100%{ opacity:0; } }
.xp-bdfit .gap line{ stroke:var(--brass); stroke-width:1; }
.xp-bdfit .gap{ opacity:0; animation:xp-fade 1.2s ease 8.0s forwards; }
.xp-bdref{
  font-family:'Cinzel',serif; font-size:78px; letter-spacing:.12em; color:var(--brass-bright);
  margin:0 0 4px; opacity:0; animation:xp-rise 1.4s cubic-bezier(.2,.7,.25,1) .4s forwards;
}
/* the watch, left where it was found */
.xp-route .xp-bdleft{
  position:absolute; right:-9px; top:0; width:18px; height:30px; border:1px solid var(--brass-bright);
  border-radius:2px; box-shadow:0 0 12px rgba(240,217,168,.45); opacity:0;
  animation:xp-fade 1s ease 1.2s forwards;
}
.xp-bdmonths{ display:flex; justify-content:center; align-items:flex-end; gap:52px; height:90px; margin:34px auto 14px; }
.xp-bdmonths i{
  display:block; width:1px; height:76px; background:var(--brass-bright); transform-origin:bottom center;
  opacity:0; animation:xp-bdmon .9s ease forwards;
}
@keyframes xp-bdmon{ from{ opacity:0; transform:scaleY(0); } to{ opacity:var(--o,1); transform:scaleY(1); } }
.xp-photo.xp-bdpush img{ animation:xp-bdpush 11s cubic-bezier(.45,.05,.25,1) .4s both; }
@keyframes xp-bdpush{ from{ transform:scale(1.02); } to{ transform:scale(1.32) translate(0, 2%); } }
.xp-photo.xp-bdart img{ animation:xp-bdart 13s cubic-bezier(.45,.05,.25,1) .4s both; }
@keyframes xp-bdart{ from{ transform:scale(1); } to{ transform:scale(1.12); } }
/* a strap, as four lines of colour */
.xp-bdpop{ position:relative; width:360px; height:44px; margin:0 0 30px auto; }
.xp-bdpop i{
  position:absolute; right:0; height:3px; width:100%; transform:scaleX(0); transform-origin:right center;
  animation:xp-routeline 1.6s cubic-bezier(.3,.7,.2,1) forwards;
}
.xp-bdpop .p{ top:0;  background:#7a4bb3; animation-delay:2.2s; }
.xp-bdpop .s{ top:12px; height:2px; background:repeating-linear-gradient(to left, #f2cb3d 0 8px, transparent 8px 14px); animation-delay:5.8s; }
.xp-bdpop .b{ top:24px; background:#77cdea; animation-delay:3.0s; }
.xp-bdpop .l{ top:36px; background:#ef8d6c; animation-delay:6.6s; }
.xp-canvas.portrait .xp-bdpop{ margin:0 0 26px 0; }
.xp-canvas.portrait .xp-bdpop i{ transform-origin:left center; left:0; right:auto; }
.xp-canvas.portrait .xpF-split .pane-art .xp-photo.frame.xp-bdpush{ width:620px !important; height:559px !important; }
.xp-canvas.portrait .xpF-split .pane-art .xp-photo.frame.xp-bdart{ width:560px !important; height:560px !important; }
@media (prefers-reduced-motion: reduce){
  .xp-photo.xp-bdpush img, .xp-photo.xp-bdart img{ animation:none !important; }
}

/* --------------------------------------------------------------------------
   53. The Reverso of the Temple of Dawn — line work
   The edition's numbers as figures: three bands of the flag, nine marks with
   the ninth lit; a horizon and a rising arc for dawn.
   -------------------------------------------------------------------------- */
.xp-dwn-words{ margin-top:8px; }
.xp-dwn-word{
  display:inline-block; margin:0 16px; font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:38px; color:var(--brass-bright); opacity:0; animation:xp-rise 1.2s cubic-bezier(.2,.7,.25,1) forwards;
}
.xp-dwn-num{
  font-family:'Cinzel',serif; font-size:150px; line-height:1; color:var(--brass-bright); margin:0 0 18px;
  opacity:0; animation:xp-rise 1.4s cubic-bezier(.2,.7,.25,1) .3s forwards;
}
/* the flag as five lines: red, white, a double blue, white, red */
.xp-dwn-flag{ width:420px; margin:0 auto 40px; }
.xp-dwn-flag i{
  display:block; height:4px; margin-bottom:7px; transform:scaleX(0); transform-origin:left center;
  animation:xp-routeline 1.3s cubic-bezier(.3,.7,.2,1) forwards;
}
.xp-dwn-flag .r{  background:#b8343e; animation-delay:1.4s; }
.xp-dwn-flag .w{  background:#ece6da; animation-delay:1.65s; }
.xp-dwn-flag .b{  background:#34478f; height:12px; animation-delay:1.9s; }
.xp-dwn-flag .w2{ background:#ece6da; animation-delay:2.15s; }
.xp-dwn-flag .r2{ background:#b8343e; animation-delay:2.4s; }
.xp-dwn-nine{ display:flex; justify-content:center; align-items:flex-end; gap:30px; height:70px; margin:0 auto 34px; }
.xp-dwn-nine i{
  display:block; width:1px; height:46px; background:var(--brass); transform-origin:bottom center;
  opacity:0; animation:xp-bdmon .7s ease forwards;
}
.xp-dwn-nine i.k{ width:2px; height:66px; background:#f2cb3d; box-shadow:0 0 14px rgba(242,203,61,.6); }
.xp-say em.xp-dwn-yel{ color:#f2cb3d; }
.xp-dwn-sun{ display:block; width:300px; height:90px; margin:0 0 26px; overflow:visible; }
.xp-dwn-sun line{ stroke:var(--brass); stroke-width:1; stroke-dasharray:300; stroke-dashoffset:300; animation:xp-draw 1.8s ease .3s forwards; }
.xp-dwn-sun path{
  fill:none; stroke:#f2cb3d; stroke-width:1.4; stroke-dasharray:230; stroke-dashoffset:230;
  filter:drop-shadow(0 0 6px rgba(242,203,61,.5)); animation:xp-draw 3.2s cubic-bezier(.45,0,.2,1) 1.6s forwards;
}
.xp-photo.xp-dwn-dial img{ animation:xp-dwn-dial 13s cubic-bezier(.45,.05,.25,1) .4s both; }
@keyframes xp-dwn-dial{ from{ transform:scale(1.04); } to{ transform:scale(1.3); } }
.xp-photo.xp-dwn-up img{ object-position:50% 40%; animation:xp-dwn-up 11.5s cubic-bezier(.45,.05,.25,1) .3s both; }
@keyframes xp-dwn-up{ from{ transform:scale(1.05); } to{ transform:scale(1.7) translate(0, 6%); } }
.xpF-split .pane-art .xp-swivel.xp-dwn-sw{ width:400px; height:498px; }
.xp-canvas.portrait .xpF-split .pane-art .xp-swivel.xp-dwn-sw{ width:470px; height:585px; }
.xp-canvas.portrait .xpF-split .pane-art .xp-photo.frame.xp-dwn-dial{ width:560px !important; height:567px !important; }
.xp-canvas.portrait .xpF-split .pane-art .xp-photo.frame.xp-dwn-up{ width:470px !important; height:586px !important; }
.xp-canvas.portrait .xp-dwn-sun{ margin:0 0 22px; }
@media (prefers-reduced-motion: reduce){
  .xp-photo.xp-dwn-dial img, .xp-photo.xp-dwn-up img{ animation:none !important; }
}

/* --------------------------------------------------------------------------
   54. Two Reversos, Two Anniversaries — line work
   Two cases in two metals; a timeline with two spans ending in 2016; a drawn
   dial where only the 2 and the 5 turn red.
   -------------------------------------------------------------------------- */
.xp-kw-cases{ display:flex; justify-content:center; gap:120px; margin:0 auto 40px; }
.xp-kw-cases .c{ display:flex; flex-direction:column; align-items:center; opacity:0; animation:xp-rise 1.3s cubic-bezier(.2,.7,.25,1) forwards; }
.xp-kw-cases .c.rg{ --m:#d9a184; animation-delay:.6s; }
.xp-kw-cases .c.st{ --m:#c3cad2; animation-delay:1.8s; }
.xp-kw-cases i{ display:block; width:78px; height:122px; border:1.4px solid var(--m); border-radius:5px; margin-bottom:16px; box-shadow:0 0 18px color-mix(in srgb, var(--m) 30%, transparent); }
.xp-kw-cases b{ font-family:'Cinzel',serif; font-size:44px; font-weight:400; color:var(--m); line-height:1; }
.xp-kw-cases span{ margin-top:8px; font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:#cfc6b4; }
/* 1961 ... 1991 ... 2016, and the two spans that end together */
.xp-kw-tl{ position:relative; width:900px; height:190px; margin:46px auto 30px; }
.xp-kw-tl .ax{ position:absolute; left:0; right:0; top:96px; height:1px; background:var(--brass); transform:scaleX(0); transform-origin:left center; animation:xp-routeline 2.4s cubic-bezier(.45,0,.2,1) 1.6s forwards; }
.xp-kw-tl .d{ position:absolute; top:90px; width:13px; height:13px; margin-left:-6px; border-radius:50%; border:1px solid var(--brass-bright); background:#0b0e12; opacity:0; animation:xp-fade .8s ease forwards; }
.xp-kw-tl .y, .xp-kw-tl .n{ position:absolute; transform:translateX(-50%); opacity:0; animation:xp-fade 1s ease forwards; white-space:nowrap; }
.xp-kw-tl .y{ top:112px; font-family:'Cormorant Garamond',serif; font-size:30px; font-weight:400; color:var(--brass-bright); }
.xp-kw-tl .n{ top:152px; font-family:'Jost',sans-serif; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:#cfc6b4; }
.xp-kw-tl .d61, .xp-kw-tl .y61, .xp-kw-tl .n61{ left:0; animation-delay:1.6s; }
.xp-kw-tl .d91, .xp-kw-tl .y91, .xp-kw-tl .n91{ left:54.55%; animation-delay:2.8s; }
.xp-kw-tl .d16, .xp-kw-tl .y16{ left:100%; animation-delay:3.9s; }
.xp-kw-tl .sp{ position:absolute; height:22px; border:1px solid #f0d9a8; border-bottom:0; opacity:0; animation:xp-fade 1.2s ease forwards; }
.xp-kw-tl .s55{ left:0; right:0; top:36px; animation-delay:5.0s; }
.xp-kw-tl .s25{ left:54.55%; right:0; top:62px; height:14px; border-color:#d9343a; animation-delay:6.6s; }
.xp-kw-tl .sl{ position:absolute; font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.28em; text-transform:uppercase; opacity:0; animation:xp-fade 1.2s ease forwards; white-space:nowrap; }
.xp-kw-tl .l55{ left:50%; top:10px; transform:translateX(-50%); color:#f0d9a8; animation-delay:5.4s; }
.xp-kw-tl .l25{ left:77.3%; top:40px; transform:translateX(-50%); color:#e0676b; animation-delay:7.0s; }
.xp-kw-nums{ display:flex; justify-content:center; gap:120px; margin:0 auto 40px; }
.xp-kw-nums p{ display:flex; flex-direction:column; align-items:center; opacity:0; animation:xp-rise 1.4s cubic-bezier(.2,.7,.25,1) forwards; }
.xp-kw-nums p.st{ animation-delay:.5s; } .xp-kw-nums p.rg{ animation-delay:1.7s; }
.xp-kw-nums b{ font-family:'Cinzel',serif; font-size:130px; font-weight:400; line-height:1; }
.xp-kw-nums .st b{ color:#c3cad2; } .xp-kw-nums .rg b{ color:#d9a184; }
.xp-kw-nums span{ margin-top:12px; font-family:'Jost',sans-serif; font-size:13px; letter-spacing:.3em; text-transform:uppercase; color:#cfc6b4; }
.xp-say em.xp-kw-grn{ color:#5fbf8a; }
.xp-say em.xp-kw-red{ color:#e0676b; }
/* the dial, drawn: green field, a band of guilloché, numerals; 2 and 5 go red */
.xp-kw-dial{ display:block; width:290px; height:464px; overflow:visible; }
.xp-kw-dial .cs{ fill:rgba(46,110,78,.16); stroke:#5fbf8a; stroke-width:1.2; stroke-dasharray:1000; stroke-dashoffset:1000; animation:xp-draw 2.2s ease .2s forwards; }
.xp-kw-dial line{ stroke:#5fbf8a; stroke-width:.7; opacity:0; animation:xp-fade .8s ease forwards; }
.xp-kw-dial text{
  font-family:'Cormorant Garamond',serif; font-size:22px; text-anchor:middle; dominant-baseline:middle;
  fill:#e8e1d2; opacity:0; animation:xp-fade 1s ease 1.6s forwards;
}
.xp-kw-dial text.red{ animation:xp-fade 1s ease 1.6s forwards, xp-kw-red 1.4s ease 2.6s forwards; }
@keyframes xp-kw-red{ to{ fill:#e0383f; } }
.xp-photo.xp-kw-push img{ animation:xp-kw-push 13s cubic-bezier(.45,.05,.25,1) .4s both; }
@keyframes xp-kw-push{ from{ transform:scale(1.02); } to{ transform:scale(1.28) translate(1%, 0); } }
.xp-photo.xp-kw-tall img{ animation:xp-kw-tall 12.5s cubic-bezier(.45,.05,.25,1) .3s both; }
@keyframes xp-kw-tall{ from{ transform:scale(1.03); } to{ transform:scale(1.18); } }
.xp-canvas.portrait .xp-kw-tl{ width:700px; }
.xp-canvas.portrait .xp-kw-cases, .xp-canvas.portrait .xp-kw-nums{ gap:90px; }
.xp-canvas.portrait .xpF-split .pane-art .xp-photo.frame.xp-kw-push{ width:780px !important; height:520px !important; }
.xp-canvas.portrait .xpF-split .pane-art .xp-photo.frame.xp-kw-tall{ width:440px !important; height:660px !important; }
.xp-canvas.portrait .xp-kw-dial{ width:300px; height:480px; }
@media (prefers-reduced-motion: reduce){
  .xp-photo.xp-kw-push img, .xp-photo.xp-kw-tall img{ animation:none !important; }
}

/* --------------------------------------------------------------------------
   55. The Reverso That Changed Everything — line work
   Sixty level years that turn upward; a case that grows; three complications
   as three small dial shapes; the editions that followed, on one line.
   -------------------------------------------------------------------------- */
.xp-sx-turn{ display:block; width:900px; height:200px; margin:0 auto 34px; overflow:visible; }
.xp-sx-turn path{ fill:none; stroke-width:1.3; }
.xp-sx-turn .lv{ stroke:var(--brass); stroke-dasharray:640; stroke-dashoffset:640; animation:xp-draw 2.4s linear .4s forwards; }
.xp-sx-turn .up{ stroke:var(--brass-bright); stroke-width:1.8; stroke-dasharray:330; stroke-dashoffset:330; filter:drop-shadow(0 0 6px rgba(240,217,168,.55)); animation:xp-draw 1.8s cubic-bezier(.3,.7,.2,1) 2.9s forwards; }
.xp-sx-turn circle{ fill:#0b0e12; stroke:var(--brass-bright); opacity:0; animation:xp-fade .8s ease 2.7s forwards; }
.xp-sx-turn text{ font-family:'Cormorant Garamond',serif; font-size:24px; fill:#cfc6b4; text-anchor:middle; opacity:0; animation:xp-fade 1s ease .5s forwards; }
.xp-sx-turn text.k{ fill:var(--brass-bright); animation-delay:2.8s; }
.xp-sx-turn text:first-of-type{ text-anchor:start; }
/* the case outline, then the bigger one */
.xp-sx-grow{ position:relative; width:150px; height:230px; margin:0 auto 40px; }
.xp-sx-grow i{ position:absolute; left:50%; bottom:0; border:1.2px solid var(--brass); border-radius:5px; transform:translateX(-50%); opacity:0; }
.xp-sx-grow .a{ width:84px; height:140px; animation:xp-fade 1s ease .4s forwards, xp-sx-dim 1s ease 2.4s forwards; }
.xp-sx-grow .b{ width:100px; height:164px; border-color:var(--brass-bright); box-shadow:0 0 18px rgba(240,217,168,.35); animation:xp-sx-grow 1.6s cubic-bezier(.3,.7,.2,1) 1.6s forwards; }
@keyframes xp-sx-dim{ to{ opacity:.3; } }
@keyframes xp-sx-grow{ from{ opacity:0; width:84px; height:140px; } to{ opacity:1; width:100px; height:164px; } }
.xp-sx-cx{ display:flex; justify-content:center; gap:70px; margin:30px auto 34px; }
.xp-sx-cx .c{ display:flex; flex-direction:column; align-items:center; opacity:0; animation:xp-rise 1.2s cubic-bezier(.2,.7,.25,1) var(--d,1s) forwards; }
.xp-sx-cx svg{ width:150px; height:100px; overflow:visible; }
.xp-sx-cx path, .xp-sx-cx circle, .xp-sx-cx line{ fill:none; stroke:var(--brass-bright); stroke-width:1.4; }
.xp-sx-cx b{ margin-top:12px; font-family:'Jost',sans-serif; font-size:12px; font-weight:400; letter-spacing:.28em; text-transform:uppercase; color:#cfc6b4; }
.xp-sx-line{ position:relative; display:flex; justify-content:space-between; width:980px; margin:44px auto 26px; padding-top:28px; }
.xp-sx-line .ax{ position:absolute; left:0; right:0; top:0; height:1px; background:var(--brass); transform:scaleX(0); transform-origin:left center; animation:xp-routeline 3.2s cubic-bezier(.45,0,.2,1) 2.4s forwards; }
.xp-sx-line .s{ position:relative; width:180px; text-align:center; opacity:0; animation:xp-rise 1.1s cubic-bezier(.2,.7,.25,1) forwards; }
.xp-sx-line .s::before{ content:''; position:absolute; left:50%; top:-34px; width:11px; height:11px; margin-left:-6px; border-radius:50%; border:1px solid var(--brass-bright); background:#0b0e12; }
.xp-sx-line b{ display:block; font-family:'Cormorant Garamond',serif; font-size:28px; font-weight:400; color:var(--brass-bright); }
.xp-sx-line span{ display:block; margin-top:6px; font-family:'Cormorant Garamond',serif; font-size:21px; line-height:1.25; color:var(--ink); }
.xpF-split .pane-art .xp-swivel.xp-sx-sw{ width:470px; height:426px; }
.xp-photo.xp-sx-push img{ animation:xp-sx-push 12.5s cubic-bezier(.45,.05,.25,1) .3s both; }
@keyframes xp-sx-push{ from{ transform:scale(1.02); } to{ transform:scale(1.4) translate(4%, 2%); } }
.xp-canvas.portrait .xp-sx-turn{ width:760px; height:169px; }
.xp-canvas.portrait .xp-sx-line{ width:800px; flex-wrap:wrap; justify-content:center; gap:34px 10px; padding-top:40px; }
.xp-canvas.portrait .xp-sx-line .s{ width:250px; }
.xp-canvas.portrait .xp-sx-line .s::before{ display:none; }
.xp-canvas.portrait .xp-sx-cx{ gap:36px; }
.xp-canvas.portrait .xpF-split .pane-art .xp-swivel.xp-sx-sw{ width:600px; height:544px; }
.xp-canvas.portrait .xpF-split .pane-art .xp-photo.frame.xp-sx-push{ width:640px !important; height:563px !important; }
@media (prefers-reduced-motion: reduce){
  .xp-photo.xp-sx-push img{ animation:none !important; }
}

/* --------------------------------------------------------------------------
   56. A Brown Dial from 1933 — line work
   A row of white and silver dials with one brown among them; the four
   colours that could be ordered on request; three steps of a programme.
   -------------------------------------------------------------------------- */
.xp-bn-steps{ margin:4px 0 12px; }
.xp-bn-step{
  display:inline-block; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:36px; color:var(--brass-bright);
  opacity:0; animation:xp-rise 1.1s cubic-bezier(.2,.7,.25,1) forwards;
}
.xp-bn-steps i{ display:inline-block; width:46px; height:1px; margin:0 16px; vertical-align:middle; background:var(--brass); transform:scaleX(0); transform-origin:left center; animation:xp-routeline .8s ease forwards; }
.xp-bn-row{ display:flex; justify-content:center; gap:18px; margin:0 auto 44px; }
.xp-bn-row i{ display:block; width:46px; height:74px; border-radius:4px; opacity:0; animation:xp-rise 1s cubic-bezier(.2,.7,.25,1) forwards; }
.xp-bn-row .wh{ background:#ece7dc; }
.xp-bn-row .sv{ background:linear-gradient(160deg,#d9dde2,#a9b0b8); }
.xp-bn-row .br{ background:#6a3a26; box-shadow:0 0 0 1px #c08a5d, 0 0 22px rgba(192,138,93,.55); animation:xp-rise 1s cubic-bezier(.2,.7,.25,1) forwards, xp-bn-lift 1.2s ease 2.6s forwards; }
@keyframes xp-bn-lift{ to{ transform:translateY(-14px) scale(1.12); } }
.xp-bn-req{ display:flex; justify-content:center; gap:60px; margin:0 auto 44px; }
.xp-bn-req .s{ display:flex; flex-direction:column; align-items:center; opacity:0; animation:xp-rise 1.1s cubic-bezier(.2,.7,.25,1) forwards; }
.xp-bn-req i{ display:block; width:64px; height:100px; border-radius:5px; border:1px solid rgba(240,217,168,.45); }
.xp-bn-req .bk i{ background:#15161a; } .xp-bn-req .br i{ background:#6a3a26; border-color:#c08a5d; box-shadow:0 0 20px rgba(192,138,93,.5); }
.xp-bn-req .rd i{ background:#8e2027; } .xp-bn-req .bl i{ background:#1f3a72; }
.xp-bn-req b{ margin-top:12px; font-family:'Jost',sans-serif; font-size:12px; font-weight:400; letter-spacing:.28em; text-transform:uppercase; color:#cfc6b4; }
.xp-say em.xp-bn-brn{ color:#c98f62; }
.xp-photo.xp-bn-push img{ animation:xp-bn-push 13s cubic-bezier(.45,.05,.25,1) .4s both; }
@keyframes xp-bn-push{ from{ transform:scale(1.02); } to{ transform:scale(1.34) translate(1%, 3%); } }
/* the book picture is wide, with the watch on its right: show that half */
.xp-photo.xp-bn-book img{ object-position:78% 50%; animation:xp-bn-book 12.5s cubic-bezier(.45,.05,.25,1) .3s both; }
@keyframes xp-bn-book{ from{ transform:scale(1.04); } to{ transform:scale(1.2); } }
.xp-canvas.portrait .xp-bn-row{ gap:12px; }
.xp-canvas.portrait .xp-bn-row i{ width:40px; height:64px; }
.xp-canvas.portrait .xp-bn-req{ gap:40px; }
.xp-canvas.portrait .xpF-split .pane-art .xp-photo.frame.xp-bn-push{ width:780px !important; height:520px !important; }
.xp-canvas.portrait .xpF-split .pane-art .xp-photo.frame.xp-bn-book{ width:500px !important; height:560px !important; }
@media (prefers-reduced-motion: reduce){
  .xp-photo.xp-bn-push img, .xp-photo.xp-bn-book img{ animation:none !important; }
}

/* --------------------------------------------------------------------------
   57. The Tourbillon Made My Own — line work
   A turning cage; a line of blue that drains and a line of salmon that
   fills; thirteen marks for more than a year.
   -------------------------------------------------------------------------- */
.xp-tb-cage{ display:block; width:170px; height:170px; margin:0 auto 34px; overflow:visible; }
.xp-tb-cage circle, .xp-tb-cage line{ fill:none; stroke:var(--brass-bright); stroke-width:1.1; }
.xp-tb-cage .o{ stroke:var(--brass); stroke-dasharray:315; stroke-dashoffset:315; animation:xp-draw 1.8s ease .2s forwards; }
.xp-tb-cage .spin{ transform-origin:60px 60px; opacity:0; animation:xp-fade 1s ease 1s forwards, xp-tb-spin 6s linear 1s infinite; }
@keyframes xp-tb-spin{ to{ transform:rotate(360deg); } }
.xp-say em.xp-tb-blu{ color:#7d9be0; }
.xp-say em.xp-tb-sal{ color:#eea58c; }
.xp-tb-sw{ position:relative; width:440px; height:3px; margin:0 auto 46px; }
.xp-tb-sw i{ position:absolute; inset:0; }
.xp-tb-sw .bl{ background:#3d5fb8; box-shadow:0 0 16px rgba(61,95,184,.6); transform-origin:right center; animation:xp-swdrain 2.6s cubic-bezier(.5,0,.3,1) 3.0s forwards; }
.xp-tb-sw .sa{ background:#eea58c; box-shadow:0 0 16px rgba(238,165,140,.6); transform:scaleX(0); transform-origin:left center; animation:xp-routeline 2.6s cubic-bezier(.3,.7,.2,1) 5.0s forwards; }
.xp-tb-wait{ display:flex; justify-content:center; align-items:flex-end; gap:30px; height:84px; margin:0 auto 20px; }
.xp-tb-wait i{ display:block; width:1px; height:56px; background:var(--brass); transform-origin:bottom center; opacity:0; animation:xp-bdmon .6s ease forwards; }
.xp-tb-wait i.k{ width:2px; height:78px; background:#eea58c; box-shadow:0 0 14px rgba(238,165,140,.6); }
.xp-photo.xp-tb-rev img{ animation:xp-tb-rev 11.5s cubic-bezier(.45,.05,.25,1) .3s both; }
@keyframes xp-tb-rev{ from{ transform:scale(1.02); } to{ transform:scale(1.4) translate(4%, -3%); } }
.xp-photo.xp-tb-sal img{ animation:xp-tb-salp 13.5s cubic-bezier(.45,.05,.25,1) .3s both; }
@keyframes xp-tb-salp{ from{ transform:scale(1.02); } to{ transform:scale(1.36) translate(-4%, -6%); } }
.xp-canvas.portrait .xp-tb-wait{ gap:20px; }
.xp-canvas.portrait .xpF-split .pane-art .xp-photo.frame.xp-tb-rev,
.xp-canvas.portrait .xpF-split .pane-art .xp-photo.frame.xp-tb-sal{ width:780px !important; height:520px !important; }
@media (prefers-reduced-motion: reduce){
  .xp-photo.xp-tb-rev img, .xp-photo.xp-tb-sal img, .xp-tb-cage .spin{ animation:none !important; opacity:1; }
}

/* --------------------------------------------------------------------------
   58. A Reverso of Hope — line work
   The cross drawn, the four letters lit in reading order; a line that runs
   from the middle outward, to the past and to the future.
   -------------------------------------------------------------------------- */
.xp-spes-words{ margin:4px 0 14px; }
.xp-spes-word{
  display:inline-block; margin:0 14px; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:38px;
  color:var(--brass-bright); opacity:0; animation:xp-rise 1.2s cubic-bezier(.2,.7,.25,1) forwards;
}
.xp-spes-x{ display:block; width:380px; height:380px; overflow:visible; }
.xp-spes-x .cr{
  fill:rgba(184,52,62,.12); stroke:#d0525b; stroke-width:1.4; stroke-linejoin:round;
  stroke-dasharray:640; stroke-dashoffset:640; animation:xp-draw 2.6s cubic-bezier(.45,0,.2,1) .4s forwards;
}
.xp-spes-x text{
  font-family:'Cinzel',serif; font-size:34px; fill:var(--brass-bright); text-anchor:middle; dominant-baseline:middle;
  opacity:0; animation:xp-fade 1s ease forwards;
}
/* hope: a point in the middle, a line running out to either side */
.xp-spes-span{ position:relative; width:860px; height:110px; margin:40px auto 30px; }
.xp-spes-span i{ position:absolute; top:40px; width:50%; height:1px; background:var(--brass); transform:scaleX(0); animation:xp-routeline 3s cubic-bezier(.45,0,.2,1) 2.6s forwards; }
.xp-spes-span .l{ right:50%; transform-origin:right center; }
.xp-spes-span .r{ left:50%; transform-origin:left center; background:var(--brass-bright); }
.xp-spes-span b{ position:absolute; left:50%; top:34px; width:13px; height:13px; margin-left:-7px; border-radius:50%; background:var(--brass-bright); box-shadow:0 0 16px rgba(240,217,168,.7); opacity:0; animation:xp-fade 1s ease 1.8s forwards; }
.xp-spes-span span{ position:absolute; top:66px; font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:#cfc6b4; opacity:0; animation:xp-fade 1.2s ease 5.2s forwards; }
.xp-spes-span .a{ left:0; } .xp-spes-span .z{ right:0; }
.xp-photo.xp-spes-arms img{ animation:xp-spes-arms 12.5s cubic-bezier(.45,.05,.25,1) .3s both; }
@keyframes xp-spes-arms{ from{ transform:scale(1.02); } to{ transform:scale(1.42) translate(4%, 8%); } }
.xp-canvas.portrait .xp-spes-span{ width:720px; }
.xp-canvas.portrait .xp-spes-x{ width:340px; height:340px; }
.xp-canvas.portrait .xpF-split .pane-art .xp-photo.frame.xp-spes-arms{ width:600px !important; height:600px !important; }
@media (prefers-reduced-motion: reduce){
  .xp-photo.xp-spes-arms img{ animation:none !important; }
}

/* --------------------------------------------------------------------------
   59. The Reverso Worth Traveling For — line work
   One line of red; a journey stopped at a border, then carried across one.
   -------------------------------------------------------------------------- */
.xp-say em.xp-rouge-red{ color:#e0454c; }
.xp-rouge-line{ width:460px; height:3px; margin:0 auto 44px; }
.xp-rouge-line i{ display:block; height:100%; background:#c8262f; box-shadow:0 0 18px rgba(200,38,47,.65); transform:scaleX(0); animation:xp-routeline 2.4s cubic-bezier(.3,.7,.2,1) .4s forwards; }
.xp-route.xp-rouge-route .dot{ background:#e0454c; box-shadow:0 0 14px rgba(224,69,76,.75); }
/* the edge of home: a journey that stops at a dashed border */
.xp-rouge-stop{ position:relative; width:700px; height:120px; margin:20px auto 34px; }
.xp-rouge-stop .ln{ position:absolute; left:0; width:56%; top:50px; height:1px; background:var(--brass); transform:scaleX(0); transform-origin:left center; animation:xp-routeline 2.2s cubic-bezier(.45,0,.2,1) .6s forwards; }
.xp-rouge-stop .dot{ position:absolute; left:-4px; top:46px; width:9px; height:9px; border-radius:50%; background:#e0454c; box-shadow:0 0 14px rgba(224,69,76,.75); opacity:0; animation:xp-rouge-go 2.2s cubic-bezier(.45,0,.2,1) .6s forwards; }
@keyframes xp-rouge-go{ 0%{ left:-4px; opacity:1; } 100%{ left:calc(56% - 6px); opacity:1; } }
.xp-rouge-stop .bd{ position:absolute; left:60%; top:0; width:1px; height:104px; background:repeating-linear-gradient(to bottom, #cfc6b4 0 8px, transparent 8px 15px); opacity:0; animation:xp-fade 1s ease 2.4s forwards; }
.xp-rouge-stop span{ position:absolute; left:0; top:72px; font-family:'Cinzel',serif; font-size:13px; letter-spacing:.3em; text-transform:uppercase; color:#f0d9a8; opacity:0; animation:xp-fade 1s ease .4s forwards; }
.xpF-split .pane-art .xp-swivel.xp-rouge-sw{ width:380px; height:507px; }
.xp-photo.xp-rouge-push img{ animation:xp-rouge-push 12.5s cubic-bezier(.45,.05,.25,1) .3s both; }
@keyframes xp-rouge-push{ from{ transform:scale(1.02); } to{ transform:scale(1.32) translate(0, 3%); } }
.xp-canvas.portrait .xp-rouge-stop{ width:640px; }
.xp-canvas.portrait .xpF-split .pane-art .xp-swivel.xp-rouge-sw{ width:440px; height:587px; }
.xp-canvas.portrait .xpF-split .pane-art .xp-photo.frame.xp-rouge-push{ width:460px !important; height:613px !important; }
@media (prefers-reduced-motion: reduce){
  .xp-photo.xp-rouge-push img{ animation:none !important; }
}

/* --------------------------------------------------------------------------
   60. The Reverso That Waited Twenty Years — line work
   A week in eight ticks with the last one blue; the outline of the watch that
   was sold, drawn and then emptied; a heartbeat in the blue of the reverse.
   -------------------------------------------------------------------------- */
.xp-week.xp-twenty-week i:last-of-type{ background:#6f8fe8; box-shadow:0 0 14px rgba(111,143,232,.7); }
.xp-twenty-gone{ display:block; width:150px; height:225px; margin:0 auto 34px; overflow:visible; }
.xp-twenty-gone rect{
  fill:none; stroke:#6f8fe8; stroke-width:1.4; stroke-dasharray:760; stroke-dashoffset:760;
  animation:xp-draw 2.2s cubic-bezier(.45,0,.2,1) .3s forwards, xp-twenty-empty 2.4s ease 3.2s forwards;
}
.xp-twenty-gone rect.in{ stroke:#cfc6b4; stroke-width:1; }
@keyframes xp-twenty-empty{ to{ opacity:.16; } }
.xp-route.xp-twenty-route .dot{ background:#6f8fe8; box-shadow:0 0 14px rgba(111,143,232,.75); }
.xp-twenty-beat{ display:block; width:100%; max-width:460px; height:62px; margin:18px 0 20px; overflow:visible; }
.xp-twenty-beat path{
  fill:none; stroke:#6f8fe8; stroke-width:2; stroke-linejoin:round; stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(111,143,232,.7));
  stroke-dasharray:720; stroke-dashoffset:720; animation:xp-draw 2.6s cubic-bezier(.45,0,.2,1) 4.2s forwards;
}
.xpF-split .pane-txt[style*="right"] .xp-twenty-beat{ margin-left:auto; }
.xp-twenty-line{ width:460px; height:3px; margin:0 auto 44px; }
.xp-twenty-line i{ display:block; height:100%; background:#6f8fe8; box-shadow:0 0 18px rgba(111,143,232,.65); transform:scaleX(0); animation:xp-routeline 2.4s cubic-bezier(.3,.7,.2,1) .4s forwards; }
.xpF-split .pane-art .xp-swivel.xp-twenty-sw{ width:380px; height:507px; }
.xp-photo.xp-twenty-push img{ animation:xp-twenty-push 13s cubic-bezier(.45,.05,.25,1) .3s both; }
@keyframes xp-twenty-push{ from{ transform:scale(1.02); } to{ transform:scale(1.3) translate(0, 2%); } }
.xp-canvas.portrait .xp-twenty-beat{ margin-left:auto; margin-right:auto; }
.xp-canvas.portrait .xpF-split .pane-art .xp-swivel.xp-twenty-sw{ width:440px; height:587px; }
.xp-canvas.portrait .xpF-split .pane-art .xp-photo.frame.xp-twenty-push{ width:460px !important; height:613px !important; }
@media (prefers-reduced-motion: reduce){
  .xp-photo.xp-twenty-push img{ animation:none !important; }
  .xp-twenty-gone rect, .xp-twenty-beat path{ animation:none !important; stroke-dashoffset:0; }
}
/* 60, continued: the offer, "not yet", and the weeks before the shop moved */
.xp-twenty-dt{ display:block; width:200px; height:300px; margin:0 auto 30px; overflow:visible; }
.xp-twenty-dt .d{
  fill:none; stroke:var(--brass-bright); stroke-width:1.2; stroke-linejoin:round;
  stroke-dasharray:640; stroke-dashoffset:640; animation:xp-draw 2.4s cubic-bezier(.45,0,.2,1) forwards;
}
.xp-twenty-dt .d.g{ stroke:var(--brass); stroke-width:.8; }
.xp-twenty-dt circle{ fill:none; stroke:#cfc6b4; stroke-width:.9; opacity:0; animation:xp-fade .7s ease forwards; }
.xp-twenty-dt .hands line{ stroke:var(--brass-bright); stroke-width:1.6; stroke-linecap:round; opacity:0; animation:xp-fade 1s ease 2.2s forwards; }
.xp-twenty-dt .hands .mn{ transform-origin:100px 150px; animation:xp-fade 1s ease 2.2s forwards, xp-twenty-turn 9s linear 2.2s forwards; }
.xp-twenty-dt .hands .hr{ transform-origin:100px 150px; animation:xp-fade 1s ease 2.2s forwards, xp-twenty-turn 108s linear 2.2s forwards; }
@keyframes xp-twenty-turn{ to{ transform:rotate(360deg); } }
.xp-twenty-bars{ width:560px; margin:0 auto 40px; }
.xp-twenty-bars .r{ display:flex; align-items:center; gap:24px; margin:22px 0; }
.xp-twenty-bars span{
  width:130px; text-align:right; font-family:'Cinzel',serif; font-size:13px; letter-spacing:.24em;
  text-transform:uppercase; color:#f0d9a8; opacity:0; animation:xp-fade 1s ease .3s forwards;
}
.xp-twenty-bars b{ position:relative; flex:1; height:1px; background:repeating-linear-gradient(to right, rgba(207,198,180,.4) 0 6px, transparent 6px 12px); }
.xp-twenty-bars i{ position:absolute; left:0; top:-1px; height:3px; transform:scaleX(0); transform-origin:left center; }
.xp-twenty-bars i.w{ width:100%; background:var(--brass-bright); box-shadow:0 0 12px rgba(240,217,168,.5); animation:xp-routeline 2.2s cubic-bezier(.45,0,.2,1) .6s forwards; }
.xp-twenty-bars i.y{ width:58%; background:#6f8fe8; box-shadow:0 0 12px rgba(111,143,232,.6); animation:xp-routeline 2.2s cubic-bezier(.45,0,.2,1) 2.2s forwards; }
.xp-twenty-bars em{
  position:absolute; left:58%; top:-46px; margin-left:-8px; font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:30px; color:var(--brass-bright); opacity:0; animation:xp-fade 1.2s ease 5.4s forwards;
}
.xp-twenty-weeks{ position:relative; display:flex; justify-content:center; gap:22px; margin:44px auto 44px; }
.xp-twenty-weeks .tag{
  position:absolute; left:50%; top:-42px; transform:translateX(-50%); margin:0; font-family:'Cinzel',serif; font-size:13px;
  letter-spacing:.32em; text-transform:uppercase; color:#e3b4a0; opacity:0; animation:xp-fade 1.2s ease 2.4s forwards;
}
.xp-twenty-weeks .wk{
  position:relative; width:118px; height:76px; border:1px solid var(--brass); border-radius:3px;
  opacity:0; animation:xp-fade .9s ease forwards;
}
.xp-twenty-weeks .wk.now{ border-color:var(--brass-bright); }
.xp-twenty-weeks .wk.gone{ border-style:dashed; border-color:#8d8578; }
.xp-twenty-weeks .wk span{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); text-align:center;
  font-family:'Jost',sans-serif; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#cfc6b4;
}
.xp-twenty-weeks .wk.gone span{ color:#8d8578; }
.xp-twenty-weeks .ring{
  position:absolute; inset:-12px; border:1.5px solid #6f8fe8; border-radius:8px; box-shadow:0 0 18px rgba(111,143,232,.55);
  opacity:0; animation:xp-twenty-ring 2.6s ease-in-out 7.4s infinite;
}
@keyframes xp-twenty-ring{ 0%{ opacity:0; transform:scale(.96); } 40%{ opacity:1; transform:scale(1.04); } 100%{ opacity:0; transform:scale(1.1); } }
.xp-canvas.portrait .xp-twenty-weeks{ gap:26px; }
.xp-canvas.portrait .xp-twenty-weeks .wk span{ font-size:14px; letter-spacing:.14em; }
.xp-canvas.portrait .xp-twenty-weeks .wk{ width:122px; height:84px; }
.xp-canvas.portrait .xp-twenty-dt{ width:220px; height:330px; }
@media (prefers-reduced-motion: reduce){
  .xp-twenty-dt .d{ animation:none !important; stroke-dashoffset:0; }
  .xp-twenty-dt .hands line{ animation:xp-fade 1s ease 2.2s forwards !important; }
  .xp-twenty-weeks .ring{ animation:xp-fade 1s ease 7.4s forwards !important; }
}

/* --------------------------------------------------------------------------
   61. A Reverso for Spring — line work
   A sunburst drawn ray by ray and washed with enamel; Mucha's Seasons as
   four tall panels (Winter only an outline); a hundred hours as a hundred
   dots; guilloché and enamel meeting in gold; eight cases; blossom pink.
   -------------------------------------------------------------------------- */
.xp-say em.xp-spring-pink, .xp-spring-panels.choose .pick span{ color:#eab0bf; }
.xp-spring-sun{ display:block; width:280px; height:364px; margin:0 auto 34px; overflow:visible; }
.xp-spring-sun .r{ stroke:var(--brass); stroke-width:.7; stroke-dasharray:170; stroke-dashoffset:170; animation:xp-draw 1.3s ease-out forwards; }
.xp-spring-sun .f{ fill:none; stroke:var(--brass-bright); stroke-width:1.4; stroke-dasharray:900; stroke-dashoffset:900; animation:xp-draw 1.8s cubic-bezier(.45,0,.2,1) .1s forwards; }
.xp-spring-sun .w{ fill:#6e7fc0; opacity:0; animation:xp-spring-wash 2.6s ease 3.2s forwards; }
@keyframes xp-spring-wash{ to{ opacity:.34; } }
.xp-spring-yr{ margin:0 0 22px; font-family:'Cormorant Garamond',serif; font-size:40px; letter-spacing:.08em; color:#f0d9a8; opacity:0; animation:xp-fade 1.2s ease .2s forwards; }
.xp-spring-panels{ display:flex; justify-content:center; gap:26px; margin:0 auto 62px; }
.xp-spring-panels .pn{
  position:relative; width:110px; height:236px; border:1px solid var(--brass-bright); border-radius:46px 46px 4px 4px;
  opacity:0; animation:xp-rise 1.2s cubic-bezier(.2,.7,.25,1) forwards;
}
.xp-spring-panels .pn i{
  position:absolute; left:14px; right:14px; top:14px; height:64px; border:1px solid var(--brass); border-radius:50%;
  transform:scale(0); animation:xp-spring-pop .9s cubic-bezier(.2,.8,.2,1) 2.4s forwards;
}
@keyframes xp-spring-pop{ to{ transform:scale(1); } }
.xp-spring-panels .pn span{
  position:absolute; left:50%; bottom:-30px; transform:translateX(-50%); font-family:'Cinzel',serif; font-size:13px;
  letter-spacing:.22em; text-transform:uppercase; color:#f0d9a8; white-space:nowrap;
}
.xp-spring-panels .pn b{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%); font-family:'Cormorant Garamond',serif; font-weight:400;
  font-size:24px; color:var(--brass-bright); opacity:0; animation:xp-fade 1s ease 7.8s forwards;
}
.xp-spring-panels .pn.winter{ border-style:dashed; border-color:#6f685d; }
.xp-spring-panels .pn.winter i{ border-style:dashed; border-color:#6f685d; }
.xp-spring-panels .pn.winter span{ color:#8d8578; }
/* choosing Spring: the other two fall back, Spring warms to blossom pink */
.xp-spring-panels.choose .pn:not(.pick){ animation:xp-rise 1.2s cubic-bezier(.2,.7,.25,1) forwards, xp-spring-dim 1.4s ease 3.0s forwards; }
@keyframes xp-spring-dim{ from{ opacity:1; } to{ opacity:.3; } }
.xp-spring-panels.choose .pick{ animation:xp-rise 1.2s cubic-bezier(.2,.7,.25,1) forwards, xp-spring-glow 1.6s ease 3.0s forwards; }
@keyframes xp-spring-glow{ to{ border-color:#eab0bf; box-shadow:0 0 26px rgba(234,176,191,.45), inset 0 0 22px rgba(234,176,191,.18); transform:scale(1.06); } }
.xp-spring-panels.choose .pick i{ animation:xp-spring-pop .9s cubic-bezier(.2,.8,.2,1) 1.4s forwards, xp-spring-ring 1.6s ease 3.0s forwards; }
@keyframes xp-spring-ring{ to{ border-color:#eab0bf; background:rgba(234,176,191,.14); } }
.xpF-split .pane-art .xp-swivel.xp-spring-sw{ width:380px; height:507px; }
.xp-spring-hours{ margin:0 auto 34px; }
.xp-spring-hours .grid{ display:grid; grid-template-columns:repeat(10, 10px); gap:9px; width:171px; margin:0 auto; }
.xp-spring-hours .grid i{ width:10px; height:10px; border-radius:50%; opacity:0; transform:scale(.3); animation:xp-spring-dot .5s cubic-bezier(.2,.8,.2,1) forwards; }
.xp-spring-hours .grid i.e{ background:#eab0bf; box-shadow:0 0 8px rgba(234,176,191,.5); }
.xp-spring-hours .grid i.g{ background:var(--brass-bright); box-shadow:0 0 8px rgba(240,217,168,.45); }
@keyframes xp-spring-dot{ to{ opacity:1; transform:scale(1); } }
.xp-spring-hours .key{ display:flex; justify-content:center; gap:30px; margin:22px 0 0; opacity:0; animation:xp-fade 1s ease 3.8s forwards; }
.xp-spring-hours .key span{ font-family:'Cinzel',serif; font-size:13px; letter-spacing:.24em; text-transform:uppercase; color:#cfc6b4; }
.xp-spring-hours .key span::before{ content:''; display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:10px; vertical-align:1px; }
.xp-spring-hours .key .e::before{ background:#eab0bf; }
.xp-spring-hours .key .g::before{ background:var(--brass-bright); }
/* two lines meeting in the middle */
.xp-spring-merge{ position:relative; width:700px; height:120px; margin:20px auto 30px; }
.xp-spring-merge i{ position:absolute; top:44px; width:50%; height:1px; transform:scaleX(0); animation:xp-routeline 2.2s cubic-bezier(.45,0,.2,1) .6s forwards; }
.xp-spring-merge i.l{ left:0; transform-origin:left center; background:linear-gradient(to right, rgba(207,198,180,.3), var(--brass-bright)); }
.xp-spring-merge i.r{ right:0; transform-origin:right center; background:linear-gradient(to left, rgba(234,176,191,.35), #eab0bf); }
.xp-spring-merge b{
  position:absolute; left:50%; top:37px; width:15px; height:15px; margin-left:-8px; border-radius:50%;
  background:#e9c66f; box-shadow:0 0 22px rgba(233,198,111,.85); opacity:0; transform:scale(.2);
  animation:xp-spring-dot .8s cubic-bezier(.2,.8,.2,1) 2.8s forwards;
}
.xp-spring-merge span{
  position:absolute; top:62px; font-family:'Cinzel',serif; font-size:13px; letter-spacing:.26em; text-transform:uppercase;
  color:#f0d9a8; opacity:0; animation:xp-fade 1s ease .4s forwards;
}
.xp-spring-merge span.l{ left:0; } .xp-spring-merge span.r{ right:0; color:#eab0bf; }
.xp-spring-merge span.c{ left:50%; transform:translateX(-50%); top:72px; color:#e9c66f; animation-delay:3.2s; white-space:nowrap; }
/* blossom drifting up behind the words */
.xp-spring-petals{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.xp-spring-petals i{
  position:absolute; bottom:-20px; width:18px; height:18px; border-radius:70% 0 70% 0; background:#eab0bf; opacity:0;
  animation:xp-spring-drift 7s ease-in-out infinite;
}
@keyframes xp-spring-drift{
  0%{ transform:translate(0, 0) rotate(0); opacity:0; } 15%{ opacity:.7; }
  100%{ transform:translate(60px, -760px) rotate(220deg); opacity:0; }
}
.xp-spring-words{ margin:6px 0 10px; }
.xp-spring-word{
  display:inline-block; margin:0 14px; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:44px;
  color:var(--brass-bright); opacity:0; animation:xp-rise 1.2s cubic-bezier(.2,.7,.25,1) forwards;
}
.xp-spring-words.lg .xp-spring-word{ font-size:54px; color:#eab0bf; }
.xp-spring-word.sm{ font-size:30px; color:#ddd6c7; margin:0 10px; }
.xp-photo.xp-spring-push img{ transform-origin:47% 44%; animation:xp-spring-push 11.5s cubic-bezier(.45,.05,.25,1) .3s both; }
@keyframes xp-spring-push{ from{ transform:scale(1.02); } to{ transform:scale(2.05); } }
.xp-spring-eight{ display:flex; justify-content:center; gap:16px; margin:0 auto 40px; }
.xp-spring-eight i{
  position:relative; width:52px; height:82px; border:1px solid var(--brass-bright); border-radius:4px;
  border-top:4px double var(--brass-bright); border-bottom:4px double var(--brass-bright);
  opacity:0; animation:xp-rise 1s cubic-bezier(.2,.7,.25,1) forwards;
}
/* a strap stub above and below, so each reads as a watch */
.xp-spring-eight i::before, .xp-spring-eight i::after{ content:''; position:absolute; left:12px; right:12px; height:22px; border:1px solid var(--brass); }
.xp-spring-eight i::before{ bottom:calc(100% + 4px); border-bottom:0; }
.xp-spring-eight i::after{ top:calc(100% + 4px); border-top:0; }
.xp-spring-eight{ margin-top:30px !important; margin-bottom:64px !important; }
.xp-canvas.portrait .xp-spring-sun{ width:260px; height:338px; }
.xp-canvas.portrait .xp-spring-panels{ gap:18px; }
.xp-canvas.portrait .xp-spring-merge{ width:640px; }
.xp-canvas.portrait .xp-spring-hours .grid{ grid-template-columns:repeat(10, 13px); gap:11px; width:229px; }
.xp-canvas.portrait .xp-spring-hours .grid i{ width:13px; height:13px; }
.xp-canvas.portrait .xpF-split .pane-art .xp-swivel.xp-spring-sw{ width:440px; height:587px; }
.xp-canvas.portrait .xpF-split .pane-art .xp-photo.frame.xp-spring-push{ width:460px !important; height:613px !important; }
@media (prefers-reduced-motion: reduce){
  .xp-photo.xp-spring-push img, .xp-spring-petals i{ animation:none !important; }
  .xp-spring-sun .r, .xp-spring-sun .f{ animation:none !important; stroke-dashoffset:0; }
}

/* --------------------------------------------------------------------------
   62. Love at First Sight — line work
   A cage turning in a drawn case; three rings for three months, the last not
   quite closed; hand guilloché as a field of pyramids; a row of watches that
   come and go around the one that stays.
   -------------------------------------------------------------------------- */
.xp-lfs-watch{ display:block; width:190px; height:285px; margin:0 auto 40px; overflow:visible; }
.xp-lfs-watch .o{ fill:none; stroke:var(--brass-bright); stroke-width:1.5; stroke-dasharray:920; stroke-dashoffset:920; animation:xp-draw 2s cubic-bezier(.45,0,.2,1) .2s forwards; }
.xp-lfs-watch .g{ stroke:var(--brass); stroke-width:1; stroke-dasharray:180; stroke-dashoffset:180; animation:xp-draw 1s ease 1.4s forwards; }
.xp-lfs-watch g > .cage{ opacity:0; animation:xp-fade .9s ease 1.6s forwards, xp-lfs-spin 6s linear infinite; }
.xp-lfs-watch .cage circle, .xp-lfs-watch .cage line, .xp-lfs-span .cage circle, .xp-lfs-span .cage line{ fill:none; stroke:var(--brass-bright); stroke-width:1.4; }
.xp-lfs-span .cage, .xp-lfs-watch .cage{ transform-box:view-box; transform-origin:0 0; }
.xp-lfs-span svg .cage{ animation:xp-lfs-spin 6s linear infinite; }
@keyframes xp-lfs-spin{ to{ transform:rotate(360deg); } }
.xp-lfs-span{ position:relative; width:760px; height:170px; margin:0 auto 34px; }
.xp-lfs-span .ln{ position:absolute; left:60px; right:60px; top:60px; height:1px; background:var(--brass); transform:scaleX(0); transform-origin:left; animation:xp-lfs-grow 2.4s cubic-bezier(.45,0,.2,1) .7s forwards; }
@keyframes xp-lfs-grow{ to{ transform:scaleX(1); } }
.xp-lfs-span svg{ position:absolute; top:10px; width:100px; height:100px; overflow:visible; opacity:0; animation:xp-fade 1s ease forwards; }
.xp-lfs-span svg.a{ left:10px; animation-delay:.2s; }
.xp-lfs-span svg.z{ right:10px; animation-delay:2.8s; }
.xp-lfs-span b{ position:absolute; top:122px; width:120px; text-align:center; font:400 22px 'Jost',sans-serif; letter-spacing:.12em; color:#ddd6c7; opacity:0; animation:xp-fade 1s ease forwards; }
.xp-lfs-span b.a{ left:0; animation-delay:.5s; }
.xp-lfs-span b.z{ right:0; animation-delay:3s; color:var(--brass-bright); }
.xp-lfs-months{ display:flex; justify-content:center; gap:34px; margin:0 auto 42px !important; }
.xp-lfs-months svg{ width:130px; height:130px; transform:rotate(-90deg); }
.xp-lfs-months circle{ fill:none; stroke-width:3; }
.xp-lfs-months .t{ stroke:rgba(201,163,94,.2); }
.xp-lfs-months .p{ stroke:var(--brass-bright); stroke-dasharray:314.2; stroke-dashoffset:314.2; }
.xp-lfs-months .m1 .p{ animation:xp-draw 1.3s linear 1.2s forwards; }
.xp-lfs-months .m2 .p{ animation:xp-draw 1.3s linear 2.5s forwards; }
.xp-lfs-months .m3 .p{ animation:xp-lfs-almost 1.1s linear 3.8s forwards; }
@keyframes xp-lfs-almost{ to{ stroke-dashoffset:34; } }
.xp-photo.xp-lfs-push img{ transform-origin:46% 45%; animation:xp-lfs-push 11s cubic-bezier(.45,.05,.2,1) both; }
@keyframes xp-lfs-push{ from{ transform:scale(1.02); } to{ transform:scale(2.3); } }
.xp-swivel.xp-lfs-sw{ width:440px; height:526px; }
.xp-lfs-clous{ display:grid; grid-template-columns:repeat(12, 34px); gap:5px; justify-content:center; margin:0 auto 40px !important; }
.xp-lfs-clous i{ width:34px; height:34px; opacity:0; animation:xp-rise .8s ease forwards; background:conic-gradient(from 45deg, #d9dfe6, #7d8691, #3f4750, #a7afb9, #d9dfe6); }
.xp-lfs-words{ margin:0; }
.xp-lfs-word{ display:inline-block; margin:0 13px; font:400 25px 'Jost',sans-serif; color:#ddd6c7; opacity:0; animation:xp-rise 1s cubic-bezier(.2,.7,.25,1) forwards; }
.xp-lfs-bars{ display:flex; justify-content:center; align-items:flex-end; gap:60px; height:250px; margin:0 auto 40px !important; }
.xp-lfs-bars i{ width:96px; height:0; animation:xp-lfs-up 2.4s cubic-bezier(.3,.8,.3,1) .5s forwards; }
.xp-lfs-bars .g{ background:#6d727a; }
.xp-lfs-bars .w{ background:#ece9e0; }
@keyframes xp-lfs-up{ to{ height:240px; } }
.xp-lfs-peak{ display:block; width:680px; height:250px; margin:0 auto 44px; overflow:visible; }
.xp-lfs-peak .p{ fill:none; stroke:var(--brass); stroke-width:1.6; stroke-dasharray:900; stroke-dashoffset:900; animation:xp-draw 3s cubic-bezier(.45,0,.2,1) .3s forwards; }
.xp-lfs-peak .d{ fill:var(--brass-bright); opacity:0; animation:xp-fade .8s ease 2.2s forwards; }
.xp-lfs-row{ display:flex; justify-content:center; gap:26px; margin:0 auto 46px !important; }
.xp-lfs-row i{ width:58px; height:92px; border:1px solid var(--brass); border-radius:4px; opacity:0; animation:xp-rise .9s ease forwards, xp-lfs-go 1.2s ease forwards; }
@keyframes xp-lfs-go{ to{ opacity:.1; } }
.xp-lfs-row i.stay{ border:1px solid var(--brass-bright); background:rgba(201,163,94,.16); box-shadow:0 0 24px rgba(201,163,94,.45); animation:xp-fade 1s ease .6s forwards; }
.xp-canvas.portrait .xp-lfs-span{ width:620px; }
.xp-canvas.portrait .xp-lfs-clous{ grid-template-columns:repeat(12, 28px); }
.xp-canvas.portrait .xp-lfs-clous i{ width:28px; height:28px; }
.xp-canvas.portrait .xp-lfs-peak{ width:620px; height:228px; }
.xp-canvas.portrait .xp-lfs-word{ display:block; margin:8px 0; }
.xp-canvas.portrait .xp-lfs-row{ gap:16px; }
.xp-canvas.portrait .xp-lfs-row i{ width:54px; height:86px; }
.xp-canvas.portrait .xpF-split .pane-art .xp-swivel.xp-lfs-sw{ width:520px; height:622px; }
.xp-canvas.portrait .xpF-split .pane-art .xp-photo.frame.xp-lfs-push{ width:520px !important; height:622px !important; }

/* --------------------------------------------------------------------------
   63. A Reverso from Another India — line work
   One line from the 1930s to 2026; a two-tone case with its small seconds
   running; a wandering line; a blue border round an engraving that fades.
   -------------------------------------------------------------------------- */
.xp-photo.xp-india-push img{ transform-origin:52% 45%; animation:xp-india-push 10.5s cubic-bezier(.45,.05,.2,1) both; }
@keyframes xp-india-push{ from{ transform:scale(1.02); } to{ transform:scale(1.85); } }
.xp-photo.xp-india-trace img{ transform-origin:52% 49%; animation:xp-india-trace 9.5s cubic-bezier(.45,.05,.2,1) both; }
@keyframes xp-india-trace{ from{ transform:scale(1.02); } to{ transform:scale(1.7); } }
.xp-india-line{ position:relative; width:820px; height:120px; margin:0 auto 40px !important; }
.xp-india-line .ln{ position:absolute; left:50px; right:50px; top:30px; height:1px; background:var(--brass); transform:scaleX(0); transform-origin:left; animation:xp-lfs-grow 3s cubic-bezier(.45,0,.2,1) .3s forwards; }
.xp-india-line .n{ position:absolute; top:22px; width:16px; height:16px; margin-left:-8px; border-radius:50%; background:var(--brass-bright); opacity:0; animation:xp-fade .7s ease forwards; }
.xp-india-line b{ position:absolute; top:58px; width:120px; margin-left:-60px; text-align:center; font:400 24px 'Jost',sans-serif; letter-spacing:.1em; color:#ddd6c7; opacity:0; animation:xp-fade .9s ease forwards; }
.xp-india-line .a{ left:50px; animation-delay:.3s; }
.xp-india-line .m{ left:210px; animation-delay:1.1s; }
.xp-india-line b.m{ color:var(--brass-bright); }
.xp-india-line .z{ left:770px; animation-delay:3s; }
.xp-india-case{ display:block; width:200px; height:273px; margin:0 auto 40px; overflow:visible; }
.xp-india-case rect{ fill:none; stroke-dasharray:1000; stroke-dashoffset:1000; animation:xp-draw 2s cubic-bezier(.45,0,.2,1) forwards; }
.xp-india-case .st{ stroke:#b9c0c8; stroke-width:1.5; }
.xp-india-case .au{ stroke:#e9c66f; stroke-width:2; animation-delay:.7s; }
.xp-india-case .au2{ stroke:#e9c66f; stroke-width:1; animation-delay:1.1s; }
.xp-india-case .se{ fill:none; stroke:var(--brass); stroke-width:1; opacity:0; animation:xp-fade .8s ease 1.8s forwards; }
.xp-india-case .ha{ stroke:var(--brass-bright); stroke-width:1.5; transform-box:view-box; transform-origin:0 0; animation:xp-lfs-spin 60s steps(60) infinite; }
.xp-india-trail{ display:block; width:760px; height:238px; margin:0 auto 44px; overflow:visible; }
.xp-india-trail .p{ fill:none; stroke:var(--brass); stroke-width:1.5; stroke-dasharray:1100; stroke-dashoffset:1100; animation:xp-draw 3.6s cubic-bezier(.45,0,.2,1) .2s forwards; }
.xp-india-trail .d{ fill:var(--brass-bright); opacity:0; animation:xp-fade .6s ease 3.6s forwards; }
.xp-india-trail .o{ fill:none; stroke:var(--brass-bright); stroke-width:1; opacity:0; animation:xp-fade .8s ease 3.9s forwards; }
.xp-swivel.xp-india-sw{ width:400px; height:640px; }
.xp-india-back{ display:block; width:250px; height:325px; margin:0 auto 40px; overflow:visible; }
.xp-india-back .b{ fill:none; stroke:#5e82cf; stroke-width:6; stroke-dasharray:720; stroke-dashoffset:720; animation:xp-draw 2s cubic-bezier(.45,0,.2,1) .3s forwards; }
.xp-india-back .s{ fill:none; stroke:#e9c66f; stroke-width:1.5; opacity:0; animation:xp-fade .5s ease forwards, xp-india-fade 2s ease forwards; }
@keyframes xp-india-fade{ to{ opacity:.14; } }
.xp-india-q{ font-style:italic; }
.xp-col > .xp-india-q{ margin-bottom:12px; }
.xp-india-years{ display:grid; grid-template-columns:repeat(15, 18px); gap:13px; justify-content:center; margin:0 auto 42px !important; }
.xp-india-years i{ width:18px; height:18px; border-radius:50%; background:var(--brass-bright); opacity:0; animation:xp-rise .5s ease forwards; }
.xp-india-years i.off{ background:none; border:1px solid var(--brass); }
.xp-canvas.portrait .xp-india-line{ width:640px; }
.xp-canvas.portrait .xp-india-line .m{ left:170px; }
.xp-canvas.portrait .xp-india-line .z{ left:590px; }
.xp-canvas.portrait .xp-india-trail{ width:640px; height:200px; }
.xp-canvas.portrait .xp-india-years{ grid-template-columns:repeat(15, 16px); gap:12px; }
.xp-canvas.portrait .xp-india-years i{ width:16px; height:16px; }
.xp-canvas.portrait .xpF-split .pane-art .xp-swivel.xp-india-sw{ width:400px; height:640px; }
.xp-canvas.portrait .xpF-split .pane-art .xp-photo.frame.xp-india-push{ width:520px !important; height:710px !important; }
.xp-canvas.portrait .xpF-split .pane-art .xp-photo.frame.xp-india-trace{ width:420px !important; height:700px !important; }
@media (prefers-reduced-motion: reduce){
  .xp-photo.xp-lfs-push img, .xp-photo.xp-india-push img, .xp-photo.xp-india-trace img, .xp-lfs-span .cage, .xp-india-case .ha{ animation:none !important; }
  .xp-lfs-watch g > .cage{ animation:xp-fade .9s ease 1.6s forwards !important; }
}