/* ==========================================================================
   Psihologie Roxana Pătru
   --------------------------------------------------------------------------
   1. Tokens
   2. Base
   3. Backdrop (grain + aura)
   4. Card
   5. Logo
   6. Typography
   7. Service list (hearts)
   8. Contact buttons
   9. Footer
  10. Responsive
  11. Reduced motion
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */

:root {
  /* Surfaces */
  --bg:           #1A1A1E;
  --card:         #FFFFFF;
  --line:         #EDE4E0;

  /* Coral, in three strengths.
     --coral is the brand tone. It measures 2.4:1 on white, so it is used only
     for decoration (ring, divider, glow) and never for text on the card.
     --coral-text (5.0:1) and --coral-deep (7.4:1) carry text and controls. */
  --coral:        #FA876E;
  --coral-text:   #BE4A28;
  --coral-deep:   #9E3A1E;
  --coral-wash:   #FDF3EF;
  --coral-edge:   #F3D6CA;

  /* Text */
  --ink:          #2A2724;  /* 14.9:1 on white */
  --muted:        #6B625C;  /*  6.0:1 on white */

  --heart:        #F50000;

  /* Motion */
  --ease:         cubic-bezier(.22, .68, 0, 1);
}

/* 2. Base ------------------------------------------------------------------ */

*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.25rem;

  background: var(--bg);
  color: var(--ink);
  font-family: 'Quicksand', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;

  position: relative;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
  border-radius: 4px;
}

/* 3. Backdrop -------------------------------------------------------------- */

/* Film grain, carried over from the original site. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 512 512' width='512' height='512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.875' result='noise'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect filter='url(%23n)' width='512' height='512' fill='transparent'/%3E%3C/svg%3E");
  background-size: 512px;
  background-repeat: repeat;
}

/* Slow coral breath behind the card. */
body::after {
  content: '';
  position: fixed;
  left: 50%;
  top: 50%;
  width: 72vmax;
  height: 72vmax;
  margin: -36vmax 0 0 -36vmax;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(250, 135, 110, .13) 0%, transparent 62%);
  animation: aura 14s ease-in-out infinite;
}

@keyframes aura {
  0%, 100% { transform: scale(1);    opacity: .75; }
  50%      { transform: scale(1.16); opacity: 1; }
}

/* 4. Card ------------------------------------------------------------------ */

.card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  padding: 3rem 3rem 2.4rem;

  background: var(--card);
  border-radius: 20px;
  box-shadow: 0 28px 70px -22px rgba(0, 0, 0, .6);
  text-align: center;
  overflow: hidden;

  opacity: 0;
  transform: translateY(20px) scale(.985);
  animation: card-in 1s var(--ease) .1s forwards;
}

@keyframes card-in { to { opacity: 1; transform: none; } }

/* A single coral sheen crossing the card on load. */
.card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  pointer-events: none;
  transform: skewX(-14deg);
  background: linear-gradient(100deg, transparent, rgba(250, 135, 110, .22), transparent);
  animation: sheen 1.9s var(--ease) .9s both;
}

@keyframes sheen {
  from { left: -60%; opacity: 0; }
  25%  { opacity: 1; }
  to   { left: 130%; opacity: 0; }
}

/* Shared staggered entrance. Each element sets its own animation-delay. */
.reveal {
  opacity: 0;
  transform: translateY(11px);
  animation: rise-in .82s var(--ease) forwards;
}

@keyframes rise-in { to { opacity: 1; transform: none; } }

/* 5. Logo ------------------------------------------------------------------ */

.frame {
  position: relative;
  width: 104px;
  height: 104px;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: float 7s ease-in-out 2.2s infinite;
}

/* The dashed ring is its own layer so it can rotate independently. */
.frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 3px dashed var(--coral);
  border-radius: 50%;
  animation: spin 60s linear infinite,
             ring-in .9s var(--ease) .25s backwards;
}

