/* A slow coastal breeze runs through every section. */
body::before { animation: paper-grain-drift 16s linear infinite; }

main {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background-size: 118% 112%, 100% 100%;
  animation: sky-breathe 12s ease-in-out infinite alternate;
}

main::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .52;
  background: linear-gradient(108deg, transparent 35%, rgba(255, 255, 255, .28) 47%, rgba(255, 255, 255, .1) 52%, transparent 64%);
  background-size: 230% 100%;
  background-position: -115% 0;
  animation: wind-sheen 10s ease-in-out infinite;
}

.notes::before { animation: cloud-cross 11s ease-in-out infinite alternate; }
.notes::after { animation: tide-breathe 12s ease-in-out infinite alternate; }

.about::before { animation: sun-float 10s ease-in-out infinite alternate; }
.about::after { animation: sea-haze 12s ease-in-out infinite alternate; }

.career::before { animation: cloud-cross 13s ease-in-out infinite alternate-reverse; }
.career::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 42%;
  height: 90px;
  right: -6%;
  top: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, .56), transparent 68%);
  filter: blur(7px);
  animation: cloud-cross 14s ease-in-out infinite alternate;
}

.works::before { animation: deep-light 9s ease-in-out infinite alternate; }
.works::after { animation: slow-tide 10s ease-in-out infinite alternate; }

/* One distinct, readable breeze layer per section. */
.section-breeze { position: absolute !important; z-index: 0 !important; inset: 0; overflow: hidden; pointer-events: none; opacity: .9; }
.section-breeze::before, .section-breeze::after { content: ""; position: absolute; pointer-events: none; }
.motion-ready .reveal-section > .section-breeze { opacity: .9; transition: none; }

/* Larger 3D landmarks: one distinct object per page. */
.section-3d {
  position: absolute !important;
  z-index: 0 !important;
  width: clamp(150px, 18vw, 270px);
  aspect-ratio: 1;
  perspective: 900px;
  pointer-events: none;
  transform-style: preserve-3d;
  opacity: .78;
}

.section-3d::before, .section-3d::after { content: ""; position: absolute; inset: 0; transform-style: preserve-3d; }
.motion-ready .reveal-section > .section-3d { opacity: .78; transition: none; }

.section-3d--notes { right: 5%; top: 12%; animation: cube-float 8s ease-in-out infinite; }
.section-3d--notes::before { border: 1px solid rgba(75, 153, 166, .58); background: linear-gradient(135deg, rgba(255, 255, 255, .3), rgba(87, 170, 183, .12)); box-shadow: inset 0 0 40px rgba(255, 255, 255, .22), 0 22px 30px rgba(61, 138, 153, .16); transform: rotateX(58deg) rotateZ(45deg); }
.section-3d--notes::after { inset: 17%; border: 1px solid rgba(255, 255, 255, .8); background: rgba(220, 246, 245, .14); transform: translateZ(58px) rotateX(58deg) rotateZ(45deg); }

.section-3d--about { right: 7%; bottom: 9%; border-radius: 50%; border: 1px solid rgba(235, 184, 94, .56); box-shadow: 0 0 0 26px rgba(255, 238, 178, .11), 0 0 54px rgba(255, 213, 126, .32); animation: orbit-landmark 7s linear infinite; }
.section-3d--about::before { inset: 14%; border: 1px solid rgba(255, 255, 255, .8); border-radius: 50%; transform: rotateX(68deg); }
.section-3d--about::after { inset: 35%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 253, 220, .9), rgba(255, 224, 139, .22) 48%, transparent 70%); transform: translateZ(26px); animation: sun-pulse 3.6s ease-in-out infinite; }

.section-3d--career { right: 6%; top: 21%; width: clamp(135px, 15vw, 220px); animation: pyramid-float 7.5s ease-in-out infinite; }
.section-3d--career::before { inset: 5%; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: linear-gradient(135deg, rgba(255, 255, 255, .58), rgba(79, 163, 179, .14)); border: 1px solid rgba(73, 157, 172, .62); transform: rotateX(54deg) rotateZ(18deg) translateZ(24px); box-shadow: 0 22px 35px rgba(63, 140, 155, .18); }
.section-3d--career::after { inset: 21%; clip-path: polygon(50% 0, 100% 100%, 0 100%); border: 1px solid rgba(255, 255, 255, .8); background: rgba(221, 246, 243, .18); transform: rotateX(54deg) rotateZ(18deg) translateZ(68px); }

.section-3d--works { right: 4%; top: 9%; width: clamp(160px, 20vw, 300px); animation: prism-float 6.5s ease-in-out infinite; }
.section-3d--works::before { border: 1px solid rgba(215, 255, 246, .7); background: linear-gradient(145deg, rgba(205, 248, 239, .32), rgba(43, 118, 130, .2)); box-shadow: inset 0 0 48px rgba(220, 255, 250, .18), 0 25px 38px rgba(7, 40, 52, .28); transform: rotateX(61deg) rotateY(-24deg) rotateZ(24deg); }
.section-3d--works::after { inset: 20%; border: 1px solid rgba(238, 255, 251, .68); background: rgba(193, 239, 234, .14); transform: translateZ(68px) rotateX(61deg) rotateY(-24deg) rotateZ(24deg); }

