/* =====================================================================
   Tide — tidecampus.com landing page
   Recreated from the Claude Design handoff ("Tidecampus Site.dc.html").
   Zero dependencies. Theme tokens + keyframes from the source, plus
   responsive / reduced-motion / scroll-reveal added for production.
   ===================================================================== */

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  overflow-x:hidden;
}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:#E4D6CC;border-radius:9px;}

/* ---- keyframes (verbatim from source) ---- */
@keyframes tideFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}
@keyframes tideFloatX{0%,100%{transform:translate(0,0)}50%{transform:translate(14px,-16px)}}
@keyframes tidePulse{0%,100%{box-shadow:0 0 0 0 rgba(242,80,47,.32)}50%{box-shadow:0 0 0 18px rgba(242,80,47,0)}}
@keyframes tideMarquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes tideSpin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes tideBlink{0%,100%{opacity:1}50%{opacity:0}}

/* ---- theme tokens (verbatim from source) ---- */
[data-theme="light"]{--page:#FFF6EF;--ink:#241B2E;--muted:#6B6475;--card:#ffffff;--card-1:linear-gradient(150deg,#fff,#FFF3EE);--card-2:linear-gradient(150deg,#fff,#EEF5FF);--card-3:linear-gradient(150deg,#fff,#FFF7E8);--nav:rgba(255,246,239,.78);--border:rgba(36,27,46,.06);--strip:rgba(255,255,255,.4);--strip2:rgba(255,255,255,.45);--app-screen:#141019;--app-notch:#0A0710;--app-card:#251C37;--app-chip:#2E2440;--app-chip2:rgba(255,255,255,.12);--app-ink:#F2ECF8;--app-muted:#B3A9BF;--app-inactive:#6E6480;--app-nav:rgba(18,14,24,.92);--app-nav-bd:rgba(255,255,255,.07);--blobs-op:1;}
[data-theme="dark"]{--page:#15101F;--ink:#F4EFFA;--muted:#A99FB5;--card:#221A33;--card-1:#221A33;--card-2:#221A33;--card-3:#221A33;--nav:rgba(20,15,28,.82);--border:rgba(255,255,255,.08);--strip:rgba(255,255,255,.03);--strip2:rgba(255,255,255,.03);--app-screen:#FFF6EF;--app-notch:#241B2E;--app-card:#ffffff;--app-chip:#ffffff;--app-chip2:rgba(36,27,46,.07);--app-ink:#241B2E;--app-muted:#6B6475;--app-inactive:#BBB1C6;--app-nav:rgba(255,246,239,.92);--app-nav-bd:#F0E7EF;--blobs-op:.5;}
[data-theme="light"] [data-sun]{display:none!important}
[data-theme="dark"] [data-moon]{display:none!important}

/* ---- scroll reveal (CSS-driven; JS toggles .revealed) ---- */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);}
[data-reveal].revealed{opacity:1;transform:none;}

/* ---- small interactions ---- */
.navlink-login{transition:opacity .2s;}
.navlink-login:hover{opacity:.6;}
a{color:inherit;}
[data-tilt-hover]{will-change:transform;}
button{font-family:inherit;}

/* ---- campus marquee items (built by app.js) ---- */
.campus{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:20px;color:#C5B9C9;letter-spacing:-.5px;flex:none;white-space:nowrap;}

/* ---- testimonial cards (built by app.js) ---- */
.review-card{width:340px;flex:none;background:var(--card);border-radius:24px;padding:24px;box-shadow:0 10px 30px rgba(36,27,46,.06);}
.review-stars{font-size:14px;color:#FFC83D;letter-spacing:2px;}
.review-quote{font-size:16px;color:var(--ink);line-height:1.5;font-weight:500;margin-top:12px;}
.review-foot{display:flex;align-items:center;gap:11px;margin-top:18px;}
.review-av{width:40px;height:40px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px;font-family:'Bricolage Grotesque',sans-serif;}
.review-handle{font-weight:800;font-size:14px;}
.review-year{font-size:12px;color:#9A8FA8;font-weight:600;}

/* ---- gallery horizontal scroll on small screens ---- */
.gallery-scroll{overflow-x:hidden;}
.gallery-scroll::-webkit-scrollbar{display:none;}

/* ---- hero phone: show the device at full length, more prominent ---- */
/* scales the static phone frame (not the animated [data-tilt] parent, so the
   float animation still composes); transform doesn't grow the layout box, so
   the taller hero-grid min-height below keeps it from clipping. */
.hero-grid [data-tilt] > div{transform:scale(1.16);transform-origin:center center;}

/* =====================================================================
   Responsive — the source is a fixed 1200px desktop canvas; these
   breakpoints make it work on tablets and phones without touching the
   desktop look.
   ===================================================================== */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr!important;min-height:0!important;}
  .hero-grid [data-tilt] > div{transform:none!important;}
  .hero-copy{text-align:center;}
  .hero-copy h1,.hero-copy p{margin-left:auto!important;margin-right:auto!important;}
  .hero-cta,.hero-social,.hero-badge{justify-content:center!important;}
  .hero-social{justify-content:center!important;}
  .drop-grid{grid-template-columns:1fr!important;}
  .drop-copy{text-align:center;}
  .drop-copy p{margin-left:auto!important;margin-right:auto!important;}
  .drop-stats{justify-content:center!important;}
  .cta-grid{grid-template-columns:1fr!important;text-align:center;}
  .cta-grid .cta-actions{justify-content:center!important;}
  .gallery-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .gallery-row{justify-content:flex-start!important;margin:0!important;}
}
@media (max-width:760px){
  .nav-links{display:none!important;}
  .features-grid{grid-template-columns:1fr!important;}
  .footer-grid{grid-template-columns:1fr 1fr!important;}
  .hero-h1{font-size:54px!important;letter-spacing:-2.2px!important;}
  .section-h2{font-size:38px!important;letter-spacing:-1.4px!important;}
  .cta-h2{font-size:42px!important;letter-spacing:-1.8px!important;}
  .cta-card{padding:48px 28px!important;}
}
@media (max-width:480px){
  .footer-grid{grid-template-columns:1fr!important;}
  .hero-h1{font-size:44px!important;}
  .nav-inner{padding:14px 18px!important;}
  .hero{padding-left:18px!important;padding-right:18px!important;}
  .section-pad{padding-left:18px!important;padding-right:18px!important;}
  /* nav fits a 320px phone: drop the redundant "Log in" (same target as the button) and tighten the CTA */
  .nav .navlink-login{display:none!important;}
  .nav [data-lift]{padding:10px 15px!important;}
}

/* =====================================================================
   Reduced motion — honor the OS setting: stop the ambient animation
   and reveal all content immediately.
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0ms!important;}
  html{scroll-behavior:auto;}
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important;}
}