/* Nova Mobile Menu — frontend */
:root{
	--novamm-accent:#e10600;
	--novamm-width:92vw;
	--novamm-ease:cubic-bezier(.32,.72,.24,1);
	--novamm-font-heading:inherit;
	--novamm-font-label:inherit;
	--novamm-bg:#fff;
	--novamm-fg:#111;
	--novamm-line:rgba(0,0,0,.1);
	--novamm-soft:rgba(0,0,0,.05);
	--novamm-cols:2;
	--novamm-video-ratio:4/3;
	--novamm-video-maxh:320px;
	--novamm-grad-from:#e10600;
	--novamm-grad-to:#ff7a45;
	--novamm-grad-angle:135deg;
	--novamm-btn-size:46px;
	--novamm-btn-offset:14px;
	--novamm-radius:6px;
	--novamm-gradient: linear-gradient(var(--novamm-grad-angle), var(--novamm-grad-from), var(--novamm-grad-to));
}
.novamm-root[data-theme=dark]{--novamm-bg:#101113;--novamm-fg:#f4f4f5;--novamm-line:rgba(255,255,255,.12);--novamm-soft:rgba(255,255,255,.06)}
@media(prefers-color-scheme:dark){
	.novamm-root[data-theme=auto]{--novamm-bg:#101113;--novamm-fg:#f4f4f5;--novamm-line:rgba(255,255,255,.12);--novamm-soft:rgba(255,255,255,.06)}
}

/* ==========================================================
   Open / Close button — shared base + style variants
   ========================================================== */
.novamm-trigger{
	position:relative;
	width:var(--novamm-btn-size);height:var(--novamm-btn-size);
	border:0;cursor:pointer;
	display:inline-flex;align-items:center;justify-content:center;gap:6px;
	transition:transform .18s var(--novamm-ease),box-shadow .2s ease;
}
.novamm-trigger--fixed{position:fixed;top:var(--novamm-btn-offset);z-index:99998;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.novamm-trigger--fixed[data-position=right]{right:var(--novamm-btn-offset)}
.novamm-trigger--fixed[data-position=left]{left:var(--novamm-btn-offset)}
.novamm-trigger:active{transform:scale(.9)}

/* shape */
.novamm-shape--circle{border-radius:50%}
.novamm-shape--rounded{border-radius:14px}
.novamm-shape--pill{border-radius:999px}
.novamm-trigger--label.novamm-shape--circle{border-radius:999px}

/* color mode */
.novamm-color--solid{background:var(--novamm-accent);color:#fff}
.novamm-color--gradient{background:var(--novamm-gradient);color:#fff;background-size:160% 160%;transition:background-position .5s ease,transform .18s var(--novamm-ease)}
.novamm-color--gradient:hover{background-position:100% 50%}
.novamm-color--outline{background:transparent;color:var(--novamm-fg);border:2px solid var(--novamm-accent)}

/* bars style */
.novamm-trigger--bars span,.novamm-trigger--label .novamm-bars span,.novamm-trigger--ghost span{
	display:block;width:44%;height:2px;background:currentColor;border-radius:2px;
	transition:transform .3s var(--novamm-ease),opacity .2s ease,width .3s var(--novamm-ease);
}
.novamm-trigger--bars{flex-direction:column}
.novamm-trigger--bars span:nth-child(1){transform:translateY(-4px)}
.novamm-trigger--bars span:nth-child(3){transform:translateY(4px)}
.novamm-trigger--bars[aria-expanded=true] span:nth-child(1){transform:translateY(0) rotate(45deg)}
.novamm-trigger--bars[aria-expanded=true] span:nth-child(2){opacity:0;width:0}
.novamm-trigger--bars[aria-expanded=true] span:nth-child(3){transform:translateY(0) rotate(-45deg)}

/* dots style */
.novamm-trigger--dots{gap:5px}
.novamm-trigger--dots span{width:6px;height:6px;border-radius:50%;background:currentColor;transition:transform .35s var(--novamm-ease),opacity .2s}
.novamm-trigger--dots[aria-expanded=true] span:nth-child(1){transform:translate(7px,0) rotate(45deg) scaleX(2.2)}
.novamm-trigger--dots[aria-expanded=true] span:nth-child(2){opacity:0;transform:scale(0)}
.novamm-trigger--dots[aria-expanded=true] span:nth-child(3){transform:translate(-7px,0) rotate(-45deg) scaleX(2.2)}

/* ring style */
.novamm-trigger--ring{padding:0}
.novamm-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.novamm-ring circle{fill:none;stroke:currentColor;stroke-width:2;stroke-dasharray:107;stroke-dashoffset:0;transition:stroke-dashoffset .5s var(--novamm-ease)}
.novamm-trigger--ring[aria-expanded=true] .novamm-ring circle{stroke-dashoffset:107}
.novamm-ring-x{position:relative;width:16px;height:16px}
.novamm-ring-x span{position:absolute;left:50%;top:50%;width:16px;height:2px;background:currentColor;border-radius:2px;opacity:0;transition:opacity .2s ease,transform .3s var(--novamm-ease)}
.novamm-ring-x span:first-child{transform:translate(-50%,-50%) rotate(45deg) scale(.4)}
.novamm-ring-x span:last-child{transform:translate(-50%,-50%) rotate(-45deg) scale(.4)}
.novamm-trigger--ring[aria-expanded=true] .novamm-ring-x span{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(1)}
.novamm-trigger--ring[aria-expanded=true] .novamm-ring-x span:last-child{transform:translate(-50%,-50%) rotate(-45deg) scale(1)}

/* label style */
.novamm-trigger--label{width:auto;padding:0 16px 0 12px}
.novamm-trigger--label .novamm-bars{display:flex;flex-direction:column;gap:4px;width:16px}
.novamm-trigger--label .novamm-bars span{width:100%}
.novamm-trigger--label em{font-style:normal;font-weight:700;font-size:13px;letter-spacing:.02em}
.novamm-trigger--label[aria-expanded=true] .novamm-bars span:first-child{transform:translateY(3px) rotate(45deg)}
.novamm-trigger--label[aria-expanded=true] .novamm-bars span:last-child{transform:translateY(-3px) rotate(-45deg)}

/* ghost style (2 crossing lines, always visible as X-capable minimal icon) */
.novamm-trigger--ghost{flex-direction:column;justify-content:center}
.novamm-trigger--ghost span{position:absolute;width:50%;height:2px}
.novamm-trigger--ghost span:first-child{transform:rotate(0deg)}
.novamm-trigger--ghost span:last-child{transform:rotate(90deg)}
.novamm-trigger--ghost[aria-expanded=true] span:first-child{transform:rotate(45deg)}
.novamm-trigger--ghost[aria-expanded=true] span:last-child{transform:rotate(-45deg)}

/* close button reuses the same classes inside the panel header */
.novamm-close-btn{position:static;box-shadow:none}

.novamm-trigger--inline{position:static;box-shadow:none}

/* ==========================================================
   Root / backdrop / panel
   ========================================================== */
.novamm-root{position:fixed;inset:0;z-index:99999}
.novamm-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .3s ease}
.novamm-root.is-open .novamm-backdrop{opacity:1}

.novamm-panel{position:absolute;top:0;bottom:0;width:min(var(--novamm-width),480px);background:var(--novamm-bg);color:var(--novamm-fg);display:flex;flex-direction:column;box-shadow:0 0 40px rgba(0,0,0,.25);transition:transform .38s var(--novamm-ease);will-change:transform}
.novamm-root[data-side=right] .novamm-panel{right:0;transform:translateX(105%)}
.novamm-root[data-side=left]  .novamm-panel{left:0;transform:translateX(-105%)}
.novamm-root.is-open .novamm-panel{transform:translateX(0)}

.novamm-head{display:flex;justify-content:flex-end;padding:14px 16px}

/* Body / sections */
.novamm-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 20px 24px;overscroll-behavior:contain}
.novamm-section{border-bottom:1px solid var(--novamm-line)}
.novamm-sec-heading{margin:0}
.novamm-sec-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;padding:20px 2px;border:0;background:none;color:var(--novamm-fg);font-family:var(--novamm-font-heading);font-size:20px;font-weight:600;text-align:left;cursor:pointer}
.novamm-plus{position:relative;width:18px;height:18px;flex:none;transition:transform .3s var(--novamm-ease)}
.novamm-plus::before,.novamm-plus::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:2px;transition:transform .3s var(--novamm-ease)}
.novamm-plus::before{width:18px;height:2px;transform:translate(-50%,-50%)}
.novamm-plus::after{width:2px;height:18px;transform:translate(-50%,-50%)}
.novamm-sec-toggle[aria-expanded=true] .novamm-plus{transform:rotate(45deg)}

.novamm-sec-panel{overflow:hidden;height:0;transition:height .35s var(--novamm-ease)}
.novamm-sec-panel[hidden]{display:block}

/* ==========================================================
   Item grid — 1 or 2 columns, global or per-section
   ========================================================== */
.novamm-grid{list-style:none;margin:0;padding:6px 0 24px;display:grid;grid-template-columns:repeat(var(--novamm-cols),1fr);gap:26px 18px}

.novamm-item a{display:block;text-decoration:none;color:inherit;text-align:center;-webkit-tap-highlight-color:transparent;transition:transform .18s var(--novamm-ease)}
.novamm-item a:active{transform:scale(.96)}

.novamm-media{position:relative;display:block;aspect-ratio:4/3;margin-bottom:10px;border-radius:var(--novamm-radius);overflow:hidden;background:var(--novamm-soft)}
.novamm-img{width:100%;height:100%;object-fit:contain;display:block;border-radius:var(--novamm-radius)}

/* Skeleton shimmer shown while an image hasn't finished loading */
.novamm-img:not(.is-loaded){opacity:0}
.novamm-media:has(.novamm-img:not(.is-loaded))::before{
	content:"";position:absolute;inset:0;
	background:linear-gradient(100deg,var(--novamm-soft) 30%,rgba(255,255,255,.35) 50%,var(--novamm-soft) 70%);
	background-size:200% 100%;animation:novamm-shimmer 1.4s ease-in-out infinite;
}
@keyframes novamm-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Blur-unfold: images sharpen in as the section opens (toggle: data-reveal on root) */
.novamm-root[data-reveal="1"] .novamm-sec-panel .novamm-img,
.novamm-root[data-reveal="1"] .novamm-sec-panel .novamm-video{
	filter:blur(6px);transform:scale(1.06);opacity:0;
	transition:filter .55s var(--novamm-ease),transform .55s var(--novamm-ease),opacity .4s ease;
}
.novamm-root[data-reveal="1"] .novamm-sec-panel.is-revealed .novamm-img.is-loaded,
.novamm-root[data-reveal="1"] .novamm-sec-panel.is-revealed .novamm-video{
	filter:blur(0);transform:scale(1);opacity:1;
}
.novamm-root[data-reveal="1"] .novamm-sec-panel.is-revealed .novamm-item:nth-child(1) .novamm-img{transition-delay:.08s}
.novamm-root[data-reveal="1"] .novamm-sec-panel.is-revealed .novamm-item:nth-child(2) .novamm-img{transition-delay:.15s}
.novamm-root[data-reveal="1"] .novamm-sec-panel.is-revealed .novamm-item:nth-child(3) .novamm-img{transition-delay:.22s}
.novamm-root[data-reveal="1"] .novamm-sec-panel.is-revealed .novamm-item:nth-child(4) .novamm-img{transition-delay:.29s}
.novamm-root[data-reveal="1"] .novamm-sec-panel.is-revealed .novamm-item:nth-child(5) .novamm-img{transition-delay:.36s}
.novamm-root[data-reveal="1"] .novamm-sec-panel.is-revealed .novamm-item:nth-child(n+6) .novamm-img{transition-delay:.4s}

/* Video: uses its own configurable aspect ratio + height cap, independent of image grid cells */
.novamm-video{
	width:100%;
	aspect-ratio:var(--novamm-video-ratio);
	max-height:var(--novamm-video-maxh);
	object-fit:cover;
	display:block;border-radius:8px;background:var(--novamm-soft);
}
.novamm-media:has(.novamm-video){aspect-ratio:var(--novamm-video-ratio);max-height:var(--novamm-video-maxh)}

.novamm-label{display:block;font-family:var(--novamm-font-label);font-weight:700;font-size:16px;letter-spacing:.01em}
.novamm-sub{display:inline-block;margin-top:6px;padding:3px 10px;background:var(--novamm-fg);color:var(--novamm-bg);font-size:11px;font-weight:600;border-radius:3px;font-style:italic}

/* Badge — gradient by default, solid override when a badge color is set */
.novamm-badge{position:absolute;top:6px;right:2px;color:#fff;font-size:10px;font-weight:700;letter-spacing:.02em;padding:4px 8px;border-radius:3px;font-style:italic}
.novamm-badge--gradient{background:var(--novamm-gradient)}

/* Embed (YouTube/Vimeo) */
.novamm-embed{position:relative;width:100%;height:100%;border:0;border-radius:8px;background:var(--novamm-soft) center/cover no-repeat;cursor:pointer}
.novamm-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--novamm-gradient)}
.novamm-play::after{content:"";position:absolute;left:56%;top:50%;transform:translate(-50%,-50%);border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #fff}
.novamm-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:8px}

