/* Arc UI Button, FloatingButtonGroup, Tooltip and Dialog, adapted for native DOM.
 * Sources: https://uiarc.dev/r/{button,floating-button-group,tooltip,dialog}.json
 * Copyright (c) 2026 Elia Kuratli. MIT: ../js/vendor/ARC-LICENSE.txt
 * Original component styles retained in tools/arc-source. */
:root {
 --arc-background:#101116;--arc-surface:#202127;--arc-raised:#24252ce8;--arc-muted:#303139;
 --arc-foreground:#f6f6f7;--arc-secondary:#c1c2ca;--arc-border:#ffffff1a;--arc-accent:#baffcf;--arc-accent-ink:#153522;
 --arc-control:14px;--arc-panel:24px;--arc-fast:160ms;--arc-instant:120ms;
 --arc-ease:cubic-bezier(.22,1,.36,1);--arc-enter:cubic-bezier(.16,1,.3,1);
 --arc-spring:linear(0,.17 .05,.46 .12,.73 .21,.91 .33,1.015 .52,1.012 .71,1);
 --arc-shadow:0 4px 12px #00000016,0 14px 40px #00000026;
}
:root[data-theme=light]{--arc-background:#f6f6f8;--arc-surface:#fff;--arc-raised:#fffffff0;--arc-muted:#eeeef2;--arc-foreground:#202127;--arc-secondary:#5e606b;--arc-border:#2021271a;--arc-accent:#185c38;--arc-accent-ink:#f5fff8;--arc-shadow:0 3px 10px #20212708,0 12px 32px #20212712}
/* Arc's base button, with 44px touch targets across every density. */
:root .arc-button{position:relative;display:inline-flex;min-height:44px;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;border:1px solid var(--arc-border);border-radius:var(--arc-control);padding:0 17px;background:var(--arc-surface);color:var(--arc-foreground);font:500 13px/1.4 var(--font);letter-spacing:-.015em;white-space:nowrap;text-shadow:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;box-shadow:0 1px 2px #00000008;transition:color var(--arc-fast) var(--arc-ease),background var(--arc-fast) var(--arc-ease),border-color var(--arc-fast) var(--arc-ease),box-shadow var(--arc-fast) var(--arc-ease),scale 260ms var(--arc-spring)}
:root .arc-button:disabled{cursor:default;opacity:.5}
:root .arc-button.arc-icon{width:44px;min-width:44px;height:44px;padding:0}
:root .arc-button svg{width:18px;height:18px;flex:none}
:root .arc-button:focus-visible{outline:2px solid var(--arc-foreground);outline-offset:4px}
:root .arc-button:active:not(:disabled){scale:.97;background:var(--arc-muted);transition-duration:var(--arc-instant)}
:root .arc-button[aria-haspopup]:active,:root .arc-tray .arc-button:active{scale:1}
:root .arc-button.arc-primary{background:var(--arc-foreground);color:var(--arc-background);border-color:var(--arc-foreground)}
:root .arc-button.arc-contact{background:var(--arc-accent);color:var(--arc-accent-ink);border-color:transparent}
:root .arc-button.arc-primary:active,:root .arc-button.arc-contact:active{opacity:.84}
@media(hover:hover) and (pointer:fine){
 :root .arc-button:hover:not(:disabled){background:var(--arc-muted);box-shadow:0 3px 10px #00000012}
 :root .arc-button.arc-primary:hover,:root .arc-button.arc-contact:hover{background:var(--arc-foreground);color:var(--arc-background);opacity:.92}
 :root .arc-button.arc-action:hover>.ui-icon{translate:2px -2px}
}
:root .arc-action>.ui-icon{transition:translate 240ms var(--arc-enter)}
/* Arc FloatingButtonGroup: concentric tray and buttons, one moving highlight. */
:root .arc-tray{--arc-tray-pad:5px;display:inline-flex;isolation:isolate;flex-wrap:nowrap;align-items:center;gap:4px;padding:var(--arc-tray-pad);border:1px solid var(--arc-border);border-radius:20px;background:var(--arc-raised);color:var(--arc-secondary);box-shadow:var(--arc-shadow);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);pointer-events:auto}
:root .arc-tray .arc-button{z-index:2;border-color:transparent;border-radius:14px;background:transparent;color:inherit;box-shadow:none;margin:0;transition:color var(--arc-fast) var(--arc-ease)}
:root .arc-tray .arc-button:hover,:root .arc-tray .arc-button:active{background:transparent;color:var(--arc-foreground)}
:root .arc-tray .arc-button[aria-pressed=true]{background:color-mix(in oklab,var(--arc-foreground) 7%,transparent);color:var(--arc-foreground)}
.arc-highlight{position:absolute;z-index:1;left:0;top:0;border-radius:14px;background:color-mix(in oklab,var(--arc-foreground) 9%,transparent);pointer-events:none;opacity:0;transition:translate 420ms var(--arc-spring),width 420ms var(--arc-spring),height 420ms var(--arc-spring),opacity var(--arc-fast) var(--arc-ease),scale 260ms var(--arc-spring)}
.arc-highlight[data-pressing]{scale:.965;background:color-mix(in oklab,var(--arc-foreground) 15%,transparent)}
:root .arc-tray .arc-contact{background:var(--arc-accent);color:var(--arc-accent-ink);padding-inline:16px;margin-left:7px}
:root .arc-tray .arc-contact:hover{background:var(--arc-accent);color:var(--arc-accent-ink);opacity:.9}
:root .collage-header{inset:22px 24px auto;justify-content:flex-end}
:root .collage-tools{position:relative}
:root .collage-tools .motion-icon,:root .collage-tools .theme-icon{width:18px;height:18px}
:root .collage-tools .motion-label,:root .collage-tools .theme-label{display:none}
:root .info-open{position:fixed;left:24px;bottom:24px;padding-inline:18px;gap:18px;box-shadow:var(--arc-shadow);font-family:var(--font);z-index:25}
:root .info-open .arc-price{font-size:12px;line-height:1;border-left:1px solid currentColor;padding-left:14px;opacity:.65}
/* A single centered controller keeps next, previous and position together. */
:root .film-controls.arc-tray{position:fixed;inset:auto auto 24px 50%;transform:translateX(-50%);justify-content:center;gap:4px;z-index:25}
:root .film-controls .film-hint{display:none}
:root .film-controls output{position:static;transform:none;align-self:center;min-width:76px;padding:0 12px;font:500 11px/1 var(--font);font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--arc-secondary);opacity:1}
:root .reel-heading{text-shadow:none}
:root .reel-heading p{gap:8px;font-family:var(--font);flex-wrap:wrap}
:root .reel-heading p>span{flex-basis:100%;margin-bottom:9px;font:400 11px/1.4 var(--font);letter-spacing:.02em;text-transform:none;color:var(--arc-secondary)}
:root .reel-heading p>span::after{content:none}
:root .reel-heading .arc-button{min-height:44px;font-size:12px;border-radius:12px;padding:0 15px}
:root .reel-preview-button{border:1px solid var(--arc-border)}
/* Arc dialog's native counterpart keeps the browser's focus trap and Escape. */
:root .info-panel,:root .reel-preview-panel{border:1px solid var(--arc-border);border-radius:var(--arc-panel);background:var(--arc-raised);color:var(--arc-foreground);box-shadow:var(--arc-shadow);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
:root .info-panel{width:min(440px,calc(100vw - 32px));padding:32px;max-height:calc(100dvh - 32px)}
:root .info-panel::backdrop,:root .reel-preview-panel::backdrop{background:#07081080;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
:root .info-panel h2{font:500 25px/1.25 var(--font);letter-spacing:-.04em;margin:12px 50px 12px 0}
:root .info-panel .info-bio{font-size:14px;line-height:1.6;color:var(--arc-secondary);padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--arc-border)}
:root .offer-copy h2{font-size:19px;margin-right:0}
:root .offer-copy p,:root .offer-includes{font-size:13px;line-height:1.7;color:var(--arc-secondary)}
:root .info-close{position:absolute;top:16px;right:16px}
:root .whatsapp-button{width:100%;justify-content:space-between;min-height:48px;margin-top:24px}
:root .reel-preview-panel{padding:64px 12px 12px}
:root .reel-preview-close{position:absolute;right:12px;top:10px}
:root .project .preview-toggle.arc-button{min-height:44px;font-size:12px;border-radius:12px;opacity:1}
:root .project .preview-controls{gap:8px}
:root .crt-activate span,:root .crt-enter-label{border-radius:12px;font-family:var(--font);font-weight:500}
/* Arc tooltip: supplemental labels, never the control's only accessible name. */
.arc-tooltip{position:fixed;z-index:100;max-width:min(240px,calc(100vw - 24px));padding:9px 12px;border:1px solid var(--arc-border);border-radius:11px;background:var(--arc-foreground);color:var(--arc-background);box-shadow:var(--arc-shadow);font:400 12px/1.4 var(--font);pointer-events:none;opacity:0;translate:0 -3px;transition:opacity 120ms var(--arc-ease),translate 160ms var(--arc-enter)}
.arc-tooltip[data-open]{opacity:1;translate:0 0}
:root[data-motion=on] .info-panel[open],:root[data-motion=on] .reel-preview-panel[open]{animation:arc-panel-in 400ms var(--arc-enter)}
@keyframes arc-panel-in{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@media(max-width:600px){
 :root .collage-header{inset:14px 12px auto;justify-content:center}
 :root .collage-tools .collage-whatsapp span{display:inline}
 :root .collage-tools .arc-contact{padding-inline:12px;margin-left:4px}
 :root .reel-heading{top:102px;left:16px;right:16px}
 :root .reel-heading h2{font-size:30px;margin-bottom:10px}
 :root .film-controls.arc-tray{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
 :root .info-open{left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom,0px));min-height:44px}
 :root .info-panel{padding:26px}
}
@media(max-height:500px) and (min-width:721px){
 :root .collage-header{inset:12px 16px auto}
 :root .reel-heading{top:22px;left:16px;right:auto;text-align:left;max-width:42%}
 :root .reel-heading h2{font-size:24px;margin-bottom:5px}
 :root .reel-heading p{justify-content:flex-start}
 :root .reel-heading p>span{display:none}
 :root .film-controls.arc-tray{bottom:12px}
 :root .info-open{bottom:18px;left:16px}
}
:root[data-motion=off] .arc-button,:root[data-motion=off] .arc-highlight,:root[data-motion=off] .arc-tooltip,:root[data-motion=off] .arc-action>.ui-icon{transition:none!important}
:root[data-motion=off] .arc-button:active,:root[data-motion=off] .arc-action:hover>.ui-icon{scale:1;translate:0}
@media(prefers-reduced-motion:reduce){.arc-button,.arc-highlight,.arc-tooltip,.arc-action>.ui-icon{transition:none!important}.info-panel[open],.reel-preview-panel[open]{animation:none!important}}

@media(min-width:601px) and (max-width:720px){:root .film-controls.arc-tray{bottom:80px}:root .info-open{left:50%;transform:translateX(-50%);bottom:18px}}
/* Responsive hierarchy: one contact action, one options sheet, one project bar. */
.mobile-replay-label{display:none}
:root .mobile-more{gap:7px;padding-inline:13px}
:root .mobile-options{width:min(390px,calc(100vw - 24px));max-height:calc(100dvh - 32px);margin:auto auto max(12px,env(safe-area-inset-bottom));inset:auto 0 0;border:1px solid var(--arc-border);border-radius:24px;padding:16px;background:var(--arc-raised);color:var(--arc-foreground);box-shadow:var(--arc-shadow);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.mobile-options:not([open]){display:none}
.mobile-options::backdrop{background:#08091080;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.mobile-options-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-left:10px}
.mobile-options-heading h2{font:500 18px/1.4 var(--font);letter-spacing:-.025em;margin:0}
.mobile-options-actions{display:flex;flex-direction:column;gap:6px}
:root .mobile-options-actions .arc-button{position:relative;inset:auto;transform:none;width:100%;height:52px;justify-content:flex-start;gap:14px;padding:0 16px;background:transparent;border-color:transparent;color:var(--arc-foreground);box-shadow:none;border-radius:14px}
:root .mobile-options-actions .arc-button:hover{background:var(--arc-muted)}
:root .mobile-options-actions .motion-label,:root .mobile-options-actions .theme-label,:root .mobile-options-actions .mobile-replay-label{display:inline;font:500 14px/1 var(--font)}
:root .mobile-options-actions .info-open{margin-top:10px;background:var(--arc-foreground);color:var(--arc-background);justify-content:space-between;font-size:13px}
:root .mobile-options-actions .info-open .arc-price{margin-left:auto;border:0;padding:0;opacity:.7}
:root .mobile-options-actions .motion-icon,:root .mobile-options-actions .theme-icon{flex:none}
:root[data-motion=on] .mobile-options[open]{animation:mobile-sheet-in 340ms var(--arc-enter)}
@keyframes mobile-sheet-in{from{opacity:0;transform:translateY(30px) scale(.98)}to{opacity:1;transform:none}}
.action-ripple{position:absolute;width:260px;height:260px;border-radius:50%;background:currentColor;pointer-events:none;z-index:0}
:root :is(.collage-whatsapp,.whatsapp-button,.reel-visit,.preview-open){overflow:hidden;isolation:isolate}
:root :is(.collage-whatsapp,.whatsapp-button,.reel-visit,.preview-open)>:not(.action-ripple){position:relative;z-index:1}
:root .reel-heading h2 a{display:inline-block}
@media(max-width:720px){
 :root.mobile-controls .collage-header{inset:14px 14px auto;justify-content:flex-end}
 :root.mobile-controls .collage-tools{gap:4px;padding:4px;border-radius:18px}
 :root.mobile-controls .collage-tools .arc-contact{margin:0;padding:0 13px;order:-1}
 :root.mobile-controls .collage-tools .mobile-more{min-height:44px;height:44px;color:var(--arc-foreground)}
 :root.mobile-controls .reel-heading{top:104px;left:20px;right:20px}
 :root.mobile-controls .reel-heading h2{font-size:clamp(27px,7.5vw,38px);margin-bottom:10px}
 :root.mobile-controls .reel-heading p>span{margin:0}
 :root.mobile-controls .film-controls.arc-tray{bottom:calc(20px + env(safe-area-inset-bottom,0px));gap:5px;padding:5px;max-width:calc(100vw - 28px);width:330px;min-height:58px;border-radius:20px}
 :root.mobile-controls .film-controls .reel-visit{flex:1;min-width:0;min-height:46px;padding:0 12px;background:var(--arc-foreground);color:var(--arc-background);border-color:transparent;gap:9px;font-size:13px;box-shadow:0 1px 5px #0001}
 :root.mobile-controls .film-controls .arc-icon{flex:none;width:44px;min-width:44px;height:46px}
 :root.mobile-controls .film-controls output{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);padding:0;min-width:76px;pointer-events:none;color:var(--arc-foreground);opacity:.7}
 :root.mobile-controls .reel-preview-button{margin-top:4px;min-height:44px;background:transparent;color:var(--arc-secondary);border-color:transparent;font-weight:400}
}
@media(prefers-reduced-motion:reduce){.mobile-options[open]{animation:none!important}}

:root .reel-visit span{color:inherit;font:inherit;letter-spacing:inherit;text-transform:none}
:root .reel-visit span::after{content:none}

:root .mobile-options-actions .info-open:hover{background:var(--arc-foreground);color:var(--arc-background);opacity:.9}