/* =========================================================
   Syntec University — Editorial / Motion Enhancement Layer
   Adds restrained institutional motion inspired by modern
   higher-education sites while preserving the restored core.
   ========================================================= */

:root{
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.16,1,.3,1);
  --duration:780ms;
  --campus-main:url('../assets/Syntec-University-Main-Entrance.png');
  --campus-students:url('../assets/Syntec-University-Main-Entrance.png');
  --campus-columns:url('https://images.unsplash.com/photo-1763890498955-13f109b2fbd7?auto=format&fit=crop&fm=jpg&q=82&w=2200');
}

body{overflow-x:hidden}

/* Scroll progress */
.scroll-progress{
  position:fixed;left:0;top:0;width:100%;height:3px;z-index:120;
  transform:scaleX(0);transform-origin:left center;
  background:linear-gradient(90deg,var(--gold),#e3c66e);
  pointer-events:none;
}

/* Header refinement */
.site-header{transition:min-height .35s var(--ease-out),box-shadow .35s ease,background-color .35s ease}
.site-header.is-scrolled{box-shadow:0 10px 35px rgba(9,20,24,.09);background:rgba(255,253,247,.94)}
.site-header .nav-shell{transition:min-height .35s var(--ease-out)}
.site-header.is-scrolled .nav-shell{min-height:70px}
.site-header .brand img{transition:width .35s var(--ease-out),height .35s var(--ease-out),transform .4s var(--ease-out)}
.site-header.is-scrolled .brand img{width:150px;height:auto}
.brand:hover img{transform:rotate(-3deg) scale(1.035)}

/* Hero: editorial photography + depth */
.hero{
  min-height:clamp(650px,82vh,900px);
  display:grid;align-items:end;
  background-image:
    linear-gradient(90deg,rgba(8,20,25,.94) 0%,rgba(8,20,25,.82) 38%,rgba(8,20,25,.34) 68%,rgba(8,20,25,.22) 100%),
    var(--campus-main);
  background-size:cover;background-position:center 42%;
  isolation:isolate;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,20,25,.05),rgba(8,20,25,.28));
}
.hero::after{
  content:"SUMUS IN POSTERUM";position:absolute;right:-.02em;bottom:-.25em;
  font-family:var(--serif);font-size:clamp(5.5rem,13vw,13rem);line-height:1;
  letter-spacing:-.045em;color:rgba(255,255,255,.035);white-space:nowrap;pointer-events:none;
}
.hero .wrap{padding:clamp(5.5rem,10vh,9rem) 0 5rem;grid-template-columns:minmax(0,1.15fr) minmax(260px,.55fr);align-items:end}
.hero-copy{max-width:760px;position:relative;z-index:2}
.hero h1{font-size:clamp(4.1rem,10vw,9rem);line-height:.84;letter-spacing:-.055em;margin:.5rem 0 1.5rem}
.hero p{max-width:650px;font-size:clamp(1rem,1.4vw,1.18rem);color:rgba(255,255,255,.82)}
.hero .eyebrow{display:inline-flex;align-items:center;gap:.7rem}
.hero .eyebrow::before{content:"";width:42px;height:1px;background:#e5ca77}
.hero-crest{filter:drop-shadow(0 22px 36px rgba(0,0,0,.28));transform-origin:center;will-change:transform}
.hero-actions{margin-top:2rem}

.hero-scroll-cue{position:absolute;left:max(1rem,calc((100% - 1180px)/2));bottom:1.25rem;color:#fff;display:flex;align-items:center;gap:.85rem;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;opacity:.68}
.hero-scroll-cue span{width:42px;height:1px;background:currentColor;display:block;position:relative;overflow:hidden}
.hero-scroll-cue span::after{content:"";position:absolute;inset:0;background:#e7cb78;transform:translateX(-100%);animation:scrollCue 2.4s var(--ease-out) infinite}
@keyframes scrollCue{55%,100%{transform:translateX(100%)}}

/* Page heroes receive a restrained photographic wash */
.page-hero{position:relative;overflow:hidden;isolation:isolate;padding:clamp(4.8rem,9vw,8rem) 0}
.page-hero::before{content:"";position:absolute;inset:-12%;z-index:-2;background-image:var(--page-photo,var(--campus-columns));background-size:cover;background-position:center;filter:saturate(.45) contrast(1.05);transform:scale(1.04)}
.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(13,35,43,.97),rgba(13,35,43,.80) 54%,rgba(13,35,43,.48))}
.page-hero .wrap{position:relative}
.page-hero h1{max-width:900px;line-height:.95;letter-spacing:-.035em}
.page-hero p{font-size:1.08rem;max-width:720px}

/* Scroll reveal primitives */
.reveal{
  opacity:0;transform:translate3d(0,34px,0);
  transition:opacity var(--duration) ease,transform var(--duration) var(--ease-out);
  transition-delay:var(--reveal-delay,0ms);
}
.reveal.reveal-left{transform:translate3d(-42px,18px,0)}
.reveal.reveal-right{transform:translate3d(42px,18px,0)}
.reveal.reveal-scale{transform:scale(.965) translateY(24px)}
.reveal.is-visible{opacity:1;transform:none}

/* Hero load choreography */
.hero-animate{opacity:0;transform:translateY(28px);animation:heroIn 1s var(--ease-out) forwards;animation-delay:var(--hero-delay,0ms)}
@keyframes heroIn{to{opacity:1;transform:none}}

/* Image reveal / parallax containers */
.media-frame{position:relative;overflow:hidden;background:#12252b;min-height:360px}
.media-frame::after{content:"";position:absolute;inset:0;background:var(--ink);transform-origin:right center;transition:transform 1.1s var(--ease-soft);z-index:2}
.media-frame.is-visible::after{transform:scaleX(0)}
.media-frame img,.media-frame .media-bg{width:100%;height:100%;object-fit:cover;position:absolute;inset:-5% 0 auto 0;min-height:110%;will-change:transform;transition:filter .5s ease}
.media-frame:hover img,.media-frame:hover .media-bg{filter:saturate(1.07) contrast(1.02)}
.media-frame .media-bg{background-size:cover;background-position:center}
.media-caption{position:absolute;left:1.3rem;bottom:1.15rem;z-index:3;color:#fff;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;text-shadow:0 2px 18px rgba(0,0,0,.5)}

/* Editorial sections */
.editorial-feature{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.editorial-feature .feature-copy{padding:1rem 0}
.editorial-feature h2{font-size:clamp(2.4rem,4.5vw,4.7rem);line-height:.98;letter-spacing:-.035em;margin:.55rem 0 1.2rem}
.editorial-feature p{font-family:var(--serif);font-size:1.08rem;color:#48565a;max-width:610px}

.explore-grid{display:grid;grid-template-columns:1.1fr .9fr .9fr;gap:1rem;align-items:stretch}
.explore-tile{position:relative;min-height:430px;overflow:hidden;background:#182b31;color:#fff;isolation:isolate}
.explore-tile:first-child{min-height:520px}
.explore-tile .tile-bg{position:absolute;inset:-5%;background-size:cover;background-position:center;z-index:-2;transition:transform .9s var(--ease-out),filter .6s ease;will-change:transform}
.explore-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,14,18,.08) 25%,rgba(5,14,18,.88) 100%);z-index:-1}
.explore-tile:hover .tile-bg{transform:scale(1.045)}
.explore-tile .tile-copy{position:absolute;left:0;right:0;bottom:0;padding:2rem}
.explore-tile .tile-label{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:#e9cc79;font-weight:700}
.explore-tile h3{font-family:var(--serif);font-size:clamp(1.8rem,3vw,3rem);font-weight:400;line-height:1.02;margin:.45rem 0 .8rem}
.explore-tile p{color:rgba(255,255,255,.78);font-size:.9rem;max-width:420px}
.explore-tile .arrow-link{display:inline-flex;align-items:center;gap:.6rem;text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;font-weight:700;margin-top:.5rem}
.explore-tile .arrow-link::after{content:"→";transition:transform .3s var(--ease-out)}
.explore-tile:hover .arrow-link::after{transform:translateX(7px)}

/* News/events style section */
.news-shell{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.news-intro{position:sticky;top:120px}
.news-intro h2{font-size:clamp(2.6rem,5vw,5rem);line-height:.93;letter-spacing:-.04em;margin:.4rem 0 1rem}
.news-list{border-top:1px solid var(--line)}
.news-item{display:grid;grid-template-columns:110px 1fr auto;gap:1.2rem;align-items:start;padding:1.5rem 0;border-bottom:1px solid var(--line);transition:padding-left .35s var(--ease-out),background .25s ease}
.news-item:hover{padding-left:.85rem}
.news-item time{font-size:.69rem;letter-spacing:.12em;text-transform:uppercase;color:#8a7538;font-weight:700;padding-top:.38rem}
.news-item h3{font-family:var(--serif);font-size:clamp(1.35rem,2vw,1.85rem);font-weight:400;line-height:1.15;margin:0 0 .35rem}
.news-item p{margin:0;color:#667176;font-size:.88rem}
.news-item .news-arrow{font-size:1.25rem;padding-top:.15rem;transition:transform .3s var(--ease-out)}
.news-item:hover .news-arrow{transform:translateX(6px)}

/* Cards / content feel more editorial */
.card,.staff-card,.course,.letter,.contact-card,.book-cover{transition:transform .45s var(--ease-out),box-shadow .45s ease,border-color .35s ease}
.card:hover,.staff-card:hover,.course:hover{transform:translateY(-7px);box-shadow:0 22px 50px rgba(17,30,35,.11);border-color:#c8bd9b}
.card{position:relative;overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;width:3px;height:0;background:var(--gold);transition:height .45s var(--ease-out)}
.card:hover::before{height:100%}
.card-link::after{content:" →";display:inline-block;transition:transform .3s var(--ease-out)}
.card:hover .card-link::after{transform:translateX(5px)}

.stats{position:relative;z-index:3}
.stat strong{display:block;font-variant-numeric:tabular-nums}
.stat{transition:background .3s ease}
.stat:hover{background:rgba(255,255,255,.04)}

.quote-strip{position:relative;overflow:hidden}
.quote-strip::before{content:'“';position:absolute;left:2vw;top:-.38em;font-family:var(--serif);font-size:16rem;color:rgba(255,255,255,.04);line-height:1}

/* Button polish */
.btn,.nav-cta{position:relative;overflow:hidden;isolation:isolate}
.btn::before,.nav-cta::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.13);transform:translateX(-110%) skewX(-16deg);transition:transform .55s var(--ease-out);z-index:-1}
.btn:hover::before,.nav-cta:hover::before{transform:translateX(0) skewX(0)}

/* Chat launcher has a quiet pulse */
.chat-launch::after{content:"";position:absolute;inset:-5px;border:1px solid rgba(189,155,72,.45);border-radius:50%;animation:quietPulse 3.2s ease-out infinite}
@keyframes quietPulse{0%,35%{transform:scale(.86);opacity:0}55%{opacity:.6}100%{transform:scale(1.35);opacity:0}}

/* Footer crest movement */
.footer-brand img{transition:transform .7s var(--ease-out),filter .4s ease}
.footer-brand:hover img{transform:rotate(-5deg) scale(1.05);filter:brightness(1.12)}

/* Responsive */
@media(max-width:960px){
  .site-header.is-scrolled .main-nav{top:70px}
  .editorial-feature,.news-shell{grid-template-columns:1fr}
  .news-intro{position:static}
  .explore-grid{grid-template-columns:1fr 1fr}
  .explore-tile:first-child{grid-column:1/-1;min-height:460px}
  .hero .wrap{grid-template-columns:1fr;padding-top:5rem}
  .hero-crest{justify-self:end;max-width:230px;margin-top:-7rem;opacity:.8}
}
@media(max-width:620px){
  .hero{min-height:690px;background-position:63% center}
  .hero::after{font-size:5rem;bottom:.2em}
  .hero .wrap{padding:5.3rem 0 4rem}
  .hero h1{font-size:clamp(4rem,19vw,6rem)}
  .hero-crest{display:none}
  .hero-scroll-cue{display:none}
  .explore-grid{grid-template-columns:1fr}
  .explore-tile,.explore-tile:first-child{grid-column:auto;min-height:390px}
  .news-item{grid-template-columns:1fr auto;gap:.8rem}
  .news-item time{grid-column:1/-1}
  .page-hero{padding:4.4rem 0}
}

/* Accessibility: preserve the visual design without forced motion. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal,.hero-animate{opacity:1!important;transform:none!important}
  .media-frame::after{transform:scaleX(0)!important}
}