/* Staggered reveal */
.novamm-sec-panel .novamm-item{opacity:0;transform:translateY(14px)}
.novamm-sec-panel.is-revealed .novamm-item{opacity:1;transform:none;transition:opacity .4s ease,transform .45s var(--novamm-ease)}
.novamm-sec-panel.is-revealed .novamm-item:nth-child(1){transition-delay:.04s}
.novamm-sec-panel.is-revealed .novamm-item:nth-child(2){transition-delay:.09s}
.novamm-sec-panel.is-revealed .novamm-item:nth-child(3){transition-delay:.14s}
.novamm-sec-panel.is-revealed .novamm-item:nth-child(4){transition-delay:.19s}
.novamm-sec-panel.is-revealed .novamm-item:nth-child(5){transition-delay:.24s}
.novamm-sec-panel.is-revealed .novamm-item:nth-child(n+6){transition-delay:.28s}

/* Footer CTA — gradient accent */
.novamm-foot{padding:14px 20px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--novamm-line);background:var(--novamm-bg)}
.novamm-cta{display:block;text-align:center;padding:14px;border-radius:10px;background:var(--novamm-gradient);background-size:160% 160%;color:#fff;font-weight:700;text-decoration:none;transition:transform .18s var(--novamm-ease),background-position .4s ease}
.novamm-cta:active{transform:scale(.97)}
.novamm-cta:hover{background-position:100% 50%}

/* Body lock */
body.novamm-locked{overflow:hidden}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
	.novamm-panel,.novamm-backdrop,.novamm-sec-panel,.novamm-plus,.novamm-plus::before,.novamm-plus::after,
	.novamm-item a,.novamm-trigger,.novamm-trigger span,.novamm-ring circle,.novamm-ring-x span,.novamm-cta,
	.novamm-img,.novamm-video{transition:none!important}
	.novamm-sec-panel .novamm-item{opacity:1;transform:none;transition:none!important}
	.novamm-root[data-reveal="1"] .novamm-img,.novamm-root[data-reveal="1"] .novamm-video{filter:none!important;transform:none!important;opacity:1!important}
	.novamm-media::before{animation:none!important}
}

/* Fallback for browsers without :has() — video keeps its own ratio via the element itself,
   grid cell just won't pre-size around it (no layout break, minor CLS only on very old browsers) */