/* =========================================================
   AYN YACHT MANAGEMENT — "Above Water" layer
   Loaded AFTER theme.css. Corrects the Deep Sea concept.

   WHY THIS EXISTS
   The Deep Sea layer rendered the site from BELOW the waterline:
   caustics, god rays and rising bubbles are all things you only
   see submerged. For a yacht management company that reads as
   sinking. This layer lifts the whole site above the surface.

   WHAT IT DELIBERATELY DOES NOT DO
   It does not restyle the palette. The blues stay dominant and
   every card, button, badge and accent is left exactly as
   theme.css has it. Warmth appears only where a dusk sun would
   actually put it — low on the horizon — plus a few small
   champagne accents. An earlier draft warmed the whole site and
   it read as a travel brand, not a management firm.

   TO REVERT: remove the <link> to this file from index.html.
   theme.css is untouched.

   CONTENTS
   1. Sky backdrop (was: water column)
   2. Atmosphere (was: caustics / rays / bubbles)
   3. Dark sections — horizon light
   4. Light sections — neutral daylight
   5. Wave separators — lit from the low sun
   6. Loader chrome
   ========================================================= */

:root{
  /* the dusk horizon. Used sparingly and only low in a section. */
  --horizon:#e0a865;
  --horizon-deep:#b8722c;
  --horizon-soft:rgba(224,168,101,.34);
}

/* =========================================================
   1. SKY BACKDROP
   The existing gradient already ran dark-at-top to light-at-
   bottom, which is wrong for depth but right for sky. It only
   needed a warm band where the sun actually is.
   ========================================================= */
