/* ============================================================
   GeoCom Maroc — animations.css
   Scroll reveals, float effects, entrance motion
   ============================================================ */

/* Reveal — initial hidden state (GSAP toggles .in-view; CSS fallback below) */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in-view { opacity: 1; transform: none; }

/* Hero entrance */
.hero-anim { opacity: 0; transform: translateY(24px); }

/* Device floating */
.macbook-wrap { animation: floatY 7s ease-in-out infinite; }
.iphone-float { animation: floatY 6s ease-in-out infinite .8s; }
.iphone-float .iphone { transform: rotate(-4deg); animation: subtleTilt 9s ease-in-out infinite; }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes subtleTilt { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(-1deg); } }

/* Glass reflection sweep on device screens */
.macbook-bezel::after, .iphone-screen::after {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.14) 46%, rgba(255,255,255,.05) 52%, transparent 60%);
  transform: translateX(-120%); animation: sheen 8s ease-in-out infinite;
}
@keyframes sheen { 0%, 70% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

/* Chat panel entrance */
.chat-panel { transform-origin: bottom right; }
.chat-panel.opening { animation: popIn .35s cubic-bezier(.2,.8,.2,1); }
@keyframes popIn { from { opacity: 0; transform: scale(.9) translateY(10px); } to { opacity: 1; transform: none; } }

/* Message entrance */
.chat-msg { animation: msgIn .3s ease; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Card tilt hover (JS-driven variable) */
.tilt { transition: transform .2s ease; transform-style: preserve-3d; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero-anim { opacity: 1 !important; transform: none !important; }
}