/* ==========================================================
   Occasions: photo stage + tabs (assets/js/occasions.js).
   The section's glow takes the colour of the open occasion.
   ========================================================== */
@property --oc { syntax: '<color>'; inherits: true; initial-value: #ffb703; }

.occasions { position: relative; overflow: clip; isolation: isolate; padding: 84px max(20px, 5vw) 96px; background: #0a0912; color: #fff; transition: --oc 1.2s ease; }
.occasions:before { content: ""; position: absolute; inset: -20% -10% auto auto; z-index: -1; width: 70%; height: 120%; background: radial-gradient(closest-side, color-mix(in srgb, var(--oc) 26%, transparent), transparent); filter: blur(20px); animation: occDrift 16s ease-in-out infinite alternate; }
.occasions:after { content: ""; position: absolute; left: -10%; bottom: -30%; z-index: -1; width: 55%; height: 80%; background: radial-gradient(closest-side, #3d5afe22, transparent); }
@keyframes occDrift { to { transform: translate3d(-8%, 6%, 0) scale(1.1); } }

.occ-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px clamp(30px, 6vw, 110px); align-items: end; margin-bottom: 44px; }
.occ-head h2 { font-size: clamp(46px, 5.6vw, 88px); font-weight: 600; }
.occ-head h2 em { font-family: inherit; font-weight: 400; background: linear-gradient(90deg, #ffd23f, var(--oc)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.occ-head > p { max-width: 460px; margin: 0; color: #b4bccd; line-height: 1.75; }

.occ-main { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: stretch; }

/* ---------- Stage ---------- */
.occ-stage { --px: 0; --py: 0; position: relative; min-height: 540px; border-radius: 28px; overflow: hidden; background: #15131f; box-shadow: 0 60px 120px -60px color-mix(in srgb, var(--oc) 70%, #000); clip-path: inset(100% 0 0 0 round 28px); transition: clip-path 1.4s var(--ease-cine), box-shadow 1.2s; }
.occasions.seen .occ-stage { clip-path: inset(0 0 0 0 round 28px); }
.occ-imgs { position: absolute; inset: -3%; transform: translate3d(calc(var(--px) * -18px), calc(var(--py) * -14px), 0); transition: transform .8s var(--ease-out); }
.occ-imgs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; clip-path: inset(0 0 0 100%); transform: scale(1.18); transition: clip-path 1.15s var(--ease-cine), transform 1.15s var(--ease-cine); }
.occ-imgs img.prev { z-index: 1; clip-path: inset(0 0 0 0); transform: scale(1.03); filter: brightness(.6); transition: filter 1s, transform 1.15s var(--ease-cine); }
.occ-imgs img.on { z-index: 2; clip-path: inset(0 0 0 0); transform: scale(1.04); transition: clip-path 1.15s var(--ease-cine), transform 7s var(--ease-out); }
.occasions:not(.seen) .occ-imgs img.on { transform: scale(1.25); }
.occ-stage:after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(0deg, #0a0912f0 4%, #0a091266 34%, transparent 58%), linear-gradient(160deg, color-mix(in srgb, var(--oc) 30%, transparent), transparent 40%); }

/* Autoplay bars, story style */
.occ-bars { position: absolute; z-index: 4; top: 18px; left: 20px; right: 20px; display: flex; gap: 6px; }
.occ-bars i { flex: 1; height: 3px; border-radius: 3px; background: #ffffff38; overflow: hidden; }
.occ-bars i:after { content: ""; display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.occ-bars i.done:after { transform: none; }
.occ-bars i.run:after { animation: occBar 6s linear forwards; }
.occasions.paused .occ-bars i.run:after { animation-play-state: paused; }
.occasions.manual .occ-bars { opacity: 0; transition: opacity .6s; }
@keyframes occBar { to { transform: none; } }

.occ-num { position: absolute; z-index: 4; right: 26px; bottom: 18px; font: 800 clamp(90px, 10vw, 150px)/.8 Outfit, sans-serif; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px #ffffff70; }
.occ-cap { position: absolute; z-index: 4; left: 28px; bottom: 26px; right: 40%; }
.occ-cap p { margin: 0; }
.occ-cap-k { font: 700 10.5px "Plus Jakarta Sans", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--oc); }
.occ-cap-v { margin-top: 6px !important; font: 700 clamp(18px, 1.7vw, 23px)/1.25 Outfit, sans-serif; }
.occ-cap-from { display: inline-block; margin-top: 12px !important; padding: 7px 12px; border-radius: 10px; background: #ffffff1c; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font: 600 13px Outfit, sans-serif; }
/* Caption and number rise in again on every change */
.occ-stage.swap .occ-cap > *, .occ-stage.swap .occ-num { animation: capIn .9s var(--ease-out) backwards; }
.occ-stage.swap .occ-cap-v { animation-delay: .08s; }
.occ-stage.swap .occ-cap-from { animation-delay: .16s; }
.occ-stage.swap .occ-num { animation-name: numIn; animation-duration: 1.1s; }
@keyframes capIn { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }
@keyframes numIn { from { opacity: 0; transform: translateY(40px) scale(.9); } }

/* ---------- Tabs ---------- */
.occ-list { display: flex; flex-direction: column; justify-content: center; }
.occ-item { position: relative; border-top: 1px solid #ffffff1c; }
.occ-item:last-child { border-bottom: 1px solid #ffffff1c; }
.occ-item:before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: linear-gradient(90deg, var(--c1), transparent); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease-cine); }
.occ-item.on:before { transform: none; }
.occasions:not(.seen) .occ-item { opacity: 0; transform: translateY(30px); }
.occ-item { transition: opacity .8s, transform .9s var(--ease-out); }
.occ-item:nth-child(2) { transition-delay: .1s; } .occ-item:nth-child(3) { transition-delay: .2s; } .occ-item:nth-child(4) { transition-delay: .3s; }
.occ-tab { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; width: 100%; padding: 22px 4px; border: 0; background: none; color: #fff; text-align: left; cursor: pointer; }
.occ-tab b { align-self: start; margin-top: 4px; font: 700 12px Outfit, sans-serif; color: #7a8296; transition: color .4s; }
.occ-tab span { font: 600 clamp(24px, 2.4vw, 34px)/1.1 Outfit, sans-serif; letter-spacing: -.02em; color: #c9cfdb; transition: color .4s, transform .5s var(--ease-out); }
.occ-tab small { display: block; margin-bottom: 7px; font: 600 10.5px "Plus Jakarta Sans", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #8a92a6; }
.occ-tab i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; border: 1px solid #ffffff2a; font: 400 22px/1 Outfit, sans-serif; font-style: normal; color: #fff; transition: transform .5s var(--ease-out), background .4s, color .4s, border-color .4s; }
.occ-tab:hover span { color: #fff; transform: translateX(6px); }
.occ-item.on .occ-tab b { color: var(--c1); }
.occ-item.on .occ-tab span { color: #fff; }
.occ-item.on .occ-tab i { transform: rotate(45deg); background: var(--c1); border-color: var(--c1); color: var(--ink); }
.occ-tab:focus-visible { outline: 2px solid var(--c1); outline-offset: 4px; border-radius: 8px; }

/* Panel opens with a height animation via grid rows */
.occ-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease-cine); }
.occ-item.on .occ-panel { grid-template-rows: 1fr; }
.occ-panel > div { overflow: hidden; padding-left: 44px; }
.occ-panel p { margin: 0 0 14px; max-width: 460px; color: #b4bccd; font-size: 15px; line-height: 1.65; }
.occ-panel ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.occ-panel li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 9px; background: #ffffff0f; border: 1px solid #ffffff17; font: 600 12.5px Outfit, sans-serif; color: #e6e9f0; }
.occ-panel li:before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c1); }
.occ-cta { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 24px; padding: 13px 18px; border-radius: 12px; background: var(--c1); color: var(--ink); font: 800 14px Outfit, sans-serif; text-decoration: none; transition: transform .4s var(--ease-out), box-shadow .4s; }
.occ-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px var(--c1); }
.occ-cta span { transition: transform .3s; }
.occ-cta:hover span { transform: translate(3px, -3px); }
.occ-item.on .occ-panel p, .occ-item.on .occ-panel ul, .occ-item.on .occ-cta { animation: capIn .7s var(--ease-out) backwards; }
.occ-item.on .occ-panel ul { animation-delay: .08s; }
.occ-item.on .occ-cta { animation-delay: .16s; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .occ-head { grid-template-columns: 1fr; }
  .occ-main { grid-template-columns: 1fr; }
  .occ-stage { min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 760px) {
  .occasions { padding: 64px 16px 72px; }
  .occ-head { margin-bottom: 30px; }
  .occ-stage { aspect-ratio: 4 / 4.2; border-radius: 22px; }
  .occ-cap { left: 18px; right: 30%; bottom: 18px; }
  .occ-num { right: 16px; bottom: 12px; font-size: 84px; }
  .occ-tab { grid-template-columns: 34px 1fr auto; padding: 18px 2px; }
  .occ-panel > div { padding-left: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .occasions:before { animation: none; }
  .occ-stage, .occasions:not(.seen) .occ-stage { clip-path: none; transition: none; }
  .occ-imgs img, .occ-imgs img.on, .occ-imgs img.prev { transition: none; transform: none; }
  .occasions:not(.seen) .occ-item { opacity: 1; transform: none; }
  .occ-stage.swap .occ-cap > *, .occ-stage.swap .occ-num, .occ-item.on .occ-panel * { animation: none; }
}

/* Second, lighter link next to the main button (bulk orders) */
.occ-cta2 { display: inline-block; margin: 0 0 24px 18px; color: #e6e9f0; font: 700 13.5px Outfit, sans-serif; text-decoration: underline; text-decoration-color: var(--c1); text-underline-offset: 6px; transition: color .3s; }
.occ-cta2:hover { color: var(--c1); }
.occ-item.on .occ-cta2 { animation: capIn .7s var(--ease-out) .22s backwards; }