/* VII TORIA — next level: intro, cursor, gold dust, light sweep, lookbook, stories */

/* ---------- intro ---------- */
.loader { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; align-content: center; background: #090807; clip-path: inset(0 0 0 0); }
.is-loading .loader, .loader.is-out { display: grid; }
.is-loading body { overflow: hidden; }
.loader__mark { width: min(420px, 70vw); overflow: visible; }
.loader__mark text { font-family: var(--display); font-size: 200px; font-weight: 400; fill: rgba(230,197,144,0); stroke: var(--gold); stroke-width: 1.8; filter: drop-shadow(0 0 18px rgba(230,197,144,0.45)); stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw 1.5s cubic-bezier(.6,0,.2,1) forwards, fillIn .7s ease 1.1s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fillIn { to { fill: rgba(230,197,144,1); stroke-width: 0; } }
.loader__line { overflow: hidden; margin-top: -4px; text-align: center; font-family: var(--display); letter-spacing: 0.9em; padding-left: 0.9em; font-size: 15px; color: var(--soft); }
.loader__line span { display: inline-block; transform: translateY(110%); animation: lineUp .9s var(--ease) .7s forwards; }
@keyframes lineUp { to { transform: none; } }
.loader__n { position: absolute; right: var(--pad); bottom: 28px; font-family: var(--display); font-size: clamp(48px, 7vw, 96px); line-height: 1; color: rgba(230,197,144,0.22); font-variant-numeric: tabular-nums; }
.loader.is-out { animation: curtain 1.1s var(--ease-io) forwards; }
@keyframes curtain { to { clip-path: inset(0 0 100% 0); } }
.is-loading .h-up { animation-play-state: paused; }

/* ---------- cursor ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 150; pointer-events: none; display: none; opacity: 0; transition: opacity .3s; }
.has-cursor .cursor { display: block; }
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor label, .has-cursor [role="button"] { cursor: none; }
.cursor__dot { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--gold); transition: opacity .3s; }
.cursor__ring { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 1px solid rgba(230,197,144,0.55); display: grid; place-items: center; transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), background-color .3s, border-color .3s; }
.cursor__ring b { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--gold-ink); opacity: 0; transform: scale(.6); transition: opacity .3s, transform .4s var(--ease); }
.cursor.is-link .cursor__ring { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: rgba(230,197,144,0.12); }
.cursor.is-label .cursor__ring { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: var(--gold); border-color: var(--gold); }
.cursor.is-label .cursor__ring b { opacity: 1; transform: none; }
.cursor.is-label .cursor__dot { opacity: 0; }

/* ---------- hero: gold dust and a sweep of light ---------- */
.hero__dust { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero__portrait { cursor: pointer; }
.hero__portrait img { animation: breathe 16s ease-in-out infinite alternate; }
@keyframes breathe { from { transform: scale(1.02); } to { transform: scale(1.1) translateY(-1.5%); } }
.hero__portrait::after { content: ""; position: absolute; inset: -20%; z-index: 1; background: linear-gradient(105deg, transparent 40%, rgba(255,240,215,0.26) 50%, transparent 60%); transform: translateX(-100%); animation: sweep 7s ease-in-out 2.5s infinite; pointer-events: none; }
@keyframes sweep { 0%, 70% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.hero__portrait::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: inset 0 -140px 120px -70px rgba(0,0,0,0.55); pointer-events: none; }
/* an animated gold frame that hugs the picture: light travels around the arch */
.hero__portrait { border: 3px solid transparent; background: linear-gradient(#0b0a09, #0b0a09) padding-box, conic-gradient(from var(--spin), #7a5a2e, #f6e2bb 12%, #b8925a 25%, #5c431f 40%, #e6c590 55%, #fff4dc 62%, #a07a44 75%, #6b4f27 88%, #7a5a2e) border-box; animation: ring 9s linear infinite; box-shadow: 0 0 0 1px rgba(246,226,187,0.18), 0 0 46px -6px rgba(230,197,144,0.35), 0 60px 120px -40px rgba(0,0,0,0.95) !important; }
.hero__portrait img, .hero__portrait .live-video { border-radius: 197px 197px 33px 33px; }
.hero__live { z-index: 2; }

/* ---------- section titles letter by letter ---------- */
.title .w { display: inline-block; overflow: hidden; padding: 0 0.04em 0.12em; margin: 0 -0.04em -0.12em; vertical-align: top; }
.title .c { display: inline-block; }
.js.anim .title[data-up] { opacity: 1; transform: none; filter: none; }
.js.anim .title[data-up] .c { transform: translateY(115%) rotate(8deg); transition: transform 1.1s var(--ease); transition-delay: calc(var(--ci) * 30ms); }
.js.anim .title[data-up].is-up .c { transform: none; }

/* ---------- about: a stories ring around her face ---------- */
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.about__avatar { display: block; position: relative; width: 140px; height: 140px; margin: 0 auto 28px; padding: 5px; border-radius: 50%; background: conic-gradient(from var(--spin), var(--gold-2), var(--gold-3), #f3d39c, var(--gold), var(--gold-2)); animation: ring 5s linear infinite; transition: transform .5s var(--ease); }
@keyframes ring { to { --spin: 360deg; } }
.about__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 45% 18%; border: 4px solid var(--bg); }
.about__avatar:hover { transform: scale(1.06); }
.about__tap { margin: -16px 0 18px; font-size: 13px; font-weight: 600; color: var(--gold); }

/* ---------- the look: a horizontal lookbook pinned to the screen ---------- */
.look { position: relative; margin-top: var(--section); height: var(--look-h, 400vh); }
.look__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.look__ghost { position: absolute; left: 0; top: 50%; translate: 0 -50%; white-space: nowrap; font-family: var(--display); font-style: italic; font-size: 30vw; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(230,197,144,0.13); pointer-events: none; will-change: transform; }
.look__head { position: absolute; left: var(--pad); top: 50%; translate: 0 -50%; width: min(28vw, 360px); z-index: 0; will-change: transform, opacity; }
.look__head .lede { margin-left: 0; }
.look__track { position: relative; z-index: 1; display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); padding-left: calc(var(--pad) + min(28vw, 360px) + 5vw); padding-right: 12vw; width: max-content; will-change: transform; }
.look__track li { flex: none; }
.look__card { position: relative; display: block; width: calc(min(68svh, 640px) * 0.74); text-align: left; }
.look__img { position: relative; display: block; height: min(68svh, 640px); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.look__img img { position: absolute; top: 0; left: -12%; width: 124%; max-width: none; height: 100%; object-fit: cover; object-position: 50% 20%; transform: translateX(var(--px, 0px)) scale(1.04); transition: transform .9s var(--ease); will-change: transform; }
.look__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(8,7,6,0.75)); transition: opacity .5s; }
.look__card:hover .look__img img { transform: translateX(var(--px, 0px)) scale(1.1); }
.look__card:hover .look__img::after { opacity: .45; }
.look__cap { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 1; display: grid; gap: 2px; }
.look__cap i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--gold); letter-spacing: 0.1em; }
.look__cap b { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.05; }
.look__cap span { font-size: 14px; color: var(--soft); }
.look__track li:nth-child(even) .look__card { translate: 0 5svh; }
.look__track li:nth-child(odd) .look__card { translate: 0 -3svh; }
.look__progress { position: absolute; left: 50%; bottom: 5svh; width: min(320px, 50vw); height: 3px; translate: -50% 0; border-radius: 3px; background: rgba(255,255,255,0.1); overflow: hidden; z-index: 2; }
.look__progress i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--gold-3), var(--gold-2)); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- stories ---------- */
.stories { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; }
.stories[hidden] { display: none; }
.stories__bg { position: absolute; inset: 0; overflow: hidden; background: #050404; }
.stories__bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(40px) brightness(.42) saturate(1.2); transform: scale(1.2); }
.stories__phone { position: relative; width: min(440px, 100vw); height: min(92svh, 800px); border-radius: 32px; overflow: hidden; background: #000; box-shadow: 0 40px 120px rgba(0,0,0,0.8), 0 0 0 1px var(--line-2); animation: storyIn .6s var(--ease); touch-action: none; user-select: none; -webkit-user-select: none; }
@keyframes storyIn { from { opacity: 0; transform: scale(.92) translateY(30px); } }
.stories__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.stories__img.is-run { animation: kb 6s linear both; }
@keyframes kb { from { transform: scale(1.14); } to { transform: scale(1); } }
.stories__phone::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.55), transparent 22%, transparent 58%, rgba(0,0,0,0.8)); pointer-events: none; }
.stories__bars { position: absolute; z-index: 3; left: 12px; right: 12px; top: 12px; display: flex; gap: 4px; }
.stories__bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.3); overflow: hidden; }
.stories__bars i::after { content: ""; display: block; height: 100%; width: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
.stories__top { position: absolute; z-index: 4; left: 14px; right: 8px; top: 24px; display: flex; align-items: center; gap: 10px; }
.stories__av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: 45% 18%; box-shadow: 0 0 0 2px var(--gold); }
.stories__top span { display: grid; line-height: 1.25; flex: 1; }
.stories__top b { font-size: 14px; }
.stories__top small { font-size: 12px; color: rgba(255,255,255,0.78); }
.stories__close { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
.stories__close svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.stories__cap { position: absolute; z-index: 3; left: 24px; right: 24px; bottom: 98px; font-family: var(--display); font-size: 36px; line-height: 1.05; text-shadow: 0 2px 20px rgba(0,0,0,0.5); animation: capUp .7s var(--ease) both; }
@keyframes capUp { from { opacity: 0; transform: translateY(16px); } }
.stories__nav { position: absolute; z-index: 2; top: 80px; bottom: 92px; width: 35%; }
.stories__nav--prev { left: 0; }
.stories__nav--next { right: 0; width: 65%; }
.stories__cta { position: absolute; z-index: 3; left: 50%; bottom: 24px; translate: -50% 0; }

@media (prefers-reduced-motion: reduce) {
  .hero__portrait img, .hero__portrait::after, .about__avatar, .stories__img.is-run { animation: none; }
}

/* ---------- the look on tablets and phones: a swipeable strip ---------- */
@media (max-width: 860px) {
  .look { height: auto; }
  .look__pin { position: relative; height: auto; overflow: visible; display: block; }
  .look__ghost { display: none; }
  .look__head { position: static; translate: none; width: auto; text-align: center; padding-inline: var(--pad); }
  .look__head .lede { margin-inline: auto; }
  .look__track { width: auto; margin-top: 36px; padding: 10px var(--pad) 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; transform: none !important; }
  .look__track::-webkit-scrollbar { display: none; }
  .look__track li { scroll-snap-align: center; }
  .look__card { width: 72vw; translate: none !important; }
  .look__img { height: 96vw; border-radius: 28px; }
  .look__progress { position: relative; left: auto; bottom: auto; translate: none; margin: 14px auto 0; }
  .stories__phone { height: 100svh; width: 100vw; border-radius: 0; }
}

/* ---------- living photos: the loop sits exactly over its photo ---------- */
.live-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; pointer-events: none; border-radius: inherit; }
.live-video.is-on { opacity: 1; }
.hero__portrait .live-video { z-index: 0; }
.about__avatar .live-video { inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); border-radius: 50%; border: 4px solid var(--bg); }
.look__img .live-video { left: -12%; width: 124%; max-width: none; transform: translateX(var(--px, 0px)) scale(1.04); transition: opacity 1.4s ease, transform .9s var(--ease); }
.look__card:hover .look__img .live-video { transform: translateX(var(--px, 0px)) scale(1.1); }
.flow__track .live-video { border-radius: 0; }
.stories__vid { opacity: 0; transition: opacity .8s ease; z-index: 0; }
.stories__vid.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .live-video, .stories__vid { display: none; } }

