/*
Theme Name: Frame Child Theme
Theme URI: https://frame.ancorathemes.com/
Description: Frame is a Premium WordPress theme that has built-in support for popular Page Builders, slider with swipe gestures, and is SEO- and Retina-ready. The unique system of inheritance and override options allows setting up individual parameters for different sections of your site and supported plugins.
Author: AncoraThemes
Author URI: https://ancorathemes.com/
Version: 2.12.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, e-commerce, portfolio, grid-layout, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-image-header, featured-images, flexible-header, footer-widgets, full-width-template, microformats, post-formats, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks
Text Domain: frame
Template: frame
*/


/* =Child-Theme customization starts here
------------------------------------------------------------ */

/* ============================================================
   Masonry entrance — per-tile fade-up as you scroll  (DRAFT v2)
   ------------------------------------------------------------
   v1 fired every tile at once the moment the grid's top edge
   appeared, so tiles below the fold had "already arrived" by the
   time you scrolled to them, and it was too fast to read. v2
   animates each tile individually the moment IT enters view
   (per-tile IntersectionObserver in functions.php), slower and
   with more travel so the motion is legible, cascading among
   tiles that enter together. Transitions (not keyframes) on
   transform+opacity, promoted to their own compositor layer, so
   the first frames don't jitter. Reduced-motion → no animation.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* pre-state: each tile waits hidden + dropped until it scrolls in.
     The `html.jon-js` prefix out-specifies the trx_addons .sc_blogger_item
     rule WITHOUT !important — important is deliberately avoided here so the
     JS filter cascade (Web Animations API) can override opacity; a running
     WAAPI animation beats a normal declaration but NOT an !important one.
     The masonry lays out with a CSS column grid, so forcing transform is safe. */
  html.jon-js .elementor-element-jonmason01 .sc_blogger_item {
    opacity: 0;
    transform: translate3d(0, 52px, 0);
    transition: opacity 0.85s ease,
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }

  /* play: rise + fade in (scroll reveal toggles this; the filter cascade uses WAAPI) */
  html.jon-js .elementor-element-jonmason01 .sc_blogger_item.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}


/* ============================================================
   Masonry hover — smooth the dither-to-black  (DRAFT)
   ------------------------------------------------------------
   Eases the featured-image hover so it doesn't stutter on the
   first frames. Additive: promotes the layer to its own
   compositor and gives the transition a gentle curve.
   ============================================================ */
.sc_blogger_item .post_featured.hover_link,
.sc_blogger_item .post_featured.hover_link img,
.sc_blogger_item .post_featured.hover_link:before,
.sc_blogger_item .post_featured.hover_link:after {
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
              background-color 0.45s ease, filter 0.45s ease !important;
  will-change: opacity, transform;
  backface-visibility: hidden;
}


/* ============================================================
   "Back to work" link on case-study pages
   ------------------------------------------------------------
   Injected by frame_child_back_to_work_link() before the article.
   ============================================================ */
.jon-back-to-work {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin: 0 0 2.2rem;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  transition: opacity 0.25s ease;
}
.jon-back-to-work:hover { opacity: 1; }
.jon-back-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}
.jon-back-to-work:hover .jon-back-arrow { transform: translateX(-4px); }


/* ============================================================
   Video banner (section 4d482ee6) — ~25% shorter
   ------------------------------------------------------------
   The reel sat at ~21:9. Constrain the hosted-video wrapper to a
   ~25%-shorter box (28:9) and let the video cover-crop to fill it,
   so it loses height without letterbox bars. Tune the ratio to taste.
   ============================================================ */
.elementor-element-4d482ee6 .e-hosted-video {
  aspect-ratio: 28 / 9 !important;
  height: auto !important;
  overflow: hidden !important;
}
.elementor-element-4d482ee6 .e-hosted-video video {
  aspect-ratio: 28 / 9 !important;   /* ~25% shorter than 21:9 — tune here */
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}


/* ============================================================
   Case Studies band (section 2300d5ec) — match item height to
   the video banner for visual cohesion.
   ------------------------------------------------------------
   The reel banner is full-width 28:9, so its height tracks
   100vw * 9/28 (≈463px at 1440). The band's featured image was
   sized by its own aspect (~475px), which made it the odd one
   out in the hero-video → reel → case-studies stack. Pin the
   image to the same height formula and cover-crop it so the
   three read as one system. Below ~1180px the item's text
   content (~380px) is taller than this height, so the band
   gracefully falls back to being content-driven — no clipping.
   Tune the ratio (28/9) to match the reel if that ever changes.
   ============================================================ */
.elementor-element-2300d5ec .sc_portfolio_item .post_featured {
  height: calc(100vw * 9 / 28) !important;
  overflow: hidden !important;
}
.elementor-element-2300d5ec .sc_portfolio_item .post_featured img {
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}