/* MARENC motion layer — progressive enhancement only.
   Everything below is gated on html.motion, which is only set when JS runs
   and the visitor has NOT asked for reduced motion. Without it the site
   renders exactly as before. */

:root{
  --m-ease: cubic-bezier(.22,.8,.24,1);
  --m-ease-out: cubic-bezier(.16,1,.3,1);
  --m-intro: 0s;
}
html.intro-run{ --m-intro: 1.55s; }

/* ---------- cross-page transitions (Chrome/Edge/Safari 18.2+) ---------- */
@view-transition{ navigation:auto; }
@keyframes m-vt-out{ to{ opacity:0; transform:translateY(-10px); } }
@keyframes m-vt-in { from{ opacity:0; transform:translateY(14px); } }
html.motion::view-transition-old(root){ animation:m-vt-out .22s var(--m-ease) both; }
html.motion::view-transition-new(root){ animation:m-vt-in .5s var(--m-ease-out) both; }

/* ---------- first-visit logo intro (pure CSS pseudo-elements, no DOM) ---------- */
html.motion.intro-run::before,
html.motion.intro-run::after{ content:""; position:fixed; inset:0; z-index:2147483000; pointer-events:none; }
html.motion.intro-run::before{
  background:
    radial-gradient(60% 50% at 50% 55%, #0d3a55 0%, transparent 70%),
    #071a30;
  animation: m-curtain 1.0s var(--m-ease) .95s both;
}
html.motion.intro-run::after{
  background:url(/brand/Marenc_Energy_bi_vector_reverse.svg) center/min(300px,62vw) auto no-repeat;
  animation: m-logo 1.9s var(--m-ease) both;
}
@keyframes m-curtain{
  0%{ clip-path:inset(0 0 0 0); }
  99%{ clip-path:inset(0 0 100% 0); visibility:visible; }
  100%{ clip-path:inset(0 0 100% 0); visibility:hidden; }
}
@keyframes m-logo{
  0%  { opacity:0; transform:translateY(14px) scale(.96); filter:blur(6px); }
  35% { opacity:1; transform:none; filter:none; }
  62% { opacity:1; transform:none; }
  100%{ opacity:0; transform:translateY(-26px) scale(1.03); visibility:hidden; }
}

/* ---------- hero: load choreography ---------- */
@keyframes m-rise{
  from{ opacity:0; transform:translate3d(0,34px,0); filter:blur(8px); }
  to  { opacity:1; transform:none; filter:blur(0); }
}
@keyframes m-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes m-drop{ from{ transform:translate3d(0,-100%,0); } to{ transform:none; } }
@keyframes m-kenburns{ from{ scale:1.22; } to{ scale:1.07; } }
@keyframes m-line{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

html.motion .corporate-header{ animation:m-drop .9s var(--m-ease-out) calc(var(--m-intro) - .15s) backwards; }

html.motion .editorial-hero .hero-canvas .photo{
  animation:m-kenburns 2.6s var(--m-ease-out) var(--m-intro) both;
  scale:1.07;
  translate:0 calc(var(--hp,0) * 70px);
  will-change:translate,scale;
}
html.motion .hero-editorial-copy{
  translate:0 calc(var(--hp,0) * -46px);
  opacity:calc(1 - var(--hp,0) * 1.05);
}
html.motion .hero-editorial-copy .eyebrow{
  position:relative;
  animation:m-rise .9s var(--m-ease-out) calc(var(--m-intro) + .15s) backwards;
}
html.motion .hero-editorial-copy h1{
  animation:m-rise 1.1s var(--m-ease-out) calc(var(--m-intro) + .3s) backwards;
}
html.motion .hero-editorial-copy h1 + p{
  animation:m-rise 1s var(--m-ease-out) calc(var(--m-intro) + .52s) backwards;
}
html.motion .hero-editorial-copy .actions{
  animation:m-rise 1s var(--m-ease-out) calc(var(--m-intro) + .72s) backwards;
}
html.motion .hero-navigation{
  animation:m-rise 1s var(--m-ease-out) calc(var(--m-intro) + .95s) backwards;
}
/* inner-page hero blocks */
html.motion .about-hero .container > *,
html.motion .detail-hero > *,
html.motion .index-head > *{
  animation:m-rise 1s var(--m-ease-out) calc(var(--m-intro) + .2s + var(--k,0) * .12s) backwards;
}
html.motion .about-hero .container > :nth-child(2),
html.motion .detail-hero > :nth-child(2),
html.motion .index-head > :nth-child(2){ --k:1; }
html.motion .about-hero .container > :nth-child(3),
html.motion .detail-hero > :nth-child(3),
html.motion .index-head > :nth-child(3){ --k:2; }
html.motion .about-hero .container > :nth-child(n+4),
html.motion .detail-hero > :nth-child(n+4),
html.motion .index-head > :nth-child(n+4){ --k:3; }

/* ---------- header scroll progress (re-uses the existing 3px gradient line) ---------- */
html.motion .corporate-header:before{
  transform:scaleX(var(--sp,0));
  transform-origin:0 50%;
}
html.motion .site[dir=rtl] .corporate-header:before{ transform-origin:100% 50%; }

/* ---------- scroll reveals ---------- */
html.motion .rv{
  opacity:0;
  transform:translate3d(0,38px,0);
  filter:blur(5px);
  transition:
    opacity .9s var(--m-ease-out),
    transform 1.1s var(--m-ease-out),
    filter .9s var(--m-ease-out);
  transition-delay:calc(var(--i,0) * 95ms);
  will-change:opacity,transform;
}
html.motion .rv.is-in{ opacity:1; transform:none; filter:blur(0); }
html.motion .rv.rv-instant{ transition:none; }

/* image frames: curtain wipe + settle */
html.motion .rv-img{
  opacity:1; filter:none; transform:none;
  clip-path:inset(0 0 100% 0 round 2px);
  transition:clip-path 1.25s var(--m-ease-out);
  transition-delay:calc(var(--i,0) * 110ms);
  will-change:clip-path;
}
html.motion .rv-img.is-in{ clip-path:inset(0 0 0 0 round 0); }
html.motion .rv-img .photo{
  scale:1.18;
  transition:scale 1.8s var(--m-ease-out);
  transition-delay:calc(var(--i,0) * 110ms);
}
html.motion .rv-img.is-in .photo{ scale:1; }
html.motion .rv-img.rv-instant,
html.motion .rv-img.rv-instant .photo{ transition:none; }

/* side slide variants for split layouts */
html.motion .rv-l{ transform:translate3d(-48px,0,0); }
html.motion .rv-r{ transform:translate3d(48px,0,0); }
html.motion .site[dir=rtl] .rv-l{ transform:translate3d(48px,0,0); }
html.motion .site[dir=rtl] .rv-r{ transform:translate3d(-48px,0,0); }
html.motion .rv-l.is-in, html.motion .rv-r.is-in{ transform:none; }

/* accent rule that draws under section headings */
html.motion .rv-rule{ position:relative; }
html.motion .rv-rule::after{
  content:""; display:block; width:56px; height:3px; margin-top:18px;
  background:linear-gradient(90deg,#008c82,#0faedd);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform 1s var(--m-ease-out) .35s;
}
html.motion .site[dir=rtl] .rv-rule::after{ transform-origin:100% 50%; }
html.motion .rv-rule.is-in::after{ transform:scaleX(1); }

/* parallax frames need to clip the scaled image */
.process-panorama, .renewal-image, .about-photo, .footer-feature{ overflow:hidden; }
html.motion .px-img{
  inset-block:-7%;
  height:114%;
  translate:0 calc(var(--p,0) * 6%);
  will-change:translate;
}
/* rv-img sets scale on .photo; keep parallax on a different property */

/* ---------- micro-interactions ---------- */
html.motion .button, html.motion .hero-contact{
  transition:transform .35s var(--m-ease), box-shadow .35s var(--m-ease), background-color .25s, color .25s;
}
html.motion .button:hover{ transform:translateY(-2px); box-shadow:0 10px 24px -10px #04204a66; }
html.motion .product-card, html.motion .app-tile, html.motion .challenge-links a,
html.motion .technology-editorial-links a{
  transition:transform .45s var(--m-ease), box-shadow .45s var(--m-ease), border-color .3s, background-color .3s;
}
html.motion .product-card:hover, html.motion .app-tile:hover{
  transform:translateY(-5px);
  box-shadow:0 22px 40px -22px #04204a55;
}
html.motion .text-link{ transition:letter-spacing .35s var(--m-ease), color .2s; }
html.motion .text-link:hover{ letter-spacing:.015em; }

@media (max-width:760px){
  html.motion .rv{ transform:translate3d(0,24px,0); filter:none; }
  html.motion .rv-l, html.motion .rv-r{ transform:translate3d(0,24px,0); }
  html.motion .px-img{ translate:none; inset-block:0; height:100%; will-change:auto; }
  html.motion .editorial-hero .hero-canvas .photo{ translate:none; }
  html.motion .hero-editorial-copy{ translate:none; opacity:1; }
}

@media (prefers-reduced-motion:reduce){
  html.intro-run::before, html.intro-run::after{ display:none !important; }
  .rv,.rv-img,.rv-img .photo{ opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important; scale:1 !important; }
}
@media print{
  .rv,.rv-img{ opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important; }
  html.intro-run::before, html.intro-run::after{ display:none !important; }
}

/* ===== MARENC brand pattern + hero slideshow (v3) ========================== */
@keyframes m-draw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
@keyframes m-wipe{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
@keyframes m-flow{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:-1; } }
@keyframes m-scene{ from{ opacity:0; } to{ opacity:1; } }
@keyframes m-pan{ from{ scale:1.07; } to{ scale:1.16; } }

/* scroll-scrubbed pattern bands */
.mp-host{ isolation:isolate; }
.mp-rel{ position:relative; }
.mp-band{ position:absolute; top:0; inset-inline:0; height:80px; pointer-events:none; overflow:hidden; z-index:-1; line-height:0; opacity:.75;
  clip-path:inset(0 calc((1 - var(--d,0)) * 100%) 0 0); transition:clip-path .3s linear; }
.mp-band svg{ display:block; width:100%; height:100%; }
.mp-band .mp-m, .hero-flow .mp-m{ display:none; }
.mp-flip{ transform:scaleX(-1); }
.mp-foot{ opacity:.55; top:-1px; }
.mp-reveal{ clip-path:inset(0 calc((1 - var(--d,0)) * 100%) 0 0); transition:clip-path .3s linear; }
.arabic .mp-reveal{ clip-path:inset(0 0 0 calc((1 - var(--d,0)) * 100%)); }

/* hero: drawn + flowing pattern */
.hero-flow{ position:absolute; z-index:0; inset-inline:0; bottom:112px; height:clamp(70px,8.4vw,125px); pointer-events:none; overflow:hidden; line-height:0; opacity:.9; }
.hero-flow svg{ position:absolute; inset:0; width:100%; height:100%; }
.hero-flow{ clip-path:inset(0 100% 0 0); animation:m-wipe 2.8s var(--m-ease) calc(var(--m-intro) + .9s) forwards; }
.arabic .hero-flow, .hero-flow.mp-flip{ clip-path:inset(0 100% 0 0); }
.hero-flow .mp-flow path{ stroke:#bdf1ff; stroke-width:.95; stroke-linecap:round; stroke-dasharray:.05 .95; stroke-dashoffset:1; opacity:.8;
  animation:m-flow 7s linear calc(var(--m-intro) + 3.4s + var(--k,0) * -.9s) infinite; }
.hero-flow .mp-flow path[transform]{ stroke-width:3.8; }

/* hero: slideshow behaviour */
.hero-auto .hero-scene[data-state=active] .hero-canvas{ animation:m-scene 1.1s ease both; }
.hero-auto .hero-scene[data-state=active] .hero-canvas .photo{ animation:m-pan 11s ease-out both; }
.hero-auto .hero-story-tabs button[data-state=active]:before{
  content:""; position:absolute; top:-3px; inset-inline-start:0; height:3px; width:calc(var(--ht,0) * 100%); background:#fff; z-index:1; }
.hero-pause{ position:absolute; inset-inline-end:max(20px,calc((100% - 1260px) / 2)); top:-22px; width:34px; height:34px; border:1px solid #fff9; border-radius:50%;
  background:#031222b0; display:flex; align-items:center; justify-content:center; gap:4px; cursor:pointer; padding:0; transition:background .2s,border-color .2s; }
.hero-pause:hover{ background:#0b3a5a; border-color:#fff; }
.hero-pause i{ display:block; width:3px; height:12px; background:#fff; border-radius:1px; }
.hero-pause.is-paused i:first-child{ width:0; height:0; background:none; border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent #fff; border-radius:0; }
.hero-pause.is-paused i:last-child{ display:none; }
.hero-pause:focus-visible{ outline:2px solid #5fd4ea; outline-offset:3px; }

@media (max-width:640px){
  .mp-band .mp-d, .hero-flow .mp-d{ display:none; }
  .mp-band .mp-m, .hero-flow .mp-m{ display:block; }
  .hero-flow{ bottom:96px; height:70px; opacity:.75; }
  .hero-pause{ top:-18px; }
}
@media (prefers-reduced-motion:reduce){
  .hero-flow, .mp-band{ display:none; }
}


/* ===== logo: lock-up vs icon alone (v5) ====================================== */
.brand-morph{ overflow:hidden; direction:ltr; transition:width .5s var(--m-ease-out), flex-basis .5s var(--m-ease-out); }
.brand-morph img{ max-width:none; }
.cta-mark{ position:absolute; z-index:-1; top:64px; inset-inline-end:24%; width:clamp(110px,15vw,220px); height:auto;
  pointer-events:none; opacity:calc(var(--d,0) * .13); translate:0 calc((1 - var(--d,0)) * 24px); }
@media (max-width:640px){ .cta-mark{ top:28px; width:96px; opacity:calc(var(--d,0) * .10); } }
@media (prefers-reduced-motion:reduce){ .cta-mark{ opacity:.1; translate:none; } }