/* ======================
   HERO
   ====================== */
.hero {
  background: none !important;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background-image: url("../images/activities.webp"); /* <-- your new hero image */
  background-repeat: no-repeat;
  background-size: 130%;
  background-position: 30% 10%;
  opacity: 0;
  transform: translateZ(0) scale(1.08);
  will-change: opacity, transform;
}

.page-loaded .hero::before {
  animation: heroMovieIn 1600ms cubic-bezier(.22, 1, .25, 1) both;
}

@keyframes heroMovieIn {
  from { opacity: 0; transform: translateZ(0) scale(1.35); }
  to   { opacity: 1; transform: translateZ(0) scale(1.00); }
}

/* ======================
   INTRO (same layout as your screenshot)
   ====================== */
.accom-intro{
  max-width: 1180px;
  margin-inline: auto;
  padding: 3.2rem 1.25rem 2.4rem;
}

.accom-intro-row{
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 3.6rem;
  align-items: start;
}

.accom-intro-title{
  margin: 0;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.15;
  color: #3a3a3a;
}
.accom-intro-title__sun{ color:#f4a91c; }
.accom-intro-title__sea{ color:#189dd8; }

.accom-intro-underline{
  width: 120px;
  height: 3px;
  border-radius: 999px;
  background: #189dd8;
  margin-top: 0.9rem;
}

.accom-intro-copy{
  margin: 0;
  max-width: 820px;
  font-size: 1rem;
  line-height: 1.65;
  color: #2f2f2f;
}

/* ======================
   GRID
   ====================== */
.accom-section {
  padding: 1rem 1rem 3rem;
}

.accom-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 330px));
  gap: 2.4rem;
  justify-content: center;
  max-width: 1180px;
  margin-inline: auto;
}

.accom-grid--tail{
  margin-top: 2rem;
  padding-top: 0.6rem;
  transform: translateX(-175px);
}

.accom-grid--tail .accom-card--col2{ grid-column: 2; }
.accom-grid--tail .accom-card--col3{ grid-column: 3; }

/* ======================
   REVEAL
   ====================== */
html.reveal-boot .reveal{
  --reveal-y: 54px;
  --reveal-scale: .94;
  --hover-scale: 1;

  opacity: 0;
  filter: blur(8px);
  transform: translate3d(0,var(--reveal-y),0) scale(var(--reveal-scale)) scale(var(--hover-scale));
  transition: none;
  will-change: transform, opacity, filter;
}

html.reveal-boot .reveal.is-visible{
  --reveal-y: 0px;
  --reveal-scale: 1;

  opacity: 1;
  filter: blur(0);
  transform: translate3d(0,var(--reveal-y),0) scale(var(--reveal-scale)) scale(var(--hover-scale));
  transition:
    opacity 900ms cubic-bezier(.18,1,.25,1),
    transform 900ms cubic-bezier(.18,1,.25,1),
    filter 900ms cubic-bezier(.18,1,.25,1);
  transition-delay: var(--reveal-delay, 0ms);
}

/* 🔥 punchy “pop” on the whole card (not just image) */
html.reveal-boot .accom-card.reveal.is-visible{
  animation: actCardPop 900ms cubic-bezier(.18,1,.25,1) both;
  animation-delay: var(--reveal-delay, 0ms);
  will-change: transform;
}

@keyframes actCardPop{
  0%   { transform: translate3d(0, 18px, 0) scale(.92); }
  60%  { transform: translate3d(0, 0px, 0) scale(1.02); }
  100% { transform: translate3d(0, 0px, 0) scale(1); }
}

/* ======================
   CARD
   ====================== */
.accom-card{
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background: #fff;
  min-height: 380px;
  cursor: pointer;

  box-shadow:
    0 10px 26px rgba(0,0,0,.10),
    0 30px 80px rgba(0,0,0,.06);

  outline: 1px solid rgba(0,0,0,.04);

  transition:
    box-shadow 380ms cubic-bezier(.2,.9,.2,1),
    filter 380ms cubic-bezier(.2,.9,.2,1);
}

