/* Native animation: one cached image, no video or external animation libraries. */
.header{height:295px;grid-template-columns:1fr 480px 1fr}.brand{width:480px;height:285px;position:relative}
.brand:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(108deg,transparent 40%,#ffdc9c55 46%,#fff3cf 50%,#ffd49588 54%,transparent 60%);background-size:300% 100%;mask-image:url('haez-logo.png');mask-size:contain;mask-repeat:no-repeat;mask-position:center;mask-mode:luminance;mix-blend-mode:screen;animation:bronze-light 7s ease-in-out infinite alternate}
@keyframes bronze-light{0%,12%{background-position:150% 0;opacity:.2}35%,65%{opacity:1}88%,100%{background-position:-50% 0;opacity:.2}}
.hero{padding:25px 0 0;min-height:0;max-width:1600px;overflow:hidden;display:flex;flex-direction:column}
.hero-copy{width:auto;margin:0 7%;display:grid;grid-template-columns:1.2fr 1fr;column-gap:10%;position:relative;z-index:2}
.hero-copy .eyebrow{grid-column:1/-1;margin-bottom:18px}.hero-copy h1{grid-column:1;grid-row:2/4;font-size:clamp(44px,4.8vw,74px);margin:0}.hero-copy .intro{grid-column:2;grid-row:2;align-self:end;font-size:16px;margin:0 0 20px;max-width:390px}.hero-copy>.text-link{grid-column:2;grid-row:3;justify-self:start;align-self:start}
.hero .coastal-art{position:relative;inset:auto;display:block;width:100%;margin:-65px 0 0;padding:0;overflow:hidden;z-index:1}
.coastal-camera{perspective:1300px;overflow:hidden;mask-image:linear-gradient(transparent 0%,#000 15%,#000 95%,transparent 100%)}
.coastal-scene{position:relative;aspect-ratio:3/2;transform:rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg));transition:transform .5s ease-out;isolation:isolate}
.hero-art .coastal-image{width:100%;height:100%;display:block;object-fit:cover;mix-blend-mode:normal;mask-image:none;transform-origin:58% 58%;animation:coastal-camera 20s ease-in-out infinite alternate}
@keyframes coastal-camera{from{transform:scale(1.015) translateX(-.3%)}to{transform:scale(1.075) translateX(.5%)}}
.coastal-water{position:absolute;inset:0;background:url('coastal-vision.webp') center/100% 100%;clip-path:polygon(0 80%,100% 73%,100% 100%,0 100%);transform-origin:58% 58%;animation:coastal-camera 20s ease-in-out infinite alternate;opacity:.65;mask-image:linear-gradient(transparent 74%,#000 84%)}
.coastal-water:after{content:"";position:absolute;inset:75% -15% 0;background:repeating-linear-gradient(177deg,transparent 0 12px,#84d5dc15 13px,transparent 15px 24px);animation:canal-flow 5s ease-in-out infinite alternate;mix-blend-mode:screen}
@keyframes canal-flow{from{transform:translate(-2%,-3px) skewX(-12deg);opacity:.4}to{transform:translate(2%,4px) skewX(12deg);opacity:.8}}
.coastal-grid{position:absolute;inset:12% 4% 18%;background:linear-gradient(#eabd6a18 1px,transparent 1px),linear-gradient(90deg,#eabd6a18 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(90deg,transparent,#000,transparent);animation:design-grid 14s ease-in-out infinite;pointer-events:none}
@keyframes design-grid{0%,5%,42%,100%{opacity:0}12%,24%{opacity:.65}32%{opacity:.15}}
.coastal-scan{position:absolute;top:15%;bottom:15%;width:13%;left:-20%;background:linear-gradient(90deg,transparent,#eec78712 80%,#ffe2a784 99%,transparent);mix-blend-mode:screen;animation:design-scan 14s ease-in-out infinite;pointer-events:none}
@keyframes design-scan{0%,5%{left:-20%;opacity:0}10%{opacity:.7}38%{left:110%;opacity:.7}43%,100%{left:110%;opacity:0}}
.water-glints{position:absolute;inset:0;width:100%;height:100%;stroke-width:1.5;pointer-events:none;opacity:.45}.water-glints g path{animation:water-light 4s ease-in-out infinite alternate;transform-origin:center}.water-glints g path:nth-child(2){animation-delay:-2s}.water-glints g path:nth-child(3){animation-delay:-3s}
@keyframes water-light{from{opacity:.1;transform:translateX(-7px) scaleX(.96)}to{opacity:.7;transform:translateX(7px) scaleX(1.04)}}
.coastal-meta{margin:0 7%;padding:14px 0 0;display:flex;gap:20px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);color:var(--gold);font-size:10px;letter-spacing:.12em}
.coastal-live{display:inline-block;width:5px;height:5px;background:#e8be7b;border-radius:50%;margin-right:10px;box-shadow:0 0 12px #e8be7b;animation:beacon 3s ease-in-out infinite alternate}@keyframes beacon{to{opacity:.4}}
.hero-art .coastal-meta figcaption{position:static;margin:0;padding:0;font-size:9px}.hero-art .coastal-meta .motion-control{position:static;transform:none;flex-shrink:0;min-height:44px;background:transparent}
.hero .chapter-links{position:static;display:flex;margin:25px 7% 30px;gap:40px}
.hero-art.motion-paused *,.hero-art.motion-paused *:after,.hero-art.motion-dormant *,.hero-art.motion-dormant *:after,body.motion-paused .brand:after,body.motion-dormant .brand:after{animation-play-state:paused!important}
@media(max-width:760px){.header{height:auto;padding-top:30px}.brand{width:min(420px,100%);height:auto;aspect-ratio:1.7}.hero{padding-top:15px}.hero-copy{display:block}.hero-copy h1{font-size:clamp(40px,9vw,64px)}.hero-copy .intro{font-size:14px;margin:20px 0}.hero .coastal-art{margin-top:-10px}.coastal-camera{mask-image:linear-gradient(transparent,#000 12%,#000 94%,transparent)}.coastal-meta{flex-wrap:wrap;gap:6px 12px;font-size:8px}.coastal-meta>div{width:100%}.hero-art .coastal-meta figcaption{font-size:8px}.hero .chapter-links{gap:18px;margin-top:15px}.coastal-scan{width:20%}}
@media(prefers-reduced-motion:reduce){.brand:after,.coastal-grid,.coastal-scan,.water-glints,.coastal-water,.coastal-live{display:none}.hero-art .coastal-image{animation:none;transform:none}.coastal-scene{transform:none;transition:none}.hero-art .motion-control{display:none}}