/* ============================================================================= occasions-2026.css — the storefront dressed for an occasion. Loaded only while an occasion is live (partials/occasion_head). Everything is scoped under html.occ-on and one class per element the owner switched on (occ-x-ribbon, occ-x-popup, occ-x-ambient, occ-x-hero, occ-x-cards, occ-x-footer — own prefix: a switch class on must never share a name with a component class, or the component's rules style ), so a switch in لوحة التحكم ← المناسبات والأعياد removes its piece whole. Palette tokens come from the occasion: --occ-1 (primary), --occ-deep, --occ-mid, --occ-accent, --occ-light (+ -rgb triplets). Every rule that sets a font size uses a class selector: the storefront's style.css sizes bare p / a / span at 16px, and a class beats that. ========================================================================== */ html.occ-on { --occ-font: 'Tajawal', 'Cairo', 'Inter', system-ui, sans-serif; --occ-ease: cubic-bezier(.2, .8, .2, 1); /* Najdi Sadu band: a row of triangles with a diamond between each pair. */ --occ-sadu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='10' viewBox='0 0 24 10'%3E%3Cpath d='M0 10L6 3l6 7zM12 10l6-7 6 7z'/%3E%3Cpath d='M12 0l2.4 2.4L12 4.8 9.6 2.4zM0 0l2.4 2.4L0 4.8zM24 0v4.8l-2.4-2.4z'/%3E%3C/svg%3E"); /* Eight-pointed star lattice for the welcome card's texture. */ --occ-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1'%3E%3Cpath d='M28 8l6 14 14 6-14 6-6 14-6-14-14-6 14-6z'/%3E%3Crect x='18' y='18' width='20' height='20' transform='rotate(45 28 28)'/%3E%3C/g%3E%3C/svg%3E"); } html.occ-on ::selection { background: var(--occ-1); color: #fff; } /* Inner spans take their size from their piece — style.css sizes every bare span at 16px, which would blow up a 12px badge. */ html.occ-on .occ-ribbon span, html.occ-on .occ-pop span, html.occ-on .occ-band span { font-size: inherit; line-height: inherit; } /* rtl.css sets `text-align: right` on every element directly, which breaks inheritance — the welcome card would stop being centred. Pieces pass their alignment down again. */ .occ-ribbon *, .occ-pop *, .occ-band * { text-align: inherit; } .occ-pop__card:focus { outline: none; } .occ-emb { display: block; width: 100%; height: 100%; } /* ─────────────────────────────────────────────── the greeting ribbon ── */ html.occ-on .occ-ribbon { position: relative; z-index: 60; display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 7px 48px 11px; overflow: hidden; color: #fff; font-family: var(--occ-font); background: var(--occ-deep); isolation: isolate; } html.occ-ribbon-x .occ-ribbon { display: none; } /* The colour moves: a slow flow of the palette across the bar… */ html.occ-on .occ-ribbon__flow { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, var(--occ-deep) 0%, var(--occ-1) 18%, var(--occ-mid) 32%, var(--occ-1) 46%, var(--occ-deep) 60%, var(--occ-1) 76%, var(--occ-mid) 88%, var(--occ-deep) 100%); background-size: 220% 100%; animation: occ-flow 16s linear infinite; } /* …and a sheen passes over it every few seconds. */ html.occ-on .occ-ribbon__shine { position: absolute; top: 0; bottom: 0; left: 0; width: 38%; z-index: -1; background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .26) 50%, transparent 100%); transform: translateX(-160%) skewX(-18deg); animation: occ-sheen 6.5s var(--occ-ease) 1.2s infinite; } html[dir="rtl"].occ-on .occ-ribbon__shine { animation-name: occ-sheen-rtl; } html.occ-on .occ-ribbon__in { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 1240px; } html.occ-on .occ-ribbon__emb { flex: 0 0 auto; width: 26px; height: 26px; color: #fff; transform-origin: 50% 95%; animation: occ-sway 4.2s ease-in-out infinite; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25)); } html.occ-on .occ-ribbon .occ-ribbon__t { flex: 0 0 auto; font-size: 14.5px; font-weight: 800; letter-spacing: .2px; white-space: nowrap; color: #fff; } html.occ-on .occ-ribbon .occ-ribbon__num { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 1px 10px; border-radius: 999px; background: #fff; color: var(--occ-1); font-size: 13px; font-weight: 900; line-height: 1.6; box-shadow: 0 0 0 3px rgba(255, 255, 255, .22); animation: occ-glow 2.8s ease-in-out infinite; } html.occ-on .occ-ribbon .occ-ribbon__m { min-width: 0; font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, .92); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html.occ-on .occ-ribbon .occ-ribbon__m::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-inline-end: 10px; border-radius: 50%; background: rgba(255, 255, 255, .7); vertical-align: middle; } html.occ-on .occ-ribbon__sadu { position: absolute; inset-inline: 0; bottom: 0; height: 6px; background: rgba(255, 255, 255, .9); -webkit-mask: var(--occ-sadu) repeat-x left bottom / 14.4px 6px; mask: var(--occ-sadu) repeat-x left bottom / 14.4px 6px; animation: occ-sadu 30s linear infinite; } html.occ-on .occ-ribbon__x { position: absolute; inset-inline-end: 10px; top: calc(50% - 2px); transform: translateY(-50%); display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 12px; cursor: pointer; transition: background .2s, transform .2s; } html.occ-on .occ-ribbon__x:hover { background: rgba(255, 255, 255, .26); } html.occ-on .occ-ribbon__x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } @media (max-width: 767.98px) { html.occ-on .occ-ribbon { padding-inline: 12px 44px; justify-content: flex-start; } html.occ-on .occ-ribbon .occ-ribbon__m { display: none; } } /* ───────────────────────────────────────── the ambient sky (canvas) ── */ .occ-sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; } /* While the welcome card is up, the confetti falls in front of it. */ .occ-sky.is-top { z-index: 2147483100; } body.m-nav-open .occ-sky:not(.is-top) { opacity: 0; transition: opacity .25s; } /* ─────────────────────────────────────────────── hanging garland ── */ /* Each occasion's own decorations (occasions-decor-2026.js), hung at the top of the first section under the header. Never takes a tap. */ .occ-garland { position: absolute; top: 0; left: 0; right: 0; z-index: 6; line-height: 0; pointer-events: none; } .occ-garland svg { display: block; overflow: visible; } .occ-garland * { pointer-events: none; } .occ-g-flutter { transform-box: fill-box; transform-origin: 50% 0; animation: occ-g-flutter 3.4s ease-in-out infinite alternate; } .occ-g-swing { transform-box: fill-box; transform-origin: 50% 0; animation: occ-g-swing 5.5s ease-in-out infinite alternate; } .occ-g-bob { animation: occ-g-bob 4.5s ease-in-out infinite alternate; } .occ-g-twirl { transform-box: fill-box; transform-origin: 50% 50%; animation: occ-g-twirl 6s ease-in-out infinite; } .occ-g-twinkle { transform-box: fill-box; transform-origin: 50% 50%; animation: occ-glint 2.6s ease-in-out infinite; } .occ-g-bulb { stroke: rgba(255, 220, 120, .35); stroke-width: 3px; animation: occ-g-bulb 2.6s ease-in-out infinite; } .occ-g-flame { animation: occ-flicker 2.8s ease-in-out infinite; } .occ-g-halo { animation: occ-g-halo 3.6s ease-in-out infinite; } /* On the welcome card the garland hangs from the card's top edge, under the close button. */ .occ-pop__garland { z-index: 1; } /* ─────────────────────────────────────────────── the welcome card ── */ .occ-pop { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 16px; background: rgba(var(--occ-deep-rgb), .55); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: 0; /* Never in the way unless it is actually open: an overlay that is fading out (or somehow never opened) lets every tap and scroll through. */ pointer-events: none; transition: opacity .4s ease; font-family: var(--occ-font); } .occ-pop.is-open { opacity: 1; pointer-events: auto; } .occ-pop[hidden] { display: none; } .occ-pop__card { position: relative; width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: hidden auto; overscroll-behavior: contain; border-radius: 28px; color: #fff; text-align: center; background: radial-gradient(120% 80% at 50% 0%, rgba(var(--occ-mid-rgb), 1) 0%, rgba(var(--occ-1-rgb), 1) 42%, var(--occ-deep) 100%); box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .14); transform: translateY(28px) scale(.92); transition: transform .6s cubic-bezier(.2, .9, .25, 1.25); } .occ-pop.is-open .occ-pop__card { transform: none; } .occ-pop__lattice { position: absolute; inset: 0; opacity: .07; background-image: var(--occ-lattice); background-size: 56px 56px; animation: occ-drift 60s linear infinite; pointer-events: none; } .occ-pop__art { position: relative; height: 218px; display: grid; place-items: center; } .occ-pop__rays { position: absolute; top: 50%; left: 50%; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .12) 0deg 7deg, transparent 7deg 18deg); -webkit-mask: radial-gradient(circle, #000 22%, transparent 66%); mask: radial-gradient(circle, #000 22%, transparent 66%); animation: occ-spin 48s linear infinite; } .occ-pop__ring { position: absolute; top: 50%; left: 50%; width: 168px; height: 168px; margin: -96px 0 0 -84px; animation: occ-spin 22s linear infinite reverse; } .occ-pop__ring circle { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.4; stroke-dasharray: 2 7; stroke-linecap: round; } .occ-pop__ring circle + circle { stroke: rgba(255, 255, 255, .22); stroke-dasharray: none; } .occ-pop__halo { position: absolute; top: 50%; left: 50%; width: 130px; height: 130px; margin: -77px 0 0 -65px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 68%); animation: occ-breath 3.6s ease-in-out infinite; } .occ-pop__emb { position: relative; width: 92px; height: 92px; margin-top: -24px; color: #fff; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35)); animation: occ-rise 1s .15s cubic-bezier(.2, .9, .3, 1.3) both; } .occ-pop__emb .occ-emb__frond { transform-box: fill-box; transform-origin: 0 100%; animation: occ-frond 3.6s 1.2s ease-in-out infinite; } .occ-pop__emb .occ-emb__star { transform-box: fill-box; transform-origin: center; animation: occ-glint 2.6s 1s ease-in-out infinite; } html.occ-on .occ-pop .occ-pop__num { position: absolute; bottom: 10px; left: 0; right: 0; font-size: 50px; font-weight: 900; line-height: 1; letter-spacing: 1px; color: #fff; text-shadow: 0 6px 24px rgba(0, 0, 0, .35), 0 0 22px rgba(255, 255, 255, .25); animation: occ-num .9s .45s cubic-bezier(.2, .9, .3, 1.35) both; } .occ-pop__body { position: relative; padding: 8px 28px 24px; } html.occ-on .occ-pop .occ-pop__badge { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; padding: 5px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); font-size: 12.5px; font-weight: 800; letter-spacing: .3px; color: #fff; animation: occ-up .6s .6s both; } html.occ-on .occ-pop .occ-pop__title { margin: 0 0 10px; font-family: var(--occ-font); font-size: 28px; font-weight: 800; line-height: 1.35; color: #fff; animation: occ-up .6s .72s both; } html.occ-on .occ-pop .occ-pop__msg { margin: 0 0 20px; font-size: 15.5px; font-weight: 500; line-height: 1.85; color: rgba(255, 255, 255, .9); animation: occ-up .6s .84s both; } .occ-pop__acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; animation: occ-up .6s .96s both; } html.occ-on .occ-pop .occ-pop__cta, html.occ-on .occ-pop .occ-pop__close { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 14px; font-family: var(--occ-font); font-size: 15px; font-weight: 800; text-decoration: none; cursor: pointer; transition: transform .2s var(--occ-ease), box-shadow .2s, background .2s; } html.occ-on .occ-pop .occ-pop__cta { border: 0; background: #fff; color: var(--occ-1); box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .55); } html.occ-on .occ-pop .occ-pop__cta:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -12px rgba(0, 0, 0, .6); color: var(--occ-deep); } html.occ-on .occ-pop .occ-pop__close { border: 1px solid rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .1); color: #fff; } html.occ-on .occ-pop .occ-pop__close:hover { background: rgba(255, 255, 255, .2); } .occ-pop__cta:focus-visible, .occ-pop__close:focus-visible, .occ-pop__x:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } .occ-pop__x { position: absolute; top: 14px; inset-inline-end: 14px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 14px; cursor: pointer; transition: background .2s, transform .3s var(--occ-ease); } .occ-pop__x:hover { background: rgba(255, 255, 255, .26); transform: rotate(90deg); } .occ-pop__sadu { height: 14px; background: rgba(255, 255, 255, .92); -webkit-mask: var(--occ-sadu) repeat-x left bottom / 33.6px 14px; mask: var(--occ-sadu) repeat-x left bottom / 33.6px 14px; animation: occ-sadu 40s linear infinite; } @media (max-width: 575.98px) { .occ-pop { align-items: end; padding: 0; } .occ-pop__card { width: 100%; border-radius: 26px 26px 0 0; max-height: 92vh; } .occ-pop__art { height: 190px; } html.occ-on .occ-pop .occ-pop__title { font-size: 24px; } html.occ-on .occ-pop .occ-pop__cta, html.occ-on .occ-pop .occ-pop__close { flex: 1 1 140px; } } /* ─────────────────────────────────────────────── the hero badge ── */ /* Two small pieces placed straight into the page's hero — no layer over it. (A full-size wash layer used to sit here; on the live landing page it ended up covering the page and swallowing scrolls and taps, so it is gone.) Both are pointer-events: none, !important, so no theme rule can ever make them catch a tap. */ html.occ-on .occ-hero-badge, html.occ-on .occ-hero-line, html.occ-on .occ-hero-badge *, html.occ-on .occ-hero-line * { pointer-events: none !important; } html.occ-on .occ-hero-line { position: absolute !important; inset-inline: 0; bottom: 0; z-index: 6; height: 5px; background: linear-gradient(90deg, var(--occ-1), #fff, var(--occ-mid), #fff, var(--occ-1)); background-size: 200% 100%; animation: occ-flow 7s linear infinite; } html.occ-on .occ-hero-badge { position: absolute !important; top: 16px; inset-inline-end: 16px; z-index: 6; display: inline-flex; align-items: center; gap: 9px; max-width: calc(100% - 32px); padding: 7px 14px 7px 8px; border-radius: 999px; background: rgba(var(--occ-deep-rgb), .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .3); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6); color: #fff; font-family: var(--occ-font); font-size: 13.5px; font-weight: 800; line-height: 1.4; white-space: nowrap; animation: occ-drop .9s .4s cubic-bezier(.2, .9, .3, 1.3) both; } html[dir="rtl"].occ-on .occ-hero-badge { padding: 7px 8px 7px 14px; } html.occ-on .occ-hero-badge span { font-size: inherit; line-height: inherit; text-align: inherit; } .occ-hero__ic { display: grid; place-items: center; width: 32px; height: 32px; padding: 5px; border-radius: 50%; background: #fff; color: var(--occ-1); box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); animation: occ-glow 2.8s ease-in-out infinite; } html.occ-on .occ-hero-badge .occ-hero__num { unicode-bidi: isolate; padding: 0 9px; border-radius: 999px; background: #fff; color: var(--occ-1); font-size: 13px; font-weight: 900; line-height: 1.7; } @media (max-width: 575.98px) { html.occ-on .occ-hero-badge { top: 10px; inset-inline-end: 10px; font-size: 12px; } .occ-hero__ic { width: 26px; height: 26px; padding: 4px; } } /* ─────────────────────────────────────────────── the footer band ── */ .occ-band { position: relative; height: 132px; margin-top: 24px; overflow: hidden; color: #fff; font-family: var(--occ-font); pointer-events: none; } .occ-band__waves { position: absolute; inset-inline: 0; bottom: 0; width: 100%; height: 100%; } .occ-band__waves path { transform-box: fill-box; } .occ-band__w1 { fill: var(--occ-mid); opacity: .35; animation: occ-wave 14s ease-in-out infinite alternate; } .occ-band__w2 { fill: var(--occ-1); opacity: .7; animation: occ-wave 11s ease-in-out -3s infinite alternate-reverse; } .occ-band__w3 { fill: var(--occ-band-base, var(--occ-deep)); } /* The band took the footer's top margin (occasions-2026.js); left on the footer it opens a white strip between the band and the footer. */ html.occ-on .occ-band + footer { margin-top: 0 !important; } .occ-band__palms { position: absolute; inset-inline: 0; bottom: 0; height: 86px; display: flex; align-items: flex-end; justify-content: space-around; padding-inline: 2%; } .occ-band__palm { display: block; color: rgba(255, 255, 255, .16); transform-origin: 50% 100%; animation: occ-sway 6s ease-in-out infinite; } .occ-band__palm:nth-child(odd) { animation-duration: 7.4s; animation-direction: alternate-reverse; } html.occ-on .occ-band .occ-band__t { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; padding: 7px 18px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); font-size: 15px; font-weight: 800; color: #fff; white-space: nowrap; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .occ-band__t .occ-emb { width: 20px; height: 20px; } /* Ramadan and the Eids: a skyline of domes and minarets, lit windows and the crescent above — in place of the palms. */ .occ-band__city { position: absolute; inset-inline: 0; bottom: 0; width: 100%; height: 78px; } .occ-band__city-s { fill: var(--occ-band-base, var(--occ-deep)); } .occ-band__win { fill: rgba(255, 226, 150, .8); animation: occ-g-bulb 4.2s ease-in-out infinite; } .occ-band__moon { position: absolute; top: 10px; inset-inline-end: 9%; width: 30px; height: 30px; color: #FDE68A; filter: drop-shadow(0 0 10px rgba(253, 230, 138, .75)); animation: occ-glint 4.5s ease-in-out infinite; } .occ-band__moon .occ-emb__star { opacity: .9; } .occ-band__sadu { position: absolute; inset-inline: 0; bottom: 0; height: 8px; background: rgba(255, 255, 255, .28); -webkit-mask: var(--occ-sadu) repeat-x left bottom / 19.2px 8px; mask: var(--occ-sadu) repeat-x left bottom / 19.2px 8px; } @media (max-width: 575.98px) { .occ-band { height: 104px; } .occ-band__palms { height: 64px; } html.occ-on .occ-band .occ-band__t { font-size: 13px; bottom: 16px; } .occ-band__city { height: 64px; } .occ-band__moon { width: 24px; height: 24px; top: 6px; } } /* ─────────────────────────────────────────────── the dish cards ── */ html.occ-x-cards .qrm-card, html.occ-x-cards .lp-dish, html.occ-x-cards .nx-product-card, html.occ-x-cards .th1-card, html.occ-x-cards .th3-card { transition: box-shadow .3s var(--occ-ease), transform .3s var(--occ-ease); } html.occ-x-cards .qrm-card:hover, html.occ-x-cards .lp-dish:hover, html.occ-x-cards .nx-product-card:hover, html.occ-x-cards .th1-card:hover, html.occ-x-cards .th3-card:hover { box-shadow: 0 0 0 1.5px rgba(var(--occ-1-rgb), .55), 0 20px 40px -18px rgba(var(--occ-1-rgb), .55); } /* A thin line of the occasion's colours where the photo meets the text. */ html.occ-x-cards .qrm-card__body, html.occ-x-cards .lp-dish__body, html.occ-x-cards .nx-product-card__body, html.occ-x-cards .th1-card__b, html.occ-x-cards .th3-card__b { background-image: linear-gradient(90deg, var(--occ-1), var(--occ-mid) 30%, var(--occ-light) 50%, var(--occ-mid) 70%, var(--occ-1)); background-size: 200% 3px; background-repeat: no-repeat; background-position: 0 0; animation: occ-line 9s linear infinite; } /* ─────────────────────────────────────────────── admin preview bar ── */ .occ-preview { position: fixed; bottom: 16px; left: 50%; z-index: 2147482000; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 12px; max-width: calc(100vw - 24px); padding: 8px 10px 8px 16px; border-radius: 999px; background: #111827; color: #fff; box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .6); font-family: var(--occ-font); } html.occ-on .occ-preview .occ-preview__t { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; } .occ-preview__dot { width: 9px; height: 9px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, .25); animation: occ-glow 1.8s ease-in-out infinite; flex: 0 0 auto; } html.occ-on .occ-preview .occ-preview__a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; text-decoration: none; } html.occ-on .occ-preview .occ-preview__a:hover { background: rgba(255, 255, 255, .2); } html.occ-on .occ-preview .occ-preview__a--end { background: #f59e0b; color: #111827; } @media (max-width: 575.98px) { .occ-preview { bottom: 78px; } html.occ-on .occ-preview .occ-preview__t { display: none; } } /* ─────────────────────────────────────────────── motion ── */ @keyframes occ-flow { to { background-position: -220% 0; } } @keyframes occ-line { to { background-position: -200% 0; } } @keyframes occ-sheen { 0%, 50% { transform: translateX(-160%) skewX(-18deg); } 100% { transform: translateX(420%) skewX(-18deg); } } @keyframes occ-sheen-rtl { 0%, 50% { transform: translateX(420%) skewX(-18deg); } 100% { transform: translateX(-160%) skewX(-18deg); } } @keyframes occ-sweep { 0%, 55% { transform: translateX(-160%) skewX(-18deg); } 100% { transform: translateX(460%) skewX(-18deg); } } @keyframes occ-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } } @keyframes occ-glow { 0%, 100% { box-shadow: 0 0 0 3px rgba(255, 255, 255, .22); } 50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, .06), 0 0 18px rgba(255, 255, 255, .45); } } @keyframes occ-sadu { to { -webkit-mask-position: 480px bottom; mask-position: 480px bottom; } } @keyframes occ-spin { to { transform: rotate(360deg); } } @keyframes occ-breath { 0%, 100% { transform: scale(.92); opacity: .8; } 50% { transform: scale(1.08); opacity: 1; } } @keyframes occ-rise { from { transform: translateY(26px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes occ-num { from { transform: translateY(18px) scale(.4); opacity: 0; letter-spacing: 12px; } to { transform: none; opacity: 1; } } @keyframes occ-up { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes occ-drop { from { transform: translateY(-18px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes occ-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes occ-frond { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-3deg); } } @keyframes occ-glint { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: .75; } } @keyframes occ-drift { to { background-position: 560px 560px; } } @keyframes occ-wave { from { transform: translateX(-2%); } to { transform: translateX(2%); } } @keyframes occ-g-flutter { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } } @keyframes occ-g-swing { from { transform: rotate(-3.5deg); } to { transform: rotate(3.5deg); } } @keyframes occ-g-bob { from { transform: translateY(0); } to { transform: translateY(-5px); } } @keyframes occ-g-twirl { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(-1); } } @keyframes occ-g-bulb { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @keyframes occ-g-halo { 0%, 100% { opacity: .7; } 50% { opacity: 1; } } @keyframes occ-flicker { 0%, 100% { opacity: .55; } 40% { opacity: .8; } 60% { opacity: .5; } } @keyframes occ-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: .9; } } @media (prefers-reduced-motion: reduce) { html.occ-on .occ-ribbon__flow, html.occ-on .occ-ribbon__shine, html.occ-on .occ-ribbon__emb, html.occ-on .occ-ribbon .occ-ribbon__num, html.occ-on .occ-ribbon__sadu, .occ-g-flutter, .occ-g-swing, .occ-g-bob, .occ-g-twirl, .occ-g-twinkle, .occ-g-bulb, .occ-g-flame, .occ-g-halo, .occ-band__win, .occ-band__moon, .occ-pop__lattice, .occ-pop__rays, .occ-pop__ring, .occ-pop__halo, .occ-pop__emb, .occ-pop__emb .occ-emb__frond, .occ-pop__emb .occ-emb__star, html.occ-on .occ-pop .occ-pop__num, html.occ-on .occ-pop .occ-pop__badge, html.occ-on .occ-pop .occ-pop__title, html.occ-on .occ-pop .occ-pop__msg, .occ-pop__acts, .occ-pop__sadu, html.occ-on .occ-hero-line, html.occ-on .occ-hero-badge, .occ-hero__ic, .occ-band__w1, .occ-band__w2, .occ-band__palm, html.occ-x-cards .qrm-card__body, html.occ-x-cards .lp-dish__body, html.occ-x-cards .nx-product-card__body, html.occ-x-cards .th1-card__b, html.occ-x-cards .th3-card__b, .occ-preview__dot { animation: none !important; } .occ-pop, .occ-pop__card { transition: none; } } @media print { .occ-ribbon, .occ-sky, .occ-garland, .occ-pop, .occ-hero-badge, .occ-hero-line, .occ-band, .occ-preview { display: none !important; } }