/* ==========================================================================
   hn2 site motion layer — approved by Gilad 28.09.2026 (motion lab demo)
   Visual only: no text, links, headings or schema are touched.
   Everything is gated on html.hn2mo (added by hn2-motion.js), so no-JS
   visitors and crawlers see the page exactly as before.
   Rollback: rename wp-content/novamira-public/hn2-motion.php.
   ========================================================================== */

:root{
  --hn2mo-ease:cubic-bezier(.23,1,.32,1);
  --hn2mo-tb:36px;                         /* topbar height, updated by JS */
}

/* --------------------------------------------------------------------------
   1. Cross-page transitions (View Transitions API, same-origin only)
   -------------------------------------------------------------------------- */
@view-transition{navigation:auto;}
@media (prefers-reduced-motion: reduce){
  @view-transition{navigation:none;}
}
/* the header stays still while the page underneath changes */
.elementor-location-header{view-transition-name:hn2mo-hdr;}
::view-transition-group(*){animation-duration:.42s;animation-timing-function:var(--hn2mo-ease);}
::view-transition-old(root),::view-transition-new(root){animation-duration:.26s;}
::view-transition-group(hn2mo-hdr){animation:none;}
::view-transition-old(hn2mo-hdr){display:none;}
::view-transition-new(hn2mo-hdr){animation:none;}
::view-transition-image-pair(hn2mo-img){isolation:auto;}
::view-transition-old(hn2mo-img),::view-transition-new(hn2mo-img){
  animation-duration:.42s;mix-blend-mode:normal;height:100%;object-fit:cover;overflow:clip;
}

/* --------------------------------------------------------------------------
   3. Home stats: scroll-linked waves (decorative, aria-hidden)
   -------------------------------------------------------------------------- */
html.hn2mo .hn2h-stats{position:relative;overflow:hidden;}
.hn2mo-waves{position:absolute;inset-inline:0;bottom:0;height:64px;pointer-events:none;z-index:0;}
.hn2mo-waves svg{position:absolute;bottom:0;right:0;width:200%;height:100%;will-change:transform;}
html.hn2mo .hn2h-stats > .hn2h-wrap{position:relative;z-index:1;}

/* --------------------------------------------------------------------------
   4. Product cards: lift on hover + staggered entrance below the fold
   -------------------------------------------------------------------------- */
html.hn2mo .hn2c-pc,
html.hn2mo .hn2p-rc{
  transition:transform .35s var(--hn2mo-ease),box-shadow .35s var(--hn2mo-ease),border-color .35s;
}
html.hn2mo .hn2c-pc__media,
html.hn2mo .hn2p-rc__media{overflow:hidden;}
html.hn2mo .hn2c-pc__media img,
html.hn2mo .hn2p-rc__media img{transition:transform .6s var(--hn2mo-ease);}
@media (hover:hover) and (pointer:fine){
  html.hn2mo .hn2c-pc:hover,
  html.hn2mo .hn2p-rc:hover{
    transform:translateY(-6px);
    box-shadow:0 2px 4px rgba(20,30,61,.08),0 22px 40px -18px rgba(20,30,61,.38);
  }
  html.hn2mo .hn2c-pc:hover .hn2c-pc__media img,
  html.hn2mo .hn2p-rc:hover .hn2p-rc__media img{transform:scale(1.06);}
}
html.hn2mo .hn2c-pc:active,
html.hn2mo .hn2p-rc:active{transform:translateY(-2px) scale(.985);transition-duration:.12s;}

@keyframes hn2moRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
html.hn2mo .hn2mo-wait{opacity:0;}
html.hn2mo .hn2mo-rise{animation:hn2moRise .6s var(--hn2mo-ease) var(--hn2mo-d,0ms) both;}

/* --------------------------------------------------------------------------
   5. Recipes: ingredient check-off + reading progress
   -------------------------------------------------------------------------- */
