/* Site-wide polish for the public pages (not the admin panel):
   1) motion: things appear with a soft fade + scale instead of hard cuts;
   2) fewer outlines: boxes lose their thin 1px frames (a soft fill gives them
      shape), and the divider lines that remain are 3x thicker.
   Hand-drawn underlines are untouched. Loaded last on every public page. */

:root {
  --fm-ease: cubic-bezier(.22, 1, .36, 1);
  --fm-fill: rgba(255, 255, 255, .045);
  --fm-fill-2: rgba(255, 255, 255, .075);
  --fm-rule: rgba(255, 255, 255, .08);
}

/* ───────────────────────── 1. Motion ───────────────────────── */

/* Anything interactive eases between states (zero specificity, so components
   with their own transitions keep them). */
:where(a, button, .btn, input, select, textarea, label, summary, [role="tab"], [role="button"]) {
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .25s ease, opacity .25s ease, transform .25s var(--fm-ease), filter .25s ease;
}

@keyframes fm-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes fm-pop-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes fm-pop-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.96); } }
@keyframes fm-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fm-fade-out { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  /* page content scales/fades in once translations are applied (the header never hides).
     Never in the editor: any transform on <main> turns it into the containing block of the
     fixed full-screen editor, which then collapses to 0 px and leaves a black screen. */
  html:not(.fm-i18n-pending):not(.boot-editor) body:not(.in-editor) :is(body > main, .site > main, main) { animation: fm-page-in .6s var(--fm-ease) backwards; }

  /* native dialogs (checkout, confirmations): scale + fade in, and out (motion.js) */
  dialog[open] { animation: fm-pop-in .32s var(--fm-ease); }
  dialog[open]::backdrop { animation: fm-fade-in .3s ease; }
  dialog.fm-closing { animation: fm-pop-out .2s ease forwards; }
  dialog.fm-closing::backdrop { animation: fm-fade-out .2s ease forwards; }

  /* blocks that appear by being un-hidden or re-rendered */
  .tariff-card, .pricing-billing-note, .account-notice, .account-banner, .auth-error:not(:empty),
  .pricing-info-popover, .cookie-bar, .header-nav.open, .animations-empty:not([hidden]),
  #loginStep, #registerStep, #verifyStep, #mfaStep, #forgotStep, #resetStep, #verifyForm,
  .account-panel, .checkout-breakdown, .co-summary {
    animation: fm-in .42s var(--fm-ease) both;
  }
  .tariff-card:nth-child(2) { animation-delay: .04s; }
  .tariff-card:nth-child(3) { animation-delay: .08s; }
  .tariff-card:nth-child(4) { animation-delay: .12s; }
  .pricing-info-popover { animation-name: fm-pop-in; animation-duration: .24s; }
  .account-panel[hidden], .animations-empty[hidden] { animation: none; }
}

/* ─────────────────── 2. Fewer outlines, thicker rules ─────────────────── */

/* Frames removed (shape comes from a soft fill instead). */
.pill, .account-pill, .menu-toggle, .thumb-badge, .feature, .billing-toggle,
.faq-item, .lang-opt, .cta, .legal-tabs a, .cookie-bar-inner, .header-nav.open, .modal,
.float-card, .showcase, .mock-field div, .empty-search, .redeem-bar, .plan-tip::after,
.ent-band, .price-jump, .site-header, .toast, .anim-card, .tl-num, .count-pill,
.field input, .field textarea, .input, .select, .input-with-prefix, .ent-field input, .ent-field textarea,
.auth-brand .preview,
.ed-back-btn, .ed-toolbar-pill, .ed-quota-chip, .ed-timeline-track, .ed-waveform-wrap, .ed-tabs-track,
.ed-props-search, .ed-props .field input, .ed-props .field textarea, .ed-props .input-with-prefix,
.ed-props .file-drop, .ed-props .color-swatch, .ac-color-pop, .ac-color-field input, .ed-props .preset,
.ed-btn-snap, .ex-dock-glass, .ex-dock-engine, .export-settings-modal, .ex-set-opt,
#viewGallery .hero-video-card, #viewGallery .search input, #viewGallery .chips, #viewGallery .thumb, #viewGallery .cta,
.pricing-info-button, .pricing-info-popover, .pricing-billing-note, .pricing-segment,
.pricing-page .pricing-button:not(.ed-btn-export), .pricing-contact,
.fm-dialog, .fm-dialog-close, .checkout-breakdown,
.account-page :is(input:not([type="file"]), .select), .account-readonly, .account-refund-dialog textarea, .account-icon-button,
.glass, .glass .field input, .btn-google,
.animations-toolbar, .youtube-animation, .youtube-animation .cat, .youtube-animation .go, .animations-empty, .animations-login-modal,
body[data-legal-doc] .legal-tabs {
  border-color: transparent !important;
}
.youtube-animation .thumb, .youtube-animation .thumb::after, .count-pill,
body[data-legal-doc] .legal-tabs a.is-active, .ed-timeline-clip, .ed-props .file-drop-preview {
  box-shadow: none !important;
}

