/* Phantom of Delphi — Contact page styles */

:root{
  --bg: #0b0f19;
  --gold: #d4af37;
  --gold-soft: #f1d78f;
  --ivory: #f6efe5;
  --text: #f4f0e6;
  /* Greenish-blue trim for a modern Phantom vibe */
  --trim: #2fc8c0;
  --trim-soft: #94ece6;
}

html,body{height:100%}
html, body { margin:0; padding:0; }

body{
  display:flex; align-items:center; justify-content:center; min-height:100vh; text-align:center; padding:24px;
  background:#000;
  color:var(--text);
  font-family: 'Cormorant Garamond', ui-serif, Georgia, 'Times New Roman', serif;
}

/* Visually hidden, but accessible text */
.sr-only{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }

.wrap{ width:min(720px, 96vw); text-align:center; }

.card{
  position:relative; padding:32px 26px; border-radius:16px;
  border:1px solid rgba(47,200,192,.32);
  background:
    linear-gradient(160deg, rgba(246,239,229,.10), rgba(255,255,255,.02)),
    radial-gradient(120% 80% at 10% 0%, rgba(47,200,192,.07), transparent 60%),
    radial-gradient(120% 100% at 100% 0%, rgba(255,255,255,.05), transparent 60%);
  box-shadow: 0 16px 48px rgba(0,0,0,.40), inset 0 0 60px rgba(47,200,192,.05);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
  backdrop-filter: blur(6px) saturate(115%);
  transition: box-shadow .3s ease, border-color .3s ease;
}
.card:hover{ box-shadow:0 24px 64px rgba(0,0,0,.48), inset 0 0 70px rgba(47,200,192,.06); }

.card::before{
  content:""; position:absolute; inset:0; border-radius:16px; padding:1px;
  background: linear-gradient(120deg, rgba(47,200,192,.6), rgba(148,236,230,.3), rgba(47,200,192,.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;
}

.icon{ display:flex; justify-content:center; margin-bottom:10px; }
.icon svg{ width:clamp(44px, 9vw, 76px); height:auto; filter: drop-shadow(0 4px 22px rgba(47,200,192,.22)); }

.brand{ margin:2px 0 2px; font-size:clamp(1.05rem, 2.8vw, 1.2rem); color:var(--gold-soft); letter-spacing:1.5px; font-weight:600; font-family:'Cinzel', ui-serif, Georgia, serif; text-transform:uppercase; }
.sub{ margin:0 0 8px; color:rgba(244,240,230,.75); font-size:clamp(.9rem, 2.2vw, 1rem); font-style:italic; letter-spacing:.4px; }

.email-link{
  display:block; width:100%; max-width:100%; box-sizing:border-box; padding-inline:8px; overflow:hidden;
  text-decoration:none; position:relative; color:transparent;
  font-size:clamp(1.25rem, 6.2vw, 2.2rem); font-weight:800; letter-spacing:.6px; font-family:'Cinzel', ui-serif, Georgia, serif;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-soft) 30%, var(--trim) 50%, var(--trim-soft) 100%);
  background-size:180% 100%; background-position:50% 0; -webkit-background-clip:text; background-clip:text;
  text-shadow: 0 0 8px rgba(212,175,55,.24), 0 0 10px rgba(47,200,192,.18);
  transition: none;
}
.email-link svg{ width:100%; max-width:100%; height:auto; display:block; }
.email-svg text{ paint-order: stroke fill; stroke: rgba(0,0,0,.4); stroke-width: 1; stroke-linejoin: round; }
.email-link:hover{ filter: drop-shadow(0 4px 18px rgba(47,200,192,.25)); }
.email-link::after{ content:none; }

.actions{ margin-top:14px; display:flex; gap:12px; justify-content:center; align-items:center; }
.copy-btn, .open-mail{
  appearance:none; border:1px solid rgba(47,200,192,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  color:var(--text); padding:10px 14px; border-radius:10px; font-weight:700; letter-spacing:.35px; cursor:pointer; text-decoration:none;
  transition: border-color .2s, background .2s, color .2s, box-shadow .2s;
}
/* Strong, visible focus outlines */
.email-link:focus-visible,
.copy-btn:focus-visible,
.open-mail:focus-visible{
  outline: 2px solid var(--trim);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(47,200,192,.18);
  border-color: var(--trim);
}
.copy-btn:hover, .open-mail:hover{ border-color: rgba(47,200,192,.8); box-shadow:0 6px 18px rgba(47,200,192,.18); }
.open-mail{ color:#041316; background: linear-gradient(90deg, var(--trim), var(--trim-soft)); border:none; box-shadow:0 6px 18px rgba(47,200,192,.22); }
.open-mail:hover{ box-shadow:0 10px 24px rgba(47,200,192,.28); }

.toast{
  position:absolute; left:50%; top:100%; margin:0; width:max-content;
  background:#0f1515; color:var(--text); border:1px solid rgba(47,200,192,.45);
  padding:10px 14px; border-radius:10px; box-shadow:0 6px 22px rgba(0,0,0,.35);
  transform: translate(-50%, 12px); opacity:0; pointer-events:none; transition: transform .25s ease, opacity .25s ease;
}
.toast.show{ transform: translate(-50%, 8px); opacity:1; }
/* Subtle focus micro-interaction on the card */
.card:focus-visible{ outline:2px solid var(--trim); outline-offset:3px; box-shadow:0 0 0 6px rgba(47,200,192,.18), 0 16px 48px rgba(0,0,0,.40), inset 0 0 60px rgba(47,200,192,.05); }

@media (prefers-reduced-motion: no-preference){
  /* Remove dated rotating spotlight */
  .card::after{ content:none !important; }
}
@media (prefers-reduced-motion: reduce){
  .card::after{ animation: none !important; }
}
@media (max-width:480px){ .card{ padding:22px 16px; } }