html.hn2mo .hn2mo-ing-list{list-style:none;padding-inline-start:0;margin-inline-start:0;}
html.hn2mo .hn2mo-ing{
  list-style:none;position:relative;cursor:pointer;
  padding-inline-start:32px;transition:color .3s;
}
/* the recipe template draws a red dot bullet (li::before) — the checkbox replaces it */
html.hn2mo body .hn2mo-ing-list > li.hn2mo-ing{padding-inline-start:34px!important;}
html.hn2mo body .hn2mo-ing-list > li.hn2mo-ing::before{display:none!important;}
html .hn2mo-ing .hn2mo-chk,
html .hn2mo-ing .hn2mo-chk:hover,
html .hn2mo-ing .hn2mo-chk:focus{
  position:absolute!important;inset-inline-start:2px!important;inset-inline-end:auto!important;
  top:50%!important;margin-top:-10px!important;
  width:20px;height:20px;min-height:0;min-width:0;padding:0;margin:0;cursor:pointer;
  border:2px solid #B4BACC;border-radius:5px;background:#fff;box-shadow:none;
  line-height:0;font-size:0;color:#fff;
  display:grid;place-items:center;
  transition:background .2s,border-color .2s,transform .12s;
}
html .hn2mo-ing.is-done .hn2mo-chk{background:#D71F36;border-color:#D71F36;}
.hn2mo-chk:active{transform:scale(.9);}
.hn2mo-chk:focus-visible{outline:2px solid #D71F36;outline-offset:2px;}
.hn2mo-chk svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:3;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .3s var(--hn2mo-ease) .05s;}
.hn2mo-ing.is-done .hn2mo-chk{background:#D71F36;border-color:#D71F36;}
.hn2mo-ing.is-done .hn2mo-chk svg{stroke-dashoffset:0;}
.hn2mo-ing.is-done{color:#6B717D;}
.hn2mo-ing.is-done a{color:inherit;}
.hn2mo-ing .hn2mo-strike{
  background-image:linear-gradient(#D71F36,#D71F36);background-repeat:no-repeat;
  background-position:100% 55%;background-size:0 2px;
  transition:background-size .35s var(--hn2mo-ease);
}
.hn2mo-ing.is-done .hn2mo-strike{background-size:100% 2px;}

.hn2mo-read{
  position:fixed;top:0;right:0;left:0;height:3px;z-index:100000;pointer-events:none;
  background:#D71F36;transform-origin:100% 50%;transform:scaleX(0);
}
.admin-bar .hn2mo-read{top:32px;}

/* --------------------------------------------------------------------------
   6. Header: compact on scroll — transforms only, so no layout shift (CLS)
   and the fixed mobile drawer is never re-parented.
   -------------------------------------------------------------------------- */
html.hn2mo .hn2hdr .topbar,
html.hn2mo .hn2hdr .mainbar{
  transition:transform .35s var(--hn2mo-ease),opacity .25s,box-shadow .35s;
}
html.hn2mo .hn2hdr .mainbar{position:relative;background:#fff;}
html.hn2mo .hn2hdr .brand img{transition:transform .35s var(--hn2mo-ease);transform-origin:100% 50%;}
html.hn2mo-compact .hn2hdr .site-header{background:transparent;pointer-events:none;}
html.hn2mo-compact .hn2hdr .site-header > *{pointer-events:auto;}
html.hn2mo-compact .hn2hdr .topbar{transform:translateY(-100%);opacity:0;pointer-events:none;}
html.hn2mo-compact .hn2hdr .mainbar{
  transform:translateY(calc(-1 * var(--hn2mo-tb)));
  box-shadow:0 6px 18px -10px rgba(20,30,61,.35);
}
html.hn2mo-compact .hn2hdr .brand img{transform:scale(.86);}

/* --------------------------------------------------------------------------
   Reduced motion: keep function, drop movement
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html.hn2mo .hn2mo-wait{opacity:1;}
  html.hn2mo .hn2mo-rise{animation:none;}
  html.hn2mo .hn2c-pc,html.hn2mo .hn2p-rc,
  html.hn2mo .hn2c-pc__media img,html.hn2mo .hn2p-rc__media img,
  html.hn2mo .hn2hdr .topbar,html.hn2mo .hn2hdr .mainbar,html.hn2mo .hn2hdr .brand img,
  .hn2mo-chk,.hn2mo-chk svg,.hn2mo-ing .hn2mo-strike{transition:none!important;}
  html.hn2mo .hn2c-pc:hover,html.hn2mo .hn2p-rc:hover{transform:none;}
  html.hn2mo .hn2c-pc:hover .hn2c-pc__media img,html.hn2mo .hn2p-rc:hover .hn2p-rc__media img{transform:none;}
}