/* IMAGE */
.accom-card__media{
  height: 260px;
  background-size: cover;
  background-position: center;
}

/* FRONT */
.accom-card__front{
  position: relative;
  z-index: 3;

  height: 120px;
  padding: 2.35rem 1.25rem 1.25rem;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.accom-card__front h3{
  margin: 0;
  font-size: 1.08rem;
  font-weight: 650;
  color: #111;
  letter-spacing: .1px;
}

.accom-card__front h3::after{
  content:"";
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  width: 72px;
  height: 3px;
  border-radius: 999px;
  background: #189dd8;
  opacity: .95;
  transition: background 450ms cubic-bezier(.16,1,.3,1), opacity 450ms cubic-bezier(.16,1,.3,1);
}

/* BACK */
.accom-card__back{
  position:absolute;
  inset:0;
  z-index: 4;

  background: #e69a21;
  color:#fff;

  /* put content HIGH */
  padding: 1.55rem 1.6rem 2.4rem;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;

  opacity:0;
  transition: opacity 520ms cubic-bezier(.16,1,.3,1);
}

.accom-card__back::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(900px 420px at 20% 10%, rgba(255,255,255,.14), transparent 60%);
  opacity: .9;
  z-index: 0;
}

.accom-card__back::after{
  content:"";
  position:absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  width: 72px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  opacity: 0;
  transition: opacity 520ms cubic-bezier(.16,1,.3,1);
  z-index: 2;
}

.accom-card__back h3,
.accom-card__back p{
  position: relative;
  z-index: 1;
}

.accom-card__back h3{
  margin: 0 0 .75rem;
  font-size: 1.2rem;
  font-weight: 750;
  letter-spacing: .15px;
  line-height: 1.15;
}

.accom-card__back p{
  margin: 0;
  font-size: .98rem;
  line-height: 1.55;
  opacity: .95;
}

/* ======================
   HOVER (scale now works, without breaking reveal)
   ====================== */
@media (hover:hover){
  .accom-card:hover{
    --hover-scale: 1.018;  /* <— this is why it now visibly scales */
    box-shadow:
      0 20px 46px rgba(0,0,0,.14),
      0 60px 160px rgba(0,0,0,.18);
  }

  .accom-card:hover .accom-card__back{ opacity: 1; }
  .accom-card:hover .accom-card__back::after{ opacity: 1; }

  /* front blue stripe becomes white */
  .accom-card:hover .accom-card__front h3::after{
    background: rgba(255,255,255,.95);
    opacity: 1;
  }
}

/* ======================
   ACTIVITY IMAGE BACKGROUNDS
   ====================== */
.act-bg--forest-adventures     { background-image: url("../images/act_forest_adventures.jpg"); }
.act-bg--theatre-bay           { background-image: url("../images/act_theatre_on_the_bay.jpg"); }
.act-bg--cape-hope-paragliding { background-image: url("../images/act_cape_hope_paragliding.jpg"); }
.act-bg--cape-town-helicopters { background-image: url("../images/act_cape_town_helicopters.jpg"); }
.act-bg--sport-helicopters     { background-image: url("../images/act_sport_helicopters.jpg"); }
.act-bg--waterfront-boat-tours { background-image: url("../images/act_waterfront_boat_tours.jpg"); }
.act-bg--white-shark-divers    { background-image: url("../images/act_white_shark_divers.jpg"); }
.act-bg--harties-horse-trails  { background-image: url("../images/act_harties_horse_trails.jpg"); }
.act-bg--heavenly-stables      { background-image: url("../images/act_heavenly_stables.jpg"); }
.act-bg--adrenalin-addo        { background-image: url("../images/act_adrenalin_addo.jpg"); }
.act-bg--graskop-gorge         { background-image: url("../images/act_graskop_gorge.jpg"); }
.act-bg--table-mountain        { background-image: url("../images/act_table_mountain_cableway.webp"); }
.act-bg--blue-train            { background-image: url("../images/act_blue_train.jpg"); }
.act-bg--hopon-hopoff          { background-image: url("../images/act_hop_on_hop_off.jpg"); }
.act-bg--elgin-railway-market  { background-image: url("../images/act_elgin_railway_market.jpg"); }
.act-bg--two-oceans-aquarium   { background-image: url("../images/act_two_oceans_aquarium.jpg"); }
.act-bg--adventure-shop        { background-image: url("../images/act_adventure_shop.jpg"); }
.act-bg--acrobranch            { background-image: url("../images/act_acrobranch.jpg"); }
.act-bg--knysna-charters       { background-image: url("../images/act_knysna_charters.jpg"); }
.act-bg--george-lion-park      { background-image: url("../images/act_george_lion_park.webp"); }


