/* Modern interaction layer for the public Masinloc site.
   Keeps the existing editorial structure and approved image assets intact. */

:root{
  --ease-standard:cubic-bezier(.2,.75,.25,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --shadow-nav:0 14px 38px rgba(3,17,47,.10);
  --shadow-soft:0 18px 55px rgba(3,17,47,.08);
}

html{scroll-padding-top:92px}
body{overflow-x:hidden}
body.menu-open{overflow:hidden}

::selection{background:rgba(30,99,233,.18);color:var(--navy-deep)}
a,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:3px solid rgba(30,99,233,.34);outline-offset:4px;border-radius:6px}

/* Progressive cross-document transition where supported. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:page-out 170ms ease both}
::view-transition-new(root){animation:page-in 260ms var(--ease-out) both}
@keyframes page-out{to{opacity:.12;transform:translateY(-4px)}}
@keyframes page-in{from{opacity:.2;transform:translateY(8px)}to{opacity:1;transform:none}}

html.js body{transition:opacity 150ms ease,transform 150ms ease}
html.js body.is-leaving{opacity:.18;transform:translateY(-4px);pointer-events:none}

/* Navigation becomes a quiet, persistent surface after the hero. */
.site-nav{
  transition:height 240ms var(--ease-standard),background-color 240ms ease,border-color 240ms ease,box-shadow 240ms ease,backdrop-filter 240ms ease;
}
.brand img{transition:width 240ms var(--ease-standard),filter 240ms ease,transform 240ms var(--ease-standard)}
.brand:hover img{transform:translateY(-1px)}
.primary-nav a{transition:color 180ms ease,text-shadow 180ms ease,opacity 180ms ease}

body:not(.about-page) .site-nav.is-scrolled{
  position:fixed;
  height:72px;
  background:rgba(255,255,255,.91);
  border-bottom-color:rgba(17,24,39,.08);
  box-shadow:var(--shadow-nav);
  -webkit-backdrop-filter:saturate(150%) blur(18px);
  backdrop-filter:saturate(150%) blur(18px);
}
body:not(.about-page) .site-nav.is-scrolled .brand img{width:clamp(145px,11vw,184px);filter:none}
body:not(.about-page) .site-nav.is-scrolled .primary-nav a{color:var(--ink);text-shadow:none}
body:not(.about-page) .site-nav.is-scrolled .primary-nav a:not(.connect-link)::after{background:var(--blue)}
body:not(.about-page) .site-nav.is-scrolled .primary-nav .connect-link{color:#fff;background:var(--blue);border-color:var(--blue);box-shadow:0 7px 22px rgba(13,59,158,.18)}

.about-page .site-nav{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(150%) blur(18px);
  backdrop-filter:saturate(150%) blur(18px);
  box-shadow:0 1px 0 rgba(17,24,39,.04);
}

/* The hero photograph is shown whole.
   There was a second motion layer here on top of the one in homepage.css: the
   frame clipped, the image was held at scale(1.025) and translated on scroll.
   Both were only possible because the picture was larger than its frame. It is
   now sized to its own ratio with nothing hidden, so the scale and the shift
   are gone and .hero-media has nothing to clip. The fade-in stays — it costs
   the photograph nothing. */
html.js .hero-media img{transition:opacity .7s ease;opacity:.92}
html.js body.is-ready .hero-media img{opacity:1}
.hero-shade{background:linear-gradient(90deg,rgba(1,9,26,.58) 0%,rgba(1,9,26,.28) 31%,rgba(1,9,26,.035) 59%,rgba(1,9,26,0) 75%),linear-gradient(0deg,rgba(1,9,26,.46) 0%,rgba(1,9,26,0) 35%)}

html.js .hero-copy>*{opacity:0;transform:translateY(20px)}
html.js body.is-ready .hero-copy>*{opacity:1;transform:none;transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
html.js body.is-ready .hero-copy>*:nth-child(2){transition-delay:70ms}
html.js body.is-ready .hero-copy>*:nth-child(3){transition-delay:140ms}
html.js body.is-ready .hero-copy>*:nth-child(4){transition-delay:210ms}

.hero h1{text-wrap:balance}
.hero-actions .button{position:relative;overflow:hidden;isolation:isolate}
.hero-actions .button::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateX(-105%);background:rgba(30,99,233,.09);transition:transform 320ms var(--ease-out)}
.hero-actions .button:hover::before{transform:none}
.button{box-shadow:0 0 0 rgba(0,0,0,0)}
.button:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(3,17,47,.11)}
.button:active{transform:translateY(0) scale(.985)}

/* Editorial navigation: stronger hierarchy without turning rows into cards. */
.start-here>div:first-child{align-self:start}
@media(min-width:981px){.start-here>div:first-child{position:sticky;top:118px}}
.editorial-link{position:relative;isolation:isolate;overflow:hidden;padding-left:0!important}
.editorial-link::before{content:"";position:absolute;z-index:-1;inset:0 -18px;background:linear-gradient(90deg,rgba(30,99,233,.055),rgba(30,99,233,0));opacity:0;transform:translateX(-12px);transition:opacity 220ms ease,transform 320ms var(--ease-out)}
.editorial-link:hover::before,.editorial-link:focus-visible::before{opacity:1;transform:none}
.editorial-link .number{transition:color 200ms ease,transform 260ms var(--ease-out)}
.editorial-link svg{transition:transform 300ms var(--ease-out),stroke-width 200ms ease}
.editorial-link:hover .number{color:var(--blue);transform:translateX(3px)}
.editorial-link:hover svg{transform:translateX(6px);stroke-width:1.9}

