/* =========================
   ANIMATIONS
========================= */

@keyframes fadeUp{
to{
opacity:1;
transform:translateY(0);
}
}

.fade,
.reveal{
opacity:0;
transform:translateY(40px);
transition:all .8s ease;
}

.fade.show,
.reveal.active{
opacity:1;
transform:translateY(0);
}

/* =========================
   CINEMATIC SCROLL UPGRADE
========================= */

/* Smooth premium scroll */
html {
scroll-behavior: smooth;
}

/* Better GPU rendering for smooth motion */
.hero-apple,
.split .image {
will-change: transform;
transform: translateZ(0);
}

/* =========================
   SOFT PARALLAX BASE
========================= */

.parallax {
transform: translateY(0);
transition: transform 0.1s linear;
}

/* =========================
   CINEMATIC FADE ENHANCEMENT
========================= */

.fade {
opacity: 0;
transform: translateY(40px);
transition: opacity 1.2s ease, transform 1.2s ease;
}

.fade.show {
opacity: 1;
transform: translateY(0);
}

/* stagger feel for sections */
.fade:nth-child(odd) {
transition-delay: 0.05s;
}

.fade:nth-child(even) {
transition-delay: 0.1s;
}

/* =========================
   SPLIT IMAGE DEPTH
========================= */

.split .image {
transform: scale(1.02);
transition: transform 1.5s ease;
}

.split:hover .image {
transform: scale(1.06);
}

/* =========================
   HERO TEXT DEPTH FLOAT
========================= */

.hero-content {
animation: heroFloat 1.4s ease forwards;
}

@keyframes heroFloat {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

/* =========================
   SPINE LINE FLOW UPDATE
========================= */

.spine-line{
position:absolute;
left:50%;
top:0;
bottom:0;
width:2px;
background:rgba(241,234,219,.10);
transform:translateX(-50%);
overflow:hidden;
}

.spine-line::after{
content:"";
position:absolute;
top:-50%;
left:0;
width:100%;
height:50%;
background:linear-gradient(to bottom, transparent, var(--accent), transparent);
animation:flow 3s linear infinite;
opacity:.6;
}

@keyframes flow{
0%{transform:translateY(0);}
100%{transform:translateY(200%);}
}