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

html, body {
    height: 100%;
    overflow: hidden;
    background: #000;
}

.container {
    display: flex;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #1a2321 0%, #1c1c1a 50%, #251212 100%);
    overflow: hidden;
}

.panel {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.panel--left {
    background: transparent;
}

.panel--right {
    background: transparent;
}

.oval {
    width: 55%;
    height: 58%;
    border-radius: 50%;
    filter: blur(58px);
    position: absolute;
}

.oval::before,
.oval::after {
    content: '';
    position: absolute;
    background: inherit;
    border-radius: 50%;
}

.text-overlay {
    position: relative;
    z-index: 3;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.gaeilge {
    font-family: 'Astloch', serif;
    font-size: 1.95rem;
    font-weight: 700;
    opacity: 0.9;
    filter: blur(0.6px) url(#text-noise);
}

.english {
    font-family: 'Times New Roman', serif;
    font-size: 1.2rem;
    opacity: 0.45;
    filter: blur(0.35px) url(#text-noise-subtle);
}

#blessing-text .gaeilge,
#blessing-text .english {
    color: #1a2321;
}

#curse-text .gaeilge,
#curse-text .english {
    color: #251212;
}

#shader-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.oval--green {
    background: #DEF9E2;
    animation: blobGreen 6.3s ease-in-out infinite;
}

.oval--green::before {
    width: 75%;
    height: 90%;
    top: -28%;
    left: 22%;
    animation: satelliteG1 7.7s ease-in-out infinite 0.4s;
}

.oval--green::after {
    width: 60%;
    height: 70%;
    top: 38%;
    left: -18%;
    animation: satelliteG2 9.1s ease-in-out infinite 1.9s;
}

.oval--pink {
    background: #F7D0F3;
    animation: blobPink 7.4s ease-in-out infinite 1.1s;
}

.oval--pink::before {
    width: 65%;
    height: 85%;
    top: -22%;
    left: -22%;
    animation: satelliteP1 8.3s ease-in-out infinite 0.6s;
}

.oval--pink::after {
    width: 80%;
    height: 60%;
    top: 42%;
    left: 18%;
    animation: satelliteP2 5.9s ease-in-out infinite 2.8s;
}

@keyframes blobGreen {
    0%   { transform: scale(0.65)  rotate(0deg);   border-radius: 72% 28% 55% 45% / 45% 68% 32% 55%; opacity: 0.38; }
    8%   { transform: scale(1.1)   rotate(-14deg); border-radius: 32% 68% 74% 26% / 62% 38% 55% 45%; opacity: 0.9;  }
    15%  { transform: scale(0.78)  rotate(7deg);   border-radius: 55% 45% 28% 72% / 38% 72% 28% 62%; opacity: 0.5;  }
    24%  { transform: scale(1.32)  rotate(-5deg);  border-radius: 28% 72% 62% 38% / 70% 30% 45% 55%; opacity: 1.0;  }
    31%  { transform: scale(0.88)  rotate(18deg);  border-radius: 65% 35% 38% 62% / 28% 72% 62% 38%; opacity: 0.62; }
    40%  { transform: scale(1.18)  rotate(-11deg); border-radius: 42% 58% 72% 28% / 55% 45% 30% 70%; opacity: 0.95; }
    49%  { transform: scale(0.7)   rotate(4deg);   border-radius: 78% 22% 45% 55% / 42% 62% 38% 58%; opacity: 0.4;  }
    57%  { transform: scale(1.25)  rotate(-20deg); border-radius: 35% 65% 28% 72% / 65% 35% 70% 30%; opacity: 0.98; }
    66%  { transform: scale(0.82)  rotate(12deg);  border-radius: 62% 38% 58% 42% / 30% 70% 48% 52%; opacity: 0.55; }
    75%  { transform: scale(1.05)  rotate(-8deg);  border-radius: 48% 52% 70% 30% / 72% 28% 35% 65%; opacity: 0.82; }
    84%  { transform: scale(0.72)  rotate(16deg);  border-radius: 25% 75% 52% 48% / 50% 55% 45% 50%; opacity: 0.44; }
    92%  { transform: scale(1.15)  rotate(-3deg);  border-radius: 58% 42% 35% 65% / 35% 65% 60% 40%; opacity: 0.88; }
    100% { transform: scale(0.65)  rotate(0deg);   border-radius: 72% 28% 55% 45% / 45% 68% 32% 55%; opacity: 0.38; }
}

@keyframes blobPink {
    0%   { transform: scale(0.62)  rotate(0deg);   border-radius: 58% 42% 68% 32% / 42% 62% 38% 58%; opacity: 0.35; }
    7%   { transform: scale(1.22)  rotate(16deg);  border-radius: 30% 70% 42% 58% / 68% 32% 62% 38%; opacity: 0.92; }
    16%  { transform: scale(0.75)  rotate(-12deg); border-radius: 68% 32% 28% 72% / 35% 68% 32% 65%; opacity: 0.48; }
    26%  { transform: scale(1.38)  rotate(6deg);   border-radius: 25% 75% 65% 35% / 72% 28% 48% 52%; opacity: 1.0;  }
    34%  { transform: scale(0.84)  rotate(-18deg); border-radius: 62% 38% 45% 55% / 30% 70% 65% 35%; opacity: 0.58; }
    43%  { transform: scale(1.14)  rotate(10deg);  border-radius: 45% 55% 75% 25% / 58% 42% 28% 72%; opacity: 0.88; }
    52%  { transform: scale(0.68)  rotate(-7deg);  border-radius: 75% 25% 38% 62% / 40% 65% 42% 58%; opacity: 0.38; }
    60%  { transform: scale(1.28)  rotate(22deg);  border-radius: 38% 62% 25% 75% / 62% 38% 72% 28%; opacity: 0.96; }
    69%  { transform: scale(0.79)  rotate(-14deg); border-radius: 65% 35% 55% 45% / 28% 72% 52% 48%; opacity: 0.52; }
    78%  { transform: scale(1.08)  rotate(5deg);   border-radius: 52% 48% 72% 28% / 68% 32% 38% 62%; opacity: 0.78; }
    87%  { transform: scale(0.7)   rotate(-19deg); border-radius: 28% 72% 48% 52% / 48% 52% 62% 38%; opacity: 0.42; }
    94%  { transform: scale(1.18)  rotate(9deg);   border-radius: 55% 45% 32% 68% / 32% 68% 55% 45%; opacity: 0.85; }
    100% { transform: scale(0.62)  rotate(0deg);   border-radius: 58% 42% 68% 32% / 42% 62% 38% 58%; opacity: 0.35; }
}

@keyframes satelliteG1 {
    0%   { transform: translate(0%,0%)      scale(1)    rotate(0deg);   border-radius: 50% 50% 60% 40% / 55% 45% 50% 50%; }
    18%  { transform: translate(18%,-24%)   scale(1.3)  rotate(-22deg); border-radius: 72% 28% 38% 62% / 35% 65% 60% 40%; }
    37%  { transform: translate(-5%, 8%)    scale(0.72) rotate(15deg);  border-radius: 35% 65% 70% 30% / 65% 35% 40% 60%; }
    55%  { transform: translate(22%, 12%)   scale(1.18) rotate(-8deg);  border-radius: 60% 40% 28% 72% / 42% 58% 68% 32%; }
    74%  { transform: translate(-18%, -8%)  scale(0.85) rotate(28deg);  border-radius: 28% 72% 55% 45% / 70% 30% 35% 65%; }
    88%  { transform: translate(8%, 20%)    scale(1.1)  rotate(-16deg); border-radius: 55% 45% 65% 35% / 30% 70% 55% 45%; }
    100% { transform: translate(0%,0%)      scale(1)    rotate(0deg);   border-radius: 50% 50% 60% 40% / 55% 45% 50% 50%; }
}

@keyframes satelliteG2 {
    0%   { transform: translate(0%,0%)      scale(1)    rotate(0deg);  border-radius: 55% 45% 50% 50% / 50% 55% 45% 50%; }
    22%  { transform: translate(-20%, 16%)  scale(1.28) rotate(18deg); border-radius: 32% 68% 62% 38% / 70% 30% 42% 58%; }
    44%  { transform: translate(14%,-18%)   scale(0.68) rotate(-25deg);border-radius: 68% 32% 35% 65% / 38% 62% 68% 32%; }
    63%  { transform: translate(-8%, -14%)  scale(1.15) rotate(12deg); border-radius: 45% 55% 72% 28% / 58% 42% 30% 70%; }
    81%  { transform: translate(20%, 8%)    scale(0.8)  rotate(-10deg);border-radius: 70% 30% 48% 52% / 28% 72% 55% 45%; }
    100% { transform: translate(0%,0%)      scale(1)    rotate(0deg);  border-radius: 55% 45% 50% 50% / 50% 55% 45% 50%; }
}

@keyframes satelliteP1 {
    0%   { transform: translate(0%,0%)      scale(1)    rotate(0deg);   border-radius: 50% 50% 55% 45% / 60% 40% 50% 50%; }
    15%  { transform: translate(-16%,-22%)  scale(1.25) rotate(20deg);  border-radius: 30% 70% 65% 35% / 45% 55% 70% 30%; }
    33%  { transform: translate(10%, 16%)   scale(0.7)  rotate(-18deg); border-radius: 65% 35% 30% 70% / 68% 32% 38% 62%; }
    51%  { transform: translate(-22%, 6%)   scale(1.2)  rotate(8deg);   border-radius: 42% 58% 70% 30% / 32% 68% 58% 42%; }
    70%  { transform: translate(18%,-10%)   scale(0.78) rotate(-28deg); border-radius: 70% 30% 45% 55% / 55% 45% 28% 72%; }
    86%  { transform: translate(-6%, 22%)   scale(1.12) rotate(14deg);  border-radius: 38% 62% 58% 42% / 42% 58% 65% 35%; }
    100% { transform: translate(0%,0%)      scale(1)    rotate(0deg);   border-radius: 50% 50% 55% 45% / 60% 40% 50% 50%; }
}

@keyframes satelliteP2 {
    0%   { transform: translate(0%,0%)      scale(1)    rotate(0deg);   border-radius: 50% 50% 50% 50% / 55% 45% 55% 45%; }
    20%  { transform: translate(16%, 20%)   scale(1.32) rotate(-20deg); border-radius: 68% 32% 30% 70% / 38% 62% 65% 35%; }
    41%  { transform: translate(-20%,-12%)  scale(0.65) rotate(24deg);  border-radius: 28% 72% 65% 35% / 65% 35% 35% 65%; }
    59%  { transform: translate(8%,-20%)    scale(1.18) rotate(-12deg); border-radius: 55% 45% 28% 72% / 30% 70% 58% 42%; }
    77%  { transform: translate(-14%, 14%)  scale(0.82) rotate(16deg);  border-radius: 40% 60% 68% 32% / 68% 32% 40% 60%; }
    92%  { transform: translate(20%,-4%)    scale(1.08) rotate(-8deg);  border-radius: 62% 38% 45% 55% / 45% 55% 28% 72%; }
    100% { transform: translate(0%,0%)      scale(1)    rotate(0deg);   border-radius: 50% 50% 50% 50% / 55% 45% 55% 45%; }
}