.text-link{position:relative}
.text-link::after{content:"";position:absolute;left:0;right:31px;bottom:-5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform 260ms var(--ease-out)}
.text-link:hover::after{transform:scaleX(1);transform-origin:left}

/* Scroll reveal. JS only adds data-reveal when IntersectionObserver is available. */
html.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
html.js [data-reveal="left"]{transform:translateX(-22px)}
html.js [data-reveal="scale"]{transform:scale(.985);transform-origin:center}
html.js [data-reveal].is-visible{opacity:1;transform:none}
html.js [data-reveal][data-delay="1"]{transition-delay:55ms}
html.js [data-reveal][data-delay="2"]{transition-delay:110ms}
html.js [data-reveal][data-delay="3"]{transition-delay:165ms}
html.js [data-reveal][data-delay="4"]{transition-delay:220ms}
html.js [data-reveal][data-delay="5"]{transition-delay:275ms}

.closer-preview,.connect-preview{position:relative;overflow:hidden}
.closer-preview::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,var(--blue),transparent);opacity:.28}
.connect-preview::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,var(--blue-bright),var(--red),var(--yellow));opacity:.8}
.community-statement .brand-rule{transition:width .6s var(--ease-out)}
.community-statement:hover .brand-rule{width:190px}

/* Inner editorial pages. */
.about-hero{position:relative}
.about-hero::after{content:"";display:block;width:64px;height:3px;margin-top:38px;background:linear-gradient(90deg,var(--blue-bright) 0 33.333%,var(--red) 33.333% 66.666%,var(--yellow) 66.666%)}
.about-photo{border-radius:22px;box-shadow:var(--shadow-soft)}
.about-photo img{transition:transform 900ms var(--ease-out)}
.about-photo:hover img{transform:scale(1.012)}
.about-section{position:relative}
.about-section::before{content:"";position:absolute;left:0;top:-1px;width:0;height:2px;background:var(--blue);transition:width 420ms var(--ease-out)}
.about-section:hover::before{width:92px}
.about-section h2{transition:color 220ms ease,transform 300ms var(--ease-out)}
.about-section:hover h2{color:var(--blue);transform:translateX(4px)}
.about-commitment{position:relative}
.about-closing{position:relative;overflow:hidden}
.about-closing::before{content:"";position:absolute;width:520px;height:520px;border:1px solid rgba(255,255,255,.09);border-radius:50%;right:-220px;top:-310px}

/* Footer feels lighter and more deliberate. */
.home-footer{position:relative}
.home-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--blue-bright) 0 33.333%,var(--red) 33.333% 66.666%,var(--yellow) 66.666%)}
.footer-nav a{position:relative;width:max-content}
.footer-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:#fff;transform:scaleX(0);transform-origin:right;transition:transform 220ms var(--ease-out)}
.footer-nav a:hover::after{transform:scaleX(1);transform-origin:left}

@media(max-width:1099px){
  html{scroll-padding-top:76px}
  .site-nav{position:absolute}
  body:not(.about-page) .site-nav.is-scrolled{height:68px;padding:0 20px}
  body:not(.about-page) .site-nav.is-scrolled .brand img{width:142px}
  body:not(.about-page) .site-nav.is-scrolled .primary-nav{top:68px}
  .about-page .site-nav{position:sticky}
  .primary-nav{max-height:calc(100svh - 68px);overflow:auto;overscroll-behavior:contain;padding:8px 20px 24px;border-radius:0 0 18px 18px}
  .primary-nav.open{animation:mobile-nav-in 260ms var(--ease-out) both}
  .primary-nav a{min-height:48px;display:flex;align-items:center;font-size:13px}
  .primary-nav .connect-link{display:flex;justify-content:center;border-radius:999px}
  @keyframes mobile-nav-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
  .hero-shade{background:linear-gradient(180deg,rgba(1,9,26,.25) 0%,rgba(1,9,26,.02) 34%,rgba(1,9,26,.06) 51%,rgba(1,9,26,.72) 100%)}
  .about-photo{border-radius:16px}
  .community-statement:hover .brand-rule{width:146px}
}

@media(max-width:520px){
  .about-photo{border-radius:0;box-shadow:none}
  .about-hero::after{margin-top:28px}
  .editorial-link::before{inset:0 -8px}
}

@media(hover:none){
  .about-photo:hover img,.about-section:hover h2,.editorial-link:hover .number{transform:none}
  .community-statement:hover .brand-rule{width:146px}
}

@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  html.js body,html.js [data-reveal],html.js .hero-copy>*,html.js .hero-media img,.primary-nav.open{transition:none!important;animation:none!important;transform:none!important}
  html.js [data-reveal],html.js .hero-copy>*{opacity:1!important}
}