/* Where shopping starts on a Reel: the entry-point variants and the "In this Reel" sheet. See reel.js. */

/* type the kit doesn't have */
.ig .reel-t15 { font: 600 15px/19px var(--ig-text); }
.ig .reel-t13 { font: 400 13px/16px var(--ig-text); }
.ig .reel-t13s { font: 600 13px/16px var(--ig-text); }
.ig .reel-t11 { font: 400 11px/14px var(--ig-text); }

/* C: preview cards (key 2.1-B-1) */
/* the end padding lets the last card snap to the left edge, clear of the fade */
.ig .reel-carousel { height: 62px; gap: 8px; padding-right: 70px; -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 80%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 80%, transparent 100%); }
.ig .reel-preview { width: 252px; height: 62px; flex-shrink: 0; gap: 10px; padding: 5px 10px 5px 5px; border-radius: 12px; scroll-snap-align: start; }

/* D: Shop button (key 2.1-C-1) */
.ig .reel-shopbtn { width: 60px; align-items: center; gap: 9px; }   /* the gap between every icon and its count */
.ig .reel-shopbtn .thumb { position: relative; width: 36px; height: 36px; flex-shrink: 0; }
.ig .reel-shopbtn .ph { position: absolute; inset: 0; border-radius: 8px; border: 1.5px solid #fff; background-origin: border-box; box-shadow: 0 2px 8px #00000059; }
.ig .reel-shopbtn .badge { position: absolute; left: 19px; top: -7px; width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; background: #fff; box-shadow: 0 1px 4px #00000066; color: #0B0B0B; font: 700 11px/13px var(--ig-text); }
/* key 2.1-H-1: the Bag icon in place of the photo. Its badge covers only the body's top-right corner, clear of the smile
   (x 10.1–16.9 at 27pt) */
.ig .reel-shopbtn.icon .thumb { width: 27px; height: 27px; }
.ig .reel-shopbtn.icon svg { display: block; }
.ig .reel-shopbtn.icon .badge { left: 17.5px; top: -5px; }

/* E: hold to lift (screen key 2.1-D-1), one press and hold on a 9s loop (reel.js), built from Photos' own subject lift
   (VisionKit's spring, ripple and glow). Every part runs on the same clock, --lift. In seconds:
   0.7 the finger lands · 0.75 the Reel pauses, its chrome fades · 1.05 the band lifts (1.04×, spring k 195, c 19.75) and a
   ripple leaves the finger · 1.45 "Searching…" · 1.61 a light starts circling the outline, a lap every 4.5s · 2.55 the
   finger lets go: the lift drops in a frame, the rest dims to 38%, the card grows from its caret · 7.6 dismissed.
   Each part's own style is the end of the hold (released, card open), which is what shows without motion. */
.ig.reel-held { isolation: isolate; --lift: 9s; }   /* isolation keeps the z-indexes below inside the screen */
.ig.reel-held .ig-status { z-index: 2; }
.ig.reel-held :is(.ig-reels-head, .ig-actions, .ig-creator, .ig-progress, .ig-tabbar) { opacity: .16; z-index: 2; animation: reel-lift-chrome var(--lift) infinite both; }
.ig.reel-held .reel-over { z-index: 3; }
.ig .reel-dim { fill-opacity: .38; animation: reel-lift-dim var(--lift) infinite both; }   /* everything but the band */
.ig .reel-band { transform-origin: 196px 486px; animation: reel-lift-band var(--lift) infinite both; }
.ig .reel-band-shadow { opacity: 0; translate: 0 5px; filter: blur(10px); animation: reel-lift-shadow var(--lift) infinite both; }
/* the ripple: two white rings from the finger, a 4.5pt line and a 24pt wash, blurred, irregular like VisionKit's */
.ig .reel-band-ripple { opacity: 0; mix-blend-mode: screen; animation: reel-lift-ripple var(--lift) infinite both; }
.ig .reel-band-ripple i { position: absolute; width: 20px; height: 20px; translate: -50% -50%; border: 4.5px solid #fff; border-radius: 47% 53% 51% 49% / 53% 47% 53% 47%; mix-blend-mode: plus-lighter; filter: blur(2.25px); animation: reel-lift-wave var(--lift) infinite both; }
.ig .reel-band-ripple i + i { border-width: 24px; filter: blur(40px); }
.ig .reel-band-light { mix-blend-mode: plus-lighter; animation: reel-lift-light var(--lift) infinite both; }
.ig .reel-band-light .halo { filter: blur(7px); }
.ig .reel-band-light .core { filter: blur(.75px); }
.ig .reel-band-light path { stroke-dashoffset: -.3; animation: reel-lift-lap var(--lift) infinite both; }
.ig .reel-paused { width: 40px; height: 40px; border-radius: 20px; justify-content: center; gap: 5px; background: #00000073; opacity: 0; animation: reel-lift-paused var(--lift) infinite both; }
.ig .reel-paused i { width: 4px; height: 14px; border-radius: 2px; background: #fff; }
.ig .reel-hold { width: 56px; height: 56px; border-radius: 28px; background: #FFFFFF40; border: 1.5px solid #FFFFFFB3; box-shadow: 0 0 24px #FFFFFF59; opacity: 0; animation: reel-lift-touch var(--lift) infinite both; }
.ig .reel-finding { gap: 8px; padding: 9.5px 14px; border-radius: 20px; background: var(--ig-glass); border: 1px solid #FFFFFF26; opacity: 0; animation: reel-lift-find var(--lift) infinite both; }
/* the card grows out of its caret's tip, as Photos' menu grows out of its arrow */
.ig .reel-liftcard { gap: 10px; padding: 12px; border-radius: 16px; background: var(--ig-sheet); border: 1px solid #FFFFFF1A; box-shadow: 0 12px 32px #00000080; transform-origin: 50% calc(100% + 8px); animation: reel-lift-card var(--lift) infinite both; }
@media (prefers-reduced-motion: reduce) {
  .ig.reel-held, .ig.reel-held * { animation: none !important; }
}
@keyframes reel-lift-chrome {
  0% { opacity: 1; }
  8.333% { opacity: 1; animation-timing-function: cubic-bezier(.23, 1, .32, 1); }
  11.111% { opacity: .16; }
  84.444% { opacity: .16; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  88.889% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes reel-lift-dim {
  0% { opacity: 0; }
  28.333% { opacity: 0; animation-timing-function: ease-out; }
  31.111% { opacity: 1; }
  84.444% { opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  87.222% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes reel-lift-band {
  0% { transform: none; }
  11.667% { transform: none; animation-timing-function: linear(0, 0.052, 0.173, 0.326, 0.484, 0.629, 0.753, 0.852, 0.927, 0.979, 1.013, 1.033, 1.042, 1.043, 1.04, 1.034, 1); }
  16.111% { transform: scale(1.04); }
  28.333% { transform: scale(1.04); animation-timing-function: steps(1, start); }
  28.556% { transform: none; }
  100% { transform: none; }
}
@keyframes reel-lift-shadow {
  0% { opacity: 0; }
  11.667% { opacity: 0; animation-timing-function: cubic-bezier(.23, 1, .32, 1); }
  14.444% { opacity: .3; }
  28.333% { opacity: .3; animation-timing-function: steps(1, start); }
  28.556% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes reel-lift-ripple {
  0% { opacity: 0; }
  12.222% { opacity: 0; animation-timing-function: linear; }
  13.333% { opacity: 1; }
  21.033% { opacity: 1; animation-timing-function: linear; }
  25.556% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes reel-lift-wave {
  0% { width: 20px; height: 20px; }
  12.222% { width: 20px; height: 20px; animation-timing-function: cubic-bezier(.1, 0, .08, 1); }
  27.967% { width: 1560px; height: 1560px; }
  100% { width: 1560px; height: 1560px; }
}
@keyframes reel-lift-light {
  0% { opacity: 0; }
  17.917% { opacity: 0; animation-timing-function: cubic-bezier(.23, 1, .32, 1); }
  21.25% { opacity: 1; }
  84.444% { opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  87.222% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes reel-lift-lap {
  0% { stroke-dashoffset: 0; }
  17.917% { stroke-dashoffset: 0; animation-timing-function: linear; }
  87.222% { stroke-dashoffset: -1.386; }
  100% { stroke-dashoffset: -1.386; }
}
@keyframes reel-lift-paused {
  0% { opacity: 0; scale: .8; }
  8.333% { opacity: 0; scale: .8; animation-timing-function: cubic-bezier(.23, 1, .32, 1); }
  11.667% { opacity: 1; scale: 1; }
  28.333% { opacity: 1; scale: 1; animation-timing-function: cubic-bezier(.4, 0, 1, 1); }
  30% { opacity: 0; scale: .9; }
  100% { opacity: 0; scale: .9; }
}
@keyframes reel-lift-touch {
  0% { opacity: 0; scale: 1.3; }
  7.778% { opacity: 0; scale: 1.3; animation-timing-function: cubic-bezier(.23, 1, .32, 1); }
  9.444% { opacity: 1; scale: 1; }
  28.333% { opacity: 1; scale: 1; animation-timing-function: cubic-bezier(.23, 1, .32, 1); }
  30.556% { opacity: 0; scale: 1.15; }
  100% { opacity: 0; scale: 1.15; }
}
@keyframes reel-lift-find {
  0% { opacity: 0; translate: 0 6px; }
  16.111% { opacity: 0; translate: 0 6px; animation-timing-function: cubic-bezier(.23, 1, .32, 1); }
  19.444% { opacity: 1; translate: 0 0; }
  28.333% { opacity: 1; scale: 1; animation-timing-function: cubic-bezier(.4, 0, 1, 1); }
  29.667% { opacity: 0; scale: .96; }
  100% { opacity: 0; scale: .96; }
}
@keyframes reel-lift-card {
  0% { opacity: 0; scale: .4; }
  28.333% { opacity: 0; scale: .4; animation-timing-function: cubic-bezier(.23, 1, .32, 1); }
  30.444% { opacity: 1; scale: 1; }
  84.444% { opacity: 1; scale: 1; animation-timing-function: cubic-bezier(.4, 0, 1, 1); }
  86.111% { opacity: 0; scale: .96; }
  100% { opacity: 0; scale: .96; }
}

/* B: product sticker (key 2.1-G-1), tilted like one a creator placed */
.ig .reel-sticker { transform: rotate(-6deg); transform-origin: 50% 100%; filter: drop-shadow(0 2px 6px #00000066); }

/* F: progress-bar markers; a thicker bar, and the creator row moves up */
.ig.reel-has-markers .ig-creator { top: 612px; }
.ig.reel-has-markers .ig-progress { top: 774px; height: 4px; border-radius: 2px; }
.ig.reel-has-markers .ig-progress i { height: 4px; border-radius: 2px; }
.ig .reel-mark { width: 8px; height: 8px; border-radius: 4px; background: #FFFFFF80; box-shadow: 0 0 0 2px #0000008C; }
.ig .reel-mark.on { background: #fff; }
.ig .reel-chip { gap: 8px; padding: 6px 10px 6px 6px; border-radius: 10px; background: var(--ig-glass); border: 1px solid #FFFFFF26; }
.ig .reel-chip .ph { width: 28px; height: 28px; border-radius: 6px; }

/* Flow-2: "In this Reel" sheet */
.ig .reel-sheet-head { gap: 6px; padding: 10px 16px 16px; }
.ig .reel-item { gap: 12px; padding: 8px 16px; }
.ig .reel-round { width: 36px; height: 36px; border-radius: 18px; flex-shrink: 0; display: grid; place-items: center; background: #FFFFFF1F; }

/* taps */
/* a row highlights while pressed, as a table cell does, unless the press is on its Save */
.device .scr:not(.out) .ig .reel-item { transition: background-color .2s; }
.device .scr:not(.out) .ig .reel-item:active:not(:has(.reel-round:active)) { background: #FFFFFF0F; transition: none; }
.device .scr:not(.out) .ig :is(.reel-round, .reel-preview, .reel-shopbtn) { transition: opacity .12s; }
.device .scr:not(.out) .ig :is(.reel-round, .reel-preview, .reel-shopbtn):active { opacity: .6; transition: none; }
/* the sticker gives under the finger */
.device .scr:not(.out) .ig .reel-sticker { transition: scale .3s cubic-bezier(.23, 1, .32, 1); }
.device .scr:not(.out) .ig .reel-sticker:active { scale: .92; transition-duration: .12s; }
/* a saved item's bookmark fills */
.ig .reel-round.on polygon { fill: #fff; }

/* 2.0 step 1's finger taps the pill once and then taps the sheet away (reel.js), so on the timeline's phone kit.css's
   pulse is off and it waits unseen, over the sheet's dim (interact.css) for its second tap. Its ring is an <i>.
   Without motion it rests on the pill. */
.device .scr[data-key="2.0-Flow-1"]:not(.out) .ig .ig-tap { animation: none; opacity: 0; z-index: 17; }
.device .scr[data-key="2.0-Flow-1"]:not(.out) .ig .ig-tap::after { animation: none; }
.ig .ig-tap > i { position: absolute; inset: -2px; border-radius: inherit; border: 2px solid #FFFFFFCC; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .device .scr[data-key="2.0-Flow-1"]:not(.out) .ig .ig-tap { opacity: 1; }
}