/* Consumer-only presentation. Artwork is raster; calendar, controls and status are live DOM. */
@font-face {
  font-family: "CDF Ritual Title";
  src: url("fonts/cdf-ritual-title.woff2?v=20261008") format("woff2");
  font-style: normal; font-weight: 400; font-display: swap;
}
.cdf-sample-page { margin: 0; background: #020910; color: #e8c17d; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }
.cdf-sample-page * { box-sizing: border-box; }
.cdf-sample-page main { margin: 0; padding: 0; }
.cdf-sample-header { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 120; width: min(100%,480px,calc(100svh * 853 / 1844)); height: 56px; padding: 0 56px 0 18px; display: flex; align-items: center; justify-content: space-between; }
.cdf-sample-header a { color: #e8c17d; text-decoration: none; font-size: 14px; padding: 12px 0; }
.cdf-sample-header { pointer-events: none; }
.cdf-sample-header a { pointer-events: auto; }
.cdf-experience { --gate-gold: #e8c17d; --gate-light: linear-gradient(90deg, #f2d69b00 14%, #f2d69b08 23%, #f2d69b22 29%, #f8e2ac40 32%, #f2d69b14 35%, #f2d69b30 40%, #fff0c252 43%, #f2d69b18 47%, #f7dfaa38 52%, #f2d69b0c 56%, #f2d69b22 61%, #f2d69b00 76%); position: relative; width: min(100%,480px,calc(100svh * 853 / 1844)); margin: 0 auto; padding-top: 56px; min-height: 100svh; isolation: isolate; overflow: hidden; background: #020910; container-type: inline-size; }
/* The player and footer stay in flow throughout; revealing them never changes the page geometry. */
.cdf-gate { position: absolute; inset: 0 0 auto; width: 100%; aspect-ratio: 853 / 1844; z-index: 110; overflow: hidden; background: #020910; opacity: 1; transition: opacity var(--gate-transition-duration, 1100ms) ease-in-out; }
.cdf-gate[hidden] { display: none; }
.cdf-gate__scene, .cdf-gate__plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
/* Borrow only the sample's diagonal warm light, not its layout or background.
   This decorative pseudo-element sits above the original artwork and below all
   calendar/interactive DOM. No new image, canvas, playback clock or hit target. */
.cdf-gate__scene::after {
  content: ""; position: absolute; top: -12%; left: -26%; width: 75%; height: 116%;
  pointer-events: none; opacity: .64; transform: rotate(-14deg); transform-origin: 50% 0;
  background: var(--gate-light);
  -webkit-mask-image: linear-gradient(#0000, #000 13%, #000 32%, #0000 86%);
  mask-image: linear-gradient(#0000, #000 13%, #000 32%, #0000 86%);
}
.cdf-experience[data-ceremony="true"] .cdf-gate__scene::after {
  animation: cdf-light-awaken var(--gate-opening-duration, 5s) ease-in-out both;
}
@keyframes cdf-light-awaken {
  0% { opacity: .64; transform: rotate(-14deg); }
  55% { opacity: .88; transform: rotate(-12deg); }
  100% { opacity: .7; transform: rotate(-13deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cdf-experience[data-ceremony="true"] .cdf-gate__scene::after { animation: none; }
}
/* Reuse the original raster: a 450px disc centred at (426.5,1240), excluding the baked-in button.
   Masks select existing artwork only; no replacement compass or invented symbols. */
.cdf-gate__rotor { position: absolute; top: 55.043384%; left: 23.622509%; width: 52.754983%; aspect-ratio: 1; opacity: 0; background: url("gate/daily-calendar-plate.png") 50% 72.812052% / 189.555556% 409.777778% no-repeat; pointer-events: none; }
.cdf-gate__rotor--ganzhi { --rotor-turn: -160deg; --release-scale: 1.8; --rotor-mask: radial-gradient(closest-side, transparent 68%, #000 69%, #000 99%, transparent 100%); }
.cdf-gate__rotor--bagua { --rotor-turn: 220deg; --release-scale: 1.45; --rotor-mask: radial-gradient(closest-side, transparent 32%, #000 33%, #000 69%, transparent 70%); }
.cdf-gate__rotor--taiji { --rotor-turn: -360deg; --release-scale: .2; --rotor-mask: radial-gradient(closest-side, #000 32%, transparent 33%); }
.cdf-gate__rotor { -webkit-mask-image: var(--rotor-mask); mask-image: var(--rotor-mask); }
.cdf-experience[data-ceremony="true"] .cdf-gate__rotor { opacity: 1; will-change: transform, opacity; animation-duration: var(--gate-opening-duration, 5s); animation-timing-function: cubic-bezier(.3,0,.25,1); animation-fill-mode: both; }
.cdf-experience[data-ceremony="true"] .cdf-gate__rotor--ganzhi { animation-name: cdf-rotate-ganzhi; }
.cdf-experience[data-ceremony="true"] .cdf-gate__rotor--bagua { animation-name: cdf-rotate-bagua; }
.cdf-experience[data-ceremony="true"] .cdf-gate__rotor--taiji { animation-name: cdf-rotate-taiji; }
@keyframes cdf-rotate-ganzhi { 0%, 5% { transform: rotate(0); } 90%, 100% { transform: rotate(var(--rotor-turn)); } }
@keyframes cdf-rotate-bagua { 0%, 14% { transform: rotate(0); } 92%, 100% { transform: rotate(var(--rotor-turn)); } }
@keyframes cdf-rotate-taiji { 0%, 24% { transform: rotate(0); } 94%, 100% { transform: rotate(var(--rotor-turn)); } }
/* The mist is also sampled from the approved plate, not a new particle engine or generated asset. */
.cdf-gate__mist { position: absolute; inset: 0; background: url("gate/daily-calendar-plate.png") center / 100% 100% no-repeat; opacity: 0; pointer-events: none; -webkit-mask-image: var(--mist-mask); mask-image: var(--mist-mask); }
.cdf-gate__mist--left { --mist-mask: radial-gradient(ellipse 35% 36% at 0% 68%, #000 10%, transparent 100%); --mist-travel: -16%; }
.cdf-gate__mist--right { --mist-mask: radial-gradient(ellipse 35% 36% at 100% 68%, #000 10%, transparent 100%); --mist-travel: 16%; }
.cdf-experience[data-exit="true"] .cdf-gate__rotor { animation: cdf-ring-release var(--gate-transition-duration, 1100ms) ease-in-out both; }
.cdf-experience[data-exit="true"] .cdf-gate__plate { animation: cdf-plate-dissolve var(--gate-transition-duration, 1100ms) ease both; }
.cdf-experience[data-exit="true"] .cdf-gate__mist { animation: cdf-mist-part var(--gate-transition-duration, 1100ms) ease-out both; }
/* Let the gate own the fade. Avoid multiplying fast fades and repainting masked blurs. */
@keyframes cdf-ring-release { from { transform: rotate(var(--rotor-turn)) scale(1); } to { transform: rotate(var(--rotor-turn)) scale(var(--release-scale)); } }
@keyframes cdf-plate-dissolve { from { opacity: 1; } 80%, to { opacity: 0; } }
@keyframes cdf-mist-part { from { opacity: 0; transform: translateX(0); } 25% { opacity: .35; } to { opacity: 0; transform: translateX(var(--mist-travel)); } }
.cdf-gate__content, .cdf-gate__calendar { position: absolute; inset: 0; text-align: center; }
.cdf-gate__calendar { pointer-events: none; }
.cdf-gate__lunar, .cdf-gate__ganzhi { margin: 0; position: absolute; writing-mode: vertical-rl; text-orientation: upright; font-family: STKaiti, KaiTi, "Noto Serif CJK SC", serif; color: #edca89; font-weight: 400; }
.cdf-gate__lunar { top: 13.5%; left: 42.1%; font-size: 10.8cqw; line-height: 1.1; letter-spacing: 0; }
.cdf-gate__lunar[data-long="true"] { font-size: 8.7cqw; letter-spacing: 0; }
.cdf-gate__ganzhi { top: 13.5%; left: 59.6%; font-size: 4.1cqw; line-height: 1; letter-spacing: .1em; white-space: pre; }
.cdf-gate__gregorian { position: absolute; top: 44.6%; left: 22%; width: 56%; font: 400 max(12px,3.8cqw)/1.5 STKaiti, KaiTi, serif; white-space: pre; color: #e8c17d; }
.cdf-gate__sound { position: absolute; top: 5px; right: 9px; min-width: 44px; min-height: 44px; background: transparent; border: 0; color: #e8c17d; padding: 10px; cursor: pointer; }
.cdf-gate__sound-off, .cdf-gate__sound[aria-pressed="false"] .cdf-gate__sound-wave { display: none; }
.cdf-gate__sound[aria-pressed="false"] .cdf-gate__sound-off { display: block; }
.cdf-sample-page .cdf-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.cdf-gate__start { position: absolute; top: 79.7%; left: 26.7%; width: 46.8%; height: 7%; min-height: 44px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: #ffe3a0; font: 600 6cqw/1.2 STKaiti, KaiTi, serif; cursor: pointer; touch-action: manipulation; }
.cdf-gate__start:hover { color: #fff0c7; }
.cdf-gate__status { position: absolute; top: 87.4%; left: 8%; width: 84%; margin: 0; font-size: 12px; line-height: 1.5; color: #e0cda8; }
.cdf-gate__disclaimer { position: absolute; top: 95.4%; left: 0; width: 100%; margin: 0; color: #b8a185; font-size: max(10px,2.8cqw); line-height: 1.6; }
.cdf-experience__playback { position: relative; display: flow-root; opacity: 0; transition: opacity 350ms ease-out; }
.cdf-experience__disclaimer { display: block; visibility: hidden; color: #b8aa93; font-size: 11px; text-align: center; line-height: 1.6; margin: 8px 0; }
.cdf-experience[data-ceremony="true"] .cdf-gate__scene { animation: cdf-calendar-awaken var(--gate-opening-duration, 5s) ease-in-out both; transform-origin: 50% 67%; }
.cdf-experience[data-ceremony="true"] .cdf-gate__calendar { animation: cdf-calendar-recede var(--gate-opening-duration, 5s) ease-in-out both; }
.cdf-gate::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 67%, #f6c36544 0%, #e8b44a18 22%, transparent 52%); }
.cdf-experience[data-ceremony="true"] .cdf-gate::after { animation: cdf-calendar-gather var(--gate-opening-duration, 5s) ease-in-out both; }
.cdf-experience:is([data-state="awakening"], [data-state="transitioning"]) .cdf-gate__start { cursor: wait; }
@keyframes cdf-calendar-awaken { 0%, 18% { transform: scale(1); } 55% { transform: scale(1.015); } 85%, 100% { transform: scale(1.035); } }
@keyframes cdf-calendar-recede { 0%, 25% { opacity: 1; } 75%, 100% { opacity: .25; } }
@keyframes cdf-calendar-gather { 0%, 15% { opacity: 0; transform: scale(.8); } 65% { opacity: 1; transform: scale(1); } 90%, 100% { opacity: .45; transform: scale(1.2); } }
.cdf-experience[data-state="transitioning"] .cdf-gate { opacity: 0; }
.cdf-experience:is([data-state="chapter"], [data-state="playing"]) .cdf-gate { opacity: 0; pointer-events: none; transition-duration: 350ms; }
/* Reveal the stationary title underneath the retreat, so its following hold is fully readable. */
.cdf-experience[data-state="transitioning"] .cdf-experience__playback { opacity: 1; }
.cdf-experience:is([data-state="chapter"], [data-state="playing"]) .cdf-experience__playback { opacity: 1; }
.cdf-experience[data-state="chapter"] .cdf-experience__playback { transition: none; }
/* The first-frame reveal is still paused: suppress only the SDK's central play icon
   while our readable title owns the stage. Normal controls/recovery are not replaced. */
.cdf-experience[data-state="chapter"] .vjs-big-play-button { display: none; }
.cdf-experience:is([data-state="chapter"], [data-state="playing"]) .cdf-experience__disclaimer { visibility: visible; }
.cdf-experience .cdp-playlist { display: block; max-width: 100%; }
.cdf-experience .cdp-playlist .cdp-player { position: relative; max-width: 100%; border: 0; padding: 0; background: transparent; border-radius: 0; }
.cdf-experience .cdp-player__stage { width: 100%; aspect-ratio: 9 / 16; max-height: calc(100svh - 138px); border-radius: 0; }
.cdf-experience .cdp-playlist__current, .cdf-experience .cdp-playlist__chapters { display: none; }
.cdf-experience .cdp-playlist__controls { display: none; }
.cdf-experience [data-playlist-prev], .cdf-experience [data-playlist-next], .cdf-experience [data-playlist-retry] { display: none; }
/* Reuse the existing replay action, inside the picture and only after the last segment.
   Recovery remains on the existing card; no persistent chapter navigation or layout shift. */
.cdf-experience[data-playback-state="ended"] .cdp-playlist__controls { position: absolute; inset: auto 16px 72px; z-index: 101; display: flex; justify-content: center; margin: 0; }
.cdf-experience .cdp-playlist__controls [data-playlist-start] { flex: 0 1 auto; padding-inline: 20px; }
.cdf-experience .cdp-playlist button { border-color: #e8c17d66; color: #ead6ad; background: #101b29; font-size: 13px; }
/* Do not let the shared diagnostic button skin box in the SDK's own icons.
   TCPlayer continues to own auto-hide, pointer/keyboard controls and fullscreen. */
.cdf-experience .vjs-control-bar button { min-height: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font-size: inherit; }
/* Consumer chapter cards reuse the already-loaded plate and the adapter's configurable hold.
   No extra media, repeated ceremony or changes to the diagnostic playlist. */
.cdf-experience .cdp-playlist__card { overflow: hidden; isolation: isolate; gap: 18px; background: #061019; color: #ead6ad; }
.cdf-experience .cdp-playlist__card::before { content: ""; position: absolute; top: 50%; left: 50%; width: 115%; aspect-ratio: 1; z-index: -1; pointer-events: none; opacity: .2; transform: translate(-50%,-50%); background: url("gate/daily-calendar-plate.png") 50% 72.812052% / 189.555556% 409.777778% no-repeat; -webkit-mask-image: radial-gradient(closest-side, #000 22%, transparent 100%); mask-image: radial-gradient(closest-side, #000 22%, transparent 100%); }
.cdf-experience .cdp-playlist__card-kicker { display: none; }
.cdf-experience .cdp-playlist__card strong { position: relative; max-width: 100%; color: #ead6ad; font: 400 clamp(20px,7cqw,30px)/1.8 STKaiti, KaiTi, "Noto Serif CJK SC", serif; letter-spacing: .16em; text-indent: .16em; text-wrap: balance; text-shadow: 0 2px 16px #000; }
/* A small self-hosted OFL brush subset; never replace the date or recovery copy.
   Enable only when loaded before the user starts, avoiding mid-title font swaps. */
.cdf-experience[data-title-font="ready"] .cdp-playlist__card strong { font-family: "CDF Ritual Title", STKaiti, KaiTi, serif; font-size: clamp(24px,9cqw,38px); letter-spacing: .12em; text-indent: .12em; }
/* Reuse the opening light and the existing plate's edge clouds. This single
   decorative layer follows the adapter's title window, not a second timer. */
.cdf-chapter-atmosphere { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: 0; }
.cdf-chapter-atmosphere::before { content: ""; position: absolute; top: -25%; left: -32%; width: 110%; height: 148%; transform: rotate(-22deg); transform-origin: 50% 0; background: var(--gate-light); opacity: .95; -webkit-mask-image: linear-gradient(#0000, #000 15%, #000 38%, #0000 90%); mask-image: linear-gradient(#0000, #000 15%, #000 38%, #0000 90%); }
.cdf-chapter-atmosphere::after { content: ""; position: absolute; inset: -5%; background: url("gate/daily-calendar-plate.png") center / 100% 100% no-repeat; opacity: .65; clip-path: inset(38% 0 0); -webkit-mask-image: radial-gradient(ellipse 57% 38% at 50% 63%, transparent 82%, #000 100%); mask-image: radial-gradient(ellipse 57% 38% at 50% 63%, transparent 82%, #000 100%); }
.cdf-experience[data-chapter-flow="true"] .cdf-chapter-atmosphere { animation: cdf-chapter-appear 650ms ease-out both, cdf-opening-title-out 800ms ease-in-out calc(var(--gate-chapter-duration, 2900ms) - 900ms) forwards; }
.cdf-experience[data-chapter-flow="true"] .cdf-chapter-atmosphere::before { animation: cdf-chapter-light var(--gate-chapter-duration, 2900ms) ease-in-out both; }
.cdf-experience[data-chapter-flow="true"] .cdf-chapter-atmosphere::after { animation: cdf-chapter-cloud var(--gate-chapter-duration, 2900ms) ease-in-out both; }
.cdf-experience[data-opening-flow="true"] .cdf-chapter-atmosphere { opacity: 1; animation: none; }
.cdf-experience[data-opening-flow="true"] .cdf-chapter-atmosphere::before { animation: cdf-chapter-light calc(var(--gate-transition-duration, 1100ms) + var(--gate-title-duration, 4500ms)) ease-in-out both; }
.cdf-experience[data-opening-flow="true"] .cdf-chapter-atmosphere::after { animation: cdf-chapter-cloud calc(var(--gate-transition-duration, 1100ms) + var(--gate-title-duration, 4500ms)) ease-in-out both; }
.cdf-experience[data-opening-flow="true"][data-opening-reveal] .cdf-chapter-atmosphere { animation: cdf-opening-title-out 400ms ease-in-out calc(var(--gate-title-duration, 4500ms) - 400ms) both; }
@keyframes cdf-chapter-light { from { transform: rotate(-24deg); } to { transform: rotate(-19deg); } }
@keyframes cdf-chapter-cloud { from { transform: translate(-2%,3%); } to { transform: translate(2%,-1%); } }
.cdf-experience .cdp-playlist__card:is([data-state="error"], [data-state="blocked"]) .cdf-chapter-atmosphere { display: none; }
@supports not ((mask-image: radial-gradient(black, transparent)) or (-webkit-mask-image: radial-gradient(black, transparent))) { .cdf-chapter-atmosphere::after { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .cdf-experience .cdf-chapter-atmosphere, .cdf-experience .cdf-chapter-atmosphere::before, .cdf-experience .cdf-chapter-atmosphere::after { animation: none !important; }
  .cdf-experience .cdp-playlist__card[data-state="intro"] .cdf-chapter-atmosphere { opacity: 1; }
}
.cdf-experience .cdp-playlist__card strong::before, .cdf-experience .cdp-playlist__card strong::after { content: ""; display: block; width: 48px; height: 1px; margin: 22px auto; background: linear-gradient(90deg, transparent, #bf985b, transparent); }
.cdf-experience .cdp-playlist__card[data-state="intro"] strong { animation: cdf-chapter-appear 650ms ease-out both; }
.cdf-experience[data-chapter-flow="true"] .cdp-playlist__card strong { animation: cdf-chapter-appear 650ms ease-out both, cdf-opening-title-out 800ms ease-in-out calc(var(--gate-chapter-duration, 2900ms) - 900ms) forwards; }
.cdf-experience .cdp-playlist__card[data-state="intro"]::before { animation: cdf-chapter-mist 2s ease-out both; }
.cdf-experience .cdp-playlist__card-note { color: #c7bba6; }
.cdf-experience .cdp-playlist__card-note:empty { display: none; }
.cdf-experience .cdp-playlist__card button:focus-visible { outline-color: #ffe4a2; }
@keyframes cdf-chapter-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes cdf-chapter-mist { from { opacity: .08; } to { opacity: .2; } }
/* Keep 2500ms reading, then 1600ms for stroke disintegration, then a 400ms
   first-frame reveal. The existing adapter hold is 4500ms;
   media stays paused at zero. No new player, clock, or playback path. */
.cdf-experience[data-opening-flow="true"] .cdp-playlist__card::before { animation: cdf-opening-current calc(var(--gate-transition-duration, 1100ms) + var(--gate-title-duration, 4500ms)) ease-out both; }
/* Attribute presence also covers the no-decoded-frame fallback: text exits while
   its opaque backdrop remains. Keep the completed animation through playing so
   the title cannot reappear during the adapter's final 160ms card fade. */
.cdf-experience[data-opening-flow="true"][data-opening-reveal] .cdp-playlist__card strong { animation: cdf-opening-title-dissolve 1600ms linear calc(var(--gate-title-duration, 4500ms) - 2000ms) both; }
/* Crossfade ink into the exact sampled strokes before releasing those strokes.
   The semantic title and its rules remain in place; fallback keeps ordinary ink. */
.cdf-experience[data-opening-flow="true"][data-opening-reveal][data-dust-ready="true"] .cdp-playlist__card strong { animation: cdf-opening-title-dissolve 1600ms linear calc(var(--gate-title-duration, 4500ms) - 2000ms) both, cdf-dust-ink-out 140ms linear calc(var(--gate-title-duration, 4500ms) - 2000ms) forwards; }
@keyframes cdf-opening-title-dissolve { 0% { opacity: 1; animation-timing-function: ease-in-out; } 62.5%, 100% { opacity: 0; } }
@keyframes cdf-dust-ink-out { from { color: #ead6ad; } to { color: transparent; } }
.cdf-experience .cdf-title-dust { position: absolute; pointer-events: none; }
.cdf-experience[data-opening-reveal="true"] .cdp-playlist__card { background: transparent; }
.cdf-experience[data-opening-reveal="true"] .cdp-playlist__card::after { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: #061019; animation: cdf-opening-unveil 400ms ease-in-out calc(var(--gate-title-duration, 4500ms) - 400ms) both; }
.cdf-experience[data-opening-reveal="true"] .cdp-playlist__card::before { animation: cdf-opening-current calc(var(--gate-transition-duration, 1100ms) + var(--gate-title-duration, 4500ms)) ease-out both, cdf-opening-texture-out 400ms ease-in-out calc(var(--gate-title-duration, 4500ms) - 400ms) both; }
@keyframes cdf-opening-current { from { transform: translate(-50%,-50%) rotate(-6deg) scale(1.06); } to { transform: translate(-50%,-50%) rotate(5deg) scale(1.16); } }
@keyframes cdf-opening-title-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes cdf-opening-unveil { from { opacity: 1; } to { opacity: 0; } }
@keyframes cdf-opening-texture-out { from { opacity: .2; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cdf-experience .cdf-title-dust { display: none; }
  .cdf-experience .cdp-playlist__card::before, .cdf-experience .cdp-playlist__card::after { animation: none !important; }
  .cdf-experience[data-opening-reveal="true"] .cdp-playlist__card { background: #061019; }
  .cdf-experience[data-opening-reveal="true"] .cdp-playlist__card::after { display: none; }
}
.cdf-sample-page :focus-visible { outline: 2px solid #ffe4a2; outline-offset: 3px; }
/* Keep the whole opening plate accessible on short landscape screens, before and after reveal. */
@media (orientation: landscape) and (max-height: 500px) { .cdf-experience, .cdf-sample-header { width: min(100%,360px); } .cdf-experience { min-height: calc(min(100vw,360px) * 1844 / 853); } }
@media (prefers-reduced-motion: reduce) { .cdf-gate, .cdf-gate__calendar, .cdf-experience__playback { transition: none !important; } .cdf-experience[data-ceremony="true"] .cdf-gate__scene, .cdf-experience[data-ceremony="true"] .cdf-gate__calendar, .cdf-experience[data-ceremony="true"] .cdf-gate__rotor, .cdf-experience[data-ceremony="true"] .cdf-gate::after, .cdf-experience[data-exit="true"] .cdf-gate__plate, .cdf-experience[data-exit="true"] .cdf-gate__mist { animation: none !important; } }
@supports not ((mask-image: radial-gradient(black, transparent)) or (-webkit-mask-image: radial-gradient(black, transparent))) { .cdf-gate__rotor, .cdf-gate__mist { display: none; } }