/* ---------- performance: rest what cannot be seen ---------- */
.hero.is-off .hero__word, .hero.is-off .hero__portrait, .hero.is-off .hero__portrait img, .hero.is-off .hero__portrait::after, .hero.is-off .hero__live i { animation-play-state: paused; }
.flow__track li::after { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--dim, 0); pointer-events: none; border-radius: inherit; }
.hero__portrait img, .live-video, .look__img img, .flow__track img { backface-visibility: hidden; }

/* planner cards and the ticket: the loop takes the photo's treatment */
.opts--photo .live-video { filter: brightness(.48) saturate(.9); transition: opacity 1s ease, filter .4s, transform .8s var(--ease); }
.opts--photo input:checked + span .live-video { filter: brightness(.85); transform: scale(1.06); }
@media (hover: hover) { .opts--photo label:hover .live-video { filter: brightness(.75); } }

/* ---------- the music bar: discreet, always at hand ---------- */
.mini { left: 18px; right: auto; bottom: 18px; transform: translateY(140%); opacity: 0; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; width: min(380px, calc(100vw - 36px)); padding: 8px 10px 8px 8px; border-radius: 22px; background: rgba(18, 16, 13, 0.94); border: 1px solid var(--line-2); box-shadow: 0 24px 60px -20px rgba(0,0,0,0.85), 0 0 0 1px rgba(230,197,144,0.06); overflow: hidden; transition: transform .8s var(--ease), opacity .6s ease; }
.mini.is-in { transform: none; opacity: 1; }
.mini__disc { position: relative; width: 46px; height: 46px; border-radius: 50%; padding: 0; overflow: hidden; background: #0d0d0d; box-shadow: 0 0 0 2px #0d0d0d, 0 0 0 3px rgba(230,197,144,0.5); animation: spin 4s linear infinite; animation-play-state: paused; cursor: pointer; }
.mini__disc img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 18%; border-radius: 50%; }
.mini__disc::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #0d0d0d; box-shadow: 0 0 0 2px rgba(230,197,144,0.6); }
.mini.is-playing .mini__disc { animation-play-state: running; }
.mini__info { display: grid; min-width: 0; line-height: 1.25; }
.mini__k { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--gold); }
.mini__t { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: none; }
.mini:not(.is-playing) .mini__k { animation: hint 2.4s ease-in-out infinite; }
@keyframes hint { 50% { opacity: .45; } }
.mini__eq { display: flex; align-items: flex-end; gap: 2px; height: 16px; }
.mini__eq i { width: 3px; height: 30%; border-radius: 2px; background: var(--gold); }
.mini.is-playing .mini__eq i { animation: eq .9s ease-in-out infinite alternate; }
.mini__eq i:nth-child(2) { animation-delay: -.3s; } .mini__eq i:nth-child(3) { animation-delay: -.6s; animation-duration: .7s; } .mini__eq i:nth-child(4) { animation-delay: -.15s; animation-duration: 1.1s; }
.mini__ctrl { display: flex; align-items: center; gap: 2px; }
.mini__ctrl button { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--soft); transition: color .2s, background-color .2s, transform .2s var(--ease); }
.mini__ctrl button:hover { color: var(--ink); background: rgba(255,255,255,0.07); }
.mini__ctrl button:active { transform: scale(.9); }
.mini__ctrl svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mini__ctrl .mini__main { width: 40px; height: 40px; background: linear-gradient(135deg, var(--gold-2), var(--gold) 45%, var(--gold-3)); color: var(--gold-ink); }
.mini__ctrl .mini__main:hover { color: var(--gold-ink); background: linear-gradient(135deg, #fff1d4, var(--gold-2)); }
.mini__main svg { fill: currentColor; stroke: none; width: 17px; height: 17px; }
.mini__main .i-play { margin-left: 2px; }
.mini__main .i-pause, .mini.is-playing .mini__main .i-play { display: none; }
.mini.is-playing .mini__main .i-pause { display: block; }
.mini__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,0.06); }
.mini__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-3), var(--gold-2)); transform-origin: 0 50%; transform: scaleX(0); }
@media (max-width: 720px) {
  .mini { left: 10px; bottom: 10px; width: calc(100vw - 20px); }
  .mini__eq { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mini__disc, .mini__k, .mini__eq i { animation: none !important; } }

/* ---------- music bar, glass edition ---------- */
.mini { gap: 12px; padding: 9px 9px 9px 9px; border-radius: 26px; background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)) , rgba(16, 13, 10, 0.38); border: 1px solid rgba(255,255,255,0.14); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.25), 0 24px 60px -24px rgba(0,0,0,0.9); transform: translateY(140%) scale(.96); filter: blur(6px); transition: transform .9s var(--ease), opacity .7s ease, filter .7s ease, box-shadow .6s ease; }
.mini.is-in { transform: none; filter: none; }
.mini.is-playing { box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.25), 0 24px 60px -24px rgba(0,0,0,0.9), 0 0 40px -12px rgba(230,197,144,0.45); }
.mini::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.10) 45%, transparent 60%); transform: translateX(-100%); animation: glassSweep 6s ease-in-out 1.5s infinite; pointer-events: none; }
@keyframes glassSweep { 0%, 70% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@media (hover: hover) { .mini:hover { transform: translateY(-3px); } }

/* the record */
.mini__disc { width: 50px; height: 50px; background: #0b0b0b; box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 6px 16px -6px rgba(0,0,0,0.8); padding: 0; transition: transform .4s var(--ease); }
.mini__disc img { position: absolute; inset: 22%; width: 56%; height: 56%; border-radius: 50%; }
.mini__disc::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle, #111 0 1px, #1c1b1a 1.4px 2.4px); }
.mini__disc::after { width: 5px; height: 5px; margin: -2.5px; box-shadow: none; background: #e6c590; z-index: 1; }
.mini__disc img { z-index: 1; box-shadow: 0 0 0 1.5px rgba(230,197,144,0.7); }
.mini__disc:active { transform: scale(.92); }

/* text: the title rolls when it is too long */
.mini__k { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.mini__t { position: relative; overflow: hidden; white-space: nowrap; text-overflow: clip; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.mini__t span { display: inline-block; padding-right: 2.5em; }
.mini__t.is-long span { animation: ticker 14s linear infinite; }
@keyframes ticker { 0%, 12% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.mini__t.is-swap { animation: swapIn .6s var(--ease); }
@keyframes swapIn { from { opacity: 0; transform: translateY(8px); } }

/* buttons */
.mini__ctrl { gap: 4px; }
.mini__ctrl button { width: 36px; height: 36px; color: var(--ink); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); transition: transform .35s var(--ease), background-color .25s, border-color .25s; }
.mini__ctrl button:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.18); transform: translateY(-1px); }
.mini__ctrl button:active { transform: scale(.88); }
.mini__ctrl .mini__main { position: relative; width: 46px; height: 46px; border: 0; color: var(--gold-ink); background: linear-gradient(135deg, #fff1d4, var(--gold) 50%, var(--gold-3)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 8px 22px -8px rgba(230,197,144,0.8); }
.mini__ctrl .mini__main:hover { background: linear-gradient(135deg, #fff6e4, var(--gold-2) 50%, var(--gold)); transform: scale(1.06); }
.mini__ctrl .mini__main:active { transform: scale(.9); }
.mini__main::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(230,197,144,0.6); opacity: 0; }
.mini.is-playing .mini__main::after { animation: pulseRing 2s ease-out infinite; }
@keyframes pulseRing { 0% { opacity: .8; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.35); } }
.mini__main svg { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; transition: opacity .3s ease, transform .45s var(--ease); }
.mini__main .i-play { margin-left: -7px; }
.mini__main .i-pause, .mini.is-playing .mini__main .i-play { display: block; }
.mini__main .i-pause { opacity: 0; transform: scale(.4) rotate(-90deg); }
.mini.is-playing .mini__main .i-play { opacity: 0; transform: scale(.4) rotate(90deg); }
.mini.is-playing .mini__main .i-pause { opacity: 1; transform: none; }

/* progress along the bottom edge */
.mini__bar { left: 18px; right: 18px; bottom: 3px; height: 2px; border-radius: 2px; background: rgba(255,255,255,0.08); overflow: hidden; }
.mini__bar i { box-shadow: 0 0 10px rgba(246,226,187,0.8); }
.mini__eq { height: 18px; gap: 2.5px; }
.mini__eq i { width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--gold-2), var(--gold-3)); }
@media (prefers-reduced-motion: reduce) { .mini::before, .mini__t span, .mini__main::after { animation: none !important; } }

.mini__k { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini { width: min(400px, calc(100vw - 36px)); }

/* side photos wear the same turning gold frame as the portrait */
.hero__side { border: 3px solid transparent; background: linear-gradient(#0b0a09, #0b0a09) padding-box, conic-gradient(from var(--spin), #7a5a2e, #f6e2bb 12%, #b8925a 25%, #5c431f 40%, #e6c590 55%, #fff4dc 62%, #a07a44 75%, #6b4f27 88%, #7a5a2e) border-box; animation: ring 9s linear infinite; box-shadow: 0 0 0 1px rgba(246,226,187,0.16), 0 0 36px -8px rgba(230,197,144,0.3), 0 40px 90px -30px rgba(0,0,0,0.95); }
.hero__side--l { animation-delay: -3s; }
.hero__side--r { animation-delay: -6s; animation-direction: reverse; }
.hero__side img, .hero__side .live-video { border-radius: calc(var(--r-lg) - 3px); }
.hero.is-off .hero__side { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hero__side { animation: none; } }