/* =========================================================
   SEA LICENSING — SEAFARERS PORTAL
   FINAL DESKTOP POLISH V2
   Adds richer maritime texture + stronger premium depth
   ========================================================= */

@media (min-width:1051px){

  /* ---------------------------------------------------------
     SECTION BACKGROUND / MARITIME TEXTURE
     --------------------------------------------------------- */

  body.seafarers-page section:has(.sfw-portal-grid){
    position:relative;
    isolation:isolate;
    overflow:hidden;

    background:
      linear-gradient(
        115deg,
        #163a56 0%,
        #1b4868 46%,
        #215878 100%
      ) !important;
  }

  body.seafarers-page section:has(.sfw-portal-grid) > *{
    position:relative;
    z-index:1;
  }

  /* richer nautical / chart texture */
  body.seafarers-page section:has(.sfw-portal-grid)::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;

    background:
      radial-gradient(
        circle at 76% 28%,
        rgba(123,220,242,.12) 0%,
        rgba(123,220,242,.05) 16%,
        transparent 34%
      ),
      radial-gradient(
        circle at 18% 70%,
        rgba(89,188,220,.09) 0%,
        transparent 32%
      ),
      repeating-radial-gradient(
        circle at 84% 68%,
        rgba(203,241,249,.045) 0 1px,
        transparent 1px 52px
      ),
      repeating-linear-gradient(
        0deg,
        rgba(220,242,248,.04) 0,
        rgba(220,242,248,.04) 1px,
        transparent 1px,
        transparent 64px
      ),
      repeating-linear-gradient(
        90deg,
        rgba(220,242,248,.032) 0,
        rgba(220,242,248,.032) 1px,
        transparent 1px,
        transparent 64px
      ),
      repeating-linear-gradient(
        -16deg,
        rgba(184,226,238,.028) 0,
        rgba(184,226,238,.028) 2px,
        transparent 2px,
        transparent 155px
      ),
      linear-gradient(
        180deg,
        rgba(255,255,255,.02) 0%,
        transparent 22%,
        transparent 56%,
        rgba(168,221,237,.05) 57%,
        transparent 58%,
        transparent 100%
      );

    opacity:.72;
  }

  /* glow field behind the screenshot */
  body.seafarers-page section:has(.sfw-portal-grid)::after{
    content:"";
    position:absolute;
    z-index:0;
    pointer-events:none;

    width:980px;
    height:980px;

    right:-180px;
    bottom:-360px;

    border-radius:50%;

    background:
      radial-gradient(
        circle,
        rgba(89,202,233,.18) 0%,
        rgba(89,202,233,.08) 24%,
        rgba(89,202,233,.03) 42%,
        transparent 64%
      );

    filter:blur(16px);

    animation:
      sfwPortalPolishGlow 14s ease-in-out infinite alternate;
  }

  @keyframes sfwPortalPolishGlow{
    from{
      transform:
        translate3d(-12px,18px,0)
        scale(.96);
      opacity:.72;
    }
    to{
      transform:
        translate3d(28px,-24px,0)
        scale(1.06);
      opacity:1;
    }
  }


  /* ---------------------------------------------------------
     GRID BALANCE
     --------------------------------------------------------- */

  .sfw-portal-grid{
    align-items:center !important;
    gap:78px !important;
  }


  /* ---------------------------------------------------------
     LEFT COPY / FEATURE TILES
     --------------------------------------------------------- */

  .sfw-portal-features{
    gap:10px !important;
  }

  .sfw-portal-feature{
    position:relative;
    overflow:hidden;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.065) 0%,
        rgba(255,255,255,.035) 100%
      ) !important;

    border:1px solid rgba(147,211,232,.16) !important;

    box-shadow:
      0 10px 22px rgba(0,14,24,.10),
      inset 0 1px 0 rgba(255,255,255,.04);

    backdrop-filter:blur(7px) saturate(115%);
    -webkit-backdrop-filter:blur(7px) saturate(115%);

    transition:
      transform .28s cubic-bezier(.16,1,.3,1),
      border-color .28s ease,
      box-shadow .28s ease,
      background .28s ease;
  }

  .sfw-portal-feature::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,.02) 22%,
        rgba(145,223,242,.08) 52%,
        transparent 78%
      );
    opacity:.55;
  }

  .sfw-portal-feature:hover{
    transform:translateY(-4px);
    border-color:rgba(120,214,241,.28) !important;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.09) 0%,
        rgba(126,199,224,.06) 100%
      ) !important;

    box-shadow:
      0 16px 32px rgba(0,14,24,.16),
      0 0 0 1px rgba(131,214,240,.05) inset;
  }


  /* ---------------------------------------------------------
     PORTAL VISUAL / SCREENSHOT
     --------------------------------------------------------- */

  .sfw-portal-grid > :last-child{
    position:relative;
    z-index:2;
    transform-origin:60% 50%;
  }

  /* stronger in-view presentation while keeping existing tilt system */
  .sfw-portal-grid.sfw-portal-inview > :last-child{
    transform:
      perspective(1200px)
      rotateX(var(--sfw-rx,0deg))
      rotateY(var(--sfw-ry,0deg))
      translateY(var(--sfw-float,0px))
      scale(1.10) !important;

    filter:
      drop-shadow(0 28px 38px rgba(0,15,28,.24))
      drop-shadow(0 0 34px rgba(93,205,239,.10)) !important;
  }

  /* halo behind screenshot */
  .sfw-portal-grid > :last-child::before{
    content:"";
    position:absolute;
    inset:-18px;
    z-index:-1;
    pointer-events:none;
    border-radius:22px;

    background:
      radial-gradient(
        circle at 50% 55%,
        rgba(98,208,238,.18) 0%,
        rgba(98,208,238,.08) 28%,
        rgba(98,208,238,.02) 50%,
        transparent 72%
      );

    filter:blur(8px);
  }

  /* premium edge/border */
  .sfw-portal-grid > :last-child::after{
    content:"";
    position:absolute;
    inset:-1px;
    pointer-events:none;
    border-radius:18px;

    border:1px solid rgba(141,216,239,.24);

    box-shadow:
      0 0 0 1px rgba(255,255,255,.03) inset,
      0 0 50px rgba(81,199,233,.07);
  }


  /* ---------------------------------------------------------
     CTA BUTTON
     --------------------------------------------------------- */

  .sfw-portal-grid > :first-child .btn{
    box-shadow:
      0 10px 24px rgba(0,15,26,.10);
  }

  .sfw-portal-grid > :first-child .btn:hover{
    box-shadow:
      0 16px 34px rgba(19,161,210,.20);
  }

}