/* ==========================================================================
   SFR Group - motion layer. Restrained and editorial: slow rise-in on scroll, counters, hover lift,
   a header that tightens when you scroll. Only transform / opacity / translate are animated (GPU friendly).
   Everything here is neutralised by prefers-reduced-motion and by html.motion-off (QA / screenshot hatch,
   also set automatically by the head script if motion.js has not started within 4 seconds).

   Hooks (see motion.js):  .reveal  [--zoom|--left|--right|--fade]   one element appears when it scrolls into view
                           .reveal-stagger                              its CHILDREN appear one after another
                           [data-counter="1200"]                        number counts up (Bengali digits when <html lang="bn">)
                           .hover-lift  .hover-zoom  .ken-burns          small utilities for cards and photos
   ========================================================================== */

/* ---------- Scroll reveal ---------------------------------------------------------------------------
   Elements are hidden only while html.js is set. The effect is a CSS animation (backwards fill), not a
   transition, so hover transforms on the same element are never overridden once it has appeared. */
html.js .reveal:not(.in-view),
html.js .reveal-stagger > *:not(.in-view) { opacity: 0; }

html.js .reveal.in-view,
html.js .reveal-stagger > .in-view {
  animation: srf-rise .85s var(--srf-ease) backwards;
  animation-delay: var(--reveal-delay, 0ms);
}
html.js .reveal--zoom.in-view { animation-name: srf-zoom; animation-duration: 1.05s; }
html.js .reveal--left.in-view { animation-name: srf-from-left; }
html.js .reveal--right.in-view { animation-name: srf-from-right; }
html.js .reveal--fade.in-view { animation-name: srf-fade-only; animation-duration: .9s; }

@keyframes srf-rise { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }
@keyframes srf-zoom { from { opacity: 0; transform: translate3d(0, 20px, 0) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes srf-from-left { from { opacity: 0; transform: translate3d(-32px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes srf-from-right { from { opacity: 0; transform: translate3d(32px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes srf-fade-only { from { opacity: 0; } to { opacity: 1; } }

/* The brand divider draws itself in when its section appears. */
html.js .reveal:not(.in-view) .m-draw { stroke-dasharray: 100; stroke-dashoffset: 100; }
html.js .reveal.in-view .m-draw { stroke-dasharray: 100; animation: srf-draw 1.3s var(--srf-ease) .25s backwards; }
@keyframes srf-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* ---------- Counters ---------------------------------------------------------------------------------- */
[data-counter] { font-variant-numeric: lining-nums tabular-nums; }

/* ---------- Hero badge: a slow float ------------------------------------------------------------------- */
.home-hero__badge { animation: srf-float 7s ease-in-out infinite; }
@keyframes srf-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }

/* ---------- Header: tightens on scroll (the sticky wrapper keeps its height, so the page never jumps) ---- */
.site-header__bar { transition: height var(--srf-dur-2) var(--srf-ease), border-color var(--srf-dur-2) var(--srf-ease), box-shadow var(--srf-dur-2) var(--srf-ease); }
.site-header__bar::before { transition: background-color var(--srf-dur-2) var(--srf-ease); }
.site-brand__mark { transition: width var(--srf-dur-2) var(--srf-ease), height var(--srf-dur-2) var(--srf-ease); }
.site-brand__name { transition: font-size var(--srf-dur-2) var(--srf-ease); }
.site-brand__tag { max-height: 1.6em; overflow: hidden; transition: opacity var(--srf-dur-2) var(--srf-ease), max-height var(--srf-dur-2) var(--srf-ease), margin var(--srf-dur-2) var(--srf-ease); }

.site-header.is-scrolled .site-header__bar { height: var(--srf-header-h-compact); border-bottom-color: var(--srf-line); box-shadow: 0 8px 28px rgba(11, 32, 66, .09); }
.site-header.is-scrolled .site-header__bar::before { background: rgba(255, 255, 255, .95); }
.site-header.is-scrolled .site-brand__mark { width: 38px; height: 38px; }
.site-header.is-scrolled .site-brand__name { font-size: 1.25rem; }
.site-header.is-scrolled .site-brand__tag { max-height: 0; margin-top: 0; opacity: 0; }
/* Phones: the compact header must never be BIGGER than the full one. The 38 px mark and 1.25rem name above beat the phone sizes of site.css (36 px,
   1.12rem under 400 px; the row space is fixed), so the scrolled wordmark no longer fitted at 320-366 px and ended with "..." (Bengali first). */
@media (max-width: 399.98px) {
  .site-header.is-scrolled .site-brand__mark { width: 36px; height: 36px; }
  .site-header.is-scrolled .site-brand__name { font-size: 1.12rem; }
}

/* ---------- Utilities ------------------------------------------------------------------------------------ */
.hover-lift { transition: translate .35s var(--srf-ease), box-shadow .35s var(--srf-ease); }
.hover-lift:hover { translate: 0 -5px; }
.hover-zoom { overflow: hidden; }
.hover-zoom img { transition: transform 1.1s var(--srf-ease); }
.hover-zoom:hover img { transform: scale(1.06); }
.ken-burns { overflow: hidden; }
.ken-burns img { animation: srf-kenburns 24s ease-in-out infinite alternate; }
@keyframes srf-kenburns { from { transform: scale(1); } to { transform: scale(1.1) translate(-1%, -1%); } }

/* ---------- Switch-offs ------------------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal:not(.in-view),
  html.js .reveal-stagger > *:not(.in-view) { opacity: 1; }
  html.js .reveal.in-view,
  html.js .reveal-stagger > .in-view { animation: none; }
  html.js .reveal:not(.in-view) .m-draw { stroke-dasharray: none; stroke-dashoffset: 0; }
  html.js .reveal.in-view .m-draw { animation: none; }
  .home-hero__badge, .ken-burns img { animation: none; }
  .hover-lift:hover, .hover-zoom:hover img { translate: none; transform: none; }
}
@media print {                                                       /* a printed page must never lose sections that were not scrolled into view */
  html.js .reveal:not(.in-view),
  html.js .reveal-stagger > *:not(.in-view) { opacity: 1 !important; }
  html.js .reveal:not(.in-view) .m-draw { stroke-dasharray: none; stroke-dashoffset: 0; }
}
html.motion-off .reveal,
html.motion-off .reveal-stagger > * { opacity: 1 !important; animation: none !important; transform: none !important; }
html.motion-off .m-draw { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important; }
html.motion-off .home-hero__badge, html.motion-off .ken-burns img { animation: none !important; }