/* ─── Seasonal hero overlay ───────────────────────────────────────────────
   Canvas sits above the hero background image but below the text content
   (.dh-hero-content has z-10, so this stays under it) and never blocks
   clicks/taps. Used for autumn leaves, winter snow and spring petals.
*/
.dh-seasonal-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    display: block;
}

/* ─── Summer sun (DOM + screen blend, sits in the top-right corner so it
   never overlaps the headline/text on the left, and blends naturally into
   the photo instead of looking like a flat sticker on top of it) ────────── */
.dh-summer-sun {
    position: absolute;
    top: -120px;
    right: -120px;
    width: 520px;
    height: 520px;
    pointer-events: none;
    overflow: hidden;
    z-index: 3;
    transform-origin: top right;
}

.dh-sun-glow {
    position: absolute;
    top: 60px;
    right: 60px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(255,223,132,0.65) 0%, rgba(255,243,210,0.22) 50%, rgba(255,255,255,0) 72%);
    mix-blend-mode: screen;
    filter: blur(8px);
}

.dh-sun-rays {
    position: absolute;
    top: 0;
    right: 0;
    width: 440px;
    height: 440px;
    background: repeating-conic-gradient(
        from 0deg,
        transparent 0deg 13.5deg,
        rgba(255, 246, 222, 0.4) 14.3deg 15.5deg,
        transparent 16.3deg 30deg
    );
    border-radius: 50%;
    mix-blend-mode: screen;
    filter: blur(0.5px);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 16%, rgba(0,0,0,0.7) 55%, rgba(0,0,0,0) 88%);
    mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 16%, rgba(0,0,0,0.7) 55%, rgba(0,0,0,0) 88%);
    animation: dh-rotate-rays 100s linear infinite;
}

.dh-sparkle {
    position: absolute;
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,215,0,0) 70%);
    border-radius: 50%;
    mix-blend-mode: screen;
    opacity: 0;
    animation-name: dh-float-sparkle;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes dh-rotate-rays {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes dh-float-sparkle {
    0%   { transform: translateY(0) scale(0.5); opacity: 0; }
    50%  { opacity: var(--dh-sparkle-opacity, 0.7); }
    100% { transform: translateY(-34px) scale(1.2); opacity: 0; }
}

/* ─── Summer beach corner (bottom-left) ───────────────────────────────────
   Elegant thin-line illustration matching the site's icon language:
   drifting wave lines, soft sand tint, a gently swaying umbrella and a
   couple of sunlight glints on the water. Fades out at the edges via a
   mask so it blends into the hero background instead of sitting in a box.
*/
.dh-beach-scene {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 280px;
    height: 180px;
    pointer-events: none;
    z-index: 3;
}

.dh-beach-scene svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.dh-wave-line {
    animation-name: dh-wave-drift;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.dh-wave-1 { animation-duration: 34s; }
.dh-wave-2 { animation-duration: 24s; }
.dh-wave-3 { animation-duration: 18s; }

@keyframes dh-wave-drift {
    from { transform: translateX(0); }
    to   { transform: translateX(-300px); }
}

.dh-umbrella-sway {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: dh-umbrella-sway 6s ease-in-out infinite alternate;
}

@keyframes dh-umbrella-sway {
    from { transform: rotate(-1.6deg); }
    to   { transform: rotate(1.6deg); }
}

.dh-beach-sparkle {
    animation-name: dh-beach-twinkle;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes dh-beach-twinkle {
    0%, 100% { opacity: 0; }
    50%      { opacity: var(--dh-beach-sparkle-opacity, 0.85); }
}

.dh-gull {
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transform-box: fill-box;
    transform-origin: 50% 50%;
}
.dh-gull-1 { animation-name: dh-gull-hover-1; animation-duration: 7s; }
.dh-gull-2 { animation-name: dh-gull-hover-2; animation-duration: 9s; animation-delay: 1.2s; }

@keyframes dh-gull-hover-1 {
    from { transform: translate(-10px, 3px); }
    to   { transform: translate(10px, -4px); }
}
@keyframes dh-gull-hover-2 {
    from { transform: translate(-8px, -3px); }
    to   { transform: translate(9px, 4px); }
}

@media (prefers-reduced-motion: reduce) {
    .dh-seasonal-canvas,
    .dh-summer-sun,
    .dh-beach-scene {
        display: none;
    }
}



/* ── Лято: чайки и меко боке ── */
.dh-summer-extras{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1; }
.dh-sum-gull{ position:absolute; opacity:.75; }
.dh-sum-gull.g1{ top:16%; animation:dh-gull-fly 46s linear infinite, dh-gull-bob 3.2s ease-in-out infinite; }
.dh-sum-gull.g2{ top:24%; animation:dh-gull-fly 62s linear infinite 14s, dh-gull-bob 3.8s ease-in-out infinite .6s; opacity:.55; }
@keyframes dh-gull-fly{ from{ left:-60px; } to{ left:105%; } }
@keyframes dh-gull-bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
.dh-sum-bokeh{
  position:absolute; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,236,180,.5) 0%, rgba(255,236,180,0) 70%);
  animation:dh-bokeh-float 12s ease-in-out infinite alternate;
}
.dh-sum-bokeh.b1{ width:120px;height:120px; top:22%; left:12%; }
.dh-sum-bokeh.b2{ width:80px;height:80px; top:48%; left:70%; animation-delay:-4s; }
.dh-sum-bokeh.b3{ width:60px;height:60px; top:64%; left:32%; animation-delay:-8s; }
@keyframes dh-bokeh-float{ from{ transform:translate(0,0) scale(1); opacity:.7;} to{ transform:translate(20px,-16px) scale(1.15); opacity:1;} }
@media (prefers-reduced-motion:reduce){ .dh-sum-gull,.dh-sum-bokeh{ animation:none; display:none; } }