/* Hero Section */

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #6b8c9a 0%, #5a8a9a 30%, #4a7a8a 60%, #3d6a7a 100%);
    overflow: hidden;
    padding-top: 70px;
}

.hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* SVG Scene */

.hero-scene {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Cloud drift */

.hero-clouds {
    animation: cloud-drift 80s linear infinite;
}

@keyframes cloud-drift {
    0%   { transform: translateX(0); }
    100% { transform: translateX(60px); }
}

/* Island subtle sway (parallax feel) */

.hero-island--far {
    animation: island-sway-far 20s ease-in-out infinite;
}

.hero-island--mid {
    animation: island-sway-mid 16s ease-in-out infinite;
}

.hero-island--near {
    animation: island-sway-near 14s ease-in-out infinite;
}

@keyframes island-sway-far {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(2px); }
}

@keyframes island-sway-mid {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(3px); }
}

@keyframes island-sway-near {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }
}

/* Ship animations */

.hero-ship--1 {
    animation: ship-sail-1 18s ease-in-out infinite;
}

.hero-ship--2 {
    animation: ship-sail-2 22s ease-in-out infinite;
}

.hero-ship--3 {
    animation: ship-sail-3 28s ease-in-out infinite;
}

@keyframes ship-sail-1 {
    0%, 100% { transform: translate(0, 0) rotate(-1deg); }
    25%      { transform: translate(35px, -5px) rotate(1.5deg); }
    50%      { transform: translate(60px, 0) rotate(-0.5deg); }
    75%      { transform: translate(35px, -6px) rotate(1deg); }
}

@keyframes ship-sail-2 {
    0%, 100% { transform: translate(0, 0) rotate(0.5deg); }
    25%      { transform: translate(-30px, -4px) rotate(-1.5deg); }
    50%      { transform: translate(-50px, 0) rotate(1deg); }
    75%      { transform: translate(-30px, -5px) rotate(-0.5deg); }
}

@keyframes ship-sail-3 {
    0%, 100% { transform: translate(0, 0) rotate(-0.3deg); }
    25%      { transform: translate(18px, -2px) rotate(0.5deg); }
    50%      { transform: translate(30px, 0) rotate(-0.3deg); }
    75%      { transform: translate(18px, -3px) rotate(0.6deg); }
}

/* Cannon fire animations
 * SVG elements scale from viewport origin, not element center,
 * so we animate only opacity + translate (no scale). */

.hero-cannon-fire--1,
.hero-cannon-fire--2 {
    opacity: 0;
}

.hero-cannon-fire--1 {
    animation: cannon-blast 6s ease-out infinite 1s;
}

.hero-cannon-fire--2 {
    animation: cannon-blast 6s ease-out infinite 3.5s;
}

@keyframes cannon-blast {
    0%   { opacity: 0; }
    2%   { opacity: 1; }
    6%   { opacity: 0.85; }
    15%  { opacity: 0.3; }
    28%  { opacity: 0; }
    100% { opacity: 0; }
}

/* Smoke dissipation - use translate only, no scale */

.cannon-smoke--1a, .cannon-smoke--2a {
    opacity: 0;
    animation: smoke-a 6s ease-out infinite;
}
.cannon-smoke--1b, .cannon-smoke--2b {
    opacity: 0;
    animation: smoke-b 6s ease-out infinite;
}
.cannon-smoke--1c, .cannon-smoke--2c {
    opacity: 0;
    animation: smoke-c 6s ease-out infinite;
}

/* Inherit delay from parent cannon-fire group */
.hero-cannon-fire--1 .cannon-smoke--1a,
.hero-cannon-fire--1 .cannon-smoke--1b,
.hero-cannon-fire--1 .cannon-smoke--1c,
.hero-cannon-fire--1 .cannonball--1 {
    animation-delay: 1s;
}
.hero-cannon-fire--2 .cannon-smoke--2a,
.hero-cannon-fire--2 .cannon-smoke--2b,
.hero-cannon-fire--2 .cannon-smoke--2c,
.hero-cannon-fire--2 .cannonball--2 {
    animation-delay: 3.5s;
}

@keyframes smoke-a {
    0%   { opacity: 0; transform: translate(0, 0); }
    3%   { opacity: 0.55; transform: translate(0, 0); }
    20%  { opacity: 0.25; transform: translate(8px, -14px); }
    40%  { opacity: 0; transform: translate(16px, -24px); }
    100% { opacity: 0; }
}