/* =========================================================
   MOBILE PORTRAIT — ACTIVITIES (same behavior as accom)
   ========================================================= */
@media (max-width: 430px) and (orientation: portrait) {

  /* ---------------------------------
     1) Global safety
     --------------------------------- */
  html, body{
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  /* ---------------------------------
    2) HERO: mobile zoom + hide hero-copy
  --------------------------------- */
  .hero{
    position: relative !important;
    overflow: hidden !important;
    background: #000 !important;
    min-height: 56svh !important;
  }

  .hero-copy{ display:none !important; }

  .hero::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index: 5 !important;

    background-image: url("../images/activities.webp") !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: 44% 35% !important;

    opacity: 1 !important;

    /* ✅ DO NOT make transform !important or animation can't change it */
    transform: translate3d(0,0,0) scale(1.0);
    will-change: transform;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-origin: center center;

    /* kill desktop animation baseline */
    animation: none !important;
  }

  body.page-loaded .hero::before{
    animation: actHeroMobileZoomOnly 1400ms cubic-bezier(.22,1,.25,1) both !important;
  }

  @keyframes actHeroMobileZoomOnly{
    from { transform: translate3d(0,0,0) scale(1.7); }
    to   { transform: translate3d(0,0,0) scale(1.0); }
  }

  /* ---------------------------------
     3) INTRO: stack
     --------------------------------- */
  .accom-intro{
    padding: 0.5rem 0.95rem 1.25rem !important;
  }

  .accom-intro-row{
    grid-template-columns: 1fr !important;
    gap: 0.9rem !important;
  }

  .accom-intro-title{
    font-size: clamp(1.35rem, 6.2vw, 1.7rem) !important;
    line-height: 1.18 !important;
  }

  .accom-intro-underline{
    width: 88px !important;
    margin-top: 0.65rem !important;
  }

  .accom-intro-copy{
    font-size: 0.98rem !important;
    line-height: 1.6 !important;
    max-width: none !important;
  }

  /* ---------------------------------
     4) GRID: single column + kill tail translate
     --------------------------------- */
  .accom-section{
    padding: 0.75rem 0.95rem 2.4rem !important;
  }

  .accom-grid{
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    justify-content: stretch !important;
    max-width: 520px !important;
    margin-inline: auto !important;
  }

  .accom-grid--tail{
    margin-top: 1.25rem !important;
    padding-top: 0 !important;
    transform: none !important;
  }

  .accom-grid--tail .accom-card--col2,
  .accom-grid--tail .accom-card--col3{
    grid-column: auto !important;
  }

  /* ---------------------------------
     5) Cards: mobile sizing
     --------------------------------- */
  .accom-card{
    border-radius: 20px !important;
    min-height: 0 !important;
  }

  .accom-card__media{
    height: 210px !important;
    position: relative; /* needed for ::after hint */
  }

  .accom-card__front{
    height: auto !important;
    padding: 1.15rem 1.1rem 1.25rem !important;
  }

  .accom-card__front h3{
    font-size: 1.02rem !important;
  }

  .accom-card__front h3::after{
    left: 1.1rem !important;
    bottom: 1.05rem !important;
    width: 64px !important;
  }

  .accom-card__back{
    padding: 1.15rem 1.15rem 2.7rem !important;
  }

  .accom-card__back h3{
    font-size: 1.08rem !important;
    margin-bottom: .45rem !important;
  }

  .accom-card__back p{
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
  }

  .accom-card__back::after{
    left: 1.1rem !important;
    bottom: 1.05rem !important;
    width: 64px !important;
  }

  /* ---------------------------------
     6) Touch: SAME flip + auto-height + tap hint
     --------------------------------- */
  @media (hover: none){

    /* TAP HINT */
    .accom-card__media::after{
      content: "Tap to read more";
      position: absolute;
      top: .65rem;
      right: .65rem;
      z-index: 6;

      font-size: 0.58rem;
      font-weight: 900;
      letter-spacing: .10em;
      text-transform: uppercase;

      color: rgba(15,23,42,.78);
      background: rgba(255,255,255,.96);
      border: 1px solid rgba(15,23,42,.14);

      padding: .18rem .38rem;
      border-radius: 999px;

      pointer-events: none;
      white-space: nowrap;

      opacity: .95;
      transform: translate3d(0,0,0);
      transition: opacity 220ms ease, transform 220ms ease;
    }

    /* tiny pulse */
    .accom-card__media::after{
      animation: tapHintPulse 2200ms ease-in-out infinite;
    }

    @keyframes tapHintPulse{
      0%,100%{ transform: translate3d(0,0,0); opacity: .78; }
      50%{ transform: translate3d(0,-2px,0); opacity: 1; }
    }

    /* hide hint when open */
    .accom-card.is-open .accom-card__media::after{
      opacity: 0;
      animation: none;
    }

    /* FLIP SETUP */
    .accom-card{
      position: relative !important;
      cursor: pointer !important;
      -webkit-tap-highlight-color: transparent;

      perspective: 1200px;
      transform-style: preserve-3d;

      transition: box-shadow 260ms ease, transform 260ms ease;
      will-change: height, transform;
      overflow: hidden !important;
    }

    .accom-card__front,
    .accom-card__back{
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      transform-style: preserve-3d;
      will-change: transform, opacity;
    }

    .accom-card__front{
      position: relative;
      z-index: 2;
      transform: rotateY(0deg);
      transition:
        transform 620ms cubic-bezier(.2,.9,.2,1),
        opacity 260ms ease;
    }

    .accom-card__media{
      transition:
        opacity 240ms ease,
        transform 620ms cubic-bezier(.2,.9,.2,1);
      transform-origin: center center;
      will-change: opacity, transform;
    }

    .accom-card__back{
      position: absolute !important;
      inset: 0 !important;
      z-index: 3;

      opacity: 0;
      transform: rotateY(-180deg);
      transition:
        transform 620ms cubic-bezier(.2,.9,.2,1),
        opacity 260ms ease;

      border-radius: inherit;
    }

    .accom-card.is-open .accom-card__front{
      transform: rotateY(180deg);
      opacity: 0;
      pointer-events: none;
    }

    .accom-card.is-open .accom-card__back{
      opacity: 1;
      transform: rotateY(0deg);
    }

    .accom-card.is-open .accom-card__media{
      opacity: 0 !important;
      transform: scale(1.02);
      pointer-events: none;
    }

    .accom-card.is-open{
      transform: translate3d(0,-2px,0);
    }

    /* selection */
    .accom-card *{
      -webkit-user-select: none;
      user-select: none;
    }
    .accom-card.is-open .accom-card__back p,
    .accom-card.is-open .accom-card__back h3{
      -webkit-user-select: text;
      user-select: text;
    }
  }

  /* ---------------------------------
     7) Reveal: reduce heavy blur on phones
     --------------------------------- */
  html.reveal-boot .reveal{
    filter: none !important;
    transform: translate3d(0,24px,0) scale(.985) !important;
  }
}