@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes ring-in { from { opacity: 0; transform: scale(.88); } }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

.logo {
  width: 72%;
  height: 72%;
  clip-path: inset(100% 0 0 0);
  opacity: 0;
  animation: unveil 1.4s var(--ease) .55s forwards;
}

@keyframes unveil {
  from { clip-path: inset(100% 0 0 0); opacity: 0; }
  15%  { opacity: 1; }
  to   { clip-path: inset(0 0 0 0);    opacity: 1; }
}

/* 6. Typography ------------------------------------------------------------ */

h1 {
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  font-size: clamp(29px, 5.6vw, 39px);
  line-height: 1.26;
  letter-spacing: -.03em;
  color: var(--ink);
  animation-delay: .6s;
}

h1 .given {
  display: block;
  color: var(--coral-text);
}

.role {
  margin-top: .8rem;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  animation-delay: .72s;
}

/* Dotted divider, in the original site's style, drawn from the centre. */
.rule {
  width: 4.5rem;
  height: 3px;
  margin: 1.9rem auto 1.6rem;
  border: 0;
  border-top: 3px dotted var(--coral);
  transform: scaleX(0);
  transform-origin: center;
  animation: draw-rule 1.1s var(--ease) .85s forwards;
}

@keyframes draw-rule { to { transform: scaleX(1); } }

.lede {
  margin-bottom: 1.1rem;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--muted);
  animation-delay: 1s;
}

/* 7. Service list ---------------------------------------------------------- */

/* The block is centred, but lines stay left-aligned so the hearts form a
   single column and wrapped lines don't go ragged on both sides. */
.services {
  display: inline-block;
  max-width: 100%;
  list-style: none;
  text-align: left;
}

.services li {
  position: relative;
  padding: .46rem 0 .46rem 1.75rem;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink);
  transition: transform .35s var(--ease), color .3s ease;
}

.services li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .72rem;
  width: .75rem;
  height: .95rem;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20.9,37L33,25.3c3-3,4.5-5.9,4.5-8.8c0-2.9-0.8-5.1-2.5-6.7c-1.6-1.6-3.9-2.4-6.8-2.4c-0.8,0-1.6,0.1-2.5,0.4 S24.1,8.5,23.3,9c-0.7,0.5-1.3,0.9-1.9,1.3c-0.5,0.4-1,0.9-1.5,1.3c-0.5-0.5-1-0.9-1.5-1.3C18,9.9,17.4,9.5,16.7,9 c-0.7-0.5-1.5-0.9-2.3-1.1s-1.7-0.4-2.5-0.4C9,7.5,6.7,8.3,5,9.9s-2.5,3.8-2.5,6.7c0,0.9,0.2,1.8,0.5,2.7c0.3,0.9,0.7,1.7,1,2.4 c0.4,0.6,0.8,1.3,1.3,1.9c0.5,0.6,0.9,1,1.1,1.3C6.7,25,6.9,25.2,7,25.3L19.1,37c0.2,0.2,0.5,0.4,0.9,0.4S20.6,37.3,20.9,37z' fill='%23F50000'/%3E%3C/svg%3E");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
  transform-origin: center;
  transition: transform .3s var(--ease);
}

/* Each heart arrives, then gives one double-thump. They do not loop. */
.services li:nth-child(1) { animation-delay: 1.10s }
.services li:nth-child(2) { animation-delay: 1.19s }
.services li:nth-child(3) { animation-delay: 1.28s }
.services li:nth-child(4) { animation-delay: 1.37s }
.services li:nth-child(5) { animation-delay: 1.46s }
.services li:nth-child(6) { animation-delay: 1.55s }

.services li:nth-child(1)::before { animation: beat 1.1s ease 1.55s }
.services li:nth-child(2)::before { animation: beat 1.1s ease 1.67s }
.services li:nth-child(3)::before { animation: beat 1.1s ease 1.79s }
.services li:nth-child(4)::before { animation: beat 1.1s ease 1.91s }
.services li:nth-child(5)::before { animation: beat 1.1s ease 2.03s }
.services li:nth-child(6)::before { animation: beat 1.1s ease 2.15s }