@keyframes smoke-b {
    0%   { opacity: 0; transform: translate(0, 0); }
    5%   { opacity: 0.4; transform: translate(0, 0); }
    25%  { opacity: 0.18; transform: translate(12px, -18px); }
    45%  { opacity: 0; transform: translate(22px, -30px); }
    100% { opacity: 0; }
}

@keyframes smoke-c {
    0%   { opacity: 0; transform: translate(0, 0); }
    8%   { opacity: 0.25; transform: translate(0, 0); }
    30%  { opacity: 0.1; transform: translate(16px, -22px); }
    50%  { opacity: 0; transform: translate(28px, -36px); }
    100% { opacity: 0; }
}

/* Cannonball flight */

.cannonball--1 {
    opacity: 0;
    animation: cannonball-right 6s ease-in infinite;
}

.cannonball--2 {
    opacity: 0;
    animation: cannonball-left 6s ease-in infinite;
}

@keyframes cannonball-right {
    0%   { opacity: 0; transform: translate(0, 0); }
    2%   { opacity: 0.8; transform: translate(0, 0); }
    12%  { opacity: 0.6; transform: translate(510px, -40px); }
    15%  { opacity: 0; transform: translate(680px, 9px); }
    100% { opacity: 0; }
}

@keyframes cannonball-left {
    0%   { opacity: 0; transform: translate(0, 0); }
    2%   { opacity: 0.8; transform: translate(0, 0); }
    12%  { opacity: 0.6; transform: translate(-440px, -35px); }
    15%  { opacity: 0; transform: translate(-585px, -4px); }
    100% { opacity: 0; }
}

/* Water splashes (timed to cannonball landing) */

.hero-splash--1,
.hero-splash--2 {
    opacity: 0;
}

.hero-splash--1 {
    animation: splash 6s ease-out infinite 1.7s;
}

.hero-splash--2 {
    animation: splash 6s ease-out infinite 4.2s;
}

@keyframes splash {
    0%   { opacity: 0; }
    2%   { opacity: 0.8; }
    8%   { opacity: 0.5; }
    18%  { opacity: 0; }
    100% { opacity: 0; }
}

/* Wave animations - each layer moves at a different speed */

.hero-wave--1 {
    animation: wave-shift-1 7s ease-in-out infinite;
}

.hero-wave--2 {
    animation: wave-shift-2 9s ease-in-out infinite;
}

.hero-wave--3 {
    animation: wave-shift-3 11s ease-in-out infinite;
}

.hero-wave--4 {
    animation: wave-shift-4 13s ease-in-out infinite;
}

@keyframes wave-shift-1 {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(30px); }
}

@keyframes wave-shift-2 {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(-25px); }
}

@keyframes wave-shift-3 {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(20px); }
}

@keyframes wave-shift-4 {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(-18px); }
}

/* Hero content */

.hero-content {
    position: relative;
    text-align: center;
    color: var(--color-white);
    padding: var(--spacing-lg) var(--spacing-sm);
    max-width: 800px;
    z-index: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.hero-tagline {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: var(--spacing-sm);
}

.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: var(--spacing-sm);
    color: var(--color-white);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.hero-wordmark {
    width: 100%;
    max-width: 600px;
    height: auto;
    margin-bottom: var(--spacing-sm);
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.4));
}

.hero-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: var(--spacing-sm);
    letter-spacing: 1px;
}

.hero-description {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--spacing-md);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    flex-wrap: wrap;
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
    .hero-clouds,
    .hero-island--far,
    .hero-island--mid,
    .hero-island--near,
    .hero-ship--1,
    .hero-ship--2,
    .hero-ship--3,
    .hero-wave--1,
    .hero-wave--2,
    .hero-wave--3,
    .hero-wave--4,
    .hero-cannon-fire--1,
    .hero-cannon-fire--2,
    .cannon-smoke--1a, .cannon-smoke--1b, .cannon-smoke--1c,
    .cannon-smoke--2a, .cannon-smoke--2b, .cannon-smoke--2c,
    .cannonball--1,
    .cannonball--2,
    .hero-splash--1,
    .hero-splash--2 {
        animation: none;
    }
}