.ayn-ocean{
  background:linear-gradient(180deg,
    #02101a 0%,
    #062736 30%,
    #0a4258 58%,
    #12607a 82%,
    #3f6975 93%,
    #7a6448 100%);
}

/* =========================================================
   2. ATMOSPHERE
   script.js injects .ayn-caustics / .ayn-rays / .ayn-bubbles and
   is left untouched — the classes are restyled into things that
   exist above water. Bubbles have no above-water equivalent, so
   they go.
   ========================================================= */

/* was: caustics rippling under the surface -> high thin cloud,
   cool aloft, catching a little sun at the bottom of the frame */
.ayn-caustics{
  background:
    radial-gradient(58% 26% at 26% 16%,rgba(154,232,238,.13),transparent 70%),
    radial-gradient(64% 22% at 74% 34%,rgba(95,212,224,.10),transparent 72%),
    radial-gradient(110% 30% at 50% 102%,rgba(224,168,101,.26),transparent 72%);
  filter:blur(20px);
  animation:ayn-drift 46s ease-in-out infinite alternate;
}

/* was: god rays through water -> crepuscular rays at dusk.

   The underwater tell is near-vertical shafts falling from a
   surface overhead. Above water the rays radiate FROM the sun,
   so the conic gradient's origin is the sun itself: on the
   horizon line, off-centre right, matching where the warm glow
   sits in the loader footage. The fan therefore rakes up and
   across the frame instead of standing symmetrically upright.

   The radial mask fades the rays out with distance from the sun
   and kills the downward half, so they read as light thrown from
   the horizon rather than a starburst.

   Motion is ~2 degrees of rotation about the sun over three and a
   half minutes. Slow enough that you never catch it moving, only
   notice the frame has changed. --sun-x / --sun-y are the single
   source of truth: move them and glow, rays and mask follow. */
:root{
  --sun-x:62%;
  --sun-y:87%;

  /* --- ray dial. These four are the whole tuning surface. --- */
  --ray-a:.068;        /* brightness of one ray. Higher = more visible. */
  --ray-gap:7deg;      /* dark space before each ray            */
  --ray-w:11deg;       /* where the ray ends                    */
  --ray-period:22deg;  /* wider = fewer, broader rays           */
  --ray-lo:.46;        /* fade floor, start of the drift        */
  --ray-hi:.70;        /* fade ceiling, end of the drift        */
  --ray-spread:74%;    /* how far up the frame the rays reach   */
}

.ayn-rays{
  background:
    repeating-conic-gradient(from 196deg at var(--sun-x) var(--sun-y),
      rgba(255,220,170,0)          0deg          var(--ray-gap),
      rgba(255,220,170,var(--ray-a)) var(--ray-gap) var(--ray-w),
      rgba(255,220,170,0)          var(--ray-w)  var(--ray-period)),
    radial-gradient(34% 20% at var(--sun-x) var(--sun-y),rgba(255,214,150,.27),transparent 74%);
  filter:blur(2.5px);
  -webkit-mask-image:radial-gradient(70% 52% at var(--sun-x) var(--sun-y),#000 0%,rgba(0,0,0,.55) 32%,transparent var(--ray-spread)),
                     linear-gradient(180deg,#000 0%,#000 80%,transparent 94%);
  mask-image:radial-gradient(70% 52% at var(--sun-x) var(--sun-y),#000 0%,rgba(0,0,0,.55) 32%,transparent var(--ray-spread)),
             linear-gradient(180deg,#000 0%,#000 80%,transparent 94%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
  transform-origin:var(--sun-x) var(--sun-y);
  mix-blend-mode:screen;
  opacity:.62;
  animation:ayn-sunrays 210s ease-in-out infinite alternate;
}
@keyframes ayn-sunrays{
  from{transform:rotate(-1.1deg);opacity:var(--ray-lo)}
  to  {transform:rotate(1.1deg);opacity:var(--ray-hi)}
}

/* rising bubbles only happen underwater. Gone. */
.ayn-bubbles{display:none!important}

/* =========================================================
   3. DARK SECTIONS — horizon light
   Same navy as before. The teal bloom that used to sit high in
   the frame (reading as light filtering down from a surface
   overhead) is moved low, and a restrained warm glow is placed
   under it where the sun would be.
   ========================================================= */
.hero{
  background:
    radial-gradient(50% 26% at var(--sun-x) var(--sun-y),rgba(224,168,101,.48),transparent 68%),
    radial-gradient(90% 16% at 50% 90%,rgba(255,206,140,.20),transparent 74%),
    radial-gradient(66% 40% at 26% 96%,rgba(27,139,163,.30),transparent 68%),
    linear-gradient(178deg,#02101a 0%,#062a3d 44%,#0b4a63 78%,#14657e 100%);
}
.hero:before{
  background:
    linear-gradient(100deg,rgba(2,16,26,.60) 0%,rgba(2,16,26,.26) 48%,transparent 74%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.016) 0,rgba(255,255,255,.016) 1px,transparent 1px,transparent 24px);
}
/* the two floating orbs read as underwater light blobs — settle
   them low so they behave like haze near the horizon instead */
.glow-one{
  top:auto;bottom:-320px;right:-220px;
  background:radial-gradient(circle,rgba(224,168,101,.20),rgba(224,168,101,0) 68%);
}
.glow-two{background:radial-gradient(circle,rgba(27,139,163,.20),transparent 70%)}

.section-navy{
  background:
    radial-gradient(50% 26% at 46% 88%,rgba(224,168,101,.38),transparent 70%),
    radial-gradient(90% 15% at 50% 93%,rgba(255,206,140,.16),transparent 76%),
    radial-gradient(60% 36% at 80% 98%,rgba(27,139,163,.26),transparent 68%),
    linear-gradient(174deg,#03192a 0%,#07364c 52%,#0a5068 88%,#11637a 100%);
}
.contact-section{
  background:
    radial-gradient(52% 26% at 54% 86%,rgba(224,168,101,.40),transparent 70%),
    radial-gradient(90% 15% at 50% 92%,rgba(255,206,140,.16),transparent 76%),
    radial-gradient(58% 34% at 20% 96%,rgba(95,212,224,.16),transparent 66%),
    linear-gradient(174deg,#03192a 0%,#083b52 54%,#0c5670 88%,#0f6178 100%);
}

/* a single hairline where sky meets water. Hero only: it needs
   open sky either side of it, and in About / Contact it crossed
   the copy and read as a stray divider. */
.hero:after{
  content:"";position:absolute;left:0;right:0;bottom:208px;height:1px;z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,222,182,.24) 28%,rgba(255,222,182,.30) 60%,transparent);
}

/* small warm accents, kept to the champagne the brand already had */
.hero-proof span:before{color:var(--champagne)}
.ldr-progress i,
.package-card.featured:before{background:linear-gradient(90deg,var(--tide),var(--aqua),var(--champagne))}

/* =========================================================
   4. LIGHT SECTIONS — neutral daylight
   The old paper was a cool cyan-white, which belonged to the
   shallow-water idea. Nudged to a neutral white so the light
   sections read as daylight rather than as seen through water.
   Deliberately NOT beige.
   ========================================================= */
:root{
  --paper:#fbfcfc;
  --paper-2:#eef3f4;
  --paper-3:#f7fafa;
}
.capability-strip,
.section-white,
.section-soft,
.standard-section,
.process-section,
.faq-section,
.report-section{
  background-color:var(--paper);
  background-image:
    linear-gradient(180deg,#fbfcfc 0%,#eef3f4 54%,#f8fbfb 100%),
    repeating-linear-gradient(114deg,rgba(11,74,95,.020) 0 1px,transparent 1px 28px);
}
/* the blurred bloom used to be shallow-water shimmer; softened and
   warmed only at its lowest point so it reads as ambient light */
.section-white::after,
.section-soft::after,
.process-section::after,
.faq-section::after,
.report-section::after,
.standard-section::after{
  background:
    radial-gradient(36% 26% at 18% 18%,rgba(95,212,224,.22),transparent 64%),
    radial-gradient(30% 22% at 76% 46%,rgba(27,139,163,.13),transparent 66%),
    radial-gradient(44% 28% at 48% 96%,rgba(224,168,101,.16),transparent 70%);
  opacity:.55;
}

/* =========================================================
   5. WAVE SEPARATORS
   Kept — a wave seen from above is exactly the right image now.
   Rear layers stay sea-coloured; only the crest catches the sun.
   script.js sets --wave-color inline, hence !important.
   ========================================================= */
.hero-cut{--wave-color:#fbfcfc!important}
#about .ayn-waves.is-top{--wave-color:#f7fafa!important}
#about .ayn-waves.is-bottom{--wave-color:#fbfcfc!important}
.contact-section .ayn-waves.is-top{--wave-color:#f7fafa!important}
.ayn-waves span:nth-child(1){background-color:var(--wave-back,#155a76)}
.ayn-waves span:nth-child(2){background-color:var(--wave-mid,#2f88a4)}
.wv-front,.ayn-waves span:nth-child(3){filter:drop-shadow(0 -1.5px 0 rgba(255,226,186,.42))}
.wv-mid{filter:drop-shadow(0 -1px 0 rgba(255,214,164,.24))}

/* =========================================================
   6. LOADER CHROME
   The footage is already dusk; only the surround needs to agree.
   ========================================================= */
.ayn-loader{background:linear-gradient(180deg,#02101a 0%,#0a3346 58%,#061c28 100%)}
.ldr-progress{background:rgba(154,232,238,.20)}

/* =========================================================
   7. PORTRAIT / MOBILE — let the sunset reach the fold

   On a phone the hero stacks to ~1390px tall, so the fold lands
   at roughly 50% OF THE HERO. A sun at 87% with a shallow glow
   sits entirely below it: real, correct, and invisible. The first
   screenful was flat navy and the change looked like it had not
   carried over at all.

   The fix is not to drag the sun up into the copy — that breaks
   the horizon and puts a glow behind the headline. The sun stays
   low; its glow is simply made large enough to wash up past the
   halfway mark, which is what a sunset actually does to a sky.
   Anything centred below ~90% needs roughly 100% height to reach
   the fold — hence the very large radials here.

   Note: do NOT add a top-down darkening scrim in this block. An
   earlier attempt did, and it cancelled exactly the warmth this
   block exists to reveal. The inherited left-to-right scrim from
   section 3 already protects the headline.
   ========================================================= */
@media(max-aspect-ratio:5/4){
  :root{
    --sun-y:88%;
    --ray-spread:150%;   /* rays climb well past the sun's own glow */
    --ray-a:.055;        /* eased back: they cover far more sky here */
    --ray-lo:.40;
    --ray-hi:.62;
  }

  /* Base stays DARK navy all the way down — it does not climb to
     the bright teal the desktop hero ends on. Orange laid over
     bright teal averages to olive; over navy it stays orange.
     That was the whole reason the first mobile pass looked muddy.

     Warmth is a linear wash rising from the waterline rather than
     a big radial: a radial large enough to reach the fold puts a
     hot spot directly behind the glass card.

     The wash reaches 84% up each section, not 64%. Mobile
     sections run 1400-1900px tall, so a band confined to the
     bottom fifth is off-screen almost the whole time you are in
     the section and the change reads as missing. */
  .hero{
    background:
      linear-gradient(0deg,
        rgba(255,168,80,.62) 0%,
        rgba(255,168,80,.32) 20%,
        rgba(255,171,88,.16) 40%,
        rgba(255,173,94,.08) 58%,
        rgba(255,173,94,.03) 70%,
        transparent 84%),
      radial-gradient(120% 22% at 30% 100%,rgba(27,139,163,.30),transparent 72%),
      linear-gradient(178deg,#02101a 0%,#05202f 46%,#063243 78%,#07394b 100%);
  }
  .section-navy{
    background:
      linear-gradient(0deg,
        rgba(255,168,80,.54) 0%,
        rgba(255,168,80,.28) 20%,
        rgba(255,171,88,.14) 40%,
        rgba(255,173,94,.07) 58%,
        rgba(255,173,94,.03) 70%,
        transparent 84%),
      linear-gradient(174deg,#03192a 0%,#06304a 50%,#08405a 100%);
  }
  .contact-section{
    background:
      linear-gradient(0deg,
        rgba(255,168,80,.56) 0%,
        rgba(255,168,80,.29) 20%,
        rgba(255,171,88,.15) 40%,
        rgba(255,173,94,.07) 58%,
        rgba(255,173,94,.03) 70%,
        transparent 84%),
      linear-gradient(174deg,#03192a 0%,#073349 50%,#09455c 100%);
  }

  /* the hairline belongs to the desktop composition — on a tall
     narrow hero it lands mid-copy and reads as a stray rule */
  .hero:after{display:none}
}