.section-breeze--notes::before {
  width: 54vw; height: 3px; top: 28%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .92), rgba(126, 195, 204, .58), transparent);
  box-shadow: 0 0 13px rgba(255, 255, 255, .58);
  transform: rotate(-7deg) translateX(-120%);
  animation: section-sweep 9s ease-in-out infinite;
}
.section-breeze--notes::after { width: 190px; height: 74px; right: 7%; top: 43%; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 255, 255, .75), transparent 68%); animation: cloud-cross 8s ease-in-out infinite alternate; }

.section-breeze--about::before { width: clamp(140px, 18vw, 270px); aspect-ratio: 1; right: 12%; top: 17%; border-radius: 50%; border: 1px solid rgba(255, 248, 207, .78); box-shadow: 0 0 0 23px rgba(255, 248, 207, .12), 0 0 50px rgba(255, 237, 176, .35); animation: sun-pulse 4.5s ease-in-out infinite; }
.section-breeze--about::after { width: 48vw; height: 2px; right: -9%; top: 54%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .84), transparent); transform: rotate(18deg) translateX(100%); animation: about-breeze 10s ease-in-out infinite; }

.section-breeze--career::before { width: 230px; height: 84px; left: -8%; top: 26%; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 255, 255, .82), transparent 68%); filter: blur(3px); animation: cloud-cross 8.5s ease-in-out infinite alternate; }
.section-breeze--career::after { width: 48vw; height: 2px; right: 6%; bottom: 24%; background: linear-gradient(90deg, transparent, rgba(112, 185, 195, .68), rgba(255, 255, 255, .7), transparent); transform: translateX(-120%); animation: section-sweep 10.5s ease-in-out infinite reverse; }

.section-breeze--works::before { width: 64vw; height: 115px; left: -13%; bottom: 12%; border-radius: 50%; background: radial-gradient(ellipse, rgba(197, 239, 235, .33), transparent 66%); animation: slow-tide 7.5s ease-in-out infinite alternate; }
.section-breeze--works::after { width: 44vw; height: 2px; right: -10%; top: 22%; background: linear-gradient(90deg, transparent, rgba(237, 255, 248, .86), transparent); transform: rotate(-13deg) translateX(100%); animation: about-breeze 8s ease-in-out infinite; }

@keyframes paper-grain-drift {
  to { background-position: 72px 54px; }
}

@keyframes sky-breathe {
  from { background-position: 42% 0, center; }
  to { background-position: 61% 5%, center; }
}

@keyframes wind-sheen {
  0% { background-position: -115% 0; opacity: .08; }
  45% { opacity: .55; }
  100% { background-position: 115% 0; opacity: .08; }
}

@keyframes section-sweep {
  0% { transform: rotate(-7deg) translateX(-120%); opacity: 0; }
  18% { opacity: .9; }
  72% { opacity: .6; }
  100% { transform: rotate(-7deg) translateX(210%); opacity: 0; }
}

@keyframes about-breeze {
  0% { transform: rotate(18deg) translateX(110%); opacity: 0; }
  25% { opacity: .8; }
  78% { opacity: .6; }
  100% { transform: rotate(18deg) translateX(-180%); opacity: 0; }
}

@keyframes cube-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotateY(0deg) rotateX(0deg); }
  50% { transform: translate3d(-28px, -20px, 0) rotateY(180deg) rotateX(16deg); }
}

@keyframes orbit-landmark { to { transform: rotate(360deg) rotateX(58deg); } }

@keyframes pyramid-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotateY(-12deg); }
  50% { transform: translate3d(25px, -27px, 0) rotateY(142deg) rotateX(12deg); }
}

@keyframes prism-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotateY(0deg) rotateZ(0deg); }
  50% { transform: translate3d(-32px, 20px, 0) rotateY(180deg) rotateZ(12deg); }
}

@keyframes cloud-cross {
  from { transform: translate3d(-34px, 4px, 0) scale(.96); }
  to { transform: translate3d(42px, -13px, 0) scale(1.07); }
}

@keyframes tide-breathe {
  from { transform: translate3d(-4%, 9px, 0) scaleX(.96); opacity: .38; }
  to { transform: translate3d(5%, -8px, 0) scaleX(1.1); opacity: .7; }
}

@keyframes sun-float {
  from { transform: translate3d(-17px, 16px, 0) scale(.93); opacity: .48; }
  to { transform: translate3d(21px, -14px, 0) scale(1.08); opacity: .86; }
}

@keyframes sea-haze {
  from { transform: translate3d(25px, 13px, 0) scale(.93); opacity: .32; }
  to { transform: translate3d(-23px, -11px, 0) scale(1.1); opacity: .72; }
}

@keyframes deep-light {
  from { transform: translate3d(-6%, 3%, 0) scale(.93); opacity: .2; }
  to { transform: translate3d(7%, -5%, 0) scale(1.1); opacity: .72; }
}

@keyframes slow-tide {
  from { transform: translate3d(-7%, 13px, 0) scaleX(.94); opacity: .32; }
  to { transform: translate3d(8%, -10px, 0) scaleX(1.12); opacity: .72; }
}