/* =========================================================================
   Clinic82 · Home intro (splash) — first screen of the home page.
   Built as a page section, not an overlay, so search engines and ad landing
   checks see the home content straight away. Brand teal and gold from the
   Design Pack v1.0 (logo master render background rgb(6,50,50)).

   Without JavaScript (or with reduced motion) the intro shows its finished
   frame. With JavaScript, an inline script adds .c82-intro--animate, which
   plays the choreography:
     0.0–1.6s  a large logo fades in alone, in the centre of the screen
     1.4–2.2s  it fades out; then the logo in its resting place fades in
     2.0s      the building fades in and drifts closer
     2.6s      the gold rule draws; 3.0s / 3.6s the two tagline lines
     4.2s      the buttons and "Limassol · Cyprus"
   ========================================================================= */
.c82-intro {
  --intro-teal: #053333;
  --intro-gold: #D8B66A;
  --intro-cream: #EFE6D2;
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  align-items: center;
  background: var(--intro-teal);
  color: var(--intro-cream);
  overflow: hidden;
}
.c82-intro__photo { position: relative; height: 100%; min-height: 100svh; overflow: hidden; }
.c82-intro__photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 55%;
}
/* Fade the building into the teal on the right and at the foot */
.c82-intro__photo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5,51,51,0) 45%, rgba(5,51,51,.75) 82%, var(--intro-teal) 100%),
    linear-gradient(0deg, rgba(5,51,51,.85) 0%, rgba(5,51,51,0) 28%),
    linear-gradient(180deg, rgba(5,51,51,.6) 0%, rgba(5,51,51,0) 22%);
}
.c82-intro__panel {
  display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 4vh, 44px);
  padding: 96px clamp(24px, 5vw, 72px) 64px;
}
.c82-intro__brand { display: flex; align-items: center; gap: clamp(24px, 3.2vw, 48px); }
.c82-intro__logo {
  position: relative; z-index: 2;
  width: clamp(150px, 15vw, 230px); height: auto;
  filter: drop-shadow(0 0 6px rgba(216,182,106,.15));
}
.c82-intro__rule {
  width: 1px; height: clamp(110px, 13vw, 170px);
  background: linear-gradient(180deg, rgba(216,182,106,0), var(--intro-gold) 20%, var(--intro-gold) 80%, rgba(216,182,106,0));
  transform-origin: center;
}
.c82-intro__tagline {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 46px); line-height: 1.18;
  color: var(--intro-cream);
}
.c82-intro__tagline span, .c82-intro__tagline em { display: block; }
.c82-intro__tagline em { color: var(--intro-gold); }
.c82-intro__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.c82-intro__btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 26px; border: 1px solid var(--intro-gold); border-radius: 999px;
  color: var(--intro-gold); text-decoration: none;
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  transition: background .3s, color .3s;
}
.c82-intro__btn:hover, .c82-intro__btn:focus-visible { background: var(--intro-gold); color: var(--intro-teal); }
.c82-intro__btn--ghost { border-color: rgba(239,230,210,.35); color: var(--intro-cream); }
.c82-intro__btn--ghost:hover, .c82-intro__btn--ghost:focus-visible { background: var(--intro-cream); border-color: var(--intro-cream); color: var(--intro-teal); }
.c82-intro__place { margin: 0; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: rgba(216,182,106,.75); }
.c82-intro__scroll {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  width: 1px; height: 40px; background: linear-gradient(180deg, var(--intro-gold), rgba(216,182,106,0));
}

/* ---- Choreography (only when the inline script has measured the logo) ---- */
.c82-intro__hero-logo { display: none; }
.c82-intro--animate .c82-intro__hero-logo {
  display: block; position: absolute; z-index: 3; pointer-events: none;
  left: 50%; top: 50svh; width: clamp(220px, 24vw, 340px); height: auto;
  transform: translate(-50%, -50%) scale(.97); opacity: 0;
  animation: c82-hero-logo 2.1s ease-in-out .1s forwards;
}
.c82-intro--animate .c82-intro__logo { opacity: 0; animation: c82-fade 1s ease-out 2.15s forwards; }
.c82-intro--animate .c82-intro__photo img { opacity: 0; transform: scale(1.08); animation: c82-photo 6.5s cubic-bezier(.2,.7,.2,1) 2s forwards; }
.c82-intro--animate .c82-intro__rule { transform: scaleY(0); animation: c82-rule 1s cubic-bezier(.2,.7,.2,1) 2.6s forwards; }
.c82-intro--animate .c82-intro__tagline span,
.c82-intro--animate .c82-intro__tagline em { opacity: 0; transform: translateY(8px); }
.c82-intro--animate .c82-intro__tagline span { animation: c82-fade-up .9s ease-out 3s forwards; }
.c82-intro--animate .c82-intro__tagline em { animation: c82-fade-up .9s ease-out 3.6s forwards; }
.c82-intro--animate .c82-intro__actions { opacity: 0; animation: c82-fade-up .8s ease-out 4.2s forwards; }
.c82-intro--animate .c82-intro__place { opacity: 0; animation: c82-fade-up .8s ease-out 4.5s forwards; }
.c82-intro--animate .c82-intro__scroll { opacity: 0; animation: c82-fade-up .8s ease-out 4.8s forwards; }

@keyframes c82-hero-logo {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.97); }
  38%  { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: brightness(1.12); }
  62%  { opacity: 1; transform: translate(-50%, -50%) scale(1.01); filter: brightness(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.04); }
}
@keyframes c82-fade      { to { opacity: 1; } }
@keyframes c82-photo     { to { opacity: 1; transform: none; } }
@keyframes c82-rule      { to { transform: none; } }
@keyframes c82-fade-up   { to { opacity: 1; transform: none; } }

/* Phones and narrow tablets: building on top, fading down into the teal */
@media (max-width: 820px) {
  .c82-intro { grid-template-columns: 1fr; align-items: start; }
  .c82-intro__photo { min-height: 0; height: 52svh; }
  /* The phone crop is centred on the entrance, so the doors and the sign sit mid-screen */
  .c82-intro__photo img { object-position: center 40%; }
  .c82-intro__photo::after {
    background: linear-gradient(0deg, var(--intro-teal) 0%, rgba(5,51,51,.6) 22%, rgba(5,51,51,0) 50%),
                linear-gradient(180deg, rgba(5,51,51,.65) 0%, rgba(5,51,51,0) 25%);
  }
  .c82-intro__panel { padding: 8px 20px 72px; margin-top: -40px; position: relative; }
  .c82-intro__brand { flex-direction: column; gap: 18px; text-align: center; }
  .c82-intro__rule { width: 64px; height: 1px;
    background: linear-gradient(90deg, rgba(216,182,106,0), var(--intro-gold), rgba(216,182,106,0)); }
  .c82-intro--animate .c82-intro__rule { transform: scaleX(0); }
  .c82-intro__logo { width: 140px; }
  .c82-intro--animate .c82-intro__hero-logo { width: 200px; }
  .c82-intro__tagline { font-size: 27px; }
}