/* =====================================================================
   tourHQ v2 error pages (404 / 500 / 419)
   Bespoke styling that Tailwind utilities cannot express: display fonts,
   gradient numerals, atmospheric textures and keyframe animations.
   Standard layout/colour/spacing is handled by Tailwind utilities in the
   Blade views (tw_main.css). Loaded only by resources/views/errors/*.
   ===================================================================== */

/* ---- fonts ---- */
.err-page    { font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif; }
.err-display { font-family: 'Fraunces', ui-serif, Georgia, serif; }

/* ---- hide the legacy CI site navbar on error pages ----
   The CI 404 keeps the common_navbar partial in the DOM so its cookie/currency/theme scripts
   still resolve their targets, but the visible header bar is hidden so the logo
   can sit integrated over the background (the Laravel error pages have no navbar). */
.new_header { display: none !important; }

/* ---- page background (theme-aware) ---- */
.err-bg        { background: radial-gradient(120% 90% at 50% -10%, #eaf4fb 0%, #f4f9fc 45%, #ffffff 100%); }
.err-bg--warn  { background: radial-gradient(120% 90% at 50% -10%, #fdf2e3 0%, #f8fafc 45%, #ffffff 100%); }
.dark .err-bg,
.dark .err-bg--warn { background: radial-gradient(120% 90% at 50% -10%, #123455 0%, #0c1d33 45%, #081424 100%); }
.dark .err-bg--warn { background: radial-gradient(120% 90% at 50% -10%, #1a2c3f 0%, #0c1d33 45%, #081424 100%); }

/* ---- giant gradient numerals ---- */
.err-num {
  font-family: 'Fraunces', ui-serif, Georgia, serif;
  font-weight: 900;
  line-height: 1;
  font-size: 7rem;
  background: linear-gradient(180deg, #3ca2d9 0%, #2588bd 45%, #1c668e 75%, #698a05 135%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 8px 40px rgba(60, 162, 217, .22));
}
.err-num--warn {
  background: linear-gradient(180deg, #ff9914 0%, #e68a12 45%, #bf730f 80%, #1c668e 140%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 8px 40px rgba(255, 153, 20, .2));
}
.dark .err-num {
  background: linear-gradient(180deg, #bfe2f5 0%, #3ca2d9 42%, #2588bd 70%, #8cb807 130%);
  -webkit-background-clip: text;
  background-clip: text;
}
.dark .err-num--warn {
  background: linear-gradient(180deg, #ffe1b0 0%, #ffb85b 40%, #ff9914 72%, #2588bd 135%);
  -webkit-background-clip: text;
  background-clip: text;
}
@media (min-width: 576px) { .err-num { font-size: 12rem; } }

/* ---- atmospheric textures ---- */
.err-blob { border-radius: 9999px; filter: blur(120px); }
.err-grain { background-image: radial-gradient(rgba(255, 255, 255, .6) .5px, transparent .5px); background-size: 7px 7px; }
.err-radar-sweep {
  background: conic-gradient(from 0deg,
    rgba(255, 153, 20, 0) 0deg, rgba(255, 153, 20, 0) 300deg,
    rgba(255, 153, 20, .35) 355deg, rgba(255, 153, 20, 0) 360deg);
}

/* ---- boarding-pass perforation (holes reveal the page bg) ---- */
.err-perf { background-image: radial-gradient(circle, #eef5fb 3px, transparent 3.5px); background-size: 6px 14px; background-repeat: repeat-y; }
.dark .err-perf { background-image: radial-gradient(circle, #081424 3px, transparent 3.5px); }

/* ---- action cards ---- */
.err-card {
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease, border-color .3s ease;
}
.err-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px -15px rgba(37, 136, 189, .28); }
.dark .err-card { border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); box-shadow: none; backdrop-filter: blur(4px); }
.dark .err-card:hover { background: rgba(255, 255, 255, .07); box-shadow: 0 20px 60px -15px rgba(37, 136, 189, .5); }

/* ---- boarding pass (419) drop shadow ---- */
.err-pass { box-shadow: 0 24px 60px -18px rgba(15, 40, 70, .3); }
.dark .err-pass { box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7); }

/* ---- keyframes ---- */
@keyframes errFadeUp    { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes errSpin      { to { transform: rotate(360deg); } }
@keyframes errFloat     { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes errFloatTilt { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(-3deg); } }
@keyframes errDash      { to { stroke-dashoffset: -1000; } }
@keyframes errTwinkle   { 0%, 100% { opacity: .15; } 50% { opacity: .7; } }
@keyframes errGlow      { 0%, 100% { opacity: .32; } 50% { opacity: .58; } }
@keyframes errStamp     { 0% { opacity: 0; transform: rotate(8deg) scale(2.4); } 60% { opacity: 1; } 100% { opacity: 1; transform: rotate(8deg) scale(1); } }
@keyframes errPulse     { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* ---- animation utilities ---- */
.err-fade-up   { animation: errFadeUp .7s cubic-bezier(.2, .7, .2, 1) both; }
.err-spin-slow { animation: errSpin 36s linear infinite; }
.err-float     { animation: errFloat 6s ease-in-out infinite; }
.err-float-tilt{ animation: errFloatTilt 6s ease-in-out infinite; }
.err-dash      { animation: errDash 30s linear infinite; }
.err-twinkle   { animation: errTwinkle 4s ease-in-out infinite; }
.err-glow      { animation: errGlow 7s ease-in-out infinite; }
.err-sweep     { animation: errSpin 4s linear infinite; }
.err-stamp     { animation: errStamp .6s cubic-bezier(.2, .8, .2, 1) .5s both; }
.err-pulse     { animation: errPulse 2.2s ease-in-out infinite; }

.err-d1 { animation-delay: .05s; }
.err-d2 { animation-delay: .12s; }
.err-d3 { animation-delay: .22s; }
.err-d4 { animation-delay: .30s; }
.err-d5 { animation-delay: .40s; }
.err-d6 { animation-delay: .50s; }
.err-delay-glow { animation-delay: 2s; }

/* ---- respect reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  .err-fade-up, .err-spin-slow, .err-float, .err-float-tilt, .err-dash,
  .err-twinkle, .err-glow, .err-sweep, .err-stamp, .err-pulse { animation: none !important; }
  .err-fade-up { opacity: 1; }
}