@keyframes beat {
  0%, 100% { transform: scale(1); }
  18%      { transform: scale(1.32); }
  36%      { transform: scale(1); }
  54%      { transform: scale(1.2); }
}

.services li:hover         { transform: translateX(5px); color: var(--coral-deep); }
.services li:hover::before { transform: scale(1.28); }

/* 8. Contact buttons ------------------------------------------------------- */

.contact {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
  margin-top: 2rem;
  padding-top: 1.7rem;
  border-top: 1px solid var(--line);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .62rem 1.1rem;
  border-radius: 999px;
  font-family: 'Quicksand', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .28s var(--ease),
              box-shadow .28s var(--ease),
              background .25s ease,
              color .25s ease;
}

.btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: currentColor;
  transition: transform .35s var(--ease);
}

.btn:nth-of-type(1) { animation-delay: 1.68s }
.btn:nth-of-type(2) { animation-delay: 1.76s }
.btn:nth-of-type(3) { animation-delay: 1.84s }
.btn:nth-of-type(4) { animation-delay: 1.92s }

.btn:active { transform: translateY(0) scale(.97); }

.btn--primary {
  background: var(--coral-text);
  color: #fff;
  box-shadow: 0 2px 10px rgba(190, 74, 40, .3);
}

.btn--primary:hover {
  background: var(--coral-deep);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(190, 74, 40, .4);
}

.btn--primary:hover svg { animation: ring .6s ease; }

@keyframes ring {
  0%, 100% { transform: rotate(0); }
  20%      { transform: rotate(-14deg); }
  40%      { transform: rotate(12deg); }
  60%      { transform: rotate(-7deg); }
  80%      { transform: rotate(4deg); }
}

.btn--ghost {
  background: transparent;
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line);
}

.btn--ghost:hover {
  background: var(--coral-wash);
  color: var(--coral-deep);
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px var(--coral-edge), 0 5px 14px rgba(0, 0, 0, .07);
}

.btn--ghost:hover svg { transform: scale(1.12); }

/* 9. Footer ---------------------------------------------------------------- */

footer {
  margin-top: 2.1rem;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--muted);
  animation-delay: 2.1s;
}

footer a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color .25s ease, border-color .25s ease;
}

footer a:hover {
  color: var(--coral-deep);
  border-color: var(--coral-text);
}

.heartbeat {
  display: inline-block;
  animation: beat 2.6s ease 2.9s infinite;
}

/* 10. Responsive ----------------------------------------------------------- */

@media (max-width: 520px) {
  body    { padding: 2rem 1rem; }
  .card   { padding: 2.3rem 1.65rem 1.9rem; border-radius: 16px; }
  .frame  { width: 92px; height: 92px; }
  .contact { gap: .5rem; }
  .btn    { padding: .56rem .95rem; font-size: 13px; }
}

/* Very narrow phones (iPhone SE and similar). */
@media (max-width: 360px) {
  .card  { padding: 2rem 1.15rem 1.6rem; }
  .role  { letter-spacing: .1em; }
  .services li { padding-left: 1.55rem; }
}

/* Touch devices: the visual size above is fine to look at but too small to
   hit. 44px is the accepted minimum target, so grow the buttons on any
   coarse pointer rather than at a guessed screen width — a touch laptop
   needs this as much as a phone does. */
@media (pointer: coarse) {
  .btn {
    min-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Hover styling never resolves on touch, so neutralise the lift. */
  .btn:hover,
  .services li:hover { transform: none; }
}

/* 11. Reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .card,
  .reveal,
  .logo { opacity: 1 !important; transform: none !important; }

  .logo { clip-path: none !important; }
  .rule { transform: scaleX(1) !important; }
}