/* soft fills so the unframed boxes keep their shape */
.pill, .account-pill, .menu-toggle, .thumb-badge, .lang-opt, .legal-tabs a, .tl-num, .count-pill,
.pricing-info-button, .youtube-animation .go, .account-icon-button, .fm-dialog-close, .ed-back-btn, .ed-toolbar-pill, .ed-btn-snap {
  background-color: var(--fm-fill);
}
.fm-dialog .btn-ghost, .checkout-consent-dialog #checkoutConsentCancel, .account-page .btn-ghost, .pricing-page .pricing-button:not(.ed-btn-export) {
  border-color: transparent !important;
  background-color: var(--fm-fill-2);
}
.fm-dialog .btn-ghost:hover:not(:disabled), .account-page .btn-ghost:hover:not(:disabled) { background-color: rgba(255, 255, 255, .11); }
.faq-item, .feature, .cta, .empty-search, .redeem-bar, .checkout-breakdown, .animations-empty { background-color: var(--fm-fill); }
.field input:focus, .field textarea:focus, .input:focus, .select:focus,
.account-page :is(input:not([type="file"]), .select):focus { box-shadow: 0 0 0 3px rgba(50, 100, 240, .35) !important; }

/* Divider lines that stay: 3x thicker. */
.trust, .site-footer, .footer-bottom, .acc-pw-form, .showcase-bar, .ed-toolbar, .ed-deck, .ed-props-footer,
.tariff-library, .tariff-allowance, .fm-dialog-head, .fm-dialog-footer, .checkout-breakdown .is-total,
.co-trust, .account-tabs, .account-section, .account-setting-row, .account-password-form,
.account-history-table td, .account-history-table tr, body[data-legal-doc] .legal-block, .plan-stat + .plan-stat,
#viewGallery .trust, .cmp-row {
  border-top-width: 3px;
  border-bottom-width: 3px;
}
/* only the sides that actually draw a line */
.trust, .site-footer, .footer-bottom, .acc-pw-form, .ed-deck, .ed-props-footer, .fm-dialog-footer,
.checkout-breakdown .is-total, .co-trust, .account-setting-row, .account-password-form,
body[data-legal-doc] .legal-block, .plan-stat + .plan-stat { border-bottom-width: 0; }
.showcase-bar, .ed-toolbar, .tariff-library, .tariff-allowance, .fm-dialog-head, .account-tabs, .account-section,
.account-history-table td, .account-history-table tr, .cmp-row { border-top-width: 0; }
.fm-dialog .checkout-check { border-bottom-width: 3px; }
.checkout-consent-dialog .checkout-order, .checkout-order { border-right-width: 3px; }
.auth-brand, .showcase-stage, .ed-props { border-right-width: 3px; border-left-width: 3px; }
#viewGallery .how-glass, #viewGallery .how-step .how-glass { border-width: 3px; }
@media (max-width: 760px) {
  .checkout-consent-dialog .checkout-order, .checkout-order { border-bottom-width: 3px; border-right-width: 0; }
}

/* buttons: no rims - ghost buttons get a fill, liquid-glass keeps only its soft inner glow */
.btn-ghost { border-color: transparent !important; background-color: var(--fm-fill-2); }
.btn-ghost:hover:not(:disabled) { background-color: rgba(255, 255, 255, .12); }
.btn-liquid-glass { box-shadow: inset 0 0 14px 4px rgba(255, 255, 255, .14), inset 0 6px 24px rgba(17, 17, 26, .05) !important; }
.btn-liquid-glass:hover:not(:disabled) { box-shadow: inset 0 0 18px 6px rgba(255, 255, 255, .22), inset 0 6px 24px rgba(17, 17, 26, .05) !important; }
.pricing-contact { box-shadow: none !important; }


/* ───────────────── 3. Pages: the header stays, content cross-fades ───────────────── */
@keyframes fm-page-in { from { opacity: 0; transform: translateY(14px) scale(.975); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: fm-site-header; }
  /* The bar morphs between pages (flat home bar <-> floating pill): the box
     glides to its new size/place while the two looks cross-fade. Snapshots
     keep their own size (no stretched text), centred, clipped by the box. */
  ::view-transition-group(fm-site-header) {
    z-index: 100; overflow: clip;
    animation-duration: .5s; animation-timing-function: cubic-bezier(.16, 1, .3, 1);
  }
  ::view-transition-image-pair(fm-site-header) { overflow: clip; }
  ::view-transition-old(fm-site-header),
  ::view-transition-new(fm-site-header) {
    height: 100%; width: auto; left: 50%; translate: -50% 0; object-fit: none;
    animation-duration: .35s; animation-timing-function: ease;
  }
  /* Pages without the header (login/register): fade the old header out with the page instead of leaving a hole. */
  html:not(:has(.site-header))::view-transition-old(fm-site-header) { animation: fm-fade-out .22s ease both; opacity: 1; }
  ::view-transition-old(root) { animation: fm-fade-out .22s ease both; }
  ::view-transition-new(root) { animation: fm-fade-in .34s ease both; }
}

/* ───────────────── 4. Scroll reveal + hover scale ───────────────── */
@media (prefers-reduced-motion: no-preference) {
  /* motion.js adds .fm-rv to blocks below the fold and .fm-rv-in as they scroll in */
  .fm-rv { opacity: 0; transform: translateY(26px) scale(.94); transition: opacity .65s ease, transform .75s var(--fm-ease); transition-delay: var(--fm-rv-delay, 0s); }
  .fm-rv.fm-rv-in { opacity: 1; transform: none; }

  :where(.btn, .pricing-button, .ed-btn-export, .animations-category, .legal-tabs a, .lang-opt, .account-pill, .nav-link, .chip, .fm-dialog .btn):hover:not(:disabled) { transform: scale(1.04); }
  :where(.btn, .pricing-button, .ed-btn-export, .animations-category, .legal-tabs a):active:not(:disabled) { transform: scale(.97); }
  :where(.feature-card, .account-section, .cta):hover { transform: scale(1.012); }
  :where(.feature-card, .account-section, .pricing-contact, .cta) { transition: transform .35s var(--fm-ease), background-color .25s ease; }

  /* checkout dialog: its content builds up in a short cascade */
  .checkout-consent-dialog[open]:not(.fm-closing) :is(.co-title, .co-sub, .co-price, .co-anchor, .co-benefits li, .co-trust li, .checkout-consent-heading, .checkout-check, .checkout-footer-row) {
    animation: fm-in .5s var(--fm-ease) both;
  }
  .checkout-consent-dialog[open] .co-sub { animation-delay: .05s; }
  .checkout-consent-dialog[open] .co-price { animation-delay: .08s; }
  .checkout-consent-dialog[open] .co-anchor { animation-delay: .12s; }
  .checkout-consent-dialog[open] .co-benefits li:nth-child(1) { animation-delay: .14s; }
  .checkout-consent-dialog[open] .co-benefits li:nth-child(2) { animation-delay: .18s; }
  .checkout-consent-dialog[open] .co-benefits li:nth-child(3) { animation-delay: .22s; }
  .checkout-consent-dialog[open] .co-benefits li:nth-child(4) { animation-delay: .26s; }
  .checkout-consent-dialog[open] .co-benefits li:nth-child(5) { animation-delay: .30s; }
  .checkout-consent-dialog[open] .co-trust li { animation-delay: .34s; }
  .checkout-consent-dialog[open] .checkout-consent-heading { animation-delay: .1s; }
  .checkout-consent-dialog[open] .checkout-check:nth-child(1) { animation-delay: .16s; }
  .checkout-consent-dialog[open] .checkout-check:nth-child(2) { animation-delay: .22s; }
  .checkout-consent-dialog[open] .checkout-check:nth-child(3) { animation-delay: .28s; }
  .checkout-consent-dialog[open] .checkout-footer-row { animation-